Add fallback OG in the event of 404

lib/templates.mjs

@@ -152,9 +152,9 @@ export function loadAssets(templateDir) {
       const ext = file.split(".").pop();
       const mime =
         ext === "png" ? "image/png" :
-        ext === "svg" ? "image/svg+xml" :
-        ext === "jpg" || ext === "jpeg" ? "image/jpeg" :
-        "application/octet-stream";
+          ext === "svg" ? "image/svg+xml" :
+            ext === "jpg" || ext === "jpeg" ? "image/jpeg" :
+              "application/octet-stream";
       const name = file.replace(/\.[^.]+$/, "");
       assets[name] = `data:${mime};base64,${data.toString("base64")}`;
     }
@@ -169,6 +169,25 @@ export function loadAssets(templateDir) {
   return assets;
 }
 
+export function loadFallbackImage(templateDir) {
+  const config = templates.get(templateDir);
+  if (!config || !config.fallbackImage) return null;
+  const filePath = join(templatesDir, templateDir, "assets", config.fallbackImage);
+  try {
+    const data = readFileSync(filePath);
+    const ext = config.fallbackImage.split(".").pop().toLowerCase();
+    const mime =
+      ext === "webp" ? "image/webp" :
+        ext === "png" ? "image/png" :
+          ext === "jpg" || ext === "jpeg" ? "image/jpeg" :
+            ext === "svg" ? "image/svg+xml" :
+              "application/octet-stream";
+    return { data, mime };
+  } catch {
+    return null;
+  }
+}
+
 export async function fetchRemoteAssets(assets) {
   if (!assets._remote) return assets;
   const resolved = { ...assets };
@@ -181,10 +200,10 @@ export async function fetchRemoteAssets(assets) {
       const ext = url.split(".").pop().split("?")[0];
       const mime =
         ext === "png" ? "image/png" :
-        ext === "jpg" || ext === "jpeg" ? "image/jpeg" :
-        ext === "svg" ? "image/svg+xml" :
-        ext === "webp" ? "image/webp" :
-        "image/png";
+          ext === "jpg" || ext === "jpeg" ? "image/jpeg" :
+            ext === "svg" ? "image/svg+xml" :
+              ext === "webp" ? "image/webp" :
+                "image/png";
       resolved[name] = `data:${mime};base64,${buffer.toString("base64")}`;
     } catch {
       // skip failed fetches

netlify/functions/opengraph.mjs

@@ -2,7 +2,7 @@ import { ImageResponse } from "@vercel/og";
 import { readFileSync } from "fs";
 import { join } from "path";
 import { parse } from "node-html-parser";
-import { resolveTemplate, resolveTemplateById, loadLayout, parseMeta, loadAssets, fetchRemoteAssets, listTemplates, isDomainAllowed } from "../../lib/templates.mjs";
+import { resolveTemplate, resolveTemplateById, loadLayout, parseMeta, loadAssets, fetchRemoteAssets, listTemplates, isDomainAllowed, loadFallbackImage } from "../../lib/templates.mjs";
 
 const fontsDir = join(process.cwd(), "fonts");
 
@@ -125,11 +125,26 @@ export default async (req) => {
       const pageRes = await fetch(targetUrl);
       const pageOk = pageRes.ok;
       const finalUrl = pageRes.url || targetUrl;
+
+      const { templateDir, layoutName, config } = resolveTemplate(finalUrl);
+
+      // If the page couldn't be loaded, fall back to the template's fallback image
+      if (!pageOk) {
+        const fallback = loadFallbackImage(templateDir);
+        if (fallback) {
+          return new Response(fallback.data, {
+            headers: {
+              "Content-Type": fallback.mime,
+              "Cache-Control": "no-store",
+            },
+          });
+        }
+      }
+
       const html = await pageRes.text();
       site = parse(html);
       meta = parseMeta(site);
 
-      const { templateDir, layoutName, config } = resolveTemplate(finalUrl);
       const layout = await loadLayout(templateDir, layoutName);
       const assets = await fetchRemoteAssets(loadAssets(templateDir));
 
@@ -146,6 +161,16 @@ export default async (req) => {
         },
       });
     } catch (err) {
+      const { templateDir } = resolveTemplate(targetUrl);
+      const fallback = loadFallbackImage(templateDir);
+      if (fallback) {
+        return new Response(fallback.data, {
+          headers: {
+            "Content-Type": fallback.mime,
+            "Cache-Control": "no-store",
+          },
+        });
+      }
       return new Response(`Failed to fetch URL: ${err.message}`, { status: 500 });
     }
   }

server.mjs

@@ -4,7 +4,7 @@ import { readFileSync, existsSync } from "fs";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
 import { parse } from "node-html-parser";
-import { resolveTemplate, resolveTemplateById, loadLayout, parseMeta, loadAssets, fetchRemoteAssets, listTemplates, isDomainAllowed } from "./lib/templates.mjs";
+import { resolveTemplate, resolveTemplateById, loadLayout, parseMeta, loadAssets, fetchRemoteAssets, listTemplates, isDomainAllowed, loadFallbackImage } from "./lib/templates.mjs";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -133,12 +133,27 @@ const server = createServer(async (req, res) => {
     try {
       const pageRes = await fetch(targetUrl);
       const finalUrl = pageRes.url || targetUrl;
+
+      const { width, height } = SIZES.og;
+      const { templateDir, layoutName, config } = resolveTemplate(finalUrl);
+
+      // If the page couldn't be loaded, fall back to the template's fallback image
+      if (!pageRes.ok) {
+        const fallback = loadFallbackImage(templateDir);
+        if (fallback) {
+          res.writeHead(200, {
+            "Content-Type": fallback.mime,
+            "Cache-Control": "no-store",
+          });
+          res.end(fallback.data);
+          return;
+        }
+      }
+
       const html = await pageRes.text();
       const site = parse(html);
       const meta = parseMeta(site);
 
-      const { width, height } = SIZES.og;
-      const { templateDir, layoutName, config } = resolveTemplate(finalUrl);
       const layout = await loadLayout(templateDir, layoutName);
       const assets = await fetchRemoteAssets(loadAssets(templateDir));
 
@@ -151,6 +166,16 @@ const server = createServer(async (req, res) => {
       });
       res.end(buffer);
     } catch (err) {
+      const { templateDir } = resolveTemplate(targetUrl);
+      const fallback = loadFallbackImage(templateDir);
+      if (fallback) {
+        res.writeHead(200, {
+          "Content-Type": fallback.mime,
+          "Cache-Control": "no-store",
+        });
+        res.end(fallback.data);
+        return;
+      }
       res.writeHead(500);
       res.end(`Failed to fetch URL: ${err.message}`);
     }

templates/esphome/config.json

@@ -11,6 +11,7 @@
   "remoteAssets": {
     "logo": "https://brands.openhomefoundation.org/api/esphome/logo/screen/lockup/main/monochrome/light/png"
   },
+  "fallbackImage": "og.webp",
   "routes": [
     {
       "path": "*",