feat(twemoji): add support for twemoji (#264)

README.md

@@ -94,6 +94,7 @@ I hope you will LoveIt ❤️!
 ### Extended Features
 
 * **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* **Twemoji** supported
 * Automatically **highlighting** code
 * **Copy code** to clipboard with one click
 * **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
@@ -151,6 +152,7 @@ Thanks to the authors of following resources included in the theme:
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
+* [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)

README.zh-cn.md

@@ -89,6 +89,7 @@
 ### 扩展功能
 
 * 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
+* 支持 **Twemoji**
 * 支持**代码高亮**
 * 一键**复制代码**到剪贴板
 * 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
@@ -146,6 +147,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
+* [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)

assets/css/_partial/_icon.scss

@@ -8,3 +8,10 @@ svg.icon {
     fill: currentColor;
   }
 }
+
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -.1em;
+}

assets/lib/VERSION

@@ -7,6 +7,7 @@ autocomplete.js@0.37.1 https://github.com/algolia/autocomplete.js
 lunr.js@2.3.8 https://lunrjs.com/
 algoliasearch@4.2.0 https://github.com/algolia/algoliasearch-client-javascript
 lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
+twemoji@12.1.5 https://github.com/twitter/twemoji
 lightgallery.js@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
 clipboard.js@2.0.6 https://github.com/zenorocha/clipboard.js
 sharer.js@0.4.0 https://github.com/ellisonleao/sharer.js

exampleSite/config.toml

@@ -690,6 +690,9 @@ enableEmoji = true
     # whether to hide a page from search results
     # 是否在搜索结果中隐藏一篇文章
     hiddenFromSearch = false
+    # whether to enable twemoji
+    # 是否使用 twemoji
+    twemoji = false
     # whether to enable lightgallery
     # 是否使用 lightgallery
     lightgallery = false
@@ -926,6 +929,8 @@ enableEmoji = true
     algoliasearchJS = ''
     # lazysizes@5.2.0 https://github.com/aFarkas/lazysizes
     lazysizesJS = ''
+    # twemoji@12.1.5 https://github.com/twitter/twemoji
+    twemojiJS = ''
     # lightgallery.js@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js
     lightgalleryCSS = ''
     lightgalleryJS = ''

exampleSite/content/about.en.md

@@ -61,6 +61,7 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 #### Extended Features
 
 * :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* :(far fa-grin-tongue-wink fa-fw): **Twemoji** supported
 * :(fas fa-code fa-fw): Automatically **highlighting** code
 * :(far fa-copy fa-fw): **Copy code** to clipboard with one click
 * :(far fa-images fa-fw): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
@@ -96,6 +97,7 @@ Thanks to the authors of following resources included in the theme:
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
+* [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)

exampleSite/content/about.fr.md

@@ -66,6 +66,7 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 #### Extended Features
 
 * :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
+* :(far fa-grin-tongue-wink fa-fw): **Twemoji** supported
 * :(fas fa-code fa-fw): Automatically **highlighting** code
 * :(far fa-copy fa-fw): **Copy code** to clipboard with one click
 * :(far fa-images fa-fw): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
@@ -101,6 +102,7 @@ Thanks to the authors of following resources included in the theme:
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
+* [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)

exampleSite/content/about.zh-cn.md

@@ -61,6 +61,7 @@ math:
 #### 扩展功能
 
 * :(fas fa-search fa-fw): 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
+* :(far fa-grin-tongue-wink fa-fw): 支持 **Twemoji**
 * :(fas fa-code fa-fw): 支持**代码高亮**
 * :(far fa-copy fa-fw): 一键**复制代码**到剪贴板
 * :(far fa-images fa-fw): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
@@ -96,6 +97,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [lazysizes](https://github.com/aFarkas/lazysizes)
+* [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
 * [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -375,6 +375,8 @@ Note that some of these parameters are explained in details in other sections of
     hiddenFromHomePage = false
     # {{< version 0.2.0 >}} whether to hide a page from search results
     hiddenFromSearch = false
+    # {{< version 0.2.0 >}} whether to enable twemoji
+    twemoji = false
     # whether to enable lightgallery
     lightgallery = false
     # {{< version 0.2.0 >}} whether to enable the ruby extended syntax
@@ -570,6 +572,8 @@ Note that some of these parameters are explained in details in other sections of
     algoliasearchJS = ''
     # {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
     lazysizesJS = ''
+    # {{< version 0.2.0 >}} {{< link "https://github.com/twitter/twemoji" "twemoji" >}}@12.1.5
+    twemojiJS = ''
     # {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
     lightgalleryCSS = ''
     lightgalleryJS = ''

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -380,6 +380,8 @@ Note that some of these parameters are explained in details in other sections of
     hiddenFromHomePage = false
     # {{< version 0.2.0 >}} whether to hide a page from search results
     hiddenFromSearch = false
+    # {{< version 0.2.0 >}} whether to enable twemoji
+    twemoji = false
     # whether to enable lightgallery
     lightgallery = false
     # {{< version 0.2.0 >}} whether to enable the ruby extended syntax
@@ -575,6 +577,8 @@ Note that some of these parameters are explained in details in other sections of
     algoliasearchJS = ''
     # {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
     lazysizesJS = ''
+    # {{< version 0.2.0 >}} {{< link "https://github.com/twitter/twemoji" "twemoji" >}}@12.1.5
+    twemojiJS = ''
     # {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
     lightgalleryCSS = ''
     lightgalleryJS = ''

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -378,7 +378,9 @@ hugo
     hiddenFromHomePage = false
     # {{< version 0.2.0 >}} 是否在搜索结果中隐藏一篇文章
     hiddenFromSearch = false
-    # 是否在文章页面使用 lightgallery
+    # {{< version 0.2.0 >}} 是否使用 twemoji
+    twemoji = false
+    # 是否使用 lightgallery
     lightgallery = true
     # {{< version 0.2.0 >}} 是否使用 ruby 扩展语法
     ruby = true
@@ -573,6 +575,8 @@ hugo
     algoliasearchJS = ''
     # {{< link "https://github.com/aFarkas/lazysizes" "lazysizes" >}}@5.2.0
     lazysizesJS = ''
+    # {{< version 0.2.0 >}} {{< link "https://github.com/twitter/twemoji" "twemoji" >}}@12.1.5
+    twemojiJS = ''
     # {{< link "https://github.com/sachinchoolur/lightgallery.js" "lightgallery.js" >}}@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0
     lightgalleryCSS = ''
     lightgalleryJS = ''

exampleSite/content/posts/theme-documentation-content.en.md

@@ -62,6 +62,7 @@ featuredImagePreview: ""
 
 hiddenFromHomePage: false
 hiddenFromSearch: false
+twemoji: false
 lightgallery: true
 ruby: true
 fraction: true
@@ -106,6 +107,7 @@ comment:
 
 * **hiddenFromHomePage**: if `true`, the content will not be shown in the home page.
 * **hiddenFromSearch**: {{< version 0.2.0 >}} if `true`, the content will not be shown in the search results.
+* **twemoji**: {{< version 0.2.0 >}} if `true`, the content will enable the twemoji.
 * **lightgallery**: if `true`, images in the content will be shown as the gallery.
 * **ruby**: {{< version 0.2.0 >}} if `true`, the content will enable the [ruby extended syntax](#ruby).
 * **fraction**: {{< version 0.2.0 >}} if `true`, the content will enable the [fraction extended syntax](#fraction).

exampleSite/content/posts/theme-documentation-content.fr.md

@@ -67,6 +67,7 @@ featuredImagePreview: ""
 
 hiddenFromHomePage: false
 hiddenFromSearch: false
+twemoji: false
 lightgallery: true
 ruby: true
 fraction: true
@@ -111,6 +112,7 @@ comment:
 
 * **hiddenFromHomePage**: if `true`, the content will not be shown in the home page.
 * **hiddenFromSearch**: {{< version 0.2.0 >}} if `true`, the content will not be shown in the search results.
+* **twemoji**: {{< version 0.2.0 >}} if `true`, the content will enable the twemoji.
 * **lightgallery**: if `true`, images in the content will be shown as the gallery.
 * **ruby**: {{< version 0.2.0 >}} if `true`, the content will enable the [ruby extended syntax](#ruby).
 * **fraction**: {{< version 0.2.0 >}} if `true`, the content will enable the [fraction extended syntax](#fraction).

exampleSite/content/posts/theme-documentation-content.zh-cn.md

@@ -62,6 +62,7 @@ featuredImagePreview: ""
 
 hiddenFromHomePage: false
 hiddenFromSearch: false
+twemoji: false
 lightgallery: true
 ruby: true
 fraction: true
@@ -106,6 +107,7 @@ comment:
 
 * **hiddenFromHomePage**: 如果设为 `true`, 这篇文章将不会显示在主页上.
 * **hiddenFromSearch**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章将不会显示在搜索结果中.
+* **twemoji**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 twemoji.
 * **lightgallery**: 如果设为 `true`, 文章中的图片将可以按照画廊形式呈现.
 * **ruby**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [上标注释扩展语法](#ruby).
 * **fraction**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [分数扩展语法](#fraction).

layouts/partials/assets.html

@@ -38,6 +38,13 @@
 {{- $source := $cdn.lazysizesJS | default "lib/lazysizes/lazysizes.min.js" -}}
 {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
 
+{{- /* twemoji */ -}}
+{{- if $params.twemoji -}}
+    {{- $source := $cdn.twemojiJS | default "lib/twemoji/twemoji.min.js" -}}
+    {{- dict "source" $source "fingerprint" $fingerprint | dict "scratch" $.Scratch "data" | partial "scratch/script.html" -}}
+    {{- $config = dict "twemoji" true | merge $config -}}
+{{- end -}}
+
 {{- /* lightgallery.js */ -}}
 {{- if $params.lightgallery -}}
     {{- $source := $cdn.lightgalleryCSS | default "lib/lightgallery/lightgallery.min.css" -}}

resources/_gen/assets/scss/css/shortcode/style.scss_19001642409beba3b4bbc3ec1bde302a.content

@@ -1 +1 @@
-#id-27e8e4 img{height:1.25rem}
+#id-9a5e4c img{height:1.25rem}

src/js/theme.js

@@ -42,7 +42,7 @@ class Theme {
         this.clickMaskEventSet = new Set();
     }
 
-    initIcon() {
+    initSVGIcon() {
         this.util.forEach(document.querySelectorAll('[data-svg-src]'), $icon => {
             fetch($icon.getAttribute('data-svg-src'))
                 .then(response => response.text())
@@ -58,6 +58,10 @@ class Theme {
         });
     }
 
+    initTwemoji() {
+        if (this.config.twemoji) twemoji.parse(document.body);
+    }
+
     initMenuMobile() {
         const $menuToggleMobile = document.getElementById('menu-toggle-mobile');
         const $menuMobile = document.getElementById('menu-mobile');
@@ -638,7 +642,8 @@ class Theme {
     }
 
     init() {
-        this.initIcon();
+        this.initSVGIcon();
+        this.initTwemoji();
         this.initMenuMobile();
         this.initSwitchTheme();
         this.initSearch();