fix: align site icons and link previews

THIRD_PARTY_NOTICES.md

@@ -8,11 +8,11 @@
   Hugo provides its embedded KaTeX renderer.
 
 The complete upstream license texts are in [static/licenses/](static/licenses/)
-and distributed with the site. Build dependencies retain the license files included in their packages;
+and distributed with the site. Build dependencies retain the license files included in their packages.
-installed dependencies are not included in the source ZIP.
 
-The [Pale Blue Dot](static/images/Pale_Blue_Dot.png) link-preview photograph was
+The [Pale Blue Dot](assets/images/Pale_Blue_Dot.png) photograph was taken by
-taken by NASA’s Voyager 1 spacecraft.
+NASA’s Voyager 1 spacecraft. Cropped and resized versions are used for the site’s
+browser icons and link previews.
 Image credit: NASA/JPL.
 See the [JPL image use policy](https://www.jpl.nasa.gov/jpl-image-use-policy/).
 

content/writing/explore-and-exploit.md

@@ -17,4 +17,3 @@ A military could use what it learns in much the same way. Finding weaknesses in
 And I think keeping people safe should guide how militaries use the knowledge they gather. I’d love to see more of their ingenuity devoted to finding ways to counter attacks and limit the harm they can cause. Defending yourself sometimes requires fighting back, of course. But I think we all stand to gain more in the long run from learning to cooperate. How to make that cooperation last is a difficult question, and I don’t pretend to have an answer. I do think it’s worth working toward.
 
 Anyway, I hope you found that little connection as interesting as I did! I certainly wasn’t expecting a search for words that sound nice together to leave me thinking about what militaries should be doing.
-

content/writing/why-read-classics.md

@@ -27,4 +27,3 @@ That brought to mind Muhammad Ali’s description of what his trainer had helped
 **Style, story, and significance.** Beautiful! And the alliteration is certainly a nice bonus.
 
 I hope that gives you some sense of what classics can offer, and perhaps a reason to try one you’ve been curious about. A work that influenced an author you love or explores a subject that interests you could be a good place to start. You might find more to enjoy in it than you expected.
-

hugo.toml

@@ -11,7 +11,7 @@ tag = 'tags'
 [params]
 author = 'Ishmaam Khan'
 description = "Hi! I’m Ishmaam. I write software and spend a lot of time thinking about science, philosophy, and whatever else catches my interest."
-images = ['/images/Pale_Blue_Dot.png']
+images = ['images/Pale_Blue_Dot.png']
 [outputs]
 home = ['HTML', 'RSS']
 section = ['HTML', 'RSS']
@@ -49,4 +49,3 @@ files = ['katex.min.css', 'fonts/**']
 source = 'node_modules/@fontsource-variable/newsreader/files'
 target = 'static/fonts'
 files = ['newsreader-latin-wght-normal.woff2', 'newsreader-latin-wght-italic.woff2']
-

layouts/_default/baseof.html

@@ -28,10 +28,7 @@
 		<meta property="og:url" content="{{ .Permalink }}" />
 		{{ $type := cond (and .IsPage (eq .Section "writing")) "article" "website" }}
 		<meta property="og:type" content="{{ $type }}" />
-		<meta property="og:image" content="{{ (index site.Params.images 0) | absURL }}" />
+		{{ partialCached "site-images.html" . }}
-		<meta name="twitter:card" content="summary" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 		<link rel="preload" href="/fonts/newsreader-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin />
 		{{ $css := resources.Get "css/style.css" | minify | fingerprint }}
 		<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" />

layouts/partials/site-images.html

@@ -0,0 +1,16 @@
+{{- $source := resources.Get (index site.Params.images 0) -}}
+{{- $earth := ($source.Crop "220x294 Right").Crop "220x220 Bottom" -}}
+{{- $icon := $earth.Resize "64x64 png lanczos" -}}
+{{- $touch := $earth.Resize "180x180 png lanczos" -}}
+{{- $preview := (($source.Crop "300x232 Right").Crop "300x158 Bottom").Fill "1200x630 Center jpg q85 lanczos" -}}
+{{- $alt := "Earth as a tiny pale dot in a sunbeam, photographed by Voyager 1." -}}
+<meta property="og:image" content="{{ $preview.Permalink }}" />
+<meta property="og:image:type" content="{{ $preview.MediaType.Type }}" />
+<meta property="og:image:width" content="{{ $preview.Width }}" />
+<meta property="og:image:height" content="{{ $preview.Height }}" />
+<meta property="og:image:alt" content="{{ $alt }}" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image" content="{{ $preview.Permalink }}" />
+<meta name="twitter:image:alt" content="{{ $alt }}" />
+<link rel="icon" type="image/png" sizes="64x64" href="{{ $icon.RelPermalink }}" />
+<link rel="apple-touch-icon" sizes="180x180" href="{{ $touch.RelPermalink }}" />

scripts/check.mjs

@@ -28,6 +28,15 @@ export function checkSite(directory = 'dist') {
 						const value = element.getAttribute(name);
 						if (value) page.links.push(value);
 					}
+					if (
+						element.tagName === 'meta' &&
+						['og:image', 'twitter:image'].includes(
+							element.getAttribute('property') || element.getAttribute('name'),
+						)
+					) {
+						const value = element.getAttribute('content');
+						if (value) page.links.push(value);
+					}
 					for (const name of ['aria-controls', 'aria-labelledby', 'aria-describedby']) {
 						const value = element.getAttribute(name);
 						if (value) page.controls.push(...value.trim().split(/\s+/));

scripts/test.mjs

@@ -141,6 +141,8 @@ try {
 	for (const [html, expected] of [
 		['<a href="#missing">Broken fragment</a>', /missing fragment/],
 		['<img src="missing.png">', /broken asset or link/],
+		['<meta property="og:image" content="/missing.png">', /broken asset or link/],
+		['<meta name="twitter:image" content="/missing.png">', /broken asset or link/],
 		['<h2 id="duplicate"></h2><h2 id="duplicate"></h2>', /duplicate id/],
 		['<button aria-controls="missing">Contents</button>', /missing accessible control target/],
 	]) {