shift asset processing to webpack (#424)

also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
2025-12-03 03:48:55 -05:00 · 2021-06-19 17:19:01 -04:00
parent 622432c3e4
commit 363b4edf1c
105 changed files with 4061 additions and 955 deletions
--- a/layouts/partials/functions/init.html
+++ b/layouts/partials/functions/init.html
@@ -1,10 +1,54 @@
-{{- partial "scripts/_bundle" . -}}
+{{/* Pull in assets processed by Webpack */}}
+{{- define "__head_css" -}}
+  {{ with .Site.Data.manifest }}
+    {{ with index . "main.css" }}
+      <link rel="stylesheet" href="{{ .src | absURL }}">
+    {{ end }}
+  {{ end }}
+
+  {{/* Page-specific styles set via front matter, piped through PostCSS and inlined */}}
+  {{- with .Params.css -}}
+    {{/* NOTE: This file doesn't end up getting published (which is good) */}}
+    {{- $target := path.Join $.File.Dir "css/inline.scss" -}}
+    {{- $css := . | resources.FromString $target | resources.PostCSS (dict "config" "postcss.config.js") -}}
+<style>
+{{ $css.Content | safeCSS }}
+</style>
+  {{- end -}}
+{{- end -}}
+
+{{- define "__head_preload" -}}
+  {{ with .Site.Data.manifest }}
+    {{ with index . "fonts/inter-subset.var.woff2" }}
+      <link rel="preload" href="{{ .src | absURL }}" as="font" type="font/woff2" crossorigin>
+    {{ end }}
+    {{ with index . "fonts/roboto-mono-subset.var.woff2" }}
+      <link rel="preload" href="{{ .src | absURL }}" as="font" type="font/woff2" crossorigin>
+    {{ end }}
+    {{ with index . "main.js" }}
+      <link rel="preload" href="{{ .src | absURL }}" as="script">
+    {{ end }}
+  {{ end }}
+{{- end -}}
+
+{{- define "__body_js" -}}
+  <!-- inline the dark mode script to avoid a blinding flash of white background on loads -->
+  <script>(function(d){var u=d.document,f=u.body.classList,e=localStorage,c="dark_mode_pref",t=e.getItem(c),a="dark",n="light",r="{{ .Site.Params.Theme.defaultTheme | safeJS }}",o=u.querySelector(".dark-mode-toggle"),i=r===a,b=function(d){f.remove(a,n);f.add(d);i=d===a};t===a&&b(a);t===n&&b(n);if(!t){var s=function(d){return"(prefers-color-scheme: "+d+")"};d.matchMedia(s(a)).matches?b(a):d.matchMedia(s(n)).matches?b(n):b(r);d.matchMedia(s(a)).addListener((function(d){d.matches&&b(a)}));d.matchMedia(s(n)).addListener((function(d){d.matches&&b(n)}))}if(o){o.style.display="block";o.addEventListener("click",(function(){if(i){b(n);e.setItem(c,n)}else{b(a);e.setItem(c,a)}}),!0)}})(window)</script>
+
+  {{ with .Site.Data.manifest }}
+    {{ with index . "main.js" }}
+      <script async defer src="{{ .src | absURL }}" ></script>
+    {{ end }}
+  {{ end }}
+{{- end -}}
+

 {{/* Strip any markdown styling from page title for use in meta tags */}}
 {{- with .Title -}}
  {{- $.Scratch.Set "plainTitle" (. | markdownify | htmlUnescape | plainify) -}}
 {{- end -}}

+
 {{/* If this is a page/post, link View Source to specific file on GitHub; otherwise, just link to repo homepage */}}
 {{- with .Site.Params.social.githubRepo }}
  {{- $githubURL := print "https://github.com/" . }}
@@ -15,12 +59,11 @@
  {{- end }}
 {{- end }}

+
 {{/* Chooses and initializes various images for use by JSON schema & open graph tags */}}
 {{/* Author image (default) */}}
-{{- with .Site.Author.image -}}
-  {{- with resources.Get . -}}
-    {{- $.Scratch.Set "authorImage" . -}}
-  {{- end -}}
+{{- with index .Site.Data.manifest .Site.Author.image -}}
+  {{- $.Scratch.Set "authorImage" (dict "Permalink" (absURL .src) "Width" 1200 "Height" 1200 "MediaType" "image/jpeg") -}}
 {{- end -}}
 {{/* Page image (via frontmatter) */}}
 {{- with .Params.image -}}
@@ -34,16 +77,6 @@
  {{- end -}}
 {{- end -}}
 {{/* Site logo */}}
-{{- with .Site.Params.image -}}
-  {{- with resources.Get . -}}
-    {{- $.Scratch.Set "logoImage" . -}}
-  {{- end -}}
-{{- end -}}
-
-{{/* Page-specific styles set via front matter, piped through PostCSS and inlined */}}
-{{- with .Params.css -}}
-  {{/* NOTE: This file doesn't end up getting published (which is good) */}}
-  {{- $target := path.Join $.File.Dir "css/inline.scss" -}}
-  {{- $css := . | resources.FromString $target | resources.ExecuteAsTemplate $target . | resources.ToCSS (dict "targetPath" $target) | resources.PostCSS (dict "config" "postcss.config.js") -}}
-  {{- $.Scratch.Set "pageCss" $css.Content -}}
+{{- with index .Site.Data.manifest .Site.Params.image -}}
+  {{- $.Scratch.Set "logoImage" (dict "Permalink" (absURL .src) "Width" 2048 "Height" 2048 "MediaType" "image/png") -}}
 {{- end -}}
--- a/layouts/partials/head/_head.html
+++ b/layouts/partials/head/_head.html
@@ -4,8 +4,7 @@
 {{ partialCached "head/mobile" . -}}
 {{ partialCached "head/preload" . -}}
 {{ partial "head/styles" . -}}
-{{ partialCached "head/favicons" (dict "pngSizes" "192 48 32 16" "icoSizes" "16 32") -}}
+{{ partialCached "head/favicons" (dict "pngSizes" "192 48 32 16" "icoSizes" "16 32" "manifest" .Site.Data.manifest) -}}
 {{ partialCached "head/feeds" . -}}
 {{ partial "head/canonical" . -}}
-{{ partialCached "head/webmention" . -}}
 {{ partial "head/schema" . -}}
--- a/layouts/partials/head/canonical.html
+++ b/layouts/partials/head/canonical.html
@@ -1,5 +1,9 @@
-<link rel="canonical" href="{{ .Permalink }}">
+<link rel="canonical" href="{{ print .Site.Params.baseURL .Permalink }}">
+
+{{ if .Site.Params.social.webmentionIO }}
+<link rel="webmention" href="{{ print $.Site.Params.baseURL "/api/mention/" }}">
+<link rel="pingback" href="{{ print $.Site.Params.baseURL "/api/ping/" }}">
+{{ end }}

 <link rel="author" href="{{ "humans.txt" | absURL }}">
 <link rel="pgpkey" href="{{ "pubkey.asc" | absURL }}" type="application/pgp-keys">
-<link rel="license" href="{{ "license/" | absURL }}">
--- a/layouts/partials/head/favicons.html
+++ b/layouts/partials/head/favicons.html
@@ -1,17 +1,12 @@
-{{- range (split .pngSizes " ") }}
-  {{- $faviconPng := resources.Get (printf "img/favicon-%v.png" .) }}
-  <!-- <link rel="icon" href="{{ $faviconPng.Permalink }}" sizes="{{ . }}x{{ . }}"> -->
-{{- end -}}
-
 {{- $s := slice -}}
 {{- range (split .icoSizes " ") }}{{ $s = $s | append (printf "%vx%v" . .) }}{{ end -}}
-{{- $faviconIco := resources.Get "img/favicon.ico" }}
-<link rel="icon" href="{{ $faviconIco.Permalink }}"> <!-- sizes="{{ delimit $s " " }}" -->
+{{- $faviconIco := index .manifest "images/favicon.ico" }}
+<link rel="icon" href="{{ $faviconIco.src | absURL }}"> <!-- sizes="{{ delimit $s " " }}" -->

-{{- $faviconSvg := resources.Get "img/favicon.svg" }}
-<link rel="icon" href="{{ $faviconSvg.Permalink }}" type="image/svg+xml">
+{{- $faviconSvg := index .manifest "images/favicon.svg" }}
+<link rel="icon" href="{{ $faviconSvg.src | absURL }}" type="image/svg+xml">

-{{- $appleIcon := resources.Get "img/apple-touch-icon.png" }}
-<link rel="apple-touch-icon" href="{{ $appleIcon.Permalink }}" sizes="{{ $appleIcon.Width }}x{{ $appleIcon.Height }}">
+{{- $appleIcon := index .manifest "images/apple-touch-icon.png" }}
+<link rel="apple-touch-icon" href="{{ $appleIcon.src | absURL }}" sizes="180x180">

 <link rel="manifest" href="{{ "site.webmanifest" | absURL }}">
--- a/layouts/partials/head/open-graph.html
+++ b/layouts/partials/head/open-graph.html
@@ -2,11 +2,11 @@
 <meta property="og:site_name" content="{{ .Site.Title }}">
 <meta property="og:type" content="{{ if and .IsPage (eq .Type .Site.Params.mainSection) }}article{{ else }}website{{ end }}">
 <meta property="og:locale" content="en_US">
-<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:url" content="{{ print .Site.Params.baseURL .Permalink }}">
 <meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">

 {{- with .Scratch.Get "pageImage" }}
-<meta property="og:image" content="{{ .Permalink }}">
+<meta property="og:image" content="{{ print $.Site.Params.baseURL .Permalink }}">
 <meta property="og:image:type" content="{{ .MediaType }}">
 <meta property="og:image:width" content="{{ .Width }}">
 <meta property="og:image:height" content="{{ .Height }}">
@@ -31,7 +31,7 @@
 {{ with .Site.Params.social.facebookAppID }}<meta property="fb:app_id" content="{{ . }}">{{ end }}

 <meta name="twitter:card" content="{{ if .IsPage }}summary_large_image{{ else }}summary{{ end }}">
-<meta name="twitter:domain" content="{{ (urls.Parse .Site.BaseURL).Host }}">
+<meta name="twitter:domain" content="{{ (urls.Parse .Site.Params.baseURL).Host }}">
 {{- with .Site.Author.social.twitter }}
 <meta name="twitter:site" content="{{ print "@" . }}">
 <meta name="twitter:creator" content="{{ print "@" . }}">
--- a/layouts/partials/head/preload.html
+++ b/layouts/partials/head/preload.html
@@ -1,4 +1 @@
-<link rel="preload" href="{{ "vendor/fonts/inter-subset.var.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="{{ "vendor/fonts/roboto-mono-subset.var.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
-
-{{ template "__preload_js" . }}
+{{ template "__head_preload" . }}
--- a/layouts/partials/head/schema/article.html
+++ b/layouts/partials/head/schema/article.html
@@ -2,8 +2,8 @@
 {
  "@context": "http://schema.org",
  "@type": "BlogPosting",
-  "url": {{ with .OutputFormats.Get "html" }}{{ .Permalink }}{{ end }},
-  "mainEntityOfPage": {{ with .OutputFormats.Get "html" }}{{ .Permalink }}{{ end }},
+  "url": {{ with .OutputFormats.Get "html" }}{{ print $.Site.Params.baseURL .Permalink }}{{ end }},
+  "mainEntityOfPage": {{ with .OutputFormats.Get "html" }}{{ print $.Site.Params.baseURL .Permalink }}{{ end }},
  "name": {{ .Scratch.Get "plainTitle" }},
  "headline": {{ .Scratch.Get "plainTitle" }},
  "datePublished": {{ .PublishDate.Format "2006-01-02T15:04:05-07:00" }},
@@ -12,22 +12,22 @@
  "description": {{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }},
  "wordCount": "{{ .WordCount }}",
  "author": {
-    "@id": {{ print (absURL "/") "#author" }}
+    "@id": {{ print .Site.Params.baseURL $.Site.BaseURL "#author" }}
  },
  "publisher": {
    "@type": "Organization",
    "name": {{ .Site.Title }},
-    "url": {{ .Site.BaseURL }}{{ with .Scratch.Get "logoImage" }},
+    "url": {{ .Site.Params.baseURL }}{{ with .Scratch.Get "logoImage" }},
    "logo": {
      "@type": "ImageObject",
-      "url": {{ .Permalink }},
+      "url": {{ print $.Site.Params.baseURL .Permalink }},
      "width": "{{ .Width }}",
      "height": "{{ .Height }}"
    }{{ end }}
  }{{ with .Scratch.Get "pageImage" }},
  "image": {
    "@type": "ImageObject",
-    "url": {{ .Permalink }},
+    "url": {{ print $.Site.Params.baseURL .Permalink }},
    "width": "{{ .Width }}",
    "height": "{{ .Height }}"
  }{{ end }}
--- a/layouts/partials/head/schema/person.html
+++ b/layouts/partials/head/schema/person.html
@@ -3,18 +3,18 @@
 {
  "@context": "http://schema.org",
  "@type": "Person",
-  "@id": {{ print (absURL "/") "#author" }},
+  "@id": {{ print $.Site.Params.baseURL $.Site.BaseURL "#author" }},
  "name": {{ .name }},
-  "url": {{ $.Site.BaseURL }},
+  "url": {{ print $.Site.Params.baseURL $.Site.BaseURL }},
  "description": {{ $.Site.Params.description }},{{ with $.Scratch.Get "authorImage" }}
  "image": {
    "@type": "ImageObject",
-    "url": {{ .Permalink }},
+    "url": {{ print $.Site.Params.baseURL .Permalink }},
    "width": "{{ .Width }}",
    "height": "{{ .Height }}"
  },{{ end }}
  "sameAs": [
-    {{ $.Site.BaseURL }},{{ with .social }}
+    {{ print $.Site.Params.baseURL $.Site.BaseURL }},{{ with .social }}
    {{ with .github }}{{ print "https://github.com/" . }},{{ end }}
    {{ with .keybase }}{{ print "https://keybase.io/" . }},{{ end }}
    {{ with .twitter }}{{ print "https://twitter.com/" . }},{{ end }}
--- a/layouts/partials/head/styles.html
+++ b/layouts/partials/head/styles.html
@@ -1,11 +1 @@
-{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "css/main.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">
-
-{{/* Page-specific styles set via front matter, piped through PostCSS and inlined (see functions/init) */}}
-{{- with .Scratch.Get "pageCss" -}}
-{{ printf "<!-- htmlmin:ignore -->" | safeHTML -}}
-<style>
-{{ . | safeCSS }}
-</style>
-{{- printf "<!-- htmlmin:ignore -->" | safeHTML }}
-{{ end -}}
+{{ template "__head_css" . }}
--- a/layouts/partials/head/webmention.html
+++ b/layouts/partials/head/webmention.html
@@ -1,4 +0,0 @@
-{{ if .Site.Params.social.webmentionIO }}
-<link rel="webmention" href="{{ "api/mention/" | absURL }}">
-<link rel="pingback" href="{{ "api/ping/" | absURL }}">
-{{ end }}
--- a/layouts/partials/page/header.html
+++ b/layouts/partials/page/header.html
@@ -1,9 +1,9 @@
 <header>
  <nav>
    <a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}">
-      {{ $meImg := resources.Get .Site.Author.image }}
-      {{ $meImgSm := $meImg.Resize "160x160 q90 jpg" }}
-      <img id="selfie" src="{{ $meImgSm.Permalink }}" width="54" height="54" alt="Photo of Jake Jarvis">
+      {{ with index .Site.Data.manifest "images/tiny-selfie.jpg" }}
+      <img id="selfie" src="{{ .src | absURL }}" width="54" height="54" alt="Photo of Jake Jarvis">
+      {{ end }}

      <span id="name">{{ .Site.Title }}</span>
    </a>
--- a/layouts/partials/scripts/_bundle.html
+++ b/layouts/partials/scripts/_bundle.html
@@ -1,13 +0,0 @@
-{{ $js := resources.Get "js/index.js" | js.Build (dict "targetPath" "/js/app.js") | resources.Babel (dict "config" "babel.config.json" "noComments" true) }}
-
-{{- .Scratch.Set "bundlePermalink" $js.Permalink -}}
-
-{{- define "__preload_js" -}}
-<link rel="preload" href="{{ $.Scratch.Get "bundlePermalink" }}" as="script">
-{{- end -}}
-
-{{- define "__body_js" -}}
-<!-- inline the dark mode script to avoid a blinding flash of white background on loads -->
-<script>(function(d){var u=d.document,f=u.body.classList,e=localStorage,c="dark_mode_pref",t=e.getItem(c),a="dark",n="light",r="{{ .Site.Params.Theme.defaultTheme | safeJS }}",o=u.querySelector(".dark-mode-toggle"),i=r===a,b=function(d){f.remove(a,n);f.add(d);i=d===a};t===a&&b(a);t===n&&b(n);if(!t){var s=function(d){return"(prefers-color-scheme: "+d+")"};d.matchMedia(s(a)).matches?b(a):d.matchMedia(s(n)).matches?b(n):b(r);d.matchMedia(s(a)).addListener((function(d){d.matches&&b(a)}));d.matchMedia(s(n)).addListener((function(d){d.matches&&b(n)}))}if(o){o.style.display="block";o.addEventListener("click",(function(){if(i){b(n);e.setItem(c,n)}else{b(a);e.setItem(c,a)}}),!0)}})(window)</script>
-<script async defer src="{{ $.Scratch.Get "bundlePermalink" }}"></script>
-{{- end -}}