Feature/add twemoji support (#346)

* Add support for Twemoji

* Add post on Twemoji support

* Regenrate CSS files

* Fix missing backtick in twemoji-support.md

* Rename useTwemoji to enableTwemoji

* Move Twemoji script tag into head tag

* Fix markdown link sytnax in twemoji-support

* Fix typo in Twemoji Support post
This commit is contained in:
Latiif alSharif
2020-06-02 01:11:21 +02:00
committed by GitHub
parent 9d1ba9d21d
commit 3d7b39d2b4
8 changed files with 42 additions and 5 deletions

View File

@@ -210,3 +210,10 @@ figure {
.fas { .fas {
font-weight: 900; font-weight: 900;
} }
img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}

View File

@@ -46,6 +46,9 @@ disqusShortname = "yourdiscussshortname"
# Series see also post count # Series see also post count
maxSeeAlsoItems = 5 maxSeeAlsoItems = 5
# Enable Twemoji
enableTwemoji = true
# Custom CSS # Custom CSS
custom_css = [] custom_css = []

View File

@@ -0,0 +1,23 @@
+++
date = "2020-05-25"
title = "Twemoji Support 🤩"
description = "The post demonstrates Twemoji support"
series = ["Theme", "Hugo"]
+++
If you want to use Twitter's [Twemoji](https://twemoji.twitter.com/) across your website, enable it in your `config.toml`
```toml
[params]
enableTwemoji = true
```
This will not only give your website unified emojis across all platforms. It will also give you [the latest Unicode 13 emoji set](https://blog.emojipedia.org/twemoji-13-0-emoji-changelog/), such as 🧋🫕🛻🪗🪞.
# Emoji size changes with text size 🤩
## Emoji size changes with text size 🤩
### Emoji size changes with text size 🤩
#### Emoji size changes with text size 🤩
##### Emoji size changes with text size 🤩
###### Emoji size changes with text size 🤩
---

View File

@@ -10,6 +10,10 @@
<meta name="description" content="{{ .Description | default (.Summary | default .Site.Params.description ) }}"> <meta name="description" content="{{ .Description | default (.Summary | default .Site.Params.description ) }}">
<meta name="keywords" content="{{ (delimit .Keywords ",") | default .Site.Params.keywords }}"> <meta name="keywords" content="{{ (delimit .Keywords ",") | default .Site.Params.keywords }}">
{{ if .Site.Params.enableTwemoji }}
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
{{ end }}
{{ template "_internal/twitter_cards.html" . }} {{ template "_internal/twitter_cards.html" . }}
{{ template "_internal/opengraph.html" . }} {{ template "_internal/opengraph.html" . }}
@@ -92,7 +96,9 @@
{{ else if eq .Site.Params.colorscheme "auto" }} {{ else if eq .Site.Params.colorscheme "auto" }}
{{ $csClass = "colorscheme-auto" }} {{ $csClass = "colorscheme-auto" }}
{{ end }} {{ end }}
<body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}"> <body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}"
onload="{{ if .Site.Params.enableTwemoji }} twemoji.parse(document.body); {{ end }}"
>
<main class="wrapper"> <main class="wrapper">
{{ partial "header.html" . }} {{ partial "header.html" . }}

View File

@@ -1 +0,0 @@
body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#42a5f5}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#42a5f5}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#42a5f5}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label{color:#424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .menu-button{color:#dadada}body.colorscheme-dark .navigation .menu-button:hover,body.colorscheme-dark .navigation .menu-button:focus{color:#42a5f5}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label{color:#424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .menu-button{color:#dadada}body.colorscheme-auto .navigation .menu-button:hover,body.colorscheme-auto .navigation .menu-button:focus{color:#42a5f5}}body.colorscheme-dark .footer a{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#42a5f5}}

View File

@@ -1 +0,0 @@
{"Target":"css/coder-dark.min.e78e80fc3a585a4d1c8fc7f58623b6ff852411e38431a9cd1792877ecaa160f6.css","MediaType":"text/css","Data":{"Integrity":"sha256-546A/DpYWk0cj8f1hiO2/4UkEeOEManNF5KHfsqhYPY="}}

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"Target":"css/coder.min.a4f332213a21ce8eb521670c614470c58923aaaf385e2a73982c31dd7642decb.css","MediaType":"text/css","Data":{"Integrity":"sha256-pPMyITohzo61IWcMYURwxYkjqq84XipzmCwx3XZC3ss="}} {"Target":"css/coder.min.3219ef62ae52679b7a9c19043171c3cd9f523628c2a65f3ef247ee18836bc90b.css","MediaType":"text/css","Data":{"Integrity":"sha256-MhnvYq5SZ5t6nBkEMXHDzZ9SNijCpl8+8kfuGINryQs="}}