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

package/dist/module.mjs

@@ -1,13 +1,16 @@
-import { readFile, writeFile, rm, mkdir } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addTemplate, getNuxtVersion, addServerHandler, addImports, addComponent } from '@nuxt/kit';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { existsSync } from 'fs';
+import { useNuxt, addTemplate, defineNuxtModule, createResolver, addServerHandler, addImports, addComponent } from '@nuxt/kit';
 import { execa } from 'execa';
-import { hash } from 'ohash';
 import chalk from 'chalk';
 import defu from 'defu';
 import { toRouteMatcher, createRouter } from 'radix3';
-import { withBase, joinURL } from 'ufo';
-import fg from 'fast-glob';
-import { join } from 'pathe';
+import { joinURL } from 'ufo';
+import { resolve, relative } from 'pathe';
+import { tinyws } from 'tinyws';
+import sirv from 'sirv';
+import { createBirpcGroup } from 'birpc';
+import { stringify, parse } from 'flatted';
 
 async function createBrowser() {
   try {
@@ -41,6 +44,8 @@ async function screenshot(browser, url, options) {
     timeout: 1e4,
     waitUntil: "networkidle"
   });
+  if (options.delay)
+    await page.waitForTimeout(options.delay);
   if (options.mask) {
     await page.evaluate((mask) => {
       for (const el of document.querySelectorAll(mask))
@@ -48,23 +53,118 @@ async function screenshot(browser, url, options) {
     }, options.mask);
   }
   if (options.selector)
-    await page.locator(options.selector).screenshot();
+    return await page.locator(options.selector).screenshot();
   return await page.screenshot();
 }
 
-const HtmlRendererRoute = "__og_image";
 const PayloadScriptId = "nuxt-og-image-payload";
-const MetaOgImageContentPlaceholder = "__NUXT_OG_IMAGE_PLACEHOLDER__";
-const LinkPrerenderId = "nuxt-og-image-screenshot-path";
-const DefaultRuntimeImageSuffix = "og-image.png";
 const Constants = {
-  HtmlRendererRoute,
-  PayloadScriptId,
-  MetaOgImageContentPlaceholder,
-  LinkPrerenderId,
-  DefaultRuntimeImageSuffix
+  PayloadScriptId
 };
 
+function exposeConfig(alias, filename, config) {
+  const exports = Object.entries(config).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
+  useNuxt().options.alias[alias] = addTemplate({
+    filename,
+    getContents: () => exports
+  }).dst;
+  useNuxt().hooks.hook("nitro:config", (nitroConfig) => {
+    nitroConfig.virtual[alias] = exports;
+  });
+}
+
+function setupPlaygroundRPC(nuxt, config) {
+  const serverFunctions = {
+    getConfig() {
+      return config;
+    },
+    async openInEditor(input) {
+      if (input.startsWith("./"))
+        input = resolve(process.cwd(), input);
+      const match = input.match(/^(.*?)([:\d]*)$/);
+      let suffix = "";
+      if (match) {
+        input = match[1];
+        suffix = match[2];
+      }
+      const file = [
+        input,
+        `${input}.js`,
+        `${input}.mjs`,
+        `${input}.ts`
+      ].find((i) => existsSync(i));
+      if (file) {
+        await import('launch-editor').then((r) => (r.default || r)(file + suffix));
+      } else {
+        console.error("File not found:", input);
+      }
+    }
+  };
+  const clients = /* @__PURE__ */ new Set();
+  const birpc = createBirpcGroup(serverFunctions, []);
+  nuxt.hook("builder:watch", (e, path) => {
+    if (e === "change")
+      birpc.boardcast.refresh.asEvent(path);
+  });
+  const middleware = async (req, res) => {
+    if (req.ws) {
+      const ws = await req.ws();
+      clients.add(ws);
+      const channel = {
+        post: (d) => ws.send(d),
+        on: (fn) => ws.on("message", fn),
+        serialize: stringify,
+        deserialize: parse
+      };
+      birpc.updateChannels((c) => {
+        c.push(channel);
+      });
+      ws.on("close", () => {
+        clients.delete(ws);
+        birpc.updateChannels((c) => {
+          const index = c.indexOf(channel);
+          if (index >= 0)
+            c.splice(index, 1);
+        });
+      });
+    } else if (req.method === "POST") {
+      const body = await getBodyJson(req);
+      if (body.method === "setPayload") ; else {
+        res.statusCode = 400;
+      }
+      res.end();
+    }
+  };
+  return {
+    middleware,
+    birpc
+  };
+}
+function getBodyJson(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => body += chunk);
+    req.on("error", reject);
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body) || {});
+      } catch (e) {
+        reject(e);
+      }
+    });
+  });
+}
+
+function extractOgPayload(html) {
+  const payload = html.match(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.+?)<\/script>`))?.[1];
+  if (payload) {
+    return JSON.parse(payload);
+  }
+  return false;
+}
+const PATH = "/__nuxt_og_image__";
+const PATH_ENTRY = `${PATH}/entry`;
+const PATH_PLAYGROUND = `${PATH}/client`;
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-og-image",
@@ -76,57 +176,74 @@ const module = defineNuxtModule({
   },
   defaults(nuxt) {
     return {
+      experimentalNitroBrowser: false,
+      forcePrerender: !nuxt.options.dev && nuxt.options._generate,
       host: nuxt.options.runtimeConfig.public?.siteUrl,
       width: 1200,
-      height: 630,
-      defaultIslandComponent: "OgImageTemplate",
-      outputDir: "_og-images",
-      serverSideRender: nuxt.options.dev || (process.env.NITRO_PRESET || "").includes("edge")
+      height: 630
     };
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
+    const distResolve = (p) => {
+      const cwd = resolve(".");
+      if (cwd.endsWith("/dist"))
+        return resolve(p);
+      return resolve(`../dist/${p}`);
+    };
     nuxt.options.experimental.componentIslands = true;
     const isEdge = (process.env.NITRO_PRESET || "").includes("edge");
     addTemplate({
       filename: "nuxt-og-image.d.ts",
       getContents: () => {
         return `// Generated by nuxt-og-image
+interface NuxtOgImageNitroRules {
+  ogImage?: false | Record<string, any>
+}
 declare module 'nitropack' {
-  interface NitroRouteRules {
-    ogImage?: 'screenshot' | string | false
-  }
+  interface NitroRouteRules extends NuxtOgImageNitroRules {}
+  interface NitroRouteConfig extends NuxtOgImageNitroRules {}
 }
+export {}
 `;
       }
     });
     nuxt.hooks.hook("prepare:types", ({ references }) => {
       references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
     });
-    if (getNuxtVersion(nuxt) !== "3.0.0") {
+    ["html", "payload", "svg", "og.png"].forEach((type) => {
       addServerHandler({
-        handler: resolve("./runtime/nitro/html")
+        handler: resolve(`./runtime/nitro/routes/__og_image__/${type}`)
       });
-      if (config.serverSideRender) {
-        addServerHandler({
-          handler: resolve("./runtime/nitro/image")
-        });
-      }
-    }
-    addImports({
-      name: "defineOgImage",
-      from: resolve("./runtime/composables/defineOgImage")
     });
-    addImports({
-      name: "defineOgImageScreenshot",
-      from: resolve("./runtime/composables/defineOgImage")
+    if (nuxt.options.dev) {
+      const playgroundDir = distResolve("./client");
+      const {
+        middleware: rpcMiddleware
+      } = setupPlaygroundRPC(nuxt, config);
+      nuxt.hook("vite:serverCreated", (server) => {
+        server.middlewares.use(PATH_ENTRY, tinyws());
+        server.middlewares.use(PATH_ENTRY, rpcMiddleware);
+        if (existsSync(playgroundDir))
+          server.middlewares.use(PATH_PLAYGROUND, sirv(playgroundDir, { single: true, dev: true }));
+      });
+      addServerHandler({
+        handler: resolve("./runtime/nitro/routes/__og_image__/index")
+      });
+    }
+    ["defineOgImageDynamic", "defineOgImageStatic", "defineOgImageScreenshot"].forEach((name) => {
+      addImports({
+        name,
+        from: resolve("./runtime/composables/defineOgImage")
+      });
     });
     await addComponent({
       name: "OgImageTemplate",
       filePath: resolve("./runtime/components/OgImageTemplate.island.vue"),
+      global: true,
       island: true
     });
-    ["OgImage", "OgImageScreenshot"].forEach((name) => {
+    ["OgImageStatic", "OgImageDynamic", "OgImageScreenshot"].forEach((name) => {
       addComponent({
         name,
         filePath: resolve(`./runtime/components/${name}`),
@@ -135,67 +252,65 @@ declare module 'nitropack' {
     });
     const runtimeDir = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimeDir);
-    const constScript = Object.entries(Constants).map(([k, v]) => `export const ${k} = '${v}'`).join("\n");
-    nuxt.options.alias["#nuxt-og-image/constants"] = addTemplate({
-      filename: "nuxt-og-image-constants.mjs",
-      getContents: () => constScript
-    }).dst;
+    exposeConfig("#nuxt-og-image/constants", "nuxt-og-image-constants.mjs", Constants);
+    exposeConfig("#nuxt-og-image/config", "nuxt-og-image-config.mjs", config);
     nuxt.hooks.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = defu(nitroConfig.externals || {}, {
         inline: [runtimeDir]
       });
-      nitroConfig.virtual["#nuxt-og-image/constants"] = constScript;
-      nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/browsers/${isEdge ? "lambda" : "default"}'`;
-      if (isEdge) {
-        ["puppeteer", "bufferutil", "utf-8-validate"].forEach((name) => {
-          nitroConfig.alias[name] = "unenv/runtime/mock/proxy";
-        });
+      nitroConfig.publicAssets = nitroConfig.publicAssets || [];
+      nitroConfig.publicAssets.push({ dir: resolve("./runtime/public"), maxAge: 31536e3 });
+      nitroConfig.virtual["#nuxt-og-image/browser"] = `export { createBrowser } from '${runtimeDir}/nitro/browsers/${isEdge ? "lambda" : "default"}'`;
+      nitroConfig.virtual["#nuxt-og-image/provider"] = `
+      import satori from '${runtimeDir}/nitro/providers/satori'
+      import browser from '${runtimeDir}/nitro/providers/browser'
+
+      export function useProvider(provider) {
+        if (provider === 'satori')
+          return satori
+        if (provider === 'browser')
+          return browser
+      }
+      `;
+      if (config.experimentalNitroBrowser) {
+        nitroConfig.virtual["#nuxt-og-image/providers/browser"] = `export * from '${runtimeDir}/nitro/providers/browser'`;
+        if (isEdge) {
+          ["puppeteer", "bufferutil", "utf-8-validate"].forEach((name) => {
+            nitroConfig.alias[name] = "unenv/runtime/mock/proxy";
+          });
+        }
       }
     });
     nuxt.hooks.hook("nitro:init", async (nitro) => {
-      let entries = [];
-      let cleanupEntries = [];
+      let screenshotQueue = [];
       const _routeRulesMatcher = toRouteMatcher(
         createRouter({ routes: nitro.options.routeRules })
       );
-      const outputPath = join(nitro.options.output.publicDir, config.outputDir);
       nitro.hooks.hook("prerender:generate", async (ctx) => {
-        if (ctx.route.includes(".") || ctx.route.endsWith(HtmlRendererRoute))
+        if (ctx.route.includes(".") || ctx.route.endsWith("__og_image__/html"))
           return;
-        let html = ctx.contents;
+        const html = ctx.contents;
         if (!html)
           return;
-        if (!html.includes(`id="${PayloadScriptId}"`))
-          return;
+        const extractedPayload = extractOgPayload(html);
+        ctx.contents = html.replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "");
         const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
-        if (routeRules.ogImage === false)
+        if (!extractedPayload || routeRules.ogImage === false)
           return;
-        const screenshotPath = ctx._contents.match(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`))?.[1];
-        const fileName = `${hash({ route: ctx.route })}.png`;
-        const absoluteUrl = withBase(`${config.outputDir}/${fileName}`, config.host);
-        const entry = {
-          fileName,
-          absoluteUrl,
-          outputPath: joinURL(nitro.options.output.publicDir, config.outputDir, fileName),
-          linkingHtml: joinURL(nitro.options.output.publicDir, ctx.fileName),
-          route: ctx.route,
-          hasPayload: screenshotPath,
-          routeRules: routeRules.ogImage || "",
-          screenshotPath: screenshotPath || ctx.route
+        const payload = {
+          path: ctx.route,
+          ...extractedPayload,
+          ...routeRules.ogImage || {},
+          ctx
         };
-        entries.push(entry);
-        html = html.replace(MetaOgImageContentPlaceholder, entry.absoluteUrl);
-        ctx.contents = html;
+        if ((nuxt.options._generate || payload.prerender) && payload.provider === "browser")
+          screenshotQueue.push(payload);
       });
       if (nuxt.options.dev)
         return;
-      const outputOgImages = async () => {
-        if (entries.length === 0)
+      const captureScreenshots = async () => {
+        if (screenshotQueue.length === 0)
           return;
-        try {
-          await mkdir(outputPath, { recursive: true });
-        } catch (e) {
-        }
         const previewProcess = execa("npx", ["serve", nitro.options.output.publicDir]);
         let browser = null;
         try {
@@ -209,25 +324,34 @@ declare module 'nitropack' {
           })).trim();
           browser = await createBrowser();
           if (browser) {
-            nitro.logger.info(`Generating ${entries.length} og:images...`);
-            for (const k in entries) {
-              const entry = entries[k];
+            nitro.logger.info(`Pre-rendering ${screenshotQueue.length} og:image screenshots...`);
+            for (const k in screenshotQueue) {
+              const entry = screenshotQueue[k];
               const start = Date.now();
               let hasError = false;
+              const dirname = joinURL(nitro.options.output.publicDir, `${entry.ctx.fileName.replace("index.html", "")}__og_image__/`);
+              const filename = joinURL(dirname, "/og.png");
               try {
-                const imgBuffer = await screenshot(browser, `${host}${entry.screenshotPath}`, config);
-                await writeFile(entry.outputPath, imgBuffer);
+                const imgBuffer = await screenshot(browser, `${host}${entry.path}`, {
+                  ...config,
+                  ...entry
+                });
+                try {
+                  await mkdir(dirname, { recursive: true });
+                } catch (e) {
+                }
+                await writeFile(filename, imgBuffer);
               } catch (e) {
                 hasError = true;
                 console.error(e);
               }
               const generateTimeMS = Date.now() - start;
               nitro.logger.log(chalk[hasError ? "red" : "gray"](
-                `  ${Number(k) === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms) ${Math.round(Number(k) / (entries.length - 1) * 100)}%`
+                `  ${Number(k) === screenshotQueue.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} ${relative(nitro.options.output.publicDir, filename)} (${generateTimeMS}ms) ${Math.round((Number(k) + 1) / screenshotQueue.length * 100)}%`
               ));
             }
           } else {
-            nitro.logger.log(chalk.red("Failed to create browser to create og:images."));
+            nitro.logger.log(chalk.red("Failed to create a browser to create og:images."));
           }
         } catch (e) {
           console.error(e);
@@ -235,28 +359,13 @@ declare module 'nitropack' {
           await browser?.close();
           previewProcess.kill();
         }
-        cleanupEntries = [...entries];
-        entries = [];
+        screenshotQueue = [];
       };
       nitro.hooks.hook("rollup:before", async () => {
-        await outputOgImages();
+        await captureScreenshots();
       });
       nitro.hooks.hook("close", async () => {
-        await outputOgImages();
-        for (const entry of cleanupEntries) {
-          try {
-            const html = await readFile(entry.linkingHtml, "utf-8");
-            const newHtml = html.replace("__OG_IMAGE_SCREENSHOT_ALT", `Web page screenshot of ${entry.route}.`).replace(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`), "").replace(new RegExp(`<script id="${PayloadScriptId}" type="application/json">(.*?)<\/script>`), "").replace("\n\n", "\n");
-            if (html !== newHtml) {
-              await writeFile(entry.linkingHtml, newHtml, { encoding: "utf-8" });
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        }
-        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.publicDir, onlyDirectories: true });
-        for (const ogImageFolder of ogImageFolders)
-          await rm(join(nitro.options.output.publicDir, ogImageFolder), { recursive: true, force: true });
+        await captureScreenshots();
       });
     });
   }

package/dist/runtime/browserUtil.mjs

@@ -10,6 +10,8 @@ export async function screenshot(browser, url, options) {
     timeout: 1e4,
     waitUntil: "networkidle"
   });
+  if (options.delay)
+    await page.waitForTimeout(options.delay);
   if (options.mask) {
     await page.evaluate((mask) => {
       for (const el of document.querySelectorAll(mask))
@@ -17,6 +19,6 @@ export async function screenshot(browser, url, options) {
     }, options.mask);
   }
   if (options.selector)
-    await page.locator(options.selector).screenshot();
+    return await page.locator(options.selector).screenshot();
   return await page.screenshot();
 }

package/dist/runtime/components/OgImageDynamic.d.ts

@@ -0,0 +1,5 @@
+import type { OgImagePayload } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+    [x: string]: any;
+}>;
+export default _default;

package/dist/runtime/components/OgImageDynamic.mjs

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+import { defineOgImageDynamic } from "#imports";
+export default defineComponent({
+  name: "OgImageDynamic",
+  setup(_, { attrs }) {
+    defineOgImageDynamic(attrs);
+    return () => null;
+  }
+});

package/dist/runtime/components/OgImageScreenshot.d.ts

@@ -1,10 +1,6 @@
-declare const _default: import("vue").DefineComponent<{
-    title?: string | undefined;
-    description?: string | undefined;
-    component?: string | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    title?: string | undefined;
-    description?: string | undefined;
-    component?: string | undefined;
-}>, {}>;
+import type { OgImageScreenshotPayload } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageScreenshotPayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImageScreenshotPayload>>, {
+    [x: string]: any;
+    [x: number]: any;
+}>;
 export default _default;

package/dist/runtime/components/OgImageScreenshot.mjs

@@ -2,8 +2,8 @@ import { defineComponent } from "vue";
 import { defineOgImageScreenshot } from "#imports";
 export default defineComponent({
   name: "OgImageScreenshot",
-  setup() {
-    defineOgImageScreenshot();
+  setup(_, { attrs }) {
+    defineOgImageScreenshot(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImageStatic.d.ts

@@ -0,0 +1,5 @@
+import type { OgImagePayload } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImagePayload, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<OgImagePayload>>, {
+    [x: string]: any;
+}>;
+export default _default;

package/dist/runtime/components/{OgImage.mjs → OgImageStatic.mjs}

@@ -1,9 +1,9 @@
 import { defineComponent } from "vue";
-import { defineOgImage } from "#imports";
+import { defineOgImageStatic } from "#imports";
 export default defineComponent({
-  name: "OgImage",
+  name: "OgImageStatic",
   setup(_, { attrs }) {
-    defineOgImage(attrs);
+    defineOgImageStatic(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/OgImageTemplate.island.vue

@@ -7,89 +7,14 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="wrap">
-    <div class="bg1" />
-    <div class="bg2" />
-    <div>
-      <p>This is the default og:image template from <a href="https://github.com/harlan-zw/nuxt-og-image" target="_blank">nuxt-og-image</a>.</p>
-      <p>Create your own at <code>components/islands/OgImageTemplate.vue</code>.</p>
-    </div>
-    <div>
-      <strong>Payload</strong>
-      <code>
-        <pre>{{ props }}</pre>
-      </code>
+  <div :style="{ padding: '0 60px', width: '100%', height: '100%', backgroundColor: '#0c0c0c', backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)', display: 'flex', alignItems: 'center' }">
+    <div :style="{ padding: '0 30px', display: 'flex', flexDirection: 'column' }">
+      <p :style="{ fontSize: '60px', fontWeight: 'bold', marginBottom: '20px' }">
+        {{ title }}
+      </p>
+      <p :style="{ fontSize: '26px' }">
+        {{ description }}
+      </p>
     </div>
   </div>
 </template>
-
-<style scoped>
-.wrap {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  color: white;
-  font-weight: bold;
-  font-family: sans-serif;
-  background-color: #0c0c0c;
-  position: relative;
-}
-
-.bg1 {
-  top: 0;
-  left: 0;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0 !important;
-  margin: 0 !important;
-  background-color: #0c0c0c;
-}
-
-.bg2 {
-  top: 0;
-  left: 0;
-  z-index: 1;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: 0 !important;
-  margin: 0 !important;
-  background: radial-gradient(at 100% 100%, #0f766e, rgba(12, 12, 12, 0.1) 60%);
-}
-
-a {
-  color: inherit;
-  padding-bottom: 3px;
-  text-decoration: none;
-  border-bottom: 3px solid #ff8235;
-}
-
-.wrap > div {
-  z-index: 2;
-  padding: 2rem;
-}
-
-code pre {
-  background: #333;
-  color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  font-weight: lighter;
-  font-size: 1.1rem;
-}
-
-p {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-
-h1 {
-  font-size: 4rem;
-  margin: 0;
-}
-</style>

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

@@ -1,10 +1,5 @@
-export interface OgImagePayload {
-    runtime?: boolean;
-    title?: string;
-    description?: string;
-    component?: string;
-    alt?: string;
-    [key: string]: any;
-}
-export declare function defineOgImageScreenshot(): void;
+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;