Favicons and meta images

andrewbranch · andrewbranch · commit 11985d9a122d · 2023-11-11T20:58:52.000-08:00
diff --git a/_layouts/base.liquid b/_layouts/base.liquid
@@ -6,11 +6,18 @@
 <html lang="{{ metadata.language }}">
 	<head>
 		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
 		<title>{{ fullTitle }}</title>
 		<meta name="description" content="{{ description or metadata.description }}">
 		<meta name="generator" content="{{ eleventy.generator }}">
 
+		<meta name="og:title" content="{{ fullTitle }}">
+		<meta name="og:description" content="{{ description or metadata.description }}">
+		<meta name="og:type" content="website">
+		<meta name="og:url" content="{{ page.url }}">
+		{% ogImage metaImage %}
+		{% favicons 'content/images/logo.svg' %}
+
 		<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ fullTitle }}">
 		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ fullTitle }}">
 
@@ -29,13 +36,13 @@
 	<body>
 		<a href="#skip" class="visually-hidden">Skip to main content</a>
 
-		<div class="flex flex-col justify-between h-full max-w-[var(--width-content)] px-[0.8rem] my-0 mx-auto">
+		<div class="flex flex-col justify-between h-full max-w-[var(--width-content)] px-[0.8rem] my-0 mx-auto min-h-screen">
 			<div>
 				<header class="mt-4 mb-8 flex items-center justify-between">
 					<nav>
 						<h2 class="visually-hidden">Top level navigation menu</h2>
 
-						<ul class="flex items-center m-0">
+						<ul class="flex items-center m-0 font-grotesk font-medium text-textSecondary lowercase">
 							<li class="mr-6">
 								<a href="/">
 									<img src="/images/logo.svg" width="64" height="64" class="m-0" alt="Andrew Branch">
@@ -45,7 +52,7 @@
 							<li class="pt-4">
 								<a
 									href="/about"
-									class="font-grotesk text-textSecondary lowercase no-underline hover:underline"
+									class="{% if entry.url != '/about' %}no-underline hover:underline{% endif %}"
 									{% if entry.url == '/about' %}
 										aria-current="page"
 									{% endif %}
@@ -66,7 +73,15 @@
 					{{ content }}
 				</main>
 			</div>
-			<footer></footer>
+
+			<footer class="mt-8">
+				<p class="font-grotesk text-center text-textSecondary">
+					<small
+						>&copy; {{ 'now' | date: '%Y' }} Andrew Branch / Licensed under
+						<a href="http://creativecommons.org/licenses/by/4.0/legalcode">CC-BY-4.0</a></small
+					>
+				</p>
+			</footer>
 		</div>
 	</body>
 </html>
diff --git a/content/images/favicon.png b/content/images/favicon.png
diff --git a/content/styles/uno.css b/content/styles/uno.css
@@ -27,11 +27,14 @@
 .mr-6{margin-right:calc(var(--rhythm) * .25rem * 6);}
 .ms{margin-inline-start:1rem;}
 .mt-4{margin-top:calc(var(--rhythm) * .25rem * 4);}
+.mt-8{margin-top:calc(var(--rhythm) * .25rem * 8);}
 .block{display:block;}
 .contents{display:contents;}
 .h-full{height:100%;}
 .max-w-\[var\(--width-content\)\]{max-width:var(--width-content);}
+.min-h-screen{min-height:100vh;}
 .flex{display:flex;}
+.shrink-to-fit\=no{flex-shrink:1;}
 .grow{flex-grow:1;}
 .flex-col{flex-direction:column;}
 .items-center{align-items:center;}
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -6,6 +6,7 @@ const getImageSize = require("image-size").default;
 const anchor = require("markdown-it-anchor").default;
 const { loadTheme } = require("shiki");
 const shikiMarkdown = require("markdown-it-shiki").default;
+const faviconsPlugin = require("eleventy-plugin-gen-favicons");
 
 /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
 module.exports = (eleventyConfig) => {
@@ -37,9 +38,34 @@ module.exports = (eleventyConfig) => {
 	eleventyConfig.addPassthroughCopy("content/images");
 	eleventyConfig.addPassthroughCopy("content/styles/fonts");
 	eleventyConfig.addPassthroughCopy("content/_redirects");
+	eleventyConfig.addPassthroughCopy({
+		"node_modules/katex/dist/fonts": "bundle/fonts",
+	});
 
 	eleventyConfig.addWatchTarget("./content/*.css");
 
+	eleventyConfig.addAsyncShortcode("ogImage", async function (src) {
+		if (src) {
+			const originalPath = relativeToInputPath(this.page.inputPath, src);
+			const metadata = await eleventyImage(originalPath, {
+				widths: [1200],
+				formats: ["jpeg"],
+				outputDir: "public/img",
+			});
+			const jpeg = metadata.jpeg[0];
+			const url = new URL(jpeg.url, new URL("https://blog.andrewbran.ch"));
+			return `<meta property="og:image" content="${url.toString()}" />`;
+		} else {
+			const metadata = await eleventyImage(path.join(__dirname, "content/images/logo.svg"), {
+				widths: [1200],
+				formats: ["png"],
+				outputDir: "public/img",
+			});
+			const png = metadata.png[0];
+			const url = new URL(png.url, new URL("https://blog.andrewbran.ch"));
+			return `<meta property="og:image" content="${url.toString()}" />`;
+		}
+	});
 	eleventyConfig.addAsyncShortcode("image", async function (src, alt, className, widths, sizes) {
 		widths = Array.isArray(widths) ? widths : [widths || "auto"];
 		const originalPath = relativeToInputPath(this.page.inputPath, src);
@@ -99,6 +125,10 @@ module.exports = (eleventyConfig) => {
 		});
 	});
 
+	eleventyConfig.addPlugin(faviconsPlugin, {
+		outputDir: "public",
+	});
+
 	return {
 		dir: {
 			input: "content",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
 		"@shopify/prettier-plugin-liquid": "^1.3.4",
 		"@unocss/cli": "^0.57.2",
 		"@unocss/reset": "^0.57.2",
+		"eleventy-plugin-gen-favicons": "^1.1.2",
 		"image-size": "*",
 		"katex": "^0.16.9",
 		"markdown-it-anchor": "^8.6.7",
