nuxt-og-image 3.0.0-rc.9 → 3.0.1

package/dist/runtime/core/utils/resolveRendererContext.d.ts

@@ -1,3 +0,0 @@
-import type { H3Error, H3Event } from 'h3';
-import type { OgImageRenderEventContext } from '../../types';
-export declare function resolveRendererContext(e: H3Event): Promise<H3Error | OgImageRenderEventContext>;

package/dist/runtime/core/utils/resolveRendererContext.mjs

@@ -1,97 +0,0 @@
-import { parseURL, withQuery, withoutBase, withoutTrailingSlash } from "ufo";
-import { createError, getQuery } from "h3";
-import { defu } from "defu";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { fetchPathHtmlAndExtractOptions } from "../options/fetch.mjs";
-import { prerenderOptionsCache } from "../cache/prerender.mjs";
-import { useChromiumRenderer, useSatoriRenderer } from "../renderers/satori/instances.mjs";
-import { separateProps, useOgImageRuntimeConfig } from "../../utils.mjs";
-import { resolvePathCacheKey } from "../../nitro/utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
-import { useNitroApp } from "#internal/nitro/app";
-export async function resolveRendererContext(e) {
-  const runtimeConfig = useOgImageRuntimeConfig();
-  const path = parseURL(e.path).pathname;
-  const extension = path.split(".").pop();
-  if (!extension) {
-    return createError({
-      statusCode: 400,
-      statusMessage: `[Nuxt OG Image] Missing OG Image type.`
-    });
-  }
-  if (!["png", "jpeg", "jpg", "svg", "html", "json"].includes(extension)) {
-    return createError({
-      statusCode: 400,
-      statusMessage: `[Nuxt OG Image] Unknown OG Image type ${extension}.`
-    });
-  }
-  let queryParams = { ...getQuery(e) };
-  queryParams.props = JSON.parse(queryParams.props || "{}");
-  queryParams = separateProps(queryParams);
-  let basePath = withoutTrailingSlash(
-    path.replace(`/__og-image__/image`, "").replace(`/og.${extension}`, "")
-  );
-  if (queryParams._query)
-    basePath = withQuery(basePath, JSON.parse(queryParams._query));
-  const isDebugJsonPayload = extension === "json" && runtimeConfig.debug;
-  const key = resolvePathCacheKey(e, basePath);
-  let options = queryParams.options;
-  if (!options) {
-    if (import.meta.prerender)
-      options = await prerenderOptionsCache?.getItem(key);
-    if (!options) {
-      const payload = await fetchPathHtmlAndExtractOptions(e, basePath, key);
-      if (payload instanceof Error)
-        return payload;
-      options = payload;
-    }
-  }
-  delete queryParams.options;
-  const _routeRulesMatcher = toRouteMatcher(
-    createRadixRouter({ routes: useRuntimeConfig().nitro?.routeRules })
-  );
-  const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-    withoutBase(basePath.split("?")[0], useRuntimeConfig().app.baseURL)
-  ).reverse());
-  if (typeof routeRules.ogImage === "undefined" && !options) {
-    return createError({
-      statusCode: 400,
-      statusMessage: "The route is missing the Nuxt OG Image payload or route rules."
-    });
-  }
-  const ogImageRouteRules = separateProps(routeRules.ogImage);
-  options = defu(queryParams, ogImageRouteRules, options, runtimeConfig.defaults);
-  if (!options) {
-    return createError({
-      statusCode: 404,
-      statusMessage: "[Nuxt OG Image] OG Image not found."
-    });
-  }
-  let renderer;
-  switch (options.renderer) {
-    case "satori":
-      renderer = await useSatoriRenderer();
-      break;
-    case "chromium":
-      renderer = await useChromiumRenderer();
-      break;
-  }
-  if (!renderer || renderer.__unenv__) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: `[Nuxt OG Image] Renderer ${options.renderer} is missing.`
-    });
-  }
-  const ctx = {
-    e,
-    key,
-    renderer,
-    isDebugJsonPayload,
-    extension,
-    basePath,
-    options,
-    _nitro: useNitroApp()
-  };
-  await ctx._nitro.hooks.callHook("nuxt-og-image:context", ctx);
-  return ctx;
-}

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

@@ -1,36 +0,0 @@
-import { parseURL, withoutBase } from "ufo";
-import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { defu } from "defu";
-import { extractAndNormaliseOgImageOptions } from "../../core/options/extract.mjs";
-import { prerenderOptionsCache } from "../../core/cache/prerender.mjs";
-import { isInternalRoute } from "../../utils.pure.mjs";
-import { resolvePathCacheKey } from "../utils.mjs";
-import { useRuntimeConfig } from "#internal/nitro";
-export default defineNitroPlugin(async (nitro) => {
-  if (!import.meta.prerender)
-    return;
-  nitro.hooks.hook("render:html", async (html, ctx) => {
-    const { head, bodyAppend } = html;
-    const path = parseURL(ctx.event.path).pathname;
-    if (isInternalRoute(path))
-      return;
-    const runtimeConfig = useRuntimeConfig();
-    const _routeRulesMatcher = toRouteMatcher(
-      createRadixRouter({ routes: runtimeConfig.nitro?.routeRules })
-    );
-    const routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-      withoutBase(path.split("?")[0], runtimeConfig.app.baseURL)
-    ).reverse()).ogImage;
-    if (routeRules === false)
-      return;
-    const options = extractAndNormaliseOgImageOptions([
-      head.join("\n"),
-      bodyAppend.join("\n")
-    ].join("\n"));
-    if (!options)
-      return;
-    const key = resolvePathCacheKey(ctx.event);
-    await prerenderOptionsCache.setItem(key, options);
-  });
-});

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

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

package/dist/runtime/nitro/utils.mjs

@@ -1,16 +0,0 @@
-import { withoutLeadingSlash, withoutTrailingSlash } from "ufo";
-import { hash } from "ohash";
-import { normalizeKey } from "unstorage";
-import { getQuery } from "h3";
-export function resolvePathCacheKey(e, path) {
-  const siteConfig = e.context.siteConfig.get();
-  const basePath = withoutTrailingSlash(withoutLeadingSlash(normalizeKey(path || e.path)));
-  return [
-    !basePath || basePath === "/" ? "index" : basePath,
-    hash([
-      basePath,
-      siteConfig.url,
-      hash(getQuery(e))
-    ])
-  ].join(":");
-}

package/dist/runtime/nuxt/plugins/og-image-canonical-urls.server.mjs

@@ -1,43 +0,0 @@
-import { parseURL } from "ufo";
-import { toValue } from "vue";
-import { defu } from "defu";
-import { isInternalRoute, separateProps } from "../../utils.pure.mjs";
-import { defineNuxtPlugin, useRequestEvent, withSiteUrl } from "#imports";
-export default defineNuxtPlugin({
-  setup(nuxtApp) {
-    nuxtApp.hooks.hook("app:rendered", async (ctx) => {
-      const { ssrContext } = ctx;
-      const e = useRequestEvent();
-      const path = parseURL(e.path).pathname;
-      if (isInternalRoute(path))
-        return;
-      ssrContext?.head.use({
-        key: "nuxt-og-image:overrides-and-canonical-urls",
-        hooks: {
-          "tags:resolve": async (ctx2) => {
-            let overrides;
-            for (const tag of ctx2.tags) {
-              if (tag.tag === "script" && tag.props.id === "nuxt-og-image-overrides") {
-                overrides = separateProps(JSON.parse(tag.innerHTML || "{}"));
-                delete ctx2.tags[ctx2.tags.indexOf(tag)];
-                break;
-              }
-            }
-            ctx2.tags = ctx2.tags.filter(Boolean);
-            for (const tag of ctx2.tags) {
-              if (tag.tag === "meta" && (tag.props.property === "og:image" || tag.props.name === "twitter:image:src")) {
-                if (!tag.props.content.startsWith("https")) {
-                  await nuxtApp.runWithContext(() => {
-                    tag.props.content = toValue(withSiteUrl(tag.props.content));
-                  });
-                }
-              } else if (overrides && tag.tag === "script" && tag.props.id === "nuxt-og-image-options") {
-                tag.innerHTML = JSON.stringify(defu(overrides, JSON.parse(tag.innerHTML)));
-              }
-            }
-          }
-        }
-      });
-    });
-  }
-});

package/dist/runtime/nuxt/plugins/route-rule-og-image.server.mjs

@@ -1,37 +0,0 @@
-import { defu } from "defu";
-import { parseURL, withoutBase } from "ufo";
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
-import { getOgImagePath, isInternalRoute, useOgImageRuntimeConfig } from "../../utils.mjs";
-import { createOgImageMeta, normaliseOptions } from "../utils.mjs";
-import { defineNuxtPlugin, useRequestEvent } from "#imports";
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hooks.hook("app:rendered", async (ctx) => {
-    const { ssrContext } = ctx;
-    const e = useRequestEvent();
-    const path = parseURL(e.path).pathname;
-    if (isInternalRoute(path))
-      return;
-    const _routeRulesMatcher = toRouteMatcher(
-      createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules })
-    );
-    let routeRules = defu({}, ..._routeRulesMatcher.matchAll(
-      withoutBase(path.split("?")[0], ssrContext?.runtimeConfig?.app.baseURL)
-    ).reverse()).ogImage;
-    if (typeof routeRules === "undefined")
-      return;
-    const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
-    if (routeRules === false) {
-      ogImageInstances?.forEach((e2) => {
-        e2.dispose();
-      });
-      nuxtApp.ssrContext._ogImagePayload = void 0;
-      nuxtApp.ssrContext._ogImageInstances = void 0;
-      return;
-    }
-    routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules);
-    const { defaults } = useOgImageRuntimeConfig();
-    const resolvedOptions = normaliseOptions(defu(routeRules, defaults));
-    const src = getOgImagePath(ssrContext.url, resolvedOptions);
-    createOgImageMeta(src, routeRules, resolvedOptions, nuxtApp.ssrContext);
-  });
-});

package/dist/runtime/server/routes/__og-image__/font-[name]-[weight].[extension].mjs

@@ -1,49 +0,0 @@
-import { createError, defineEventHandler, proxyRequest, sendRedirect, setHeader } from "h3";
-import { parseURL } from "ufo";
-import { getExtension, normaliseFontInput, useOgImageRuntimeConfig } from "../../../utils.mjs";
-import { assets } from "#internal/nitro/virtual/server-assets";
-export default defineEventHandler(async (e) => {
-  const path = parseURL(e.path).pathname;
-  const [_name, _weight] = path.split("/font/")[1].split(".")[0].split("/");
-  if (!_name || !_weight)
-    return "Provide a font name and weight";
-  const name = _name[0].toUpperCase() + _name.slice(1);
-  const weight = Math.round(Number.parseInt(_weight) / 100) * 100;
-  const config = useOgImageRuntimeConfig();
-  const normalisedFonts = normaliseFontInput(config.fonts);
-  const font = normalisedFonts.find((font2) => font2.name === name && weight === Number(font2.weight));
-  if (!font) {
-    return createError({
-      statusCode: 404,
-      statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
-    });
-  }
-  if (import.meta.dev || import.meta.prerender) {
-    if (font.key && await assets.hasItem(font.key)) {
-      setHeader(e, "Content-Type", `font/${getExtension(font.path)}`);
-      return assets.getItemRaw(font.key);
-    }
-  }
-  const css = await globalThis.$fetch(`https://fonts.googleapis.com/css2?family=${name}:wght@${weight}`, {
-    headers: {
-      // Make sure it returns TTF.
-      "User-Agent": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
-    }
-  });
-  if (!css) {
-    return createError({
-      statusCode: 500,
-      statusMessage: `[Nuxt OG Image] Invalid Google Font ${name}:${weight}`
-    });
-  }
-  const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-  if (ttfResource?.[1])
-    return proxyRequest(e, ttfResource[1], {});
-  const woff2Resource = css.match(/src: url\((.+)\) format\('woff2'\)/);
-  if (woff2Resource?.[1])
-    return sendRedirect(e, woff2Resource[1]);
-  return createError({
-    statusCode: 500,
-    statusMessage: `[Nuxt OG Image] Malformed Google Font CSS ${css}`
-  });
-});

package/dist/runtime/server/routes/__og-image__/image.mjs

@@ -1,91 +0,0 @@
-import { H3Error, createError, defineEventHandler, getQuery, setHeader } from "h3";
-import { resolveRendererContext } from "../../../core/utils/resolveRendererContext.mjs";
-import { fetchIsland } from "../../../core/html/fetchIsland.mjs";
-import { devIframeTemplate } from "../../../core/html/devIframeTemplate.mjs";
-import { applyInlineCss } from "../../../core/html/applyInlineCss.mjs";
-import { useOgImageBufferCache } from "../../../cache.mjs";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
-export default defineEventHandler(async (e) => {
-  const ctx = await resolveRendererContext(e);
-  if (ctx instanceof H3Error)
-    return ctx;
-  const { isDebugJsonPayload, extension, options, renderer } = ctx;
-  const { debug, baseCacheKey } = useOgImageRuntimeConfig();
-  const compatibilityHints = [];
-  if (isDebugJsonPayload) {
-    const queryExtension = getQuery(e).extension || ctx.options.extension;
-    if (["jpeg", "jpg"].includes(queryExtension) && options.renderer === "satori")
-      compatibilityHints.push("Converting PNGs to JPEGs requires Sharp which only runs on Node based systems.");
-    if (options.renderer === "chromium")
-      compatibilityHints.push("Using Chromium to generate images is only supported in Node based environments. It's recommended to only use this if you're prerendering");
-    if (options.component !== "PageScreenshot" && await applyInlineCss(ctx, await fetchIsland(ctx)))
-      compatibilityHints.push("Inlining CSS is only supported in Node based environments.");
-    setHeader(e, "Content-Type", "application/json");
-    return {
-      siteConfig: {
-        url: e.context.siteConfig.get().url
-      },
-      compatibilityHints,
-      cacheKey: ctx.key,
-      options: ctx.options,
-      ...options.renderer === "satori" ? await renderer.debug(ctx) : void 0
-    };
-  }
-  switch (extension) {
-    case "html":
-      setHeader(e, "Content-Type", `text/html`);
-      return devIframeTemplate(ctx);
-    case "svg":
-      if (!debug && !import.meta.dev) {
-        return createError({
-          statusCode: 404
-        });
-      }
-      if (ctx.renderer.name !== "satori") {
-        return createError({
-          statusCode: 400,
-          statusMessage: `[Nuxt OG Image] Generating ${extension}'s with ${renderer.name} is not supported.`
-        });
-      }
-      setHeader(e, "Content-Type", `image/svg+xml`);
-      return (await ctx.renderer.debug(ctx)).svg;
-    case "png":
-    case "jpeg":
-    case "jpg":
-      if (!renderer.supportedFormats.includes(extension)) {
-        return createError({
-          statusCode: 400,
-          statusMessage: `[Nuxt OG Image] Generating ${extension}'s with ${renderer.name} is not supported.`
-        });
-      }
-      setHeader(e, "Content-Type", `image/${extension === "jpg" ? "jpeg" : extension}`);
-      break;
-    default:
-      return createError({
-        statusCode: 400,
-        statusMessage: `[Nuxt OG Image] Invalid request for og.${extension}.`
-      });
-  }
-  const cacheApi = await useOgImageBufferCache(ctx, {
-    cacheMaxAgeSeconds: ctx.options.cacheMaxAgeSeconds,
-    baseCacheKey
-  });
-  if (typeof cacheApi === "undefined")
-    return;
-  if (cacheApi instanceof H3Error)
-    return cacheApi;
-  let image = cacheApi.cachedItem;
-  if (!image) {
-    image = await renderer.createImage(ctx);
-    if (image instanceof H3Error)
-      return image;
-    if (!image) {
-      return createError({
-        statusCode: 500,
-        statusMessage: `Failed to generate og.${extension}.`
-      });
-    }
-    await cacheApi.update(image);
-  }
-  return image;
-});

package/dist/runtime/{components/OgImage/OgImage.mjs → nuxt/components/OgImage/OgImage.js}

@@ -1,5 +1,5 @@
-import { defineComponent } from "vue";
 import { defineOgImage } from "#imports";
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "OgImage",
   async setup(_, { attrs }) {

package/dist/runtime/{components/OgImage/OgImageScreenshot.mjs → nuxt/components/OgImage/OgImageScreenshot.js}

@@ -1,5 +1,5 @@
-import { defineComponent } from "vue";
 import { defineOgImageScreenshot } from "#imports";
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "OgImageScreenshot",
   async setup(_, { attrs }) {

package/dist/runtime/{components → nuxt/components}/Templates/Community/SimpleBlog.vue

@@ -3,8 +3,8 @@
  * @credits Full Stack Heroes <https://fullstackheroes.com/>
  */
 
-import { parseURL } from 'ufo'
 import { computed, useSiteConfig } from '#imports'
+import { parseURL } from 'ufo'
 
 const props = withDefaults(defineProps<{
   title?: string