nuxt-og-image 3.0.0-rc.65 → 3.0.0-rc.67

package/dist/runtime/nitro/util/eventHandlers.js

@@ -0,0 +1,155 @@
+import { createError, getQuery, H3Error, proxyRequest, sendRedirect, setHeader, setResponseHeader } from "h3";
+import { parseURL } from "ufo";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../shared.js";
+import { resolveContext } from "../og-image/context.js";
+import { assets } from "../og-image/satori/font.js";
+import { html } from "../og-image/templates/html.js";
+import { useOgImageBufferCache } from "./cache.js";
+export async function fontEventHandler(e) {
+  const path = parseURL(e.path).pathname;
+  const { fonts } = useOgImageRuntimeConfig();
+  const key = path.split("/font/")[1];
+  if (key.includes(":")) {
+    const font2 = fonts.find((f) => f.key === key);
+    if (font2?.key && await assets.hasItem(font2.key)) {
+      let fontData = await assets.getItem(font2.key);
+      if (fontData instanceof Uint8Array) {
+        const decoder = new TextDecoder();
+        fontData = decoder.decode(fontData);
+      }
+      if (key.includes(".oft")) {
+        setResponseHeader(e, "Content-Type", "font/otf");
+      } else if (key.includes(".woff2")) {
+        setResponseHeader(e, "Content-Type", "font/woff2");
+      } else if (key.includes(".ttf")) {
+        setResponseHeader(e, "Content-Type", "font/ttf");
+      }
+      return Buffer.from(fontData, "base64");
+    }
+  }
+  const [_name, _weight] = key.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);
+  let font;
+  if (typeof getQuery(e).font === "string")
+    font = JSON.parse(getQuery(e).font);
+  if (!font) {
+    font = normalisedFonts.find((font2) => {
+      return font2.name.toLowerCase() === name.toLowerCase() && weight === Number(font2.weight);
+    });
+  }
+  if (!font) {
+    return createError({
+      statusCode: 404,
+      statusMessage: `[Nuxt OG Image] Font ${name}:${weight} not found`
+    });
+  }
+  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}`
+  });
+}
+export async function imageEventHandler(e) {
+  const ctx = await resolveContext(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");
+    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 html(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/nitro/util/kit.d.ts

@@ -1,5 +1,5 @@
-import type { NitroRouteRules } from 'nitropack';
 import type { H3Event } from 'h3';
+import type { NitroRouteRules } from 'nitropack';
 import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
 export declare function fetchIsland(e: H3Event, component: string, props: Record<string, any>): Promise<NuxtIslandResponse>;
 export declare function withoutQuery(path: string): string;

package/dist/runtime/nitro/util/kit.js

@@ -1,8 +1,8 @@
-import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { useRuntimeConfig } from "#imports";
 import { defu } from "defu";
-import { withoutBase, withoutTrailingSlash } from "ufo";
 import { hash } from "ohash";
-import { useRuntimeConfig } from "#imports";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { withoutBase, withoutTrailingSlash } from "ufo";
 export function fetchIsland(e, component, props) {
   const hashId = hash([component, props]);
   return e.$fetch(`/__nuxt_island/${component}_${hashId}.json`, {

package/dist/runtime/nitro/util/plugins.d.ts

@@ -0,0 +1,2 @@
+import type { NitroApp } from 'nitropack';
+export declare function nuxtContentPlugin(nitroApp: NitroApp): void;

package/dist/runtime/nitro/util/plugins.js

@@ -0,0 +1,54 @@
+import { defu } from "defu";
+import { stringify } from "devalue";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+export function nuxtContentPlugin(nitroApp) {
+  const { isNuxtContentDocumentDriven, defaults } = useOgImageRuntimeConfig();
+  nitroApp.hooks.hook("content:file:afterParse", async (content) => {
+    if (content._draft || content._extension !== "md" || content._partial || content.indexable === false || content.index === false)
+      return;
+    let path = content.path;
+    if (isNuxtContentDocumentDriven)
+      path = content._path;
+    if (path && content.ogImage) {
+      const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
+      const optionsWithDefault = defu(ogImageConfig, defaults);
+      const src = getOgImagePath(path, optionsWithDefault);
+      const payload = {
+        title: content.title,
+        excerpt: content.description || content.excerpt,
+        ...content.ogImage
+      };
+      Object.entries(ogImageConfig).forEach(([key, val]) => {
+        payload[key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())] = val;
+      });
+      content.head = defu({
+        script: [
+          {
+            id: "nuxt-og-image-overrides",
+            type: "application/json",
+            processTemplateParams: true,
+            innerHTML: stringify(payload),
+            // we want this to be last in our head
+            tagPosition: "bodyClose",
+            tagPriority: 30
+            // slighty higher priority
+          }
+        ],
+        meta: [
+          { property: "og:image", content: src },
+          { property: "og:image:width", content: optionsWithDefault.width },
+          { property: "og:image:height", content: optionsWithDefault.height },
+          { property: "og:image:type", content: `image/${optionsWithDefault.extension}` },
+          { property: "og:image:alt", content: optionsWithDefault.alt },
+          // twitter
+          { name: "twitter:card", content: "summary_large_image" },
+          { name: "twitter:image:src", content: src },
+          { name: "twitter:image:width", content: optionsWithDefault.width },
+          { name: "twitter:image:height", content: optionsWithDefault.height },
+          { name: "twitter:image:alt", content: optionsWithDefault.alt }
+        ]
+      });
+    }
+    return content;
+  });
+}

package/dist/runtime/nuxt/components/OgImage/OgImage.d.ts

@@ -1,5 +1,3 @@
 import type { OgImageOptions } from '../../../types.js';
-declare const _default: import("@vue/runtime-core").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<OgImageOptions<"NuxtSeo">>, {
-    [x: string]: unknown;
-}, {}>;
+declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImageOptions<"NuxtSeo">> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/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/nuxt/components/OgImage/OgImageScreenshot.d.ts

@@ -1,5 +1,3 @@
 import type { OgImagePageScreenshotOptions } from '../../../types.js';
-declare const _default: import("@vue/runtime-core").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<OgImagePageScreenshotOptions>, {
-    [x: string]: unknown;
-}, {}>;
+declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OgImagePageScreenshotOptions> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/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/nuxt/components/Templates/Community/BrandedLogo.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-withDefaults(defineProps<{
-  title?: string
-  logo?: string
-}>(), {
-  title: 'title',
-  logo: 'https://nuxt.com/assets/design-kit/logo-white.png',
-})
-</script>
-
-<template>
-  <div
-    :style="{ backgroundImage: 'linear-gradient(to right, #24243e, #302b63, #0f0c29)' }"
-    class="h-full w-full flex items-start justify-start"
-  >
-    <div class="flex items-start justify-start h-full">
-      <div class="flex flex-col justify-between w-full h-full p-20">
-        <img :src="logo" height="50">
-        <h1 class="text-[60px] text-white font-bold text-left">
-          {{ title }}
-        </h1>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+
+withDefaults(defineProps<{
+  title?: string
+  logo?: string
+}>(), {
+  title: 'title',
+  logo: 'https://nuxt.com/assets/design-kit/logo-white.png',
+})
+</script>
+
+<template>
+  <div
+    :style="{ backgroundImage: 'linear-gradient(to right, #24243e, #302b63, #0f0c29)' }"
+    class="h-full w-full flex items-start justify-start"
+  >
+    <div class="flex items-start justify-start h-full">
+      <div class="flex flex-col justify-between w-full h-full p-20">
+        <img :src="logo" height="50">
+        <h1 class="text-[60px] text-white font-bold text-left">
+          {{ title }}
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/nuxt/components/Templates/Community/Frame.vue

@@ -1,64 +1,64 @@
-<script setup lang="ts">
-/**
- * @credits @arashsheyda <https://github.com/arashsheyda>
- */
-
-withDefaults(defineProps<{
-  title?: string
-  description?: string
-  bg?: string
-  icon?: string
-  logo?: string
-  image?: string
-  username?: string
-  socials?: { name: string, icon: string }[]
-}>(), {
-  bg: 'linear-gradient(to bottom right, #171717, #131313)',
-})
-</script>
-
-<template>
-  <div
-    class="relative h-full w-full flex items-center justify-center bg-neutral-900 text-white border-2 border-white"
-    :style="{ backgroundImage: bg }"
-  >
-    <div
-      v-if="image"
-      class="absolute inset-0 w-full h-full bg-center opacity-10"
-      :style="{ backgroundImage: `url(${image})` }"
-    />
-    <div class="flex flex-col items-center text-center">
-      <h1 class="flex gap-4 text-7xl font-bold">
-        <Icon
-          v-if="icon"
-          :name="icon"
-        />
-        {{ title }}
-      </h1>
-      <p class="text-2xl max-w-3xl">
-        {{ description }}
-      </p>
-    </div>
-
-    <img
-      v-if="logo"
-      :src="logo"
-      class="absolute bottom-0 left-0 p-5"
-      style="height: 125px; width: 153px;"
-    >
-    <div class="absolute bottom-5 right-5 flex gap-4">
-      <div
-        v-if="username"
-        class="absolute bottom-12 right-8 font-bold"
-      >
-        {{ username }}
-      </div>
-      <Icon
-        v-for="social of socials"
-        :key="social.name"
-        :name="social.icon!"
-        class="w-7 h-7"
-      />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * @credits @arashsheyda <https://github.com/arashsheyda>
+ */
+
+withDefaults(defineProps<{
+  title?: string
+  description?: string
+  bg?: string
+  icon?: string
+  logo?: string
+  image?: string
+  username?: string
+  socials?: { name: string, icon: string }[]
+}>(), {
+  bg: 'linear-gradient(to bottom right, #171717, #131313)',
+})
+</script>
+
+<template>
+  <div
+    class="relative h-full w-full flex items-center justify-center bg-neutral-900 text-white border-2 border-white"
+    :style="{ backgroundImage: bg }"
+  >
+    <div
+      v-if="image"
+      class="absolute inset-0 w-full h-full bg-center opacity-10"
+      :style="{ backgroundImage: `url(${image})` }"
+    />
+    <div class="flex flex-col items-center text-center">
+      <h1 class="flex gap-4 text-7xl font-bold">
+        <Icon
+          v-if="icon"
+          :name="icon"
+        />
+        {{ title }}
+      </h1>
+      <p class="text-2xl max-w-3xl">
+        {{ description }}
+      </p>
+    </div>
+
+    <img
+      v-if="logo"
+      :src="logo"
+      class="absolute bottom-0 left-0 p-5"
+      style="height: 125px; width: 153px;"
+    >
+    <div class="absolute bottom-5 right-5 flex gap-4">
+      <div
+        v-if="username"
+        class="absolute bottom-12 right-8 font-bold"
+      >
+        {{ username }}
+      </div>
+      <Icon
+        v-for="social of socials"
+        :key="social.name"
+        :name="social.icon!"
+        class="w-7 h-7"
+      />
+    </div>
+  </div>
+</template>