Merge pull request #1 from GenbuProject/develop

Update 0.2.0

Author: Rintan

README.md

@@ -1,5 +1,7 @@
 # Mastodon Material
 
+<img src="docs/res/top.png" alt="mastodon-material">
+
 ## Language | 言語
 
 [日本語 (Japanese)](README_ja.md)
@@ -15,7 +17,7 @@ Mastodon Material is the native theme for Mastodon, which based on [Material Des
 - [Mastodon](https://github.com/tootsuite/mastodon) v3.1 or above
 - [Sass](https://sass-lang.com) 1.25.x
 
-## Installation
+## How to install
 
 1. Copy these files of this repository into `app/javascript/styles` of Mastodon source directory.
 
@@ -83,9 +85,11 @@ Mastodon Material is the native theme for Mastodon, which based on [Material Des
    media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST'])
    media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
    media_host ||= assets_host
+
    # custom host
    github_host = "https://raw.githubusercontent.com" # GitHub
    google_fonts_host = "https://fonts.gstatic.com" # Google Fonts
+
    Rails.application.config.content_security_policy do |p|
     p.base_uri :none
     p.default_src :none
@@ -98,29 +102,59 @@ Mastodon Material is the native theme for Mastodon, which based on [Material Des
     p.manifest_src :self, assets_host
    ```
 
+   Diff
+   
+   ```diff
+   def host_to_url(str)
+    "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank?
+   end
+   base_host = Rails.configuration.x.web_domain
+   assets_host = Rails.configuration.action_controller.asset_host
+   assets_host ||= host_to_url(base_host)
+   media_host = host_to_url(ENV['S3_ALIAS_HOST'])
+   media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST'])
+   media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
+   media_host ||= assets_host
+
+   + # custom host
+   + github_host = "https://raw.githubusercontent.com" # GitHub
+   + google_fonts_host = "https://fonts.gstatic.com" # Google Fonts
+
+   Rails.application.config.content_security_policy do |p|
+    p.base_uri :none
+    p.default_src :none
+    p.frame_ancestors :none
+   - p.font_src :self, assets_host
+   + p.font_src :self, assets_host, github_host, google_fonts_host
+    p.img_src :self, :https, :data, :blob, assets_host
+    p.style_src :self, :unsafe_inline, assets_host
+    p.media_src :self, :https, :data, assets_host
+    p.frame_src :self, :https
+    p.manifest_src :self, assets_host
+   ```
+
 ## Customization
 
 [Customization Guide](docs/customization_guide.md)
 
-## Stylish/Stylus theme
+## Stylus/Stylish theme
 
 You can use our theme on any server by the browser extension, [Stylus](https://add0n.com/stylus.html) or [Stylish](https://userstyles.org/).
 
 - **Build by yourself**
+  
   1. Install [Sass](https://sass-lang.com) on your computer. Require version is refered in [Requirement](#Requirement).
   2. Clone or download this repository on your computer.
   3. If you want to customize, please read [Customization Guide](docs/customization_guide.md).
   4. Run [build.bat (Windows)](build/build.bat) or [build.sh (macOS/Linux)](build/build.sh). Results will be output in [build.css](build/build.css).
   5. Make a new theme on Stylus or Stylish and copy the code of [build.css](build/build.css) and paste on it. Add your favorite server domain on it and save/enable it.
-. **Get it from [Userstyles.org](https://userstyles.org/)**
+
+- **Get it from [Userstyles.org](https://userstyles.org/)**
 
   Work in progress...
 
 ## License
 
 This theme and the Stylish/Stylus theme can be used under [AGPL-3.0](LICENSE). [Material Icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web) is available under [Apache license version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html). (This repository does not include Material Icons font.)
 
-## Screenshot
-
-<img src="docs/res/timeline/v1-light.png" alt="material-v1-light" width=50%>
-<img src="docs/res/timeline/v2-dark.png" alt="material-v2-dark" width=50%>
+[The header image](docs/src/top.png) was made by using [Noto Sans](https://www.google.com/get/noto/#sans-lgc) and [mastodon.privacyfilter.user.styl](https://github.com/eai04191/userscript-graveyard#mastodonprivacyfilteruserstyl).

README_ja.md

@@ -1,5 +1,7 @@
 # Mastodon Material
 
+<img src="docs/res/top.png" alt="mastodon-material">
+
 ## 言語 | Language
 
 [English (英語)](README.md)
@@ -111,11 +113,42 @@ Mastodon Materialは、[Material Design](https://material.io)準拠のMastodon
      p.manifest_src    :self, assets_host
    ```
 
+   Diff
+   
+   ```diff
+   def host_to_url(str)
+    "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank?
+   end
+   base_host = Rails.configuration.x.web_domain
+   assets_host = Rails.configuration.action_controller.asset_host
+   assets_host ||= host_to_url(base_host)
+   media_host = host_to_url(ENV['S3_ALIAS_HOST'])
+   media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST'])
+   media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true'
+   media_host ||= assets_host
+
+   + # custom host
+   + github_host = "https://raw.githubusercontent.com" # GitHub
+   + google_fonts_host = "https://fonts.gstatic.com" # Google Fonts
+
+   Rails.application.config.content_security_policy do |p|
+    p.base_uri :none
+    p.default_src :none
+    p.frame_ancestors :none
+   - p.font_src :self, assets_host
+   + p.font_src :self, assets_host, github_host, google_fonts_host
+    p.img_src :self, :https, :data, :blob, assets_host
+    p.style_src :self, :unsafe_inline, assets_host
+    p.media_src :self, :https, :data, assets_host
+    p.frame_src :self, :https
+    p.manifest_src :self, assets_host
+   ```
+
 ## カスタマイズ
 
 テーマのカスタマイズについては、[カスタマイズガイド](docs/customization_guide_ja.md)をご覧ください。
 
-## Stylish/Stylus版テーマ
+## Stylus/Stylishテーマ
 
 任意のサーバーでもこのテーマを利用できるよう、ブラウザ拡張機能の[Stylus](https://add0n.com/stylus.html)や[Stylish](https://userstyles.org/)向けのテーマを公開しています。
 
@@ -126,15 +159,13 @@ Mastodon Materialは、[Material Design](https://material.io)準拠のMastodon
   3. カスタマイズする場合、[カスタマイズガイド](docs/customization_guide_ja.md)を参照してください。
   4. [build.bat (Windows)](build/build.bat)または[build.sh (macOS/Linux)](build/build.sh)を実行してください。結果が[build.css](build/build.css)に出力されます。
   5. StylusまたはStylishでテーマを新規作成し、[build.css](build/build.css)の内容をコピペします。利用しているサーバーのドメインを追加して、テーマを保存/有効化してください。
-. **[Userstyles.org](https://userstyles.org/)から追加する**
+
+- **[Userstyles.org](https://userstyles.org/)から追加する**
 
   準備中です
 
 ## ライセンス
 
 このテーマ及びStylish/Stylus版テーマは[AGPL-3.0](LICENSE)に基づいて公開されています。また、Google製[Material Iconsフォント](https://google.github.io/material-design-icons/#icon-font-for-the-web)については、[Apache license version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html)で提供されています。(このリポジトリにMaterial Iconsフォントファイルは含まれていません)
 
-## スクリーンショット
-
-<img src="docs/res/timeline/v1-light.png" alt="material-v1-light" width=50%>
-<img src="docs/res/timeline/v2-dark.png" alt="material-v2-dark" width=50%>
+[ヘッダー画像](docs/src/top.png)は[Noto Sans](https://www.google.com/get/noto/#sans-lgc)と[mastodon.privacyfilter.user.styl](https://github.com/eai04191/userscript-graveyard#mastodonprivacyfilteruserstyl)を使用して作りました。