nuxt-og-image 0.6.0 → 1.0.0-beta.0

package/dist/runtime/composables/defineOgImage.d.ts

@@ -1,3 +1,5 @@
 import type { OgImagePayload, OgImageScreenshotPayload } from '../../types';
 export declare function defineOgImageScreenshot(options?: OgImageScreenshotPayload): void;
+export declare function defineOgImageDynamic(options?: OgImageScreenshotPayload): void;
+export declare function defineOgImageStatic(options?: OgImageScreenshotPayload): void;
 export declare function defineOgImage(options?: OgImagePayload): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -1,9 +1,28 @@
 import { useServerHead } from "@vueuse/head";
+import { withBase } from "ufo";
 import { useRouter } from "#imports";
-import { DefaultRuntimeImageSuffix, HtmlRendererRoute, LinkPrerenderId, MetaOgImageContentPlaceholder, PayloadScriptId } from "#nuxt-og-image/constants";
+import { PayloadScriptId } from "#nuxt-og-image/constants";
+import { forcePrerender, height, host, width } from "#nuxt-og-image/config";
 export function defineOgImageScreenshot(options = {}) {
+  const router = useRouter();
+  const route = router?.currentRoute?.value?.path || "";
   defineOgImage({
-    alt: "__OG_IMAGE_SCREENSHOT_ALT",
+    alt: `Web page screenshot${route ? ` of ${route}` : ""}.`,
+    provider: "browser",
+    prerender: true,
+    ...options
+  });
+}
+export function defineOgImageDynamic(options = {}) {
+  defineOgImage({
+    provider: "satori",
+    ...options
+  });
+}
+export function defineOgImageStatic(options = {}) {
+  defineOgImage({
+    provider: "satori",
+    prerender: true,
     ...options
   });
 }
@@ -11,6 +30,9 @@ export function defineOgImage(options = {}) {
   if (process.server) {
     const router = useRouter();
     const route = router?.currentRoute?.value?.path || "";
+    const e = useRequestEvent();
+    if ((forcePrerender || options.prerender) && options.provider === "satori")
+      e.res.setHeader("x-nitro-prerender", `${route === "/" ? "" : route}/__og_image__/og.png`);
     const meta = [
       {
         property: "twitter:card",
@@ -18,7 +40,15 @@ export function defineOgImage(options = {}) {
       },
       {
         property: "og:image",
-        content: () => options.runtime ? `${route}/${DefaultRuntimeImageSuffix}` : MetaOgImageContentPlaceholder
+        content: () => withBase(`${route}/__og_image__/og.png`, host)
+      },
+      {
+        property: "og:image:width",
+        content: width
+      },
+      {
+        property: "og:image:height",
+        content: height
       }
     ];
     if (options.alt) {
@@ -29,13 +59,6 @@ export function defineOgImage(options = {}) {
     }
     useServerHead({
       meta,
-      link: !options.runtime && options.component ? [
-        {
-          id: LinkPrerenderId,
-          rel: "prerender",
-          href: `${route}/${HtmlRendererRoute}`
-        }
-      ] : [],
       script: [
         {
           id: PayloadScriptId,

package/dist/runtime/nitro/providers/browser.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '../../../types';
+declare const _default: Provider;
+export default _default;

package/dist/runtime/nitro/providers/browser.mjs

@@ -0,0 +1,16 @@
+import { screenshot } from "../../browserUtil.mjs";
+import { height, width } from "#nuxt-og-image/config";
+import { createBrowser } from "#nuxt-og-image/browser";
+export default {
+  name: "browser",
+  createSvg: function createSvg() {
+    throw new Error("Browser provider isn't able to create SVGs.");
+  },
+  createPng: async function createPng(basePath) {
+    const browser = await createBrowser();
+    return screenshot(browser, basePath, {
+      width: Number(width),
+      height: Number(height)
+    });
+  }
+};

package/dist/runtime/nitro/providers/satori.d.ts

@@ -0,0 +1,3 @@
+import type { Provider } from '../../../types';
+declare const _default: Provider;
+export default _default;

package/dist/runtime/nitro/providers/satori.mjs

@@ -0,0 +1,48 @@
+import { fileURLToPath } from "node:url";
+import { promises as fsp } from "node:fs";
+import { html as convertHtmlToSatori } from "satori-html";
+import satori from "satori";
+import { parseURL } from "ufo";
+import { Resvg } from "@resvg/resvg-js";
+import { dirname, resolve } from "pathe";
+import { height, width } from "#nuxt-og-image/config";
+import { getAsset } from "#internal/nitro/virtual/public-assets";
+export default {
+  name: "satori",
+  createPng: async function createPng(baseUrl) {
+    const svg = await this.createSvg(baseUrl);
+    const resvg = new Resvg(svg, {});
+    const pngData = resvg.render();
+    return pngData.asPng();
+  },
+  createSvg: async function createSvg(baseUrl) {
+    const url = parseURL(baseUrl);
+    const html = await $fetch(url.pathname);
+    const body = html.match(/<body[^>]*>([\s\S]*)<\/body>/)?.[1];
+    const font = async (weight) => {
+      let fontData;
+      const file = getAsset(`/inter-latin-ext-${weight}-normal.woff`);
+      if (file) {
+        const serverDir = dirname(fileURLToPath(import.meta.url));
+        fontData = await fsp.readFile(resolve(serverDir, file.path));
+      }
+      if (!fontData)
+        fontData = await (await $fetch(`${url.protocol}//${url.host}/inter-latin-ext-${weight}-normal.woff`)).arrayBuffer();
+      return {
+        name: "Inter",
+        weight,
+        style: "normal",
+        data: fontData
+      };
+    };
+    const satoriTree = convertHtmlToSatori(body);
+    return await satori(satoriTree, {
+      width,
+      height,
+      fonts: [
+        await font(400),
+        await font(700)
+      ]
+    });
+  }
+};

package/dist/runtime/nitro/routes/__og_image__/html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<string | void>;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/html.mjs

@@ -0,0 +1,43 @@
+import { parseURL, withoutTrailingSlash } from "ufo";
+import { renderSSRHead } from "@unhead/ssr";
+import { createHeadCore } from "@unhead/vue";
+import { defineEventHandler, sendRedirect } from "h3";
+import { fetchPayload, renderIsland, useHostname } from "../../utils.mjs";
+import { height, width } from "#nuxt-og-image/config";
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname;
+  if (!path.endsWith("__og_image__/html"))
+    return;
+  const basePath = withoutTrailingSlash(path.replace("__og_image__/html", ""));
+  const payload = await fetchPayload(basePath);
+  if (payload.provider === "browser")
+    return sendRedirect(e, useHostname(e) + basePath);
+  const component = payload.component || "OgImageTemplate";
+  delete payload.component;
+  const island = await renderIsland(component, payload);
+  const head = createHeadCore();
+  head.push(island.head);
+  head.push({
+    style: [
+      {
+        innerHTML: "body { font-family: 'Inter', sans-serif; }"
+      }
+    ],
+    link: [
+      {
+        href: "https://cdn.jsdelivr.net/npm/gardevoir",
+        rel: "stylesheet"
+      },
+      {
+        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
+        rel: "stylesheet"
+      }
+    ]
+  });
+  const headChunk = await renderSSRHead(head);
+  return `<!DOCTYPE html>
+<html ${headChunk.htmlAttrs}>
+<head>${headChunk.headTags}</head>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="width: ${width}px; height: ${height}px; display: flex; margin: 0 auto;">${island.html}</div>${headChunk.bodyTags}</body>
+</html>`;
+});

package/dist/runtime/nitro/routes/__og_image__/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<string | undefined>;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/index.mjs

@@ -0,0 +1,26 @@
+import { defineEventHandler } from "h3";
+import { parseURL, withoutTrailingSlash } from "ufo";
+import { fetchPayload, useHostname } from "../../utils.mjs";
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname;
+  if (!path.endsWith("/__og_image__"))
+    return;
+  const basePath = withoutTrailingSlash(path.replace("__og_image__", ""));
+  const payload = await fetchPayload(basePath);
+  if (!payload)
+    return `The route ${basePath} has not been set up for og:image generation.`;
+  return `
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+  }
+  iframe {
+    border: none;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+<title>Og Image Playground</title>
+<iframe src="${useHostname(e)}/__nuxt_og_image__/client/?&path=${withoutTrailingSlash(path.replace("__og_image__", ""))}"></iframe>`;
+});

package/dist/runtime/nitro/routes/__og_image__/og.png.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<any>;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/og.png.mjs

@@ -0,0 +1,23 @@
+import { defineEventHandler, setHeader } from "h3";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { fetchPayload, useHostname } from "../../utils.mjs";
+import { useProvider } from "#nuxt-og-image/provider";
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname;
+  if (!path.endsWith("__og_image__/og.png"))
+    return;
+  const basePath = withoutTrailingSlash(
+    path.replace("__og_image__/og.png", "")
+  );
+  const { provider: providerName, prerender } = await fetchPayload(basePath);
+  setHeader(e, "Content-Type", "image/png");
+  if (prerender && !process.dev) {
+    setHeader(e, "Cache-Control", "public, max-age=86400");
+  } else {
+    setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+    setHeader(e, "Pragma", "no-cache");
+    setHeader(e, "Expires", "0");
+  }
+  const provider = await useProvider(providerName);
+  return provider.createPng(withBase(`${basePath}/__og_image__/html`, useHostname(e)));
+});

package/dist/runtime/nitro/{html.d.ts → routes/__og_image__/payload.d.ts}

@@ -1,4 +1,5 @@
+import type { OgImagePayload } from '../../../../types';
 export declare const extractOgPayload: (html: string) => any;
 export declare const inferOgPayload: (html: string) => Record<string, any>;
-declare const _default: import("h3").EventHandler<string | undefined>;
+declare const _default: import("h3").EventHandler<false | OgImagePayload | undefined>;
 export default _default;

package/dist/runtime/nitro/routes/__og_image__/payload.mjs

@@ -0,0 +1,53 @@
+import { parseURL, withoutTrailingSlash } from "ufo";
+import { defineEventHandler, getQuery } from "h3";
+import { PayloadScriptId } from "#nuxt-og-image/constants";
+import { getRouteRules } from "#internal/nitro";
+export const extractOgPayload = (html) => {
+  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
+  if (payload) {
+    return JSON.parse(payload);
+  }
+  return false;
+};
+export const inferOgPayload = (html) => {
+  const payload = {};
+  const title = html.match(/<meta property="og:title" content="(.*?)">/)?.[1];
+  if (title)
+    payload.title = title;
+  const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
+  if (description)
+    payload.description = description;
+  return payload;
+};
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname;
+  if (!path.endsWith("__og_image__/payload"))
+    return;
+  const basePath = withoutTrailingSlash(path.replace("__og_image__/payload", ""));
+  const html = await $fetch(basePath);
+  const extractedPayload = extractOgPayload(html);
+  if (!extractedPayload)
+    return false;
+  e.node.req.url = basePath;
+  e.context._nitro.routeRules = void 0;
+  const routeRules = getRouteRules(e)?.ogImage;
+  e.node.req.url = e.path;
+  if (routeRules === false)
+    return false;
+  let payload = {
+    path: basePath,
+    ...extractOgPayload(html),
+    ...inferOgPayload(html),
+    ...routeRules || {},
+    ...getQuery(e)
+  };
+  if (payload.provider === "satori") {
+    payload = {
+      title: "Hello World",
+      description: "Example description",
+      image: "https://example.com/image.png",
+      ...payload
+    };
+  }
+  return payload;
+});

package/dist/runtime/nitro/routes/__og_image__/svg.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<any>;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/svg.mjs

@@ -0,0 +1,16 @@
+import { defineEventHandler, setHeader } from "h3";
+import { parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { fetchPayload, useHostname } from "../../utils.mjs";
+import { useProvider } from "#nuxt-og-image/provider";
+export default defineEventHandler(async (e) => {
+  const path = parseURL(e.path).pathname;
+  if (!path.endsWith("__og_image__/svg"))
+    return;
+  const basePath = withoutTrailingSlash(
+    path.replace("__og_image__/svg", "")
+  );
+  const { provider: providerName } = await fetchPayload(basePath);
+  setHeader(e, "Content-Type", "image/svg+xml");
+  const provider = await useProvider(providerName);
+  return provider.createSvg(withBase(`${basePath}/__og_image__/html`, useHostname(e)));
+});

package/dist/runtime/nitro/utils.d.ts

@@ -0,0 +1,8 @@
+import type { H3Event } from 'h3';
+import type { OgImagePayload } from '../../types';
+export declare function fetchPayload(path: string): Promise<OgImagePayload>;
+export declare function renderIsland(island: string, payload: Record<string, any>): Promise<{
+    html: string;
+    head: any;
+}>;
+export declare function useHostname(e: H3Event): string;

package/dist/runtime/nitro/utils.mjs

@@ -0,0 +1,18 @@
+import { joinURL, withQuery } from "ufo";
+import { getRequestHeader, getRequestHeaders } from "h3";
+export function fetchPayload(path) {
+  return $fetch(joinURL(path, "__og_image__/payload"));
+}
+export function renderIsland(island, payload) {
+  return $fetch(withQuery(`/__nuxt_island/${island}`, {
+    props: JSON.stringify(payload)
+  }));
+}
+export function useHostname(e) {
+  console.log(getRequestHeader(e, "host"), getRequestHeaders(e));
+  const host = getRequestHeader(e, "host") || "localhost:3000";
+  const protocol = getRequestHeader(e, "x-forwarded-proto") || "http";
+  if (protocol.startsWith("http"))
+    return `${protocol}://${host}`;
+  return `http${process.env.NODE_ENV === "development" ? "" : "s"}://${host}`;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "0.6.0",
+  "version": "1.0.0-beta.0",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -27,32 +27,43 @@
   ],
   "dependencies": {
     "@nuxt/kit": "3.0.0",
+    "@resvg/resvg-js": "^2.2.0",
+    "birpc": "^0.2.3",
     "chalk": "^5.2.0",
     "chrome-launcher": "^0.15.1",
     "defu": "^6.1.1",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
+    "flatted": "^3.2.7",
+    "launch-editor": "^2.6.0",
     "ohash": "^1.0.0",
     "pathe": "^1.0.0",
-    "playwright-core": "^1.29.1",
+    "playwright-core": "^1.29.2",
     "radix3": "^1.0.0",
+    "satori": "^0.1.1",
+    "satori-html": "^0.3.2",
+    "sirv": "^2.0.2",
+    "tinyws": "^0.1.0",
     "ufo": "^1.0.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.34.0",
+    "@antfu/eslint-config": "^0.34.1",
     "@nuxt/kit": "3.0.0",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/test-utils": "3.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@types/ws": "^8.5.4",
     "bumpp": "^8.2.1",
-    "eslint": "8.31.0",
+    "eslint": "8.32.0",
     "nuxt": "npm:nuxt3@latest",
-    "puppeteer": "^19.4.1",
-    "vitest": "^0.26.3"
+    "puppeteer": "^19.5.2",
+    "vitest": "^0.27.2"
   },
   "scripts": {
+    "build": "pnpm dev:prepare && pnpm build:module && pnpm build:client",
+    "build:client": "nuxi generate client",
+    "build:module": "nuxt-build-module",
     "lint": "eslint \"**/*.{ts,vue,json,yml}\"",
-    "build": "nuxi prepare .playground && nuxt-module-build",
     "dev": "nuxi dev .playground",
     "dev:build": "nuxi build .playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare .playground",

package/dist/runtime/nitro/html.mjs

@@ -1,55 +0,0 @@
-import { withQuery, withoutTrailingSlash } from "ufo";
-import { renderSSRHead } from "@unhead/ssr";
-import { createHeadCore } from "@unhead/vue";
-import { defineEventHandler, getQuery } from "h3";
-import { HtmlRendererRoute, PayloadScriptId } from "#nuxt-og-image/constants";
-export const extractOgPayload = (html) => {
-  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
-  if (payload) {
-    return JSON.parse(payload);
-  }
-  return false;
-};
-export const inferOgPayload = (html) => {
-  const payload = {};
-  const title = html.match(/<meta property="og:title" content="(.*?)">/)?.[1];
-  if (title)
-    payload.title = title;
-  const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
-  if (description)
-    payload.description = description;
-  return payload;
-};
-export default defineEventHandler(async (req) => {
-  if (!req.path?.endsWith(HtmlRendererRoute))
-    return;
-  const path = req.path.replace(HtmlRendererRoute, "");
-  const html = await $fetch(withoutTrailingSlash(path));
-  const payload = {
-    path,
-    title: "Hello World",
-    description: "Example description",
-    image: "https://example.com/image.png",
-    ...extractOgPayload(html),
-    ...inferOgPayload(html),
-    ...getQuery(req)
-  };
-  const result = await $fetch(withQuery(`/__nuxt_island/${payload.component || "OgImageTemplate"}`, {
-    props: JSON.stringify(payload)
-  }));
-  const head = createHeadCore();
-  head.push(result.head);
-  head.push({
-    style: [
-      {
-        innerHTML: "body { margin: 0; padding: 0; } .og-image-container { width: 1200px; height: 630px; display: flex; margin: 0 auto; }"
-      }
-    ]
-  });
-  const headChunk = await renderSSRHead(head);
-  return `<!DOCTYPE html>
-<html ${headChunk.htmlAttrs}>
-<head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div class="og-image-container">${result.html}</div>${headChunk.bodyTags}</body>
-</html>`;
-});

package/dist/runtime/nitro/image.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="node" />
-declare const _default: import("h3").EventHandler<Buffer | import("h3").H3Error | undefined>;
-export default _default;

package/dist/runtime/nitro/image.mjs

@@ -1,18 +0,0 @@
-import { createError, defineEventHandler, getRequestHeader, setHeader } from "h3";
-import { screenshot } from "../browserUtil.mjs";
-import { DefaultRuntimeImageSuffix, HtmlRendererRoute } from "#nuxt-og-image/constants";
-import { createBrowser } from "#nuxt-og-image/browser";
-export default defineEventHandler(async (e) => {
-  if (!e.path?.endsWith(DefaultRuntimeImageSuffix))
-    return;
-  const path = e.path.replace(DefaultRuntimeImageSuffix, HtmlRendererRoute);
-  const host = getRequestHeader(e, "host") || "localhost:3000";
-  const browser = await createBrowser();
-  if (!browser)
-    return createError("Could not create browser");
-  setHeader(e, "Content-Type", "image/png");
-  return await screenshot(browser, `http${host.startsWith("localhost") ? "" : "s"}://${host}/${path}`, {
-    width: 1200,
-    height: 630
-  });
-});