Fixes to fonts

typeofweb-org · Aug 6, 2021 · 3d2b3bf · 3d2b3bf
1 parent 8e81cb7
commit 3d2b3bf
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@
 
 public/feed.xml
 public/feed.json
+public/*.min.js
 
 # debug
 npm-debug.log*

diff --git a/build.sh b/build.sh
@@ -1,11 +1,31 @@
+#!/bin/bash
+
 sedi () {
   sed --version >/dev/null 2>&1 && sed -i -- "$@" || sed -i "" "$@"
 }
 
-# Fuck node.js seriously
+ARGS=$@
+
+if [[ ${ARGS[*]} =~ 'feed' ]]; then
+  # Fuck node.js seriously
+  sedi 's/  "type": "commonjs",/  "type": "module",/' package.json
+  yarn feed
+  sedi 's/  "type": "module",/  "type": "commonjs",/' package.json
+fi
 
-sedi 's/  "type": "commonjs",/  "type": "module",/' package.json
-yarn feed
+if [[ ${ARGS[*]} =~ 'next' ]]; then
+  yarn next build
+fi
 
-sedi 's/  "type": "module",/  "type": "commonjs",/' package.json
-yarn next build
+if [[ ${ARGS[*]} =~ 'public' ]]; then
+  # compress public JS files
+  shopt -s nullglob
+  FILES="./public/*.js"
+  for f in $FILES
+  do
+    if !(echo "$f" | grep -q "\.min\.js$"); then
+      NAME=`echo "$f" | sed -e 's/\(.*\)\.js$/\1\.min\.js/'`
+      yarn terser --config-file terser.config.json -o $NAME $f
+    fi
+  done
+fi
diff --git a/fonts.css b/fonts.css
@@ -30,16 +30,17 @@ html:not(.fonts-loaded) {
   & .prose ol > li::before {
     font-family: 'typeofweb-fallback-sans', sans-serif !important;
     letter-spacing: 0.1px !important;
-    word-spacing: 0.05px !important;
+    word-spacing: 0.2px !important;
   }
 
   & .font-serif,
   & .prose [class~='lead'],
   & .prose p,
   & .prose ol > li {
     font-family: 'typeofweb-fallback-serif', serif !important;
-    letter-spacing: 2.4px !important;
+    letter-spacing: 1.93px !important;
     word-spacing: -2px !important;
+    font-weight: 600;
   }
 
   & .font-mono {

diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "./build.sh",
+    "dev": "./build.sh public && next dev",
+    "build": "./build.sh feed public next",
     "start": "next start",
     "feed": "node --loader ts-node/esm --experimental-specifier-resolution=node generateFeed.ts",
     "svg": "svgo --precision 1 -r -f {images,public}"
@@ -63,6 +63,7 @@
     "remark-stringify": "9.0.1",
     "svgo": "2.3.1",
     "tailwindcss": "2.2.7",
+    "terser": "5.7.1",
     "ts-node": "10.1.0",
     "typescript": "4.3.5",
     "unified": "10.1.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -25,20 +25,14 @@ function ScriptAfterInteraction({
   ...props
 }: Partial<Omit<HTMLScriptElement, 'children'>> & { readonly children?: string }) {
   useEffect(() => {
-    // whichever is first wins
     window.addEventListener('scroll', listener, { passive: true, once: true });
-    const timer = setTimeout(() => window.requestIdleCallback?.(() => listener()), 2000);
-    const done = () => {
-      window.removeEventListener('scroll', listener);
-      clearTimeout(timer);
-    };
 
     return () => {
-      done();
+      window.removeEventListener('scroll', listener);
     };
 
     function listener() {
-      done();
+      window.removeEventListener('scroll', listener);
       (window.requestIdleCallback || window.requestAnimationFrame)(() => {
         const script = Object.entries(props).reduce((script, [key, value]) => {
           // @ts-ignore
@@ -66,10 +60,10 @@ const MyApp: AppType = ({ Component, pageProps }) => {
       </Head>
       <Seo />
       <ScriptOnce strategy="afterInteractive">
-        {`const o=()=>e.className+=" fonts-loaded",e=document.documentElement,n="00 1em Merriweather",t="00 1em Fira Sans";sessionStorage.fonts?o():Promise.all(["4"+n,"7"+n,"italic 4"+n,"italic 7"+n,"4"+t,"6"+t,"400 1em Fira Mono"].map(o=>document.fonts.load(o))).then(()=>{sessionStorage.fonts=!0,o()})`}
+        {`let o=()=>e.className+=" fonts-loaded",e=document.documentElement,n="00 1em Merriweather",t="00 1em Fira Sans";sessionStorage.fonts?o():Promise.all(["4"+n,"7"+n,"italic 4"+n,"italic 7"+n,"4"+t,"6"+t,"400 1em Fira Mono"].map(o=>document.fonts.load(o))).then(()=>{sessionStorage.fonts=!0,o()})`}
       </ScriptOnce>
-      <ScriptOnce strategy="afterInteractive">
-        {`window.dataLayer=window.dataLayer||[],window.gtag=function(){dataLayer.push(arguments)}`}
+      <ScriptOnce strategy="afterInteractive" async defer>
+        {`var w=window;w.dataLayer=w.dataLayer||[],w.gtag=(...a)=>dataLayer.push(a)`}
       </ScriptOnce>
       <RunningHeaderProvider>
         <UIStateProvider>
@@ -79,7 +73,7 @@ const MyApp: AppType = ({ Component, pageProps }) => {
       <ScriptAfterInteraction
         defer
         async
-      >{`window.CSS?.paintWorklet?.addModule("/fancyLinkUnderline.js")`}</ScriptAfterInteraction>
+      >{`w.CSS?.paintWorklet?.addModule("/fancyLinkUnderline.min.js")`}</ScriptAfterInteraction>
       <ScriptAfterInteraction src="/contentVisibility.min.js" defer async />
       <ScriptAfterInteraction
         src="https://www.googletagmanager.com/gtag/js?id=G-KNFC661M43"

diff --git a/public/contentVisibility.min.js b/public/contentVisibility.min.js
diff --git a/terser.config.json b/terser.config.json
@@ -0,0 +1,25 @@
+{
+  "toplevel": true,
+  "parse": { "ecma": 2021 },
+  "compress": {
+    "inline": true,
+    "unsafe": true,
+    "passes": 5,
+    "pure_getters": true,
+    "unsafe_arrows": true,
+    "unsafe_comps": true,
+    "unsafe_Function": true,
+    "unsafe_math": true,
+    "unsafe_symbols": true,
+    "unsafe_methods": true,
+    "unsafe_proto": true,
+    "unsafe_regexp": true,
+    "unsafe_undefined": true
+  },
+  "mangle": true,
+  "format": {
+    "comments": false,
+    "ascii_only": true,
+    "inline_script": true
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2451,6 +2451,11 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@^6.0.0, commander@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
@@ -6435,15 +6440,15 @@ source-map-resolve@^0.6.0:
     atob "^2.1.2"
     decode-uri-component "^0.2.0"
 
-source-map-support@^0.5.16, source-map-support@^0.5.17:
+source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-[email protected]:
+[email protected], source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -6865,6 +6870,15 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+[email protected]:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784"
+  integrity sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"