nuxt-og-image 4.0.2 → 4.1.0

package/dist/module.d.cts

@@ -0,0 +1,108 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { AddComponentOptions } from '@nuxt/kit';
+import { ResvgRenderOptions } from '@resvg/resvg-js';
+import { SatoriOptions } from 'satori';
+import { SharpOptions } from 'sharp';
+import { OgImageOptions, InputFontConfig, CompatibilityFlagEnvOverrides, OgImageComponent } from '../dist/runtime/types.js';
+
+interface ModuleOptions {
+    /**
+     * Whether the og:image images should be generated.
+     *
+     * @default true
+     */
+    enabled: boolean;
+    /**
+     * Default data used within the payload to generate the OG Image.
+     *
+     * You can use this to change the default template, image sizing and more.
+     *
+     * @default { component: 'NuxtSeo', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
+     */
+    defaults: OgImageOptions;
+    /**
+     * Fonts to use when rendering the og:image.
+     *
+     * @example ['Roboto:400', 'Roboto:700', { path: 'path/to/font.ttf', weight: 400, name: 'MyFont' }]
+     */
+    fonts: InputFontConfig[];
+    /**
+     * Options to pass to satori.
+     *
+     * @see https://github.com/vercel/satori/blob/main/src/satori.ts#L18
+     */
+    satoriOptions?: Partial<SatoriOptions>;
+    /**
+     * Options to pass to resvg.
+     *
+     * @see https://github.com/yisibl/resvg-js/blob/main/wasm/index.d.ts#L39
+     */
+    resvgOptions?: Partial<ResvgRenderOptions>;
+    /**
+     * Options to pass to sharp.
+     *
+     * @see https://sharp.pixelplumbing.com/api-constructor
+     */
+    sharpOptions?: true | Partial<SharpOptions>;
+    /**
+     * Enables debug logs and a debug endpoint.
+     *
+     * @false false
+     */
+    debug: boolean;
+    /**
+     * Options to pass to the <OgImage> and <OgImageScreenshot> component.
+     */
+    componentOptions?: Pick<AddComponentOptions, 'global'>;
+    /**
+     * Modify the cache behavior.
+     *
+     * Passing a boolean will enable or disable the runtime cache with the default options.
+     *
+     * Providing a record will allow you to configure the runtime cache fully.
+     *
+     * @default true
+     * @see https://nitro.unjs.io/guide/storage#mountpoints
+     * @example { driver: 'redis', host: 'localhost', port: 6379, password: 'password' }
+     */
+    runtimeCacheStorage: boolean | (Record<string, any> & {
+        driver: string;
+    });
+    /**
+     * Extra component directories that should be used to resolve components.
+     *
+     * @default ['OgImage', 'OgImageTemplate']
+     */
+    componentDirs: string[];
+    /**
+     * Manually modify the compatibility.
+     */
+    compatibility?: CompatibilityFlagEnvOverrides;
+    /**
+     * Use an alternative host for downloading Google Fonts. This is used to support China where Google Fonts is blocked.
+     *
+     * When `true` is set will use `fonts.font.im`, otherwise will use a string as the host.
+     */
+    googleFontMirror?: true | string;
+    /**
+     * Only allow the prerendering and dev runtimes to generate images.
+     */
+    zeroRuntime?: boolean;
+    /**
+     * Enable when your nuxt/content files match your pages.
+     *
+     * This will automatically map the `ogImage` frontmatter key to the correct path.
+     *
+     * This is similar behavior to using `nuxt/content` with `documentDriven: true`.
+     */
+    strictNuxtContentPaths?: boolean;
+}
+interface ModuleHooks {
+    'nuxt-og-image:components': (ctx: {
+        components: OgImageComponent[];
+    }) => Promise<void> | void;
+    'nuxt-og-image:runtime-config': (config: ModuleOptions) => Promise<void> | void;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { type ModuleHooks, type ModuleOptions, _default as default };

package/dist/module.d.mts

@@ -95,7 +95,7 @@ interface ModuleOptions {
      *
      * This is similar behavior to using `nuxt/content` with `documentDriven: true`.
      */
-    strictNuxtContentPaths: boolean;
+    strictNuxtContentPaths?: boolean;
 }
 interface ModuleHooks {
     'nuxt-og-image:components': (ctx: {

package/dist/module.d.ts

@@ -95,7 +95,7 @@ interface ModuleOptions {
      *
      * This is similar behavior to using `nuxt/content` with `documentDriven: true`.
      */
-    strictNuxtContentPaths: boolean;
+    strictNuxtContentPaths?: boolean;
 }
 interface ModuleHooks {
     'nuxt-og-image:components': (ctx: {

package/dist/module.json

@@ -5,7 +5,7 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import { useNuxt, tryResolveModule, addTemplate, resolvePath, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { useNuxt, tryResolveModule, addTemplate, resolvePath, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, hasNuxtModule, hasNuxtModuleCompatibility, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { hash } from 'ohash';
@@ -456,17 +456,27 @@ function isNuxtGenerate(nuxt = useNuxt()) {
 function normaliseFontInput(fonts) {
   return fonts.map((f) => {
     if (typeof f === "string") {
-      const [name, weight] = f.split(":");
+      const vals = f.split(":");
+      const includesStyle = vals.length === 3;
+      let name, weight, style;
+      if (includesStyle) {
+        name = vals[0];
+        style = vals[1];
+        weight = vals[2];
+      } else {
+        name = vals[0];
+        weight = vals[1];
+      }
       return {
         cacheKey: f,
         name,
         weight: weight || 400,
-        style: "normal",
+        style: style || "normal",
         path: void 0
       };
     }
     return {
-      cacheKey: f.key || `${f.name}:${f.weight}`,
+      cacheKey: f.key || `${f.name}:${f.style}:${f.weight}`,
       style: "normal",
       weight: 400,
       ...f
@@ -489,12 +499,12 @@ async function checkPlaywrightDependency() {
   return !!await tryResolveModule("playwright");
 }
 async function downloadFont(font, storage, mirror) {
-  const { name, weight } = font;
-  const key = `${name}-${weight}.ttf.base64`;
+  const { name, weight, style } = font;
+  const key = `${name}-${style}-${weight}.ttf.base64`;
   if (await storage.hasItem(key))
     return true;
   const host = typeof mirror === "undefined" ? "fonts.googleapis.com" : mirror === true ? "fonts.font.im" : mirror;
-  const css = await $fetch(`https://${host}/css2?family=${name}:wght@${weight}`, {
+  const css = await $fetch(`https://${host}/css2?family=${name}:${style === "ital" ? `ital,wght@1,${weight}` : `wght@${weight}`}`, {
     timeout: 10 * 1e3,
     // 10 second timeout
     headers: {
@@ -561,6 +571,7 @@ const module = defineNuxtModule({
     }
     nuxt.options.alias["#og-image"] = resolve("./runtime");
     nuxt.options.alias["#og-image-cache"] = resolve("./runtime/server/og-image/cache/lru");
+    nuxt.options.alias["#nuxt-og-image-utils"] = resolve("./runtime/shared");
     const preset = resolveNitroPreset(nuxt.options.nitro);
     const targetCompatibility = getPresetNitroPresetCompatibility(preset);
     if (config.zeroRuntime) {
@@ -639,13 +650,20 @@ const module = defineNuxtModule({
       }
     });
     await installNuxtSiteConfig();
-    if (hasNuxtModule("@nuxt/content")) {
+    const usingNuxtContent = hasNuxtModule("@nuxt/content");
+    const isNuxtContentV3 = usingNuxtContent && await hasNuxtModuleCompatibility("@nuxt/content", "^3");
+    const isNuxtContentV2 = usingNuxtContent && await hasNuxtModuleCompatibility("@nuxt/content", "^2");
+    if (isNuxtContentV3) {
+      if (typeof config.strictNuxtContentPaths !== "undefined") {
+        logger.warn("The `strictNuxtContentPaths` option is deprecated and has no effect in Nuxt Content v3.");
+      }
+    } else if (isNuxtContentV2) {
       addServerPlugin(resolve("./runtime/server/plugins/nuxt-content"));
     }
     if (!config.fonts.length) {
       config.fonts = [
-        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-400.ttf.base64"), absolutePath: true },
-        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-700.ttf.base64"), absolutePath: true }
+        { name: "Inter", weight: 400, path: resolve("./runtime/assets/Inter-normal-400.ttf.base64"), absolutePath: true },
+        { name: "Inter", weight: 700, path: resolve("./runtime/assets/Inter-normal-700.ttf.base64"), absolutePath: true }
       ];
     }
     let publicDirAbs = nuxt.options.dir.public;
@@ -659,32 +677,34 @@ const module = defineNuxtModule({
       })
     });
     config.fonts = (await Promise.all(normaliseFontInput(config.fonts).map(async (f) => {
+      const fontKey = `${f.name}:${f.style}:${f.weight}`;
+      const fontFileBase = fontKey.replaceAll(":", "-");
       if (!f.key && !f.path) {
         if (preset === "stackblitz") {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
+          logger.warn(`The ${fontKey} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`);
           return false;
         }
         if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
-          f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.ttf.base64`;
+          f.key = `nuxt-og-image:fonts:${fontFileBase}.ttf.base64`;
         } else {
-          logger.warn(`Failed to download font ${f.name}:${f.weight}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
+          logger.warn(`Failed to download font ${fontKey}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`);
           return false;
         }
       } else if (f.path) {
         const extension = basename(f.path.replace(".base64", "")).split(".").pop();
         if (!["woff", "ttf", "otf"].includes(extension)) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
+          logger.warn(`The ${fontKey} font was skipped because the file extension ${extension} is not supported. Only woff, ttf and otf are supported.`);
           return false;
         }
         if (!f.absolutePath)
           f.path = resolve(publicDirAbs, withoutLeadingSlash(f.path));
         if (!existsSync(f.path)) {
-          logger.warn(`The ${f.name}:${f.weight} font was skipped because the file does not exist at path ${f.path}.`);
+          logger.warn(`The ${fontKey} font was skipped because the file does not exist at path ${f.path}.`);
           return false;
         }
         const fontData = await readFile(f.path, f.path.endsWith(".base64") ? "utf-8" : "base64");
-        f.key = `nuxt-og-image:fonts:${f.name}-${f.weight}.${extension}.base64`;
-        await fontStorage.setItem(`${f.name}-${f.weight}.${extension}.base64`, fontData);
+        f.key = `nuxt-og-image:fonts:${fontFileBase}.${extension}.base64`;
+        await fontStorage.setItem(`${fontFileBase}.${extension}.base64`, fontData);
         delete f.path;
         delete f.absolutePath;
       }
@@ -881,7 +901,6 @@ declare module '#og-image/unocss-config' {
         fonts: normalisedFonts,
         hasNuxtIcon: hasNuxtModule("nuxt-icon") || hasNuxtModule("@nuxt/icon"),
         colorPreference,
-        hasNuxtContent: hasNuxtModule("@nuxt/content"),
         strictNuxtContentPaths: config.strictNuxtContentPaths,
         // @ts-expect-error runtime type
         isNuxtContentDocumentDriven: config.strictNuxtContentPaths || !!nuxt.options.content?.documentDriven

package/dist/runtime/app/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/app/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>