jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-13 00:25:28 -04:00
Code Issues Activity

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

Browse Source 
still a mess but slightly more modular. also added a real 404 page.
This commit is contained in:
Jake Jarvis
2021-09-03 11:16:27 -04:00
parent a304fa5079
commit 3a3849e8ec
13 changed files with 97 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/angry-panda.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

assets/sass/abstracts/_responsive.scss
+2
View File
@@ -11,6 +11,7 @@
@use "../pages/videos"; @use "../pages/videos";
@use "../pages/etc"; @use "../pages/etc";
@use "../pages/projects"; @use "../pages/projects";
@use "../pages/fourOhFour";
// Responsive Awesomeness // Responsive Awesomeness
@media screen and (max-width: settings.$responsive-width) { @media screen and (max-width: settings.$responsive-width) {
@@ -25,4 +26,5 @@
@include videos.responsive(); @include videos.responsive();
@include etc.responsive(); @include etc.responsive();
@include projects.responsive(); @include projects.responsive();
@include fourOhFour.responsive();
} }
assets/sass/main.scss
+1
View File
@@ -16,6 +16,7 @@
@use "pages/videos"; @use "pages/videos";
@use "pages/etc"; @use "pages/etc";
@use "pages/projects"; @use "pages/projects";
@use "pages/fourOhFour";
// Miscellaneous // Miscellaneous
@use "components/syntax"; @use "components/syntax";
assets/sass/pages/_fourOhFour.scss
+29
View File
@@ -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%;
}
}
layouts/404.html
+10 -56
View File
@@ -1,57 +1,11 @@
<!doctype html> {{ define "main" }}
<html lang="en"> <div class="layout layout-404">
<head> {{ with partial "functions/webpack" (dict "context" . "src" "images/angry-panda.gif") }}
<meta charset="utf-8"> <img src="{{ .src }}" width="435" height="300" alt="Panda takes out anger on innocent computer.">
{{ hugo.Generator }} {{ end }}
<title>Page Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<style> <h2>404 Makes Panda Angry</h2>
body {
background: #efefef; <p><a href="/">Maybe it's wise to get out of here and go home...?</a></p>
color: #5f5f5f; </div>
font-family: Helvetica, Arial, sans-serif; {{ end }}
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>
layouts/index.webmanifest
+8 -10
View File
@@ -1,34 +1,32 @@
{ {
"name": "{{ .Site.Title }}", "name": "{{ .Site.Title }}",
"short_name": "{{ (urls.Parse .Site.Params.baseURL).Host }}", "short_name": "{{ (urls.Parse .Site.Params.baseURL).Host }}",
{{- with .Site.Data.manifest }}
"icons": [ "icons": [
{{ with index . "images/android-chrome-512x512.png" }}{ {{ with partial "functions/webpack" (dict "context" . "src" "images/android-chrome-512x512.png") }}{
"src": "{{ .src | absURL | safeJS }}", "src": "{{ .src | safeJS }}",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png", "type": "image/png",
"purpose": "any" "purpose": "any"
},{{ end }} },{{ end }}
{{ with index . "images/android-chrome-192x192.png" }}{ {{ with partial "functions/webpack" (dict "context" . "src" "images/android-chrome-192x192.png") }}{
"src": "{{ .src | absURL | safeJS }}", "src": "{{ .src | safeJS }}",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png", "type": "image/png",
"purpose": "any" "purpose": "any"
},{{ end }} },{{ end }}
{{ with index . "images/maskable-512x512.png" }}{ {{ with partial "functions/webpack" (dict "context" . "src" "images/maskable-512x512.png") }}{
"src": "{{ .src | absURL | safeJS }}", "src": "{{ .src | safeJS }}",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png", "type": "image/png",
"purpose": "maskable" "purpose": "maskable"
},{{ end }} },{{ end }}
{{ with index . "images/maskable-192x192.png" }}{ {{ with partial "functions/webpack" (dict "context" . "src" "images/maskable-192x192.png") }}{
"src": "{{ .src | absURL | safeJS }}", "src": "{{ .src | safeJS }}",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png", "type": "image/png",
"purpose": "maskable" "purpose": "maskable"
}{{ end }} }{{ end }}
], ],
{{- end }}
"start_url": "/", "start_url": "/",
"display": "browser", "display": "browser",
"background_color": "#ffffff", "background_color": "#ffffff",
layouts/partials/functions/debug.html
+3 -3
View File
@@ -1,5 +1,5 @@
{{ printf "<!-- htmlmin:ignore -->" | safeHTML -}} {{ printf "<!-- htmlmin:ignore -->" | safeHTML -}}
{{ printf "<!-- %s -->" hugo.Environment | safeHTML }} {{ with hugo }}{{ printf "<!-- %s -->" .Environment | safeHTML }}
{{ printf "<!-- %s -->" hugo.Version | safeHTML }} {{ printf "<!-- %s -->" .Version | safeHTML }}{{ end }}
{{ printf "<!-- /content/%s -->" .File.Path | safeHTML }} {{ with .File }}{{ printf "<!-- /content/%s -->" .Path | safeHTML }}{{ end }}
{{- printf "<!-- htmlmin:ignore -->" | safeHTML }} {{- printf "<!-- htmlmin:ignore -->" | safeHTML }}
layouts/partials/functions/prepare-css.html
+2 -4
View File
@@ -1,10 +1,8 @@
{{/* Pull in CSS processed by Webpack */}} {{/* Pull in CSS processed by Webpack */}}
{{- define "__head_css" -}} {{- define "__head_css" -}}
{{ with .Site.Data.manifest }} {{ with partial "functions/webpack" (dict "context" . "src" "main.css") }}
{{ with index . "main.css" }} <link rel="stylesheet" href="{{ .src }}">
<link rel="stylesheet" href="{{ .src | absURL }}">
{{ end }}
{{ end }} {{ end }}
{{/* Page-specific styles set via front matter, piped through PostCSS and inlined */}} {{/* Page-specific styles set via front matter, piped through PostCSS and inlined */}}
layouts/partials/functions/prepare-js.html
+13 -15
View File
@@ -1,25 +1,23 @@
{{/* Pull in JS processed by Webpack */}} {{/* Pull in JS processed by Webpack */}}
{{- define "__head_preload" -}} {{- define "__head_preload" -}}
{{ with .Site.Data.manifest }} {{ with partial "functions/webpack" (dict "context" . "src" "fonts/inter-subset.var.woff2") }}
{{ with index . "fonts/inter-subset.var.woff2" }} <link rel="preload" href="{{ .src }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ .src | absURL }}" as="font" type="font/woff2" crossorigin> {{ end }}
{{ end }}
{{ with index . "fonts/roboto-mono-subset.var.woff2" }} {{ with partial "functions/webpack" (dict "context" . "src" "fonts/roboto-mono-subset.var.woff2") }}
<link rel="preload" href="{{ .src | absURL }}" as="font" type="font/woff2" crossorigin> <link rel="preload" href="{{ .src }}" as="font" type="font/woff2" crossorigin>
{{ end }} {{ end }}
{{ with index . "main.js" }}
<link rel="preload" href="{{ .src | absURL }}" as="script"> {{ with partial "functions/webpack" (dict "context" . "src" "main.js") }}
{{ end }} <link rel="preload" href="{{ .src }}" as="script">
{{ end }} {{ end }}
{{- end -}} {{- end -}}
{{- define "__body_js" -}} {{- define "__body_js" -}}
{{ with .Site.Data.manifest }} {{ with partial "functions/webpack" (dict "context" . "src" "main.js") }}
{{ with index . "main.js" -}} <script async defer src="{{ .src }}"></script>
<script async defer src="{{ .src | absURL }}"></script> {{ end }}
{{ end -}}
{{ end -}}
{{/* Detect shortcodes and append external scripts as needed once per page */}} {{/* Detect shortcodes and append external scripts as needed once per page */}}
{{ if .HasShortcode "gh-buttons" -}} {{ if .HasShortcode "gh-buttons" -}}
layouts/partials/functions/prepare-meta.html
+5 -8
View File
@@ -15,10 +15,8 @@
{{/* Chooses and initializes various images for use by JSON schema & open graph tags */}} {{/* Chooses and initializes various images for use by JSON schema & open graph tags */}}
{{/* Author image (default) */}} {{/* Author image (default) */}}
{{- with .Site.Data.manifest -}} {{- with partial "functions/webpack" (dict "context" . "src" .Site.Author.image) -}}
{{- with index . $.Site.Author.image -}} {{- $.Scratch.Set "authorImage" (dict "Permalink" .src "Width" 1200 "Height" 1200 "MediaType" "image/jpeg") -}}
{{- $.Scratch.Set "authorImage" (dict "Permalink" (absURL .src) "Width" 1200 "Height" 1200 "MediaType" "image/jpeg") -}}
{{- end -}}
{{- end -}} {{- end -}}
{{/* Page image (via frontmatter) */}} {{/* Page image (via frontmatter) */}}
{{- with .Params.image -}} {{- with .Params.image -}}
@@ -31,9 +29,8 @@
{{- $.Scratch.Set "pageImage" . -}} {{- $.Scratch.Set "pageImage" . -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{/* Site logo */}} {{/* Site logo */}}
{{- with .Site.Data.manifest -}} {{- with partial "functions/webpack" (dict "context" . "src" .Site.Params.image) -}}
{{- with index . $.Site.Params.image -}} {{- $.Scratch.Set "logoImage" (dict "Permalink" .src "Width" 2048 "Height" 2048 "MediaType" "image/png") -}}
{{- $.Scratch.Set "logoImage" (dict "Permalink" (absURL .src) "Width" 2048 "Height" 2048 "MediaType" "image/png") -}}
{{- end -}}
{{- end -}} {{- end -}}
layouts/partials/functions/webpack.html
+13
View File
@@ -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 }}
layouts/partials/head/favicons.html
+9 -11
View File
@@ -1,15 +1,13 @@
{{ with .Site.Data.manifest }} {{- with partial "functions/webpack" (dict "context" . "src" "images/favicon.ico") }}
{{- with index . "images/favicon.ico" }} <link rel="icon" href="{{ .src }}">
<link rel="icon" href="{{ .src | absURL }}"> {{ end -}}
{{- end }}
{{- with index . "images/favicon.svg" }} {{- with partial "functions/webpack" (dict "context" . "src" "images/favicon.svg") }}
<link rel="icon" href="{{ .src | absURL }}" type="image/svg+xml"> <link rel="icon" href="{{ .src }}" type="image/svg+xml">
{{- end -}} {{ end -}}
{{- with index . "images/apple-touch-icon.png" }} {{- with partial "functions/webpack" (dict "context" . "src" "images/apple-touch-icon.png") }}
<link rel="apple-touch-icon" href="{{ .src | absURL }}" sizes="180x180"> <link rel="apple-touch-icon" href="{{ .src }}" sizes="180x180">
{{- end }} {{ end -}}
{{ end }}
<link rel="manifest" href="{{ "site.webmanifest" | absURL }}"> <link rel="manifest" href="{{ "site.webmanifest" | absURL }}">
layouts/partials/page/header.html
+2 -4
View File
@@ -1,10 +1,8 @@
<header> <header>
<nav> <nav>
<a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}"> <a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" rel="me author" aria-label="{{ .Site.Title }}">
{{ with .Site.Data.manifest }} {{ with partial "functions/webpack" (dict "context" . "src" "images/tiny-selfie.jpg") }}
{{ with index . "images/tiny-selfie.jpg" }} <img id="selfie" src="{{ .src }}" width="54" height="54" alt="Photo of Jake Jarvis">
<img id="selfie" src="{{ .src | absURL }}" width="54" height="54" alt="Photo of Jake Jarvis">
{{ end }}
{{ end }} {{ end }}
<span id="name">{{ .Site.Title }}</span> <span id="name">{{ .Site.Title }}</span>