npm - nuxt-og-image - Versions diffs - 1.0.0-beta.1 → 1.0.0-beta.10 - Mend

nuxt-og-image 1.0.0-beta.1 → 1.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/runtime/nitro/providers/satori/utils.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import { fileURLToPath } from "node:url";
+import { promises as fsp } from "node:fs";
+import { dirname, resolve } from "pathe";
+import { withBase } from "ufo";
+import { getAsset } from "#internal/nitro/virtual/public-assets";
+export async function parseFont(url, font) {
+  if (typeof font.publicPath === "string") {
+    const file = getAsset(font.publicPath);
+    if (file) {
+      const serverDir = dirname(fileURLToPath(import.meta.url));
+      font.data = await fsp.readFile(resolve(serverDir, file.path));
+    }
+    if (!font.data)
+      font.data = await (await $fetch(withBase(font.publicPath, `${url.protocol}//${url.host}`))).arrayBuffer();
+  }
+  return font;
+}
+export async function walkSatoriTree(url, node, plugins) {
+  if (!node.props?.children)
+    return;
+  for (const child of node.props.children || []) {
+    if (child) {
+      for (const plugin of plugins) {
+        if (plugin.filter(child))
+          await plugin.transform(child, url);
+      }
+      await walkSatoriTree(url, child, plugins);
+    }
+  }
+}
+export function defineSatoriTransformer(transformer) {
+  return transformer;
+}

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

@@ -1,26 +1,56 @@
-import { parseURL, withoutTrailingSlash } from "ufo";
+import { parseURL, withBase, 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";
+import { defineEventHandler, getQuery, sendRedirect } from "h3";
+import { fetchOptions, renderIsland, useHostname } from "../../utils.mjs";
+import { defaults } 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 scale = getQuery(e).scale;
+  const options = await fetchOptions(basePath);
+  if (options.provider === "browser")
+    return sendRedirect(e, withBase(basePath, useHostname(e)));
+  const island = await renderIsland(options);
   const head = createHeadCore();
   head.push(island.head);
   head.push({
     style: [
       {
-        innerHTML: "body { font-family: 'Inter', sans-serif; }"
+        innerHTML: "body { font-family: 'Inter', sans-serif;  }"
+      },
+      scale ? {
+        innerHTML: `body {
+    transform: scale(${scale});
+    transform-origin: top left;
+    max-height: 100vh;
+}
+img.emoji {
+   height: 1em;
+   width: 1em;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
+`
+      } : {}
+    ],
+    meta: [
+      {
+        charset: "utf-8"
+      }
+    ],
+    script: [
+      {
+        src: "https://cdn.tailwindcss.com"
+      },
+      {
+        innerHTML: `tailwind.config = {
+  corePlugins: {
+    preflight: false,
+  }
+}`
       }
     ],
     link: [
@@ -38,6 +68,6 @@ export default defineEventHandler(async (e) => {
   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>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div style="width: ${defaults.width}px; height: ${defaults.height}px; display: flex; margin: 0 auto;">${island.html}</div>${headChunk.bodyTags}</body>
 </html>`;
 });

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

@@ -1,13 +1,13 @@
 import { defineEventHandler } from "h3";
 import { parseURL, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { fetchOptions, 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)
+  const options = await fetchOptions(basePath);
+  if (!options)
     return `The route ${basePath} has not been set up for og:image generation.`;
   return `
 <style>
@@ -21,6 +21,6 @@ export default defineEventHandler(async (e) => {
     height: 100%;
   }
 </style>
-<title>Og Image Playground</title>
+<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.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { defineEventHandler, setHeader } from "h3";
-import { parseURL, withBase, withoutTrailingSlash } from "ufo";
-import { fetchPayload, useHostname } from "../../utils.mjs";
+import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { fetchOptions, useHostname } from "../../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
@@ -9,15 +9,11 @@ export default defineEventHandler(async (e) => {
   const basePath = withoutTrailingSlash(
     path.replace("__og_image__/og.png", "")
   );
-  const { provider: providerName, prerender } = await fetchPayload(basePath);
+  const options = await fetchOptions(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)));
+  setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");
+  setHeader(e, "Pragma", "no-cache");
+  setHeader(e, "Expires", "0");
+  const provider = await useProvider(options.provider);
+  return provider.createPng(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)), options);
 });

package/dist/runtime/nitro/routes/__og_image__/options.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { OgImageOptions } from '../../../../types';
+export declare function extractOgImageOptions(html: string): any;
+export declare const inferOgImageOptions: (html: string) => OgImageOptions;
+declare const _default: import("h3").EventHandler<false | OgImageOptions | undefined>;
+export default _default;

package/dist/runtime/nitro/routes/__og_image__/{payload.mjs → options.mjs} RENAMED Viewed

@@ -1,31 +1,32 @@
 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 = {};
+import { defaults } from "#nuxt-og-image/config";
+export function extractOgImageOptions(html) {
+  const options = html.match(/<script id="nuxt-og-image-options" type="application\/json">(.+?)<\/script>/)?.[1];
+  return options ? JSON.parse(options) : false;
+}
+export const inferOgImageOptions = (html) => {
+  const options = {};
   const title = html.match(/<meta property="og:title" content="(.*?)">/)?.[1];
   if (title)
-    payload.title = title;
+    options.title = title;
+  else
+    options.title = html.match(/<title>(.*?)<\/title>/)?.[1];
   const description = html.match(/<meta property="og:description" content="(.*?)">/)?.[1];
   if (description)
-    payload.description = description;
-  return payload;
+    options.description = description;
+  else
+    options.description = html.match(/<meta name="description" content="(.*?)">/)?.[1];
+  return options;
 };
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
-  if (!path.endsWith("__og_image__/payload"))
+  if (!path.endsWith("__og_image__/options"))
     return;
-  const basePath = withoutTrailingSlash(path.replace("__og_image__/payload", ""));
+  const basePath = withoutTrailingSlash(path.replace("__og_image__/options", ""));
   const html = await $fetch(basePath);
-  const extractedPayload = extractOgPayload(html);
+  const extractedPayload = extractOgImageOptions(html);
   if (!extractedPayload)
     return false;
   e.node.req.url = basePath;
@@ -34,20 +35,12 @@ export default defineEventHandler(async (e) => {
   e.node.req.url = e.path;
   if (routeRules === false)
     return false;
-  let payload = {
+  return {
     path: basePath,
-    ...extractOgPayload(html),
-    ...inferOgPayload(html),
+    ...defaults,
+    ...inferOgImageOptions(html),
     ...routeRules || {},
+    ...extractedPayload,
     ...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.mjs CHANGED Viewed

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

package/dist/runtime/nitro/routes/__og_image__/vnode.d.ts ADDED Viewed

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

package/dist/runtime/nitro/routes/__og_image__/vnode.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+import { defineEventHandler, setHeader } from "h3";
+import { joinURL, parseURL, withBase, withoutTrailingSlash } from "ufo";
+import { fetchOptions, 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__/vnode"))
+    return;
+  const basePath = withoutTrailingSlash(
+    path.replace("__og_image__/vnode", "")
+  );
+  const options = await fetchOptions(basePath);
+  setHeader(e, "Content-Type", "application/json");
+  const provider = await useProvider(options.provider);
+  return provider.createVNode(withBase(joinURL(basePath, "/__og_image__/html"), useHostname(e)), options);
+});

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

@@ -1,7 +1,7 @@
 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<{
+import type { OgImageOptions } from '../../types';
+export declare function fetchOptions(path: string): Promise<OgImageOptions>;
+export declare function renderIsland(payload: OgImageOptions): Promise<{
     html: string;
     head: any;
 }>;

package/dist/runtime/nitro/utils.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import { joinURL, withQuery } from "ufo";
 import { getRequestHeader } from "h3";
-export function fetchPayload(path) {
-  return $fetch(joinURL(path, "__og_image__/payload"));
+export function fetchOptions(path) {
+  return $fetch(joinURL(path, "__og_image__/options"));
 }
-export function renderIsland(island, payload) {
-  return $fetch(withQuery(`/__nuxt_island/${island}`, {
+export function renderIsland(payload) {
+  return $fetch(withQuery(`/__nuxt_island/${payload.component}`, {
     props: JSON.stringify(payload)
   }));
 }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -44,6 +44,7 @@
     "satori-html": "^0.3.2",
     "sirv": "^2.0.2",
     "tinyws": "^0.1.0",
+    "twemoji": "^14.0.2",
     "ufo": "^1.0.1"
   },
   "devDependencies": {
@@ -63,7 +64,7 @@
     "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}\"",
+    "lint": "eslint \"**/*.{ts,vue,json,yml}\" --fix",
     "dev": "nuxi dev .playground",
     "dev:build": "nuxi build .playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare .playground",