feat: og-image

Author: geromegrignon

angular-hub/index.html

@@ -6,10 +6,6 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta property="og:title" content="Angular Hub" />
-    <meta
-      property="og:image"
-      content="https://angular-hub.com/assets/images/og-image.webp"
-    />
     <meta
       property="og:description"
       content="Curated list of Angular events and communities"

angular-hub/src/app/pages/index.page.ts

@@ -25,6 +25,14 @@ export const routeMeta: RouteMeta = {
       name: 'description',
       content: 'Curated list of Angular Events',
     },
+    {
+      property: 'og:title',
+      content: 'Title of the page',
+    },
+    {
+      property: 'og:image',
+      content: '/api/v1/og-image?title=Developer',
+    },
   ],
 };
 

angular-hub/src/public/assets/images/logo.png

@@ -0,0 +1,59 @@
+import { ImageResponse } from '@analogjs/content/og';
+import { Event } from '../../../models/event.model';
+
+export default defineEventHandler(async (event) => {
+  const data = await fetch('http://localhost:4200/api/v1/events/upcoming');
+  const events: Event[] = await data.json();
+  const eventLength = events.length;
+  const topEvents = events.slice(0, 3);
+
+  const fontFile = await fetch(
+    'https://og-playground.vercel.app/inter-latin-ext-700-normal.woff',
+  );
+  const fontData: ArrayBuffer = await fontFile.arrayBuffer();
+  const query = getQuery(event); // query params
+
+  const template = `
+    <div tw="bg-gray-50 flex flex-col w-full h-full items-center justify-center">
+        <h2 class="text-5xl">${eventLength} upcoming events</h2>
+     ${topEvents.map((event) => `${event.name}`)}
+      </div>
+  `;
+
+  const cards = `
+   ${topEvents.map((event) => {
+     return `<h4 class="text-xl font-bold my-1">
+      ${event.name}
+    </h4>
+    <div class="flex gap-4 mb-2">
+      <div class="flex justify-center items-center w-20 h-20">
+        <img
+          class="rounded-xl"
+          [src]="${event.community?.logo}"
+          aria-hidden="true"
+          height="70"
+          width="70"
+          alt=""
+        />
+      </div>
+      <div class="flex-1">
+        <span class="font-bold text-primary" itemprop="date">
+          ${event.date}
+          ${event.endDate ? '- ' + event.endDate : ''}
+        </span>
+      </div>
+    </div>`;
+   })}
+  `;
+
+  return new ImageResponse(template, {
+    debug: true, // disable caching
+    fonts: [
+      {
+        name: 'Inter Latin',
+        data: fontData,
+        style: 'normal',
+      },
+    ],
+  });
+});

angular-hub/src/server/routes/v1/og-image.ts

@@ -35,15 +35,18 @@
     "marked": "^5.0.2",
     "marked-gfm-heading-id": "^3.1.0",
     "marked-highlight": "^2.0.1",
+    "marked-mangle": "^1.1.7",
     "mermaid": "^10.2.4",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.7",
     "prismjs": "^1.29.0",
     "rxjs": "~7.8.0",
+    "satori": "^0.10.14",
+    "satori-html": "^0.3.2",
+    "sharp": "^0.33.5",
     "tslib": "^2.6.3",
     "valibot": "^0.35.0",
-    "zone.js": "0.14.7",
-    "marked-mangle": "^1.1.7"
+    "zone.js": "0.14.7"
   },
   "devDependencies": {
     "@analogjs/platform": "1.8.0-beta.2",