nuxt-og-image 0.0.1

package/README.md

@@ -0,0 +1,277 @@
+<h1 align='center'>nuxt-og-image</h1>
+
+<p align="center">
+<a href='https://github.com/harlan-zw/nuxt-og-image/actions/workflows/test.yml'>
+</a>
+<a href="https://www.npmjs.com/package/nuxt-og-image" target="__blank"><img src="https://img.shields.io/npm/v/nuxt-og-image?style=flat&colorA=002438&colorB=28CF8D" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/nuxt-og-image" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/nuxt-og-image?flat&colorA=002438&colorB=28CF8D"></a>
+<a href="https://github.com/harlan-zw/nuxt-og-image" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/harlan-zw/nuxt-og-image?flat&colorA=002438&colorB=28CF8D"></a>
+</p>
+
+
+<p align="center">
+Generate social share images for your pre-rendered Nuxt v3 app.
+</p>
+
+<p align="center">
+<table>
+<tbody>
+<td align="center">
+<img width="800" height="0" /><br>
+<i>Status:</i> Early Access</b> <br>
+<sup> Please report any issues 🐛</sup><br>
+<sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help</sub><br>
+<img width="800" height="0" />
+</td>
+</tbody>
+</table>
+</p>
+
+## Features
+
+- 🔄 Configure using route rules
+- 📸 Generates site screenshots
+- 🎨 OR build your own template with Vue (powered by Nuxt islands)
+
+## Install
+
+```bash
+npm install --save-dev nuxt-og-image
+
+# Using yarn
+yarn add --dev nuxt-og-image
+```
+
+## Setup
+
+_nuxt.config.ts_
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'nuxt-og-image',
+  ],
+})
+```
+
+To have routes included for og:image creation automatically, they need to be pre-rendered by Nitro.
+
+```ts
+export default defineNuxtConfig({
+  nitro: {
+    prerender: {
+      crawlLinks: true,
+      routes: [
+        '/',
+        // any URLs that can't be discovered by crawler
+        '/my-hidden-url'
+      ]
+    }
+  }
+})
+```  
+
+## Default Behaviour
+
+By default, all pre-rendered routes will generate an og:image of a screenshot of the page.
+
+## Using a template
+
+You can create your own template to use for generating og:image. This is done with 
+Nuxt islands.
+
+### Requirements
+
+To use this feature you will need to opt in to the edge channel, see [the instructions](https://nuxt.com/docs/guide/going-further/edge-channel#edge-release-channel).
+
+The `componentIslands` experimental feature is required for this module to work and will is enabled for you.
+
+### Setup
+
+#### Create the Island component
+
+Firstly, you're going to create the Vue component to be used to render the og:image.
+
+Create the file at `components/islands/OgImageDefault.vue`.
+
+```vue
+<script setup lang="ts">
+const props = defineProps({
+  // payload props
+  path: String,
+  title: String,
+  description: String,
+  // add your own props here
+  myCustomProp: String
+})
+</script>
+
+<template>
+  <div class="wrap">
+    <div>
+      <h1>
+        {{ title }}
+      </h1>
+      <p>{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-family: sans-serif;
+  background: linear-gradient(to bottom, #30e8bf, #ff8235);
+}
+
+h1 {
+  font-size: 4rem;
+  margin: 0;
+}
+</style>
+```
+
+#### Configure the payload
+
+Within a page 
+
+### Set host
+
+You'll need to provide the host of your site in order to generate the sitemap.xml.
+
+```ts
+export default defineNuxtConfig({
+  // Recommended 
+  runtimeConfig: {
+    siteUrl: 'https://example.com',
+  },
+  // OR 
+  sitemap: {
+    hostname: 'https://example.com',
+  },
+})
+```
+
+
+## Route Rules
+
+To change the behavior of the sitemap, you can use route rules. Route rules are provided as [Nitro route rules](https://v3.nuxtjs.org/docs/directory-structure/nitro/#route-rules).
+
+_nuxt.config.ts_
+
+```ts
+export default defineNuxtConfig({
+  routeRules: {
+    // Don't add any /secret/** URLs to the sitemap  
+    '/secret/**': { index: false },
+    // modify the sitemap entry for specific URLs
+    '/about': { sitemap: { changefreq: 'daily', priority: 0.3 } }
+  }
+})
+```
+
+The following options are available for each route rule:
+
+- `index`: Whether to include the route in the sitemap.xml. Defaults to `true`.
+- `sitemap.changefreq`: The change frequency of the route.
+- `sitemap.priority`: The priority of the route. 
+
+## Module Config
+
+If you need further control over the sitemap URLs, you can provide config on the `sitemap` key.
+
+### `host`
+
+- Type: `string`
+- Default: `undefined`
+- Required: `true`
+
+The host of your site. This is required to generate the sitemap.xml.
+
+### `trailingSlash`
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to add a trailing slash to the URLs in the sitemap.xml.
+
+### `enabled`
+
+- Type: `boolean`
+- Default: `true`
+
+Whether to generate the sitemap.xml.
+
+### `include`
+
+- Type: `string[]`
+- Default: `undefined`
+
+Filter routes that match the given rules.
+
+```ts
+export default defineNuxtConfig({
+  sitemap: {
+    include: [
+      '/my-hidden-url'
+    ]
+  }
+})
+```
+
+### `exclude`
+
+- Type: `string[]`
+- Default: `undefined`
+
+Filter routes that match the given rules.
+
+```ts
+export default defineNuxtConfig({
+  sitemap: {
+    exclude: [
+        '/my-secret-section/**'
+    ]
+  }
+})
+```
+
+Additional config extends [sitemap.js](https://github.com/ekalinin/sitemap.js).
+
+## Examples
+
+### Add custom routes without pre-rendering
+
+```ts
+export default defineNuxtConfig({
+  hooks: {
+      'sitemap:generate': (ctx) => {
+          // add custom URLs
+          ctx.urls.push({
+              url: '/my-custom-url',
+              changefreq: 'daily',
+              priority: 0.3
+          })
+      }
+  }
+})
+```
+
+## Sponsors
+
+<p align="center">
+  <a href="https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg">
+    <img src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/>
+  </a>
+</p>
+
+
+## License
+
+MIT License © 2022-PRESENT [Harlan Wilton](https://github.com/harlan-zw)

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,46 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ScreenshotOptions {
+    colorScheme?: 'dark' | 'light';
+    selector?: string;
+    mask?: string;
+    /**
+     * The width of the screenshot.
+     *
+     * @default 1200
+     */
+    width: number;
+    /**
+     * The height of the screenshot.
+     *
+     * @default 630
+     */
+    height: number;
+}
+declare module 'nitropack' {
+    interface NitroRouteRules {
+        ogImage?: 'screenshot' | string | false;
+        ogImagePayload?: Record<string, any>;
+    }
+}
+
+interface ModuleOptions extends ScreenshotOptions {
+    defaultIslandComponent: string;
+    /**
+     * The directory within `public` where the og images will be stored.
+     *
+     * @default "_og-images"
+     */
+    outputDir: string;
+    /**
+     * The hostname of your website.
+     */
+    host: string;
+    /**
+     * Should images be allowed to generated at runtime.
+     */
+    runtimeImages: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-og-image",
+  "compatibility": {
+    "nuxt": "^3.0.0",
+    "bridge": false
+  },
+  "configKey": "ogImage",
+  "version": "0.0.1"
+}

package/dist/module.mjs

@@ -0,0 +1,214 @@
+import { mkdir, writeFile, readFile, rm } from 'node:fs/promises';
+import { defineNuxtModule, createResolver, addTemplate, 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 } from 'ufo';
+import fg from 'fast-glob';
+
+async function createLambdaBrowser() {
+  try {
+    const playwright = await import('playwright-core');
+    const awsChrome = await import('chrome-aws-lambda');
+    return await playwright.chromium.launch({
+      args: awsChrome.args,
+      executablePath: await awsChrome.executablePath,
+      headless: awsChrome.headless
+    });
+  } catch (e) {
+  }
+  return false;
+}
+async function createBrowser() {
+  const lambdaBrowser = await createLambdaBrowser();
+  if (lambdaBrowser)
+    return lambdaBrowser;
+  const playwright = await import('playwright');
+  return await playwright.chromium.launch({
+    chromiumSandbox: true
+  });
+}
+async function screenshot(browser, url, options) {
+  const page = await browser.newPage({
+    colorScheme: options.colorScheme
+  });
+  await page.setViewportSize({
+    width: options.width,
+    height: options.height
+  });
+  await page.goto(url, {
+    timeout: 1e4,
+    waitUntil: "networkidle"
+  });
+  if (options.mask) {
+    await page.evaluate((mask) => {
+      for (const el of document.querySelectorAll(mask))
+        el.style.display = "none";
+    }, options.mask);
+  }
+  if (options.selector)
+    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 module = defineNuxtModule({
+  meta: {
+    name: "nuxt-og-image",
+    compatibility: {
+      nuxt: "^3.0.0",
+      bridge: false
+    },
+    configKey: "ogImage"
+  },
+  defaults(nuxt) {
+    return {
+      host: nuxt.options.runtimeConfig.public?.siteUrl,
+      width: 1200,
+      height: 630,
+      defaultIslandComponent: "OgImage",
+      outputDir: "_og-images",
+      runtimeImages: nuxt.options.dev
+    };
+  },
+  async setup(config, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.experimental.componentIslands = true;
+    addTemplate({
+      filename: "nuxt-og-image.d.ts",
+      getContents: () => {
+        return `// Generated by nuxt-og-image
+declare module 'nitropack' {
+  interface NitroRouteRules {
+    ogImage?: 'screenshot' | string | false
+  }
+}
+`;
+      }
+    });
+    nuxt.hooks.hook("prepare:types", ({ references }) => {
+      references.push({ path: resolve(nuxt.options.buildDir, "nuxt-og-image.d.ts") });
+    });
+    addServerHandler({
+      handler: resolve("./runtime/nitro/html")
+    });
+    if (config.runtimeImages) {
+      addServerHandler({
+        handler: resolve("./runtime/nitro/image")
+      });
+    }
+    addImports({
+      name: "defineOgImage",
+      from: resolve("./runtime/composables/defineOgImage")
+    });
+    addComponent({
+      name: "OgImage",
+      filePath: resolve("./runtime/components/OgImage.vue"),
+      island: true
+    });
+    nuxt.hooks.hook("nitro:init", async (nitro) => {
+      const entries = [];
+      const _routeRulesMatcher = toRouteMatcher(
+        createRouter({ routes: nitro.options.routeRules })
+      );
+      const outputPath = `${nitro.options.output.dir}/public/${config.outputDir}`;
+      nitro.hooks.hook("prerender:generate", async (ctx) => {
+        if (ctx.route.includes(".") || ctx.route.endsWith(HtmlRendererRoute))
+          return;
+        let html = ctx.contents;
+        if (!html)
+          return;
+        const routeRules = defu({}, ..._routeRulesMatcher.matchAll(ctx.route).reverse());
+        if (routeRules.ogImage === false)
+          return;
+        const screenshotPath = ctx._contents.match(new RegExp(`<link id="${LinkPrerenderId}" rel="prerender" href="(.*?)">`))?.[1];
+        const fileName = `${hash({ route: ctx.route, time: Date.now() })}.png`;
+        const absoluteUrl = withBase(`${config.outputDir}/${fileName}`, config.host);
+        const entry = {
+          fileName,
+          absoluteUrl,
+          outputPath: `${nitro.options.output.dir}/public/${config.outputDir}/${fileName}`,
+          route: ctx.route,
+          routeRules: routeRules.ogImage || "",
+          screenshotPath: screenshotPath || ctx.route
+        };
+        entries.push(entry);
+        html = html.replace(MetaOgImageContentPlaceholder, entry.absoluteUrl);
+        ctx.contents = html;
+      });
+      if (nuxt.options.dev)
+        return;
+      const outputOgImages = async () => {
+        if (entries.length === 0)
+          return;
+        try {
+          await mkdir(outputPath, { recursive: true });
+        } catch (e) {
+        }
+        const previewProcess = execa("npx", ["serve", `${nitro.options.output.dir}/public`]);
+        try {
+          previewProcess.stderr?.pipe(process.stderr);
+          const host = (await new Promise((resolve2) => {
+            previewProcess.stdout?.on("data", (data) => {
+              if (data.includes("Accepting connections at")) {
+                resolve2(data.toString().split("Accepting connections at ")[1]);
+              }
+            });
+          })).trim();
+          const browser = await createBrowser();
+          nitro.logger.info(`Generating ${entries.length} og:image screenshots`);
+          try {
+            const imageGenPromises = entries.map(async (entry, index) => {
+              return new Promise((resolve2) => {
+                const start = Date.now();
+                screenshot(browser, `${host}${entry.screenshotPath}`, config).then((imgBuffer) => {
+                  writeFile(entry.outputPath, imgBuffer).then(() => {
+                    const generateTimeMS = Date.now() - start;
+                    nitro.logger.log(chalk.gray(
+                      `  ${index === entries.length - 1 ? "\u2514\u2500" : "\u251C\u2500"} /${config.outputDir}/${entry.fileName} (${generateTimeMS}ms)`
+                    ));
+                    resolve2();
+                  });
+                });
+              });
+            });
+            await Promise.all(imageGenPromises);
+          } catch (e) {
+            console.error(e);
+          } finally {
+            await browser.close();
+          }
+        } catch (e) {
+          console.error(e);
+        } finally {
+          previewProcess.kill();
+        }
+        const htmlFiles = await fg(["**/*.html"], { cwd: nitro.options.output.dir });
+        for (const htmlFile of htmlFiles) {
+          const html = await readFile(`${nitro.options.output.dir}/${htmlFile}`, "utf-8");
+          const newHtml = html.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(`${nitro.options.output.dir}/${htmlFile}`, newHtml, { encoding: "utf-8" });
+          }
+        }
+        const ogImageFolders = await fg([`**/${HtmlRendererRoute}`], { cwd: nitro.options.output.dir, onlyDirectories: true });
+        for (const ogImageFolder of ogImageFolders)
+          await rm(`${nitro.options.output.dir}/${ogImageFolder}`, { recursive: true, force: true });
+      };
+      nitro.hooks.hook("rollup:before", async () => {
+        await outputOgImages();
+      });
+      nitro.hooks.hook("close", async () => {
+        await outputOgImages();
+      });
+    });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/OgImage.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+const props = defineProps({
+  path: String,
+  title: String,
+  description: String,
+})
+</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/OgImage.vue</code>.</p>
+    </div>
+    <div>
+      <strong>Payload</strong>
+      <code>
+        <pre>{{ props }}</pre>
+      </code>
+    </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

@@ -0,0 +1,8 @@
+export interface OgImagePayload {
+    runtime: boolean;
+    title: string;
+    description: string;
+    component: string;
+    [key: string]: any;
+}
+export declare function defineOgImage(options: OgImagePayload): void;

package/dist/runtime/composables/defineOgImage.mjs

@@ -0,0 +1,35 @@
+import { useServerHead } from "@vueuse/head";
+import {
+  HtmlRendererRoute,
+  LinkPrerenderId,
+  MetaOgImageContentPlaceholder,
+  PayloadScriptId,
+  RuntimeImageSuffix
+} from "../../const";
+export function defineOgImage(options) {
+  if (process.server) {
+    const router = useRouter();
+    useServerHead({
+      meta: [
+        {
+          property: "og:image",
+          content: () => options.runtime ? `${router.currentRoute.value.path}/${RuntimeImageSuffix}` : MetaOgImageContentPlaceholder
+        }
+      ],
+      link: [
+        {
+          id: LinkPrerenderId,
+          rel: "prerender",
+          href: `${router.currentRoute.value.path}/${HtmlRendererRoute}`
+        }
+      ],
+      script: [
+        {
+          id: PayloadScriptId,
+          type: "application/json",
+          children: () => JSON.stringify(options)
+        }
+      ]
+    });
+  }
+}

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

@@ -0,0 +1,4 @@
+export declare const extractOgPayload: (html: string) => any;
+export declare const inferOgPayload: (html: string) => Record<string, any>;
+declare const _default: import("h3").EventHandler<string | undefined>;
+export default _default;

package/dist/runtime/nitro/html.mjs

@@ -0,0 +1,55 @@
+import { withQuery } from "ufo";
+import { renderSSRHead } from "@unhead/ssr";
+import { createHeadCore } from "@unhead/vue";
+import { defineEventHandler, getQuery } from "h3";
+import { HtmlRendererRoute, PayloadScriptId } from "../../const";
+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(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.template || "OgImage"}`, {
+    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

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

package/dist/runtime/nitro/image.mjs

@@ -0,0 +1,15 @@
+import { defineEventHandler, getRequestHeader, setHeader } from "h3";
+import { HtmlRendererRoute, RuntimeImageSuffix } from "../../const";
+import { createBrowser, screenshot } from "../../browserService";
+export default defineEventHandler(async (e) => {
+  if (!e.path?.endsWith(RuntimeImageSuffix))
+    return;
+  const path = e.path.replace(RuntimeImageSuffix, HtmlRendererRoute);
+  const host = getRequestHeader(e, "host") || "localhost:3000";
+  const browser = await createBrowser();
+  setHeader(e, "Content-Type", "image/png");
+  return await screenshot(browser, `http${host.startsWith("localhost") ? "" : "s"}://${host}/${path}`, {
+    width: 1200,
+    height: 630
+  });
+});

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['ogImage']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ogImage']?: ModuleOptions }
+}
+
+
+export { ModuleOptions, default } from './module'

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "nuxt-og-image",
+  "type": "module",
+  "version": "0.0.1",
+  "packageManager": "pnpm@7.8.0",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/harlan-zw",
+  "homepage": "https://github.com/harlan-zw/nuxt-og-image#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/harlan-zw/nuxt-og-image.git"
+  },
+  "bugs": {
+    "url": "https://github.com/harlan-zw/nuxt-og-image/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "3.0.0",
+    "chalk": "^5.2.0",
+    "defu": "^6.1.1",
+    "execa": "^6.1.0",
+    "fast-glob": "^3.2.12",
+    "ohash": "^1.0.0",
+    "playwright": "^1.28.1",
+    "radix3": "^1.0.0",
+    "ufo": "^1.0.1"
+  },
+  "unbuild": {
+    "externals": [
+      "playwright",
+      "playwright-core",
+      "chrome-aws-lambda"
+    ]
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.33.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",
+    "bumpp": "^8.2.1",
+    "chrome-aws-lambda": "^10.1.0",
+    "eslint": "8.29.0",
+    "nuxt": "npm:nuxt3@latest",
+    "pathe": "^1.0.0",
+    "playwright-chromium": "^1.28.1",
+    "playwright-core": "^1.28.1",
+    "vitest": "^0.25.5"
+  },
+  "scripts": {
+    "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",
+    "release": "bumpp package.json --commit --push --tag",
+    "test": "pnpm lint"
+  }
+}