swap native emojis for Twemojis 🎉 (#92)

2025-07-04 05:46:37 -04:00 · 2020-03-29 15:30:12 -04:00
parent 3dd0f9578e
commit 2156c6ed88
17 changed files with 73 additions and 40 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@
 public/
 builds/
 resources/
+_vendor/

 # node/npm/yarn
 node_modules/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -10,5 +10,6 @@
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": false
-  }
+  },
+  "git.ignoreLimitWarning": true
 }
--- a/README.md
+++ b/README.md
@ -13,6 +13,7 @@ Personal website of [@jakejarvis](https://github.com/jakejarvis), created and de
 - [Netlify](https://www.netlify.com/)
 - [Simple Analytics](https://referral.simpleanalytics.com/jake-jarvis) (referral link)
 - [utteranc.es](https://utteranc.es/)
+- [Twemoji](https://twemoji.twitter.com/)
 - [...and much more.](https://jarv.is/uses/)

 I keep an ongoing list of [blog post ideas](https://github.com/jakejarvis/jarv.is/issues/1) and [coding to-dos](https://github.com/jakejarvis/jarv.is/issues/11) as issues in this repo.
--- a/assets/sass/components/_content.scss
+++ b/assets/sass/components/_content.scss
@ -19,16 +19,18 @@ div#content {
    border-bottom: 1px solid $color-kinda-light;
  }

-  img,
-  figure {
+  p.image img,
+  figure img {
    height: auto;
    max-width: 100%;
-    margin: 1em auto;
    display: block;
+    margin-left: auto;
+    margin-right: auto;
  }

  figure {
-    // reduce margin between image and caption
+    margin: 1em auto;
+
    img {
      margin-bottom: 0.4em;
    }
--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@ -87,6 +87,16 @@ div.highlight {
  }
 }

+// make SVG twemojis relative to surrounding text
+// https://github.com/twitter/twemoji#inline-styles
+img.emoji {
+  height: 1em !important;
+  width: 1em !important;
+  margin: 0 0.05em 0 0.1em !important;
+  vertical-align: -0.1em !important;
+  display: inline !important;
+}
+
 // white background for entire width content area
 div#wrap {
  width: 100%;
--- a/config.toml
+++ b/config.toml
@ -139,6 +139,14 @@ disableAliases = true
    noClasses = true
    tabWidth = 4

+[module]
+  [[module.imports]]
+    path = "github.com/twitter/twemoji"
+    disabled = false
+    [[module.imports.mounts]]
+      source = "v/12.1.5"
+      target = "static/twemoji"
+
 [privacy]
  [privacy.twitter]
    enableDNT = true
--- a/content/humans.txt
+++ b/content/humans.txt
@ -33,6 +33,7 @@
    Netlify
    Simple Analytics
    utteranc.es
+    Twemoji
    ...and much more: https://jarv.is/uses/

 # VIEW SOURCE
--- a/content/notes/coronavirus-open-source/index.md
+++ b/content/notes/coronavirus-open-source/index.md
@ -13,16 +13,14 @@ draft: false
 ---

 {{< page-css >}}
-/* override link underlines */
+/* disable link underlines in h2's */
 h2 a {
  background-image: none !important;
  padding-bottom: 0 !important;
  margin-right: 8px !important;
 }
-/* override image alignment */
+/* align octocat with text */
 h2 img {
-  display: inline !important;
-  margin: 0 !important;
  vertical-align: text-bottom;
 }
 {{< /page-css >}}
--- a/go.mod
+++ b/go.mod
@ -1,3 +1,5 @@
 module github.com/jakejarvis/jarv.is

-go 1.13
+go 1.14
+
+require github.com/twitter/twemoji v12.0.5-0.20200128193524-d998789b5d5e+incompatible // indirect
--- a/go.sum
+++ b/go.sum
@ -0,0 +1,5 @@
+github.com/twitter/twemoji v1.4.2 h1:AOD6NuL0n39nxziFJRfYEhh3s5V9uxLVHLEoUNhrRf0=
+github.com/twitter/twemoji v12.0.5-0.20200128193524-d998789b5d5e+incompatible h1:YgZzWr28GaMPQvDSDhD7SHfEYGxiYsvJmu1rCOGJttA=
+github.com/twitter/twemoji v12.0.5-0.20200128193524-d998789b5d5e+incompatible/go.mod h1:06L6PdKuWDx/Yh6s4B7yGkAeBmWZzbFZgfNnWlJPPYM=
+github.com/twitter/twemoji v12.1.5+incompatible h1:q2DZm6LI6aF46VSUhYsrWDd7IeBV1H/2uTjGXDhVyEA=
+github.com/twitter/twemoji v12.1.5+incompatible/go.mod h1:06L6PdKuWDx/Yh6s4B7yGkAeBmWZzbFZgfNnWlJPPYM=
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -10,6 +10,7 @@
 {{ block "main" . }}{{ end }}
 </div>
 {{ partialCached "page/footer" . }}
+{{ partial "scripts/twemoji" . }}
 {{ partial "scripts/shortcodes" . }}
 {{ if eq hugo.Environment "production" }}
  {{ partialCached "scripts/simple_analytics" . }}
--- a/layouts/index.headers
+++ b/layouts/index.headers
@ -10,6 +10,10 @@
 /fonts/*
  Cache-Control: max-age=31536000, public, immutable, no-transform

+# Super long cache for Twemojis (one year)
+/twemoji/*
+  Cache-Control: max-age=31536000, public, immutable, no-transform
+
 # Recommended MIME type for PWA manifests
 # https://github.com/w3c/manifest/issues/689
 /manifest.json
--- a/layouts/partials/page/header.html
+++ b/layouts/partials/page/header.html
@ -6,7 +6,7 @@
    </a>
    <ul>
      {{- range .Site.Menus.main }}
-      <li><a class="no-underline" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}><span class="emoji">{{ .Pre }}</span><span class="text">{{ .Name }}</span></a></li>
+      <li><a class="no-underline" {{ printf "href=%q" .URL | safeHTMLAttr }} aria-label="{{ .Name }}"{{ if strings.HasPrefix .URL "http" }} target="_blank" rel="me noopener"{{ end }}><span class="icon">{{ .Pre }}</span><span class="text">{{ .Name }}</span></a></li>
      {{ end -}}
    </ul>
  </nav>
--- a/layouts/partials/scripts/twemoji.html
+++ b/layouts/partials/scripts/twemoji.html
@ -0,0 +1,2 @@
+<script src="{{ "/twemoji/twemoji.min.js" | absURL }}"></script>
+<script>twemoji.parse(document.body,{base:'{{ "/" | absURL }}',folder:'twemoji/svg',ext:'.svg'})</script>
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@ -9,6 +9,6 @@
  <figcaption>{{ . | $.Page.RenderString | safeHTML }}</figcaption>
 </figure>
 {{- else -}}
-<p><img src="{{ $optimized.Permalink }}" width="{{ $optimized.Width }}" height="{{ $optimized.Height }}"
-     {{- with .Get "alt" }} alt="{{ . | safeHTML }}" title="{{ . | safeHTML }}"{{ end }}></p>
+<p class="image"><img src="{{ $optimized.Permalink }}" width="{{ $optimized.Width }}" height="{{ $optimized.Height }}"
+                    {{- with .Get "alt" }} alt="{{ . | safeHTML }}" title="{{ . | safeHTML }}"{{ end }}></p>
 {{- end }}
--- a/package.json
+++ b/package.json
@ -22,7 +22,7 @@
    "start": "hugo server --buildDrafts --buildFuture --port 1337 --bind 0.0.0.0 --verbose",
    "optimize": "run-s optimize:**",
    "optimize:html": "html-minifier --html5 --collapse-whitespace --collapse-boolean-attributes --preserve-line-breaks --minify-css --file-ext html --input-dir public --output-dir public **/*.html",
-    "optimize:img": "find public/ -type d | xargs -n1 -P8 -I{} imagemin {}/* --plugin=jpegoptim --plugin.jpegoptim.progressive --plugin.jpegoptim.stripAll --plugin=pngquant --plugin.pngquant.speed=5 --plugin.pngquant.strip --plugin=optipng --plugin.optipng.optimizationLevel=2 --plugin=svgo --plugin=gifsicle --out-dir={}",
+    "optimize:img": "find public/ -type d | xargs -n1 -P8 -I{} imagemin {}/* --plugin=jpegoptim --plugin.jpegoptim.progressive --plugin.jpegoptim.stripAll --plugin=pngquant --plugin.pngquant.speed=5 --plugin.pngquant.strip --plugin=optipng --plugin.optipng.optimizationLevel=2 --plugin=gifsicle --out-dir={}",
    "lint": "run-s lint:**",
    "lint:scss": "stylelint assets/sass/**/* --syntax scss",
    "lint:md": "markdownlint --rules markdownlint-rule-emphasis-style content/**/*.md content/**/**/*.md",
@ -43,7 +43,6 @@
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-optipng": "^7.1.0",
    "imagemin-pngquant": "^8.0.0",
-    "imagemin-svgo": "^7.1.0",
    "lint-staged": "^10.0.9",
    "markdownlint-cli": "~0.22.0",
    "markdownlint-rule-emphasis-style": "~1.0.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -839,9 +839,9 @@
  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=

 "@types/node@*":
-  version "12.12.31"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.31.tgz#d6b4f9645fee17f11319b508fb1001797425da51"
-  integrity sha512-T+wnJno8uh27G9c+1T+a1/WYCHzLeDqtsGJkoEdSp2X8RTh3oOCZQcUnjAx90CS8cmmADX51O0FI/tu9s0yssg==
+  version "13.9.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.9.5.tgz#59738bf30b31aea1faa2df7f4a5f55613750cf00"
+  integrity sha512-hkzMMD3xu6BrJpGVLeQ3htQQNAcOrJjX7WFmtK8zWQpz2UJf13LCFF2ALA7c9OVdvc2vQJeDdjfR35M0sBCxvw==

 "@types/normalize-package-data@^2.4.0":
  version "2.4.0"
@ -2061,9 +2061,9 @@ duplexer3@^0.1.4:
  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=

 electron-to-chromium@^1.3.380:
-  version "1.3.386"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.386.tgz#224f97c808da76014096848f80bb9342b6a95cdb"
-  integrity sha512-M7JHfp32Bq6Am59AWgglh2d3nqe6y8Y94Vcb/AXUsO3DGvKUHYI5ML9+U5oNShfdOEfurrrjKSoSgFt2mz7mpw==
+  version "1.3.390"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.390.tgz#a49e67dea22e52ea8027c475dd5447b1c00b1d4e"
+  integrity sha512-4RvbM5x+002gKI8sltkqWEk5pptn0UnzekUx8RTThAMPDSb8jjpm6SwGiSnEve7f85biyZl8DMXaipaCxDjXag==

 elegant-spinner@^1.0.1:
  version "1.0.1"
@ -3046,7 +3046,7 @@ imagemin-pngquant@^8.0.0:
    ow "^0.13.2"
    pngquant-bin "^5.0.0"

-imagemin-svgo@^7.0.0, imagemin-svgo@^7.1.0:
+imagemin-svgo@^7.0.0:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/imagemin-svgo/-/imagemin-svgo-7.1.0.tgz#528a42fd3d55eff5d4af8fd1113f25fb61ad6d9a"
  integrity sha512-0JlIZNWP0Luasn1HT82uB9nU9aa+vUj6kpT+MjPW11LbprXC+iC4HDwn1r4Q2/91qj4iy9tRZNsFySMlEpLdpg==
@ -4292,11 +4292,9 @@ no-case@^2.2.0:
    lower-case "^1.1.1"

 node-releases@^1.1.52:
-  version "1.1.52"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.52.tgz#bcffee3e0a758e92e44ecfaecd0a47554b0bcba9"
-  integrity sha512-snSiT1UypkgGt2wxPqS6ImEUICbNCMb31yaxWrOLXjhlt2z2/IBpaOxzONExqSm4y5oLnAqjjRWu+wsDzK5yNQ==
-  dependencies:
-    semver "^6.3.0"
+  version "1.1.53"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
+  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==

 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
  version "2.5.0"
@ -4781,9 +4779,9 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7, picomatch@^2.2.1:
  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==

 pidtree@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.0.tgz#f6fada10fccc9f99bf50e90d0b23d72c9ebc2e6b"
-  integrity sha512-9CT4NFlDcosssyg8KVFltgokyKZIFjoBxw8CTGy+5F38Y1eQWrt8tRayiUOXE+zVKQnYu5BR8JjCtvK3BcnBhg==
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==

 pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
  version "2.3.0"
@ -5524,7 +5522,7 @@ semver@7.0.0:
  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==

-semver@^6.0.0, semver@^6.3.0:
+semver@^6.0.0:
  version "6.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@ -5574,9 +5572,9 @@ shell-quote@^1.6.1:
  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==

 signal-exit@^3.0.0, signal-exit@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
-  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==

 slash@^2.0.0:
  version "2.0.0"
@ -6253,9 +6251,9 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==

 uglify-js@^3.5.1:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.8.0.tgz#f3541ae97b2f048d7e7e3aa4f39fd8a1f5d7a805"
-  integrity sha512-ugNSTT8ierCsDHso2jkBHXYrU8Y5/fY2ZUprfrJUiD7YpuFvV4jODLFmb3h4btQjqr5Nh4TX4XtgDfCU1WdioQ==
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.8.1.tgz#43bb15ce6f545eaa0a64c49fd29375ea09fa0f93"
+  integrity sha512-W7KxyzeaQmZvUFbGj4+YFshhVrMBGSg2IbcYAjGWGvx8DHvJMclbTDMpffdxFUGPBHjIytk7KJUR/KUXstUGDw==
  dependencies:
    commander "~2.20.3"
    source-map "~0.6.1"
@ -6605,9 +6603,9 @@ yargs-parser@^10.0.0:
    camelcase "^4.1.0"

 yargs-parser@^18.1.1:
-  version "18.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.1.tgz#bf7407b915427fc760fcbbccc6c82b4f0ffcbd37"
-  integrity sha512-KRHEsOM16IX7XuLnMOqImcPNbLVXMNHYAoFc3BKR8Ortl5gzDbtXvvEoGx9imk5E+X1VeNKNlcHr8B8vi+7ipA==
+  version "18.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.2.tgz#2f482bea2136dbde0861683abea7756d30b504f1"
+  integrity sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==
  dependencies:
    camelcase "^5.0.0"
    decamelize "^1.2.0"