feat: use RealFaviconGenerator for generating favicon

README-zh.md

@@ -63,22 +63,6 @@ TeXt 是针对博客的一款简洁的主题，它虽然简洁但并不简单。
 - [Markdown 增强](https://tianqi.name/jekyll-TeXt-theme/docs/zh/markdown-enhancements)
 - [附加样式](https://tianqi.name/jekyll-TeXt-theme/docs/zh/additional-styles)
 
-## 网站图标
-
-该主题自带了一个“银杏叶”图标，你可以把它替换为自己的图标。网站的图标位于 ./favicon.ico 和 ./assets/images/logo 目录下。你会看到 logo 目录中有很多的 png 文件和一个 svg 矢量图文件。那些 png 图片实际上就是根据 svg 矢量图生成的不同大小的图片，这些图片是一些场景可能会用到的大图标，像 iOS 和 Android 的固定到屏幕和 Windows 10 的磁贴。
-
-该主题提供了一个自动化脚本能将 svg 矢量图自动生成 favicon 和 png 文件。你所要做的是：
-
-1. 安装 Node.js 环境
-
-2. 在项目根目录执行 `npm i` 命令
-
-3. 替换 ./assets/images/logo 目录下的 logo.svg 文件
-
-4. 执行 `npm run artwork` 命令，此时 favicon 和 png 便会替换为新 logo.svg 生成的文件
-
-当然如果要追求各个尺寸下图标的显示效果，那还得对不同尺寸的图片进行修改和优化。
-
 ## 其他资源
 
 在 ./\_includes/icon/social 目录下有很多的社交产品图标，例如 Behance、Flickr、QQ、微信等，方便修改和使用。

_includes/head.html

@@ -8,44 +8,32 @@
 {%- assign __path = '/feed.xml' -%}
 {%- include snippets/prepend-baseurl.html -%}
 <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ __return | prepend: site.url }}">
-<!-- for Safari on iOS https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/ -->
-{%- assign __path = '/assets/images/logo/icon-180x180.png' -%}
+
+<!-- begin favicon -->
+{%- assign __path = '/assets/apple-touch-icon.png' -%}
 {%- include snippets/prepend-baseurl.html -%}
 <link rel="apple-touch-icon" sizes="180x180" href="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-167x167.png' -%}
-{%- include snippets/prepend-baseurl.html -%}
-<link rel="apple-touch-icon" sizes="167x167" href="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-152x152.png' -%}
+{%- assign __path = '/assets/favicon-32x32.png' -%}
 {%- include snippets/prepend-baseurl.html -%}
-<link rel="apple-touch-icon" sizes="152x152" href="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-120x120.png' -%}
+<link rel="icon" type="image/png" sizes="32x32" href="{{ __return }}">
+{%- assign __path = '/assets/favicon-16x16.png' -%}
 {%- include snippets/prepend-baseurl.html -%}
-<link rel="apple-touch-icon" sizes="120x120" href="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-120x120.png' -%}
-{%- include snippets/prepend-baseurl.html -%}
-<link rel="shortcut icon" href="{{ __return }}">
-<!-- for Chrome on Android https://developer.chrome.com/multidevice/android/installtohomescreen -->
-<meta name="mobile-web-app-capable" content="yes">
-{%- assign __path = '/assets/images/logo/icon-192x192.png' -%}
+<link rel="icon" type="image/png" sizes="16x16" href="{{ __return }}">
+{%- assign __path = '/assets/site.webmanifest' -%}
 {%- include snippets/prepend-baseurl.html -%}
-<link rel="icon" sizes="192x192" href="{{ __return }}">
-<!-- for Edge on Windows 10 https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx -->
-{%- assign __path = '/assets/images/logo/icon-144x144.png' -%}
+<link rel="manifest" href="{{ __return }}">
+{%- assign __path = '/assets/safari-pinned-tab.svg' -%}
 {%- include snippets/prepend-baseurl.html -%}
-<meta name="msapplication-TileImage" content="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-310x310.png' -%}
+<link rel="mask-icon" href="{{ __return }}" color="#fc4d50">
+{%- assign __path = '/assets/favicon.ico' -%}
 {%- include snippets/prepend-baseurl.html -%}
-<meta name="msapplication-square310x310logo" content="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-310x150.png' -%}
-{%- include snippets/prepend-baseurl.html -%}
-<meta name="msapplication-wide310x150logo" content="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-150x150.png' -%}
-{%- include snippets/prepend-baseurl.html -%}
-<meta name="msapplication-square150x150logo" content="{{ __return }}">
-{%- assign __path = '/assets/images/logo/icon-70x70.png' -%}
+<link rel="shortcut icon" href="{{ __return }}">
+<meta name="msapplication-TileColor" content="#ffc40d">
+{%- assign __path = '/assets/browserconfig.xml' -%}
 {%- include snippets/prepend-baseurl.html -%}
-<meta name="msapplication-square70x70logo" content="{{ __return }}">
-<meta name="msapplication-TileColor" content="#eeeeee">
+<meta name="msapplication-config" content="{{ __return }}">
+<meta name="theme-color" content="#ffffff">
+<!-- end favicon -->
 
 {%- assign __path = '/assets/css/blog.css' -%}
 {%- include snippets/prepend-baseurl.html -%}

_layouts/archive.html

@@ -9,9 +9,9 @@
 ---
 <div class="layout--all js-all">
   <div class="search-box js-search-box">
-    <div class="icon-search">{%- include svg/icon/search.svg -%}</div>
+    <div class="icon-search"><i class="fas fa-search"></i></div>
     <input type="text" />
-    <div class="button icon-clear">{%- include svg/icon/clear.svg -%}</div>
+    <div class="button icon-clear"><i class="fas fa-times"></i></div>
   </div>
   {%- include tags.html -%}
   <div class="js-result layout--all__result"></div>

assets/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="assets/mstile-150x150.png"/>
+            <TileColor>#ffc40d</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

assets/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "TeXt Theme",
+    "short_name": "TeXt Theme",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

docs/_data/navigation.yml

@@ -24,6 +24,8 @@ docs-en:
     children:
       - title:  Quick Start
         url:    /docs/en/quick-start
+      - title:  Structure
+        url:    /docs/en/structure
   - title:      Customization
     children:
       - title:  Configuration
@@ -32,6 +34,8 @@ docs-en:
         url:    /docs/en/navigation
       - title:  Layouts
         url:    /docs/en/layouts
+      - title:  Favicon
+        url:    /docs/en/favicon
   - title:      Content
     children:
       - title:  Writing Posts

docs/en/1.2-structure.md

@@ -0,0 +1,57 @@
+---
+layout: article
+title: Structure
+permalink: /docs/en/structure
+key: docs-structure
+sidebar:
+  nav: docs-en
+aside:
+  toc: true
+---
+
+```bash
+├── _data
+│   ├── locale.yml
+│   ├── navigation.yml
+│   └── variables.yml
+├── _includes
+│   ├── analytics-providers
+│   ├── aside
+│   ├── comment-providers
+│   ├── markdown-enhancements
+│   ├── pageview-providers
+│   ├── scripts
+│   ├── sidebar
+│   ├── snippets
+│   ├── svg
+│   │   ├── icon
+│   │   │   ├── social
+│   │   │   │   ├── facebook.svg
+│   │   │   │   └── ...
+│   │   └── logo.svg
+│   └── ...
+├── _layouts
+│   ├── 404.html
+│   ├── archive.html
+│   ├── article.html
+│   ├── base.html
+│   ├── home.html
+│   ├── none.html
+│   └── page.html
+├── _sass
+├── assets
+│   ├── css
+│   │   └── blog.scss
+│   └── images
+├── tools
+├── 404.html
+├── Gemfile
+├── _config.yml
+├── about.md
+├── archive.html
+├── favicon.ico
+├── gulpfile.js
+├── index.html
+├── jekyll-text-theme.gemspec
+└── package.json
+```

docs/en/2.4-favicon.md

@@ -0,0 +1,26 @@
+---
+layout: article
+title: Favicon
+permalink: /docs/en/favicon
+key: docs-layouts
+sidebar:
+  nav: docs-en
+aside:
+  toc: true
+---
+
+TeXt recommend [RealFaviconGenerator](https://realfavicongenerator.net/) for generating favicon.
+
+Open [RealFaviconGenerator](https://realfavicongenerator.net/) and click "Select your Favicon picture".
+
+![Select your Favicon picture](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/realfavicongenerator-select-favicon-picture.jpg)
+
+After settings you need tell the generator where you would place favicon files. TeXt default put them to `/assets`.
+
+![Select your Favicon path](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/realfavicongenerator-path.jpg)
+
+If all are done, just click "Generate your Favicons and HTML code" to the last step.
+
+![Result](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/realfavicongenerator-result.jpg)
+
+Download favicon package and unzip it to the path you just set, and replace the HTML code in _includes/head.html between `<!-- begin favicon -->` and `<!-- end favicon -->`.

package.json

@@ -10,9 +10,6 @@
     "demo-dev": "bundle exec jekyll serve -H 0.0.0.0 -t --config ./docs/_config.yml",
     "demo-beta": "JEKYLL_ENV=beta bundle exec jekyll serve -H 0.0.0.0 -t --config ./docs/_config.yml",
     "demo-production": "JEKYLL_ENV=production bundle exec jekyll serve -H 0.0.0.0 -t --config ./docs/_config.yml",
-    "favicon": "gulp favicon",
-    "icons": "gulp icons",
-    "artwork": "gulp artwork",
     "gem-build": "rm -fv jekyll-text-theme-*.gem && gem build jekyll-text-theme.gemspec",
     "gem-push": "gem push jekyll-text-theme-*.gem"
   },
@@ -32,10 +29,6 @@
   },
   "homepage": "https://github.com/kitian616#readme",
   "devDependencies": {
-    "eslint": "^4.19.1",
-    "gulp": "^3.9.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-svg2png": "^2.0.2",
-    "gulp-to-ico": "^1.0.0"
+    "eslint": "^4.19.1"
   }
 }