feat(whatislove-dev): add autogeneration for og image wd-535 (#538)

* feat(whatislove-dev): add woff font wd-535

* feat(whatislove-dev): move covers to another folder wd-535

* feat(whatislove-dev): add autogeneration for og image wd-535

apps/whatislove-dev/eleventy.config.js

@@ -3,13 +3,15 @@ import rss from '@11ty/eleventy-plugin-rss'
 import shikiHighlight from '@shikijs/markdown-it'
 import { getISODate, getShuffledItems } from '@whatislove.dev/shared'
 import browserslist from 'browserslist'
+import ogImage from 'eleventy-plugin-og-image'
 import esbuild from 'esbuild'
 import htmlMin from 'html-minifier-terser'
 import * as lightningcss from 'lightningcss'
 import { parseHTML } from 'linkedom'
 import markdownIt from 'markdown-it'
-import { existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { basename, extname } from 'node:path'
 import svgo from 'svgo'
 
 import { default as environment } from './src/data/environment.js'
@@ -29,6 +31,7 @@ let Path = /** @type {const} */ ({
 		`./src/sounds`,
 		`./src/manifest.webmanifest`,
 		`./src/images/favicons`,
+		`./src/images/covers`,
 		`./src/robots.txt`,
 		`src/articles/**/*.!(md)`,
 	],
@@ -89,6 +92,45 @@ let init = (config) => {
 	// plugins
 	config.addPlugin(rss)
 
+	config.addPlugin(ogImage, {
+		outputDir: `images/covers`,
+		/**
+		 * @returns {string}
+		 * @this {{
+		 * 	data: {
+		 * 		page: {
+		 * 			fileSlug: string
+		 * 		}
+		 * 	}
+		 * }}
+		 */
+		outputFileSlug: function () {
+			return this.data.page.fileSlug
+		},
+		satoriOptions: {
+			fonts: [400, 700].map((weight) => ({
+				data: readFileSync(
+					new URL(
+						`src/fonts/red-hat-display-${weight}.woff`,
+						import.meta.url,
+					),
+				),
+				name: `Red Hat Display`,
+				style: `normal`,
+				weight,
+			})),
+		},
+		/**
+		 * @returns {Promise<string>}
+		 * @this {{
+		 * 	outputUrl: () => Promise<string>
+		 * }}
+		 */
+		shortcodeOutput() {
+			return this.outputUrl()
+		},
+	})
+
 	// filters
 	config.addFilter(`dateISO`, (value) => {
 		return getISODate(/** @type {Date} */ (value))
@@ -260,6 +302,19 @@ let init = (config) => {
 			sizes: [`(min-width: 740px) 700px`, `100vw`],
 		},
 		extensions: `html`,
+		/**
+		 * @param {string} _id
+		 * @param {string} source
+		 * @param {number} width
+		 * @param {string} format
+		 * @returns {string}
+		 */
+		filenameFormat: (_id, source, width, format) => {
+			let extension = extname(source)
+			let name = basename(source, extension)
+
+			return `${name}-${width}w.${format}`
+		},
 		formats: [`avif`, `webp`, `png`],
 		widths: [640, 960, 1280, 1920, 2560],
 	})

apps/whatislove-dev/package.json

@@ -35,6 +35,7 @@
 		"bemlint": "1.7.0",
 		"browserslist": "4.22.1",
 		"dotenv": "16.4.5",
+		"eleventy-plugin-og-image": "4.0.0-beta.6",
 		"esbuild": "0.19.5",
 		"html-minifier-terser": "7.2.0",
 		"json-server": "0.17.4",

apps/whatislove-dev/packages.d.ts

@@ -55,3 +55,9 @@ declare module '@11ty/eleventy-img' {
 		eleventyImageTransformPlugin,
 	}
 }
+
+declare module 'eleventy-plugin-og-image' {
+	function plugin(options: unknown): void
+
+	export default plugin
+}

apps/whatislove-dev/src/includes/og-article-image.njk

@@ -0,0 +1,28 @@
+<style>
+	.og {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background: linear-gradient(135deg, #ef629f, #eecda3);
+	}
+
+	.og__title {
+		color: white;
+		font-size: 80px;
+		margin: auto 0;
+	}
+
+	.og__tags-list {
+	}
+</style>
+
+<div class="og">
+	<h1 class="og__title">{{ title }}</h1>
+	<ul class="og__tags-list">
+		{% for tag in tags %}
+			<li>{{ tag }}</li>
+		{% endfor %}
+	</ul>
+</div>

apps/whatislove-dev/src/layouts/article.njk

@@ -9,6 +9,10 @@
 {% set mentionData = mentions[page.url] %}
 {% set lastChangelogItem = changelogs | last %}
 
+{% setAsync "ogUrl" %}
+	{% ogImage "includes/og-article-image.njk", { title: title, tags: tags } %}
+{% endsetAsync %}
+
 {% block font %}
 	<link rel="preload" href="/fonts/monaspace-neon.woff2" crossorigin="anonymous" as="font" type="font/woff2" />
 {% endblock %}

apps/whatislove-dev/src/layouts/page.njk

@@ -45,7 +45,10 @@
 		<meta property="og:description" content="{{ pageDescription }}" />
 		<meta property="og:url" content="{{ global.domain + page.url }}" />
 
-		<meta property="og:image" content="{{ global.domain }}/images/cover.png" />
+		<meta
+			property="og:image"
+			content="{{ global.domain }}{{ ogUrl | trim if ogUrl else "/images/covers/index.png" }}"
+		/>
 		<meta property="og:image:width" content="1200" />
 		<meta property="og:image:height" content="630" />
 

apps/whatislove-dev/src/styles/globals/fonts.css

@@ -10,15 +10,19 @@
 	font-family: "Red Hat Display";
 	font-style: normal;
 	font-weight: 400;
-	src: url("/fonts/red-hat-display-400.woff2") format("woff2");
+	src:
+		url("/fonts/red-hat-display-400.woff2") format("woff2"),
+		url("/fonts/red-hat-display-400.woff") format("woff");
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Red Hat Display";
 	font-style: normal;
 	font-weight: 700;
-	src: url("/fonts/red-hat-display-700") format("woff2");
+	src:
+		url("/fonts/red-hat-display-700.woff2") format("woff2"),
+		url("/fonts/red-hat-display-700.woff") format("woff");
 	font-display: swap;
 }