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