From 2156c6ed88d25e536d2449cf9d5be0fb0e591a63 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sun, 29 Mar 2020 15:30:12 -0400 Subject: [PATCH] =?UTF-8?q?swap=20native=20emojis=20for=20Twemojis=20?= =?UTF-8?q?=F0=9F=8E=89=20(#92)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + .vscode/settings.json | 3 +- README.md | 1 + assets/sass/components/_content.scss | 10 ++-- assets/sass/components/_global.scss | 10 ++++ config.toml | 8 ++++ content/humans.txt | 1 + .../notes/coronavirus-open-source/index.md | 6 +-- go.mod | 4 +- go.sum | 5 ++ layouts/_default/baseof.html | 1 + layouts/index.headers | 4 ++ layouts/partials/page/header.html | 2 +- layouts/partials/scripts/twemoji.html | 2 + layouts/shortcodes/image.html | 4 +- package.json | 3 +- yarn.lock | 48 +++++++++---------- 17 files changed, 73 insertions(+), 40 deletions(-) create mode 100644 layouts/partials/scripts/twemoji.html diff --git a/.gitignore b/.gitignore index ffa16338..d312c48c 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ public/ builds/ resources/ +_vendor/ # node/npm/yarn node_modules/ diff --git a/.vscode/settings.json b/.vscode/settings.json index 2cce0ff8..11858723 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,5 +10,6 @@ "[markdown]": { "editor.wordWrap": "on", "editor.quickSuggestions": false - } + }, + "git.ignoreLimitWarning": true } diff --git a/README.md b/README.md index fd200304..e3717d1a 100644 --- 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. diff --git a/assets/sass/components/_content.scss b/assets/sass/components/_content.scss index d83d73e3..fbf7a8a3 100644 --- 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; } diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index df12cd27..296c45e7 100644 --- 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%; diff --git a/config.toml b/config.toml index 55e3753d..a6de84b5 100644 --- 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 diff --git a/content/humans.txt b/content/humans.txt index 3d09ba51..6c6aaff7 100644 --- 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 diff --git a/content/notes/coronavirus-open-source/index.md b/content/notes/coronavirus-open-source/index.md index 9f6330ed..80486d50 100644 --- 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 >}} diff --git a/go.mod b/go.mod index d3963620..955ada84 100644 --- 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 diff --git a/go.sum b/go.sum index e69de29b..bb427352 100644 --- 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= diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3cc3ca47..8872dbbb 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -10,6 +10,7 @@ {{ block "main" . }}{{ end }} {{ partialCached "page/footer" . }} +{{ partial "scripts/twemoji" . }} {{ partial "scripts/shortcodes" . }} {{ if eq hugo.Environment "production" }} {{ partialCached "scripts/simple_analytics" . }} diff --git a/layouts/index.headers b/layouts/index.headers index c1be2bf2..8a867b0b 100644 --- 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 diff --git a/layouts/partials/page/header.html b/layouts/partials/page/header.html index 09c7eba6..b3540ebf 100644 --- a/layouts/partials/page/header.html +++ b/layouts/partials/page/header.html @@ -6,7 +6,7 @@ diff --git a/layouts/partials/scripts/twemoji.html b/layouts/partials/scripts/twemoji.html new file mode 100644 index 00000000..3e49ea21 --- /dev/null +++ b/layouts/partials/scripts/twemoji.html @@ -0,0 +1,2 @@ + + diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index ccdc90bc..1a99d399 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -9,6 +9,6 @@
{{ . | $.Page.RenderString | safeHTML }}
{{- else -}} -

{{ . | safeHTML }}

+

{{ . | safeHTML }}

{{- end }} diff --git a/package.json b/package.json index 41f83c6e..163b4310 100644 --- 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", diff --git a/yarn.lock b/yarn.lock index 6044e540..2a8030ad 100644 --- 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"