add a partial template that returns an asset's URL and hash from webpack's manifest

still a mess but slightly more modular. also added a real 404 page.
2025-09-13 05:45:31 -04:00 · 2021-09-03 11:16:27 -04:00
parent a304fa5079
commit 3a3849e8ec
13 changed files with 97 additions and 111 deletions
--- a/assets/images/angry-panda.gif
+++ b/assets/images/angry-panda.gif
--- a/assets/sass/abstracts/_responsive.scss
+++ b/assets/sass/abstracts/_responsive.scss
@@ -11,6 +11,7 @@
@use "../pages/videos";
@use "../pages/etc";
@use "../pages/projects";
+@use "../pages/fourOhFour";

 // Responsive Awesomeness
@media screen and (max-width: settings.$responsive-width) {
@@ -25,4 +26,5 @@
  @include videos.responsive();
  @include etc.responsive();
  @include projects.responsive();
+  @include fourOhFour.responsive();
 }
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -16,6 +16,7 @@
@use "pages/videos";
@use "pages/etc";
@use "pages/projects";
+@use "pages/fourOhFour";

 // Miscellaneous
@use "components/syntax";
--- a/assets/sass/pages/_fourOhFour.scss
+++ b/assets/sass/pages/_fourOhFour.scss
@@ -0,0 +1,29 @@
+// 404 Styles
+div.layout-404 {
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+  text-align: center;
+  font-size: 0.9em;
+
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+
+  h2 {
+    margin: 0.75em 0 0.5em 0;
+    letter-spacing: -0.005em;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+// Responsive
+@mixin responsive() {
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+}
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,57 +1,11 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    {{ hugo.Generator }}
-    <title>Page Not Found</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="noindex">
+{{ define "main" }}
+<div class="layout layout-404">
+  {{ with partial "functions/webpack" (dict "context" . "src" "images/angry-panda.gif") }}
+    <img src="{{ .src }}" width="435" height="300" alt="Panda takes out anger on innocent computer.">
+  {{ end }}

-    <style>
-      body {
-        background: #efefef;
-        color: #5f5f5f;
-        font-family: Helvetica, Arial, sans-serif;
-        margin: 0;
-        padding: 0;
-      }
-      div#message {
-        background: #ffffff;
-        max-width: 400px;
-        margin: 100px auto 16px;
-        padding: 16px 32px;
-        border-radius: 4px;
-        box-shadow: 0 1px 3px #e0e0e0, 0 1px 2px #888888;
-      }
-      h1 {
-        margin: 16px 0;
-        font-size: 24px;
-        font-weight: 300;
-      }
-      p {
-        margin: 16px 0;
-        font-size: 15px;
-        line-height: 140%;
-      }
-      a {
-        color: #0e6dc2;
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-      @media (max-width: 600px) {
-        body, div#message {
-          background: #ffffff;
-          margin-top: 16px;
-          box-shadow: none;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h1>Welp, this is awkward... 😳</h1>
-      <p>The file you asked for wasn't found in this neck of the woods. Please check the URL for mistakes and try again, or take your ball and <a href="{{ .Site.BaseURL }}">go home</a>.</p>
-    </div>
-  </body>
-</html>
+  <h2>404 Makes Panda Angry</h2>
+
+  <p><a href="/">Maybe it's wise to get out of here and go home...?</a></p>
+</div>
+{{ end }}
--- a/layouts/index.webmanifest
+++ b/layouts/index.webmanifest
@@ -1,34 +1,32 @@
 {
  "name": "{{ .Site.Title }}",
  "short_name": "{{ (urls.Parse .Site.Params.baseURL).Host }}",
-  {{- with .Site.Data.manifest }}
  "icons": [
-    {{ with index . "images/android-chrome-512x512.png" }}{
-      "src": "{{ .src | absURL | safeJS }}",
+    {{ with partial "functions/webpack" (dict "context" . "src" "images/android-chrome-512x512.png") }}{
+      "src": "{{ .src | safeJS }}",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },{{ end }}
-    {{ with index . "images/android-chrome-192x192.png" }}{
-      "src": "{{ .src | absURL | safeJS }}",
+    {{ with partial "functions/webpack" (dict "context" . "src" "images/android-chrome-192x192.png") }}{
+      "src": "{{ .src | safeJS }}",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },{{ end }}
-    {{ with index . "images/maskable-512x512.png" }}{
-      "src": "{{ .src | absURL | safeJS }}",
+    {{ with partial "functions/webpack" (dict "context" . "src" "images/maskable-512x512.png") }}{
+      "src": "{{ .src | safeJS }}",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },{{ end }}
-    {{ with index . "images/maskable-192x192.png" }}{
-      "src": "{{ .src | absURL | safeJS }}",
+    {{ with partial "functions/webpack" (dict "context" . "src" "images/maskable-192x192.png") }}{
+      "src": "{{ .src | safeJS }}",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    }{{ end }}
  ],
-  {{- end }}
  "start_url": "/",
  "display": "browser",
  "background_color": "#ffffff",
--- a/layouts/partials/functions/debug.html
+++ b/layouts/partials/functions/debug.html
@@ -1,5 +1,5 @@
 {{ printf "<!-- htmlmin:ignore -->" | safeHTML -}}
-{{ printf "<!-- %s -->" hugo.Environment | safeHTML }}
-{{ printf "<!-- %s -->" hugo.Version | safeHTML }}
-{{ printf "<!-- /content/%s -->" .File.Path | safeHTML }}
+{{ with hugo }}{{ printf "<!-- %s -->" .Environment | safeHTML }}
+{{ printf "<!-- %s -->" .Version | safeHTML }}{{ end }}
+{{ with .File }}{{ printf "<!-- /content/%s -->" .Path | safeHTML }}{{ end }}
 {{- printf "<!-- htmlmin:ignore -->" | safeHTML }}
--- a/layouts/partials/functions/prepare-css.html
+++ b/layouts/partials/functions/prepare-css.html
@@ -1,10 +1,8 @@
 {{/* Pull in CSS processed by Webpack */}}

 {{- define "__head_css" -}}
-  {{ with .Site.Data.manifest }}
-    {{ with index . "main.css" }}
-      <link rel="stylesheet" href="{{ .src | absURL }}">
-    {{ end }}
+  {{ with partial "functions/webpack" (dict "context" . "src" "main.css") }}
+    <link rel="stylesheet" href="{{ .src }}">
  {{ end }}

  {{/* Page-specific styles set via front matter, piped through PostCSS and inlined */}}
--- a/layouts/partials/functions/prepare-js.html
+++ b/layouts/partials/functions/prepare-js.html
@@ -1,25 +1,23 @@
 {{/* Pull in JS processed by Webpack */}}

 {{- 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 }}
+  {{ with partial "functions/webpack" (dict "context" . "src" "fonts/inter-subset.var.woff2") }}
+    <link rel="preload" href="{{ .src }}" as="font" type="font/woff2" crossorigin>
+  {{ end }}
+
+  {{ with partial "functions/webpack" (dict "context" . "src" "fonts/roboto-mono-subset.var.woff2") }}
+    <link rel="preload" href="{{ .src }}" as="font" type="font/woff2" crossorigin>
+  {{ end }}
+
+  {{ with partial "functions/webpack" (dict "context" . "src" "main.js") }}
+    <link rel="preload" href="{{ .src }}" as="script">
  {{ end }}
 {{- end -}}

 {{- define "__body_js" -}}
-  {{ with .Site.Data.manifest }}
-    {{ with index . "main.js" -}}
-      <script async defer src="{{ .src | absURL }}"></script>
-    {{ end -}}
-  {{ end -}}
+  {{ with partial "functions/webpack" (dict "context" . "src" "main.js") }}
+    <script async defer src="{{ .src }}"></script>
+  {{ end }}

  {{/* Detect shortcodes and append external scripts as needed once per page */}}
  {{ if .HasShortcode "gh-buttons" -}}
--- a/layouts/partials/functions/prepare-meta.html
+++ b/layouts/partials/functions/prepare-meta.html
@@ -15,10 +15,8 @@

 {{/* Chooses and initializes various images for use by JSON schema & open graph tags */}}
 {{/* Author image (default) */}}
-{{- with .Site.Data.manifest -}}
-  {{- with index . $.Site.Author.image -}}
-    {{- $.Scratch.Set "authorImage" (dict "Permalink" (absURL .src) "Width" 1200 "Height" 1200 "MediaType" "image/jpeg") -}}
-  {{- end -}}
+{{- with partial "functions/webpack" (dict "context" . "src" .Site.Author.image) -}}
+  {{- $.Scratch.Set "authorImage" (dict "Permalink" .src "Width" 1200 "Height" 1200 "MediaType" "image/jpeg") -}}
 {{- end -}}
 {{/* Page image (via frontmatter) */}}
 {{- with .Params.image -}}
@@ -31,9 +29,8 @@
    {{- $.Scratch.Set "pageImage" . -}}
  {{- end -}}
 {{- end -}}
+
 {{/* Site logo */}}
-{{- with .Site.Data.manifest -}}
-  {{- with index . $.Site.Params.image -}}
-    {{- $.Scratch.Set "logoImage" (dict "Permalink" (absURL .src) "Width" 2048 "Height" 2048 "MediaType" "image/png") -}}
-  {{- end -}}
+{{- with partial "functions/webpack" (dict "context" . "src" .Site.Params.image) -}}
+  {{- $.Scratch.Set "logoImage" (dict "Permalink" .src "Width" 2048 "Height" 2048 "MediaType" "image/png") -}}
 {{- end -}}
--- a/layouts/partials/functions/webpack.html
+++ b/layouts/partials/functions/webpack.html
@@ -0,0 +1,13 @@
+{{/* Returns the URL and hash of an asset processed by Webpack */}}
+{{/* Usage: pass in (dict "context" . "src" "images/tiny-selfie.jpg"), returns .src = "/assets/images/tiny-selfie.jpg", .integrity = "sha384-asdfjklsemicolon" */}}
+
+{{ $src := .src }}
+{{ $data := "" }}
+
+{{ with .context.Site.Data.manifest }}
+  {{ with index . $src }}
+    {{ $data = . }}
+  {{ end }}
+{{ end }}
+
+{{ return $data }}
--- a/layouts/partials/head/favicons.html
+++ b/layouts/partials/head/favicons.html
@@ -1,15 +1,13 @@
-{{ with .Site.Data.manifest }}
-  {{- with index . "images/favicon.ico" }}
-  <link rel="icon" href="{{ .src | absURL }}">
-  {{- end }}
+{{- with partial "functions/webpack" (dict "context" . "src" "images/favicon.ico") }}
+  <link rel="icon" href="{{ .src }}">
+{{ end -}}

-  {{- with index . "images/favicon.svg" }}
-  <link rel="icon" href="{{ .src | absURL }}" type="image/svg+xml">
-  {{- end -}}
+{{- with partial "functions/webpack" (dict "context" . "src" "images/favicon.svg") }}
+  <link rel="icon" href="{{ .src }}" type="image/svg+xml">
+{{ end -}}

-  {{- with index . "images/apple-touch-icon.png" }}
-  <link rel="apple-touch-icon" href="{{ .src | absURL }}" sizes="180x180">
-  {{- end }}
-{{ end }}
+{{- with partial "functions/webpack" (dict "context" . "src" "images/apple-touch-icon.png") }}
+  <link rel="apple-touch-icon" href="{{ .src }}" sizes="180x180">
+{{ end -}}

 <link rel="manifest" href="{{ "site.webmanifest" | absURL }}">
--- a/layouts/partials/page/header.html
+++ b/layouts/partials/page/header.html
@@ -1,10 +1,8 @@
 <header>
  <nav>
    <a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}">
-      {{ with .Site.Data.manifest }}
-        {{ with index . "images/tiny-selfie.jpg" }}
-        <img id="selfie" src="{{ .src | absURL }}" width="54" height="54" alt="Photo of Jake Jarvis">
-        {{ end }}
+      {{ with partial "functions/webpack" (dict "context" . "src" "images/tiny-selfie.jpg") }}
+        <img id="selfie" src="{{ .src }}" width="54" height="54" alt="Photo of Jake Jarvis">
      {{ end }}

      <span id="name">{{ .Site.Title }}</span>