Browse Source

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.
pull/546/head
Jake Jarvis 3 months ago
parent
commit
3a3849e8ec
Signed by: jake GPG Key ID: 2B0C9CF251E69A39
  1. BIN
      assets/images/angry-panda.gif
  2. 2
      assets/sass/abstracts/_responsive.scss
  3. 1
      assets/sass/main.scss
  4. 29
      assets/sass/pages/_fourOhFour.scss
  5. 66
      layouts/404.html
  6. 18
      layouts/index.webmanifest
  7. 6
      layouts/partials/functions/debug.html
  8. 6
      layouts/partials/functions/prepare-css.html
  9. 28
      layouts/partials/functions/prepare-js.html
  10. 13
      layouts/partials/functions/prepare-meta.html
  11. 13
      layouts/partials/functions/webpack.html
  12. 20
      layouts/partials/head/favicons.html
  13. 6
      layouts/partials/page/header.html

BIN
assets/images/angry-panda.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 400 KiB

2
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();
}

1
assets/sass/main.scss

@ -16,6 +16,7 @@
@use "pages/videos";
@use "pages/etc";
@use "pages/projects";
@use "pages/fourOhFour";
// Miscellaneous
@use "components/syntax";

29
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%;
}
}

66
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 }}

18
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",

6
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 }}

6
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 */}}

28
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" -}}

13
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 -}}

13
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 }}

20
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 }}">

6
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>

Loading…
Cancel
Save