Generate og:images

Author: mb21

components/Layout.ts

@@ -19,7 +19,7 @@ export const Layout = (props: Props) =>
         ${props.description && html`
           <meta name="description" content="${props.description}">
         `}
-        <meta property="og:image" content="/assets/og.png">
+        <meta property="og:image" content="./og.png">
         <script type="module" src="/scripts.js"></script>
         <script
           data-goatcounter="https://mastrojs.goatcounter.com/count"

deno.json

@@ -10,6 +10,7 @@
     "lineWidth": 100
   },
   "imports": {
+    "@mastrojs/og-image": "jsr:@mastrojs/og-image@^0.0.4",
     "@mastrojs/feed": "jsr:@mastrojs/feed@^0.0.1",
     "@mastrojs/markdown": "jsr:@mastrojs/[email protected]",
     "@mastrojs/mastro": "jsr:@mastrojs/[email protected]",

deno.lock

@@ -30,7 +30,7 @@ export const { GET, getStaticPaths } = serveMarkdownFolder({
 
   return htmlToResponse(
     Layout({
-      title: meta.metaTitle || (meta.title ? `${meta.title} | Mastro ${part?.label}` : "Mastro"),
+      title: meta.metaTitle || (meta.title ? `${meta.title} | Mastro ${pageTitlePrefix(pathname)}` : "Mastro"),
       description: meta.description,
       children: html`
         ${Sidebar(sidebar, part, pathname)}
@@ -94,6 +94,18 @@ export const { GET, getStaticPaths } = serveMarkdownFolder({
   );
 });
 
+export const pageTitlePrefix = (path: string) => {
+  const segments = path.split("/");
+  if (segments.length > 2) {
+    const part = segments[1];
+    return part
+      ? (part[0].toUpperCase() + part.slice(1))
+      : "";
+  } else {
+    return "";
+  }
+}
+
 const getPrevNext = (contents: SidebarItem[] | undefined, pathname: string) => {
   if (!contents) {
     return {};

helpers/Roboto-Bold.ttf

@@ -0,0 +1,33 @@
+import { serveMarkdownFolder } from "@mastrojs/markdown";
+import { readFile } from "@mastrojs/mastro";
+import { renderImage } from "@mastrojs/og-image";
+import { pageTitlePrefix } from "../[...slug].server.ts";
+
+const fontFile = await readFile("./helpers/Roboto-Bold.ttf");
+const chefIcon = await readFile("./helpers/ogChef.png");
+
+export const GET = (req: Request) => {
+  const url = new URL(req.url);
+  url.pathname = url.pathname.slice(0, -6); // slice off "og.png"
+  return mdFolder.GET(new Request(url));
+};
+
+export const getStaticPaths = async () => {
+  const paths = await mdFolder.getStaticPaths();
+  return paths.map((path) => path + "og.png");
+};
+
+const mdFolder = serveMarkdownFolder({ folder: "data" }, ({ meta }, req) => {
+  const { pathname } = new URL(req.url);
+  const prefix = pageTitlePrefix(pathname);
+  const text = "Mastro\n\n" + (prefix ? `${prefix}: ` : "") + meta.title;
+  return renderImage(text, {
+    fontFile,
+    background: (ctx, canvas) => {
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, 0, 1200, 600);
+      // deno-lint-ignore no-explicit-any
+      ctx.drawImage(canvas.decodeImage(chefIcon) as any, 335, 100);
+    },
+  });
+});