feat: ✨ add OpenGraph and Twitter Card metadata and image generation

eleventy.config.js

@@ -1,6 +1,7 @@
+import { env } from 'node:process';
 import eleventyPluginNavigation from '@11ty/eleventy-navigation';
 import eleventyPluginWebc from '@11ty/eleventy-plugin-webc';
-import { eleventyImagePlugin } from '@11ty/eleventy-img';
+import Image, { eleventyImagePlugin } from '@11ty/eleventy-img';
 import htmlminifier from 'html-minifier-terser';
 
 const IMAGE_TRANSFORM_OPTS = {
@@ -18,6 +19,25 @@ const IMAGE_TRANSFORM_OPTS = {
   }
 };
 
+const BASE = env.ELEVENTY_PRODUCTION ? 'https://ref.sebin-nyshkim.net' : 'http://localhost:8080';
+
+// source: https://notes.jays.net/blog/11ty/
+async function getOgImage(src, key) {
+  const stats = await Image(src, {
+    width: [1200],
+    formats: ['webp'],
+    urlPath: '/img/',
+    outputDir: './public/img/',
+    filenameFormat: (hash, src, width, format) => `${hash}-${width}.${format}`
+  });
+
+  if (key === 'url') {
+    return BASE + stats.webp[0][key];
+  }
+
+  return stats.webp[0][key];
+}
+
 export default async function (eleventyConfig) {
   eleventyConfig.addWatchTarget('./src/css/');
   eleventyConfig.addPassthroughCopy('./src/fonts/');
@@ -32,10 +52,11 @@ export default async function (eleventyConfig) {
     collection.getFilteredByGlob('./src/jarek/*.md')
   );
 
+  eleventyConfig.addGlobalData('base', BASE);
+
   eleventyConfig.addTransform('minhtml', function (content) {
     if ((this.page.outputPath || '').endsWith('.html')) {
       return htmlminifier.minify(content, {
-        // keepClosingSlash: true,
         removeEmptyElements: true,
         collapseWhitespace: true,
         ignoreCustomFragments: [
@@ -47,6 +68,8 @@ export default async function (eleventyConfig) {
     }
   });
 
+  eleventyConfig.addFilter('getOgImage', getOgImage);
+
   eleventyConfig.addPlugin(eleventyPluginWebc, {
     components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc'],
     useTransform: false

src/components/head/page-head-meta.webc

@@ -0,0 +1,36 @@
+<script webc:setup>
+  const getTitle = (fullName) => {
+    if (fullName) {
+      return `${fullName} — Character Reference`;
+    }
+
+    return 'Choose Your Character!';
+  };
+
+  const getImageUrl = (char) => (char ? `src/img/${char.toLowerCase()}/og.png` : 'src/img/og.png');
+</script>
+
+<title @text="getTitle($data.fullName)"></title>
+
+<meta webc:if="$data.description" name="description" :content="$data.description" />
+<meta name="generator" :content="$data.eleventy.generator" />
+
+<meta property="fediverse:creator" content="@SebinNyshkim@meow.social" />
+
+<meta property="og:site_name" content="Sebin's Characters" />
+<meta property="og:type" content="website" />
+<meta property="og:url" :content="$data.base + $data.page.url" />
+<meta property="og:title" :content="getTitle($data.fullName)" />
+<meta property="og:description" :content="$data.description" />
+<meta property="og:locale" :content="$data.language" />
+
+<meta property="og:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />
+<meta property="og:image:type" :content="getOgImage(getImageUrl($data.firstName), 'sourceType')" />
+<meta property="og:image:width" :content="getOgImage(getImageUrl($data.firstName), 'width')" />
+<meta property="og:image:height" :content="getOgImage(getImageUrl($data.firstName), 'height')" />
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:url" :content="$data.base + $data.page.url" />
+<meta name="twitter:title" :content="getTitle($data.fullName)" />
+<meta name="twitter:description" :content="$data.description" />
+<meta name="twitter:image" :content="getOgImage(getImageUrl($data.firstName), 'url')" />

src/index.11tydata.js

@@ -2,5 +2,7 @@ export default {
   eleventyNavigation: {
     key: "Home"
   },
-  layout: 'base.webc'
+  layout: 'base.webc',
+  language: 'en_US',
+  description: 'Your go to place to learn all about the characters of Sebin!'
 };

src/jarek/jarek.11tydata.json

@@ -1,3 +1,4 @@
 {
-  "layout": "character.webc"
+  "layout": "character.webc",
+  "language": "en_US"
 }

src/layouts/base.webc

@@ -3,14 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title webc:if="$data.fullName" @text="`${$data.fullName} — Character Reference`"></title>
-    <title webc:else>Choose Your Character!</title>
 
     <template webc:is="page-head-base" webc:nokeep></template>
     <template webc:is="page-head-fonts" webc:nokeep></template>
     <template webc:is="page-head-colors" webc:nokeep></template>
     <template webc:is="page-head-style" webc:nokeep></template>
     <template webc:is="page-head-script" webc:nokeep></template>
+    <template webc:is="page-head-meta" webc:nokeep></template>
 
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <script type="module" :src="getBundleFileUrl('js')" webc:keep></script>

src/sebin/sebin.11tydata.json

@@ -1,5 +1,6 @@
 {
   "layout": "character.webc",
+  "language": "en_US",
   "galleryMuscle": [
     {
       "alt": "Sebin looking aloof (but chill)",

src/viktor/viktor.11tydata.json

@@ -1,5 +1,6 @@
 {
   "layout": "character.webc",
+  "language": "en_US",
   "jobs": [
     {
       "title": "Bartender",