nuxt-og-image 2.0.0-beta.59 → 2.0.0-beta.60

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -2,9 +2,9 @@ import { Buffer } from "node:buffer";
 import { createError, defineEventHandler, sendRedirect, setHeader } from "h3";
 import { joinURL, parseURL, withoutTrailingSlash } from "ufo";
 import { prefixStorage } from "unstorage";
-import { fetchOptions, useHostname } from "../utils.mjs";
+import { fetchOptions } from "../utils.mjs";
 import { useProvider } from "#nuxt-og-image/provider";
-import { useRuntimeConfig, useStorage } from "#imports";
+import { useNitroOrigin, useRuntimeConfig, useStorage } from "#imports";
 export default defineEventHandler(async (e) => {
   const { runtimeBrowser, runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
   const path = parseURL(e.path).pathname;
@@ -15,7 +15,7 @@ export default defineEventHandler(async (e) => {
   );
   const options = await fetchOptions(e, basePath);
   if (process.env.NODE_ENV === "production" && !process.env.prerender && !runtimeBrowser && options.provider === "browser")
-    return sendRedirect(e, joinURL(useHostname(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
+    return sendRedirect(e, joinURL(useNitroOrigin(e), "__nuxt_og_image__/browser-provider-not-supported.png"));
   const provider = await useProvider(options.provider);
   if (!provider) {
     throw createError({
@@ -23,9 +23,11 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
-  const useCache = runtimeCacheStorage && !process.dev && options.cacheTtl && options.cacheTtl > 0;
-  const cache = prefixStorage(useStorage(), "og-image-cache:images");
-  const key = options.cacheKey || e.node.req.url;
+  const useCache = runtimeCacheStorage && !process.dev && options.cacheTtl && options.cacheTtl > 0 && options.cache;
+  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
+  const cache = prefixStorage(useStorage(), `${baseCacheKey}/images`);
+  let key = options.cacheKey || e.node.req.url.replace("/__og_image__/og.png", "");
+  key = key === "/" || !key ? "index" : key;
   let png;
   if (useCache && await cache.hasItem(key)) {
     const { value, expiresAt } = await cache.getItem(key);
@@ -52,7 +54,7 @@ export default defineEventHandler(async (e) => {
     }
   }
   if (png) {
-    if (!process.dev && options.static) {
+    if (!process.dev && options.cache) {
       setHeader(e, "Cache-Control", "public, max-age=31536000");
     } else {
       setHeader(e, "Cache-Control", "no-cache, no-store, must-revalidate");

package/dist/runtime/nitro/plugins/prerender.mjs

@@ -2,11 +2,13 @@ import { appendHeader } from "h3";
 import { joinURL } from "ufo";
 import { prefixStorage } from "unstorage";
 import { extractOgImageOptions } from "../utils-pure.mjs";
-import { useStorage } from "#imports";
+import { useStorage, useRuntimeConfig } from "#imports";
 const OgImagePrenderNitroPlugin = (nitroApp) => {
   if (!process.env.prerender)
     return;
-  const cache = prefixStorage(useStorage(), "og-image-cache:options");
+  const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
+  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
+  const cache = prefixStorage(useStorage(), `${baseCacheKey}/options`);
   nitroApp.hooks.hook("render:html", async (ctx, { event }) => {
     const url = event.node.req.url;
     if (url.includes(".") || url.startsWith("/__nuxt_island/"))
@@ -14,12 +16,12 @@ const OgImagePrenderNitroPlugin = (nitroApp) => {
     const options = extractOgImageOptions(ctx.head.join("\n"));
     if (!options)
       return;
-    await cache.setItem(url, {
+    await cache.setItem(url === "/" || !url ? "index" : url, {
       value: JSON.stringify(options),
       expiresAt: Date.now() + 60 * 60 * 1e3
       // 60 minutes to prerender
     });
-    if (options.static && options.provider === "satori")
+    if (options.provider === "satori")
       appendHeader(event, "x-nitro-prerender", joinURL(url, "/__og_image__/og.png"));
   });
 };

package/dist/runtime/nitro/routes/debug.d.ts

@@ -1,4 +1,8 @@
 declare const _default: import("h3").EventHandler<{
+    siteConfigUrl: {
+        value: any;
+        source: any;
+    };
     runtimeConfig: any;
 }>;
 export default _default;

package/dist/runtime/nitro/routes/debug.mjs

@@ -1,9 +1,14 @@
 import { defineEventHandler, setHeader } from "h3";
-import { useRuntimeConfig } from "#imports";
+import { useRuntimeConfig, useSiteConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useRuntimeConfig()["nuxt-og-image"];
+  const siteConfig = await useSiteConfig(e);
   return {
+    siteConfigUrl: {
+      value: siteConfig.url,
+      source: siteConfig._context.url || "unknown"
+    },
     runtimeConfig
   };
 });

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

@@ -4,8 +4,8 @@ import { createHeadCore } from "@unhead/vue";
 import { createError, defineEventHandler, getQuery, sendRedirect } from "h3";
 import { hash } from "ohash";
 import twemoji from "twemoji";
-import { fetchOptions, useHostname } from "../utils.mjs";
-import { useRuntimeConfig } from "#imports";
+import { fetchOptions } from "../utils.mjs";
+import { useNitroOrigin, useRuntimeConfig } from "#imports";
 export default defineEventHandler(async (e) => {
   const { fonts, defaults, satoriOptions } = useRuntimeConfig()["nuxt-og-image"];
   const query = getQuery(e);
@@ -23,7 +23,7 @@ export default defineEventHandler(async (e) => {
     options = await fetchOptions(e, path);
   if (options.provider === "browser" && !options.component) {
     const pathWithoutBase = path.replace(new RegExp(`^${useRuntimeConfig().app.baseURL}`), "");
-    return sendRedirect(e, withBase(pathWithoutBase, useHostname(e)));
+    return sendRedirect(e, withBase(pathWithoutBase, useNitroOrigin(e)));
   }
   if (!options.component) {
     throw createError({
@@ -135,7 +135,7 @@ img.emoji {
         const href = stylesheet.match(/href="(.*?)"/)[1];
         try {
           let css = await (await $fetch(href, {
-            baseURL: useHostname(e)
+            baseURL: useNitroOrigin(e)
           })).text();
           if (css.includes("const __vite__css =")) {
             css = css.match(/const __vite__css = "(.*)"/)[1].replace(/\\n/g, "\n");
@@ -151,7 +151,7 @@ img.emoji {
     if (hasInlineStyles) {
       const inlineCss = await import("inline-css").then((m) => m?.default || m);
       htmlTemplate = inlineCss(htmlTemplate, {
-        url: useHostname(e),
+        url: useNitroOrigin(e),
         applyLinkTags: false,
         removeLinkTags: false,
         removeStyleTags: false

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

@@ -2,7 +2,6 @@
 import { Buffer } from 'node:buffer';
 import type { H3Event } from 'h3';
 import type { RuntimeOgImageOptions } from '../../types';
-export * from './util-hostname';
 export declare function wasmLoader(asyncModuleLoad: Promise<any> | Buffer | string, fallback: string): {
     load(options: RuntimeOgImageOptions): Promise<any>;
 };

package/dist/runtime/nitro/utils.mjs

@@ -4,9 +4,7 @@ import { getQuery } from "h3";
 import { join } from "pathe";
 import { prefixStorage } from "unstorage";
 import sizeOf from "image-size";
-import { useHostname } from "./util-hostname.mjs";
-import { useRuntimeConfig, useStorage } from "#imports";
-export * from "./util-hostname.mjs";
+import { useNitroOrigin, useRuntimeConfig, useStorage } from "#imports";
 export function wasmLoader(asyncModuleLoad, fallback) {
   let promise;
   let wasm;
@@ -40,14 +38,17 @@ export function wasmLoader(asyncModuleLoad, fallback) {
 }
 export async function fetchOptions(e, path) {
   const { runtimeCacheStorage } = useRuntimeConfig()["nuxt-og-image"];
-  const cache = runtimeCacheStorage || process.env.prerender ? prefixStorage(useStorage(), "og-image-cache:options") : false;
+  const baseCacheKey = runtimeCacheStorage === "default" ? "/cache/og-image" : "/og-image";
+  const cache = runtimeCacheStorage || process.env.prerender ? prefixStorage(useStorage(), `${baseCacheKey}/options`) : false;
+  let key = e.node.req.url.replace("/__og_image__/og.png", "");
+  key = key === "/" || !key ? "index" : key;
   let options;
-  if (cache && await cache.hasItem(path)) {
-    const cachedValue = await cache.getItem(path);
+  if (!process.dev && cache && await cache.hasItem(key)) {
+    const cachedValue = await cache.getItem(key);
     if (cachedValue && cachedValue.value && cachedValue.expiresAt < Date.now())
       options = cachedValue.value;
     else
-      await cache.removeItem(path);
+      await cache.removeItem(key);
   }
   if (!options) {
     options = await globalThis.$fetch("/api/og-image-options", {
@@ -57,9 +58,9 @@ export async function fetchOptions(e, path) {
       responseType: "json"
     });
     if (cache) {
-      await cache.setItem(path, {
+      await cache.setItem(key, {
         value: options,
-        expiresAt: Date.now() + (options.static ? 60 * 60 * 1e3 : 5 * 1e3)
+        expiresAt: Date.now() + (options.cache ? 60 * 60 * 1e3 : 5 * 1e3)
       });
     }
   }
@@ -67,7 +68,7 @@ export async function fetchOptions(e, path) {
     ...options,
     // use query data
     ...getQuery(e),
-    requestOrigin: useHostname(e)
+    requestOrigin: useNitroOrigin(e)
   };
 }
 export function base64ToArrayBuffer(base64) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.59",
+  "version": "2.0.0-beta.60",
   "packageManager": "pnpm@8.6.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -31,20 +31,21 @@
     "@resvg/resvg-wasm": "^2.4.1",
     "@types/fs-extra": "^11.0.1",
     "birpc": "^0.2.12",
-    "chalk": "^5.2.0",
+    "chalk": "^5.3.0",
     "chrome-launcher": "^0.15.2",
     "defu": "^6.1.2",
     "execa": "^7.1.1",
-    "fast-glob": "^3.2.12",
+    "fast-glob": "^3.3.0",
     "flatted": "^3.2.7",
     "fs-extra": "^11.1.1",
-    "globby": "^13.2.0",
+    "globby": "^13.2.1",
     "image-size": "^1.0.2",
     "inline-css": "^4.0.2",
     "launch-editor": "^2.6.0",
-    "nuxt-icon": "^0.4.1",
-    "nuxt-site-config": "^0.3.1",
-    "nypm": "^0.2.1",
+    "nuxt-icon": "^0.4.2",
+    "nuxt-site-config": "^0.7.5",
+    "nuxt-site-config-kit": "^0.7.5",
+    "nypm": "^0.2.2",
     "ofetch": "^1.1.1",
     "ohash": "^1.1.2",
     "pathe": "^1.1.1",
@@ -62,16 +63,17 @@
     "yoga-wasm-web": "^0.3.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.5",
-    "@nuxt/devtools-edge": "0.6.4-28129679.fb5a846",
+    "@antfu/eslint-config": "^0.39.6",
+    "@nuxt/devtools-edge": "0.6.6-28135918.e26a136",
     "@nuxt/module-builder": "^0.4.0",
     "@nuxt/test-utils": "3.6.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/ws": "^8.5.5",
     "bumpp": "^9.1.1",
-    "eslint": "8.43.0",
+    "eslint": "8.44.0",
     "jest-image-snapshot": "^6.1.0",
     "nuxt": "^3.6.1",
+    "playwright": "^1.35.1",
     "sass": "^1.63.6",
     "vitest": "^0.32.2"
   },

package/dist/client/_nuxt/IconCSS.8bbd2aa2.css

@@ -1 +0,0 @@
-span[data-v-46d643c4]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--243647bc);mask-image:var(--243647bc);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}

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

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  path: String,
-  title: {
-    type: String,
-    default: 'Og Image Template',
-  },
-  description: {
-    type: String,
-    default: 'Set a description to change me.',
-  },
-  background: {
-    type: String,
-    default: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)',
-  },
-  color: {
-    type: String,
-  },
-  padding: {
-    type: String,
-    default: '0 100px',
-  },
-  titleFontSize: {
-    type: String,
-    default: '60px',
-  },
-  descriptionFontSize: {
-    type: String,
-    default: '26px',
-  },
-})
-
-// inherited attrs can mess up the satori parser
-defineOptions({
-  inheritAttrs: false,
-})
-
-const containerAttrs = computed(() => {
-  const isBackgroundTw = props.background?.startsWith('bg-')
-  const isColorTw = props.color?.startsWith('text-')
-
-  const classes = [
-    'w-full',
-    'h-full',
-    'flex',
-    'items-center',
-    'justify-center',
-  ]
-  const styles: Record<string, any> = {
-    padding: props.padding,
-  }
-
-  if (isBackgroundTw)
-    classes.push(props.background)
-  else if (props.background)
-    styles.background = props.background
-
-  if (isColorTw)
-    classes.push(props.color)
-  else
-    styles.color = props.color
-  return { class: classes, style: styles }
-})
-
-const titleAttrs = computed(() => {
-  const classes = []
-  const styles = {
-    fontWeight: 'bold',
-    marginBottom: '20px',
-    fontSize: props.titleFontSize,
-  }
-  return { class: classes, style: styles }
-})
-
-const descriptionAttrs = computed(() => {
-  const classes = []
-  const styles = {
-    fontSize: props.descriptionFontSize,
-  }
-  return { class: classes, style: styles }
-})
-</script>
-
-<template>
-  <div v-bind="containerAttrs">
-    <div class="flex flex-col w-full">
-      <div v-bind="titleAttrs">
-        {{ title || 'Null Title' }}
-      </div>
-      <div v-if="description" v-bind="descriptionAttrs">
-        {{ description }}
-      </div>
-    </div>
-  </div>
-</template>

package/dist/runtime/nitro/util-hostname.d.ts

@@ -1,2 +0,0 @@
-import type { H3Event } from 'h3';
-export declare function useHostname(e: H3Event): string;

package/dist/runtime/nitro/util-hostname.mjs

@@ -1,20 +0,0 @@
-import { getRequestHost, getRequestProtocol } from "h3";
-import { withBase, withoutProtocol } from "ufo";
-import { useRuntimeConfig } from "#imports";
-export function useHostname(e) {
-  const base = useRuntimeConfig().app.baseURL;
-  let host = getRequestHost(e, { xForwardedHost: true });
-  if (host === "localhost")
-    host = process.env.NITRO_HOST || process.env.HOST || host;
-  let protocol = getRequestProtocol(e, { xForwardedProto: true });
-  if (process.dev && process.env.NUXT_VITE_NODE_OPTIONS) {
-    const envHost = JSON.parse(process.env.NUXT_VITE_NODE_OPTIONS).baseURL.replace("__nuxt_vite_node__", "");
-    host = withoutProtocol(envHost);
-    protocol = envHost.includes("https") ? "https" : "http";
-  }
-  const useHttp = process.dev || host.includes("127.0.0.1") || host.includes("localhost") || protocol === "http";
-  let port = host.includes(":") ? host.split(":").pop() : false;
-  if ((process.dev || process.env.prerender || host.includes("localhost")) && !port)
-    port = process.env.NITRO_PORT || process.env.PORT;
-  return withBase(base, `http${useHttp ? "" : "s"}://${host.includes(":") ? host.split(":")[0] : host}${port ? `:${port}` : ""}`);
-}