nuxt-og-image 4.0.1 → 4.0.2

package/dist/module.d.mts

@@ -3,111 +3,7 @@ import { AddComponentOptions } from '@nuxt/kit';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SatoriOptions } from 'satori';
 import { SharpOptions } from 'sharp';
-import { OgImageComponents } from '#og-image/components';
-import { NitroOptions } from 'nitropack';
-
-type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
-interface OgImageComponent {
-    path?: string;
-    pascalName: string;
-    kebabName: string;
-    hash: string;
-    category: 'app' | 'community' | 'pro';
-    credits?: string;
-}
-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;
-    /**
-     * How long to wait before taking the screenshot. Useful for waiting for animations.
-     */
-    delay?: number;
-}
-interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
-    /**
-     * The width of the screenshot.
-     *
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the screenshot.
-     *
-     * @default 630
-     */
-    height?: number;
-    /**
-     * The alt text for the image.
-     */
-    alt?: string;
-    /**
-     * Use a prebuilt image instead of generating one.
-     *
-     * Should be an absolute URL.
-     */
-    url?: string;
-    /**
-     * The name of the component to render.
-     */
-    component?: T | string;
-    /**
-     * Props to pass to the component.
-     */
-    props?: OgImageComponents[T] | Record<string, any>;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
-    emojis?: IconifyEmojiIconSets;
-    /**
-     * Provide a static HTML template to render the OG Image instead of a component.
-     */
-    html?: string;
-    resvg?: ResvgRenderOptions;
-    satori?: SatoriOptions;
-    screenshot?: Partial<ScreenshotOptions>;
-    sharp?: SharpOptions;
-    fonts?: InputFontConfig[];
-    cacheMaxAgeSeconds?: number;
-    /**
-     * @internal
-     */
-    _query?: Record<string, any>;
-}
-interface FontConfig {
-    name: string;
-    style?: string;
-    weight?: string | number;
-    path?: string;
-    key?: string;
-    absolutePath?: boolean;
-}
-type InputFontConfig = (`${string}:${number}` | string | FontConfig);
-interface RuntimeCompatibilitySchema {
-    chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
-    ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
-    resvg: 'node' | 'wasm' | 'wasm-fs' | false;
-    satori: 'node' | 'wasm' | 'wasm-fs' | false;
-    sharp: 'node' | false;
-    wasm?: NitroOptions['wasm'];
-}
-type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
-interface CompatibilityFlagEnvOverrides {
-    dev?: CompatibilityFlags;
-    runtime?: CompatibilityFlags;
-    prerender?: CompatibilityFlags;
-}
+import { OgImageOptions, InputFontConfig, CompatibilityFlagEnvOverrides, OgImageComponent } from '../dist/runtime/types.js';
 
 interface ModuleOptions {
     /**
@@ -121,7 +17,7 @@ interface ModuleOptions {
      *
      * You can use this to change the default template, image sizing and more.
      *
-     * @default { component: 'OgImageTemplateFallback', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
+     * @default { component: 'NuxtSeo', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
      */
     defaults: OgImageOptions;
     /**

package/dist/module.d.ts

@@ -3,111 +3,7 @@ import { AddComponentOptions } from '@nuxt/kit';
 import { ResvgRenderOptions } from '@resvg/resvg-js';
 import { SatoriOptions } from 'satori';
 import { SharpOptions } from 'sharp';
-import { OgImageComponents } from '#og-image/components';
-import { NitroOptions } from 'nitropack';
-
-type IconifyEmojiIconSets = 'twemoji' | 'noto' | 'fluent-emoji' | 'fluent-emoji-flat' | 'fluent-emoji-high-contrast' | 'noto-v1' | 'emojione' | 'emojione-monotone' | 'emojione-v1' | 'streamline-emojis' | 'openmoji';
-interface OgImageComponent {
-    path?: string;
-    pascalName: string;
-    kebabName: string;
-    hash: string;
-    category: 'app' | 'community' | 'pro';
-    credits?: string;
-}
-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;
-    /**
-     * How long to wait before taking the screenshot. Useful for waiting for animations.
-     */
-    delay?: number;
-}
-interface OgImageOptions<T extends keyof OgImageComponents = 'NuxtSeo'> {
-    /**
-     * The width of the screenshot.
-     *
-     * @default 1200
-     */
-    width?: number;
-    /**
-     * The height of the screenshot.
-     *
-     * @default 630
-     */
-    height?: number;
-    /**
-     * The alt text for the image.
-     */
-    alt?: string;
-    /**
-     * Use a prebuilt image instead of generating one.
-     *
-     * Should be an absolute URL.
-     */
-    url?: string;
-    /**
-     * The name of the component to render.
-     */
-    component?: T | string;
-    /**
-     * Props to pass to the component.
-     */
-    props?: OgImageComponents[T] | Record<string, any>;
-    renderer?: 'chromium' | 'satori';
-    extension?: 'png' | 'jpeg' | 'jpg';
-    emojis?: IconifyEmojiIconSets;
-    /**
-     * Provide a static HTML template to render the OG Image instead of a component.
-     */
-    html?: string;
-    resvg?: ResvgRenderOptions;
-    satori?: SatoriOptions;
-    screenshot?: Partial<ScreenshotOptions>;
-    sharp?: SharpOptions;
-    fonts?: InputFontConfig[];
-    cacheMaxAgeSeconds?: number;
-    /**
-     * @internal
-     */
-    _query?: Record<string, any>;
-}
-interface FontConfig {
-    name: string;
-    style?: string;
-    weight?: string | number;
-    path?: string;
-    key?: string;
-    absolutePath?: boolean;
-}
-type InputFontConfig = (`${string}:${number}` | string | FontConfig);
-interface RuntimeCompatibilitySchema {
-    chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false;
-    ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false;
-    resvg: 'node' | 'wasm' | 'wasm-fs' | false;
-    satori: 'node' | 'wasm' | 'wasm-fs' | false;
-    sharp: 'node' | false;
-    wasm?: NitroOptions['wasm'];
-}
-type CompatibilityFlags = Partial<Omit<RuntimeCompatibilitySchema, 'wasm'>>;
-interface CompatibilityFlagEnvOverrides {
-    dev?: CompatibilityFlags;
-    runtime?: CompatibilityFlags;
-    prerender?: CompatibilityFlags;
-}
+import { OgImageOptions, InputFontConfig, CompatibilityFlagEnvOverrides, OgImageComponent } from '../dist/runtime/types.js';
 
 interface ModuleOptions {
     /**
@@ -121,7 +17,7 @@ interface ModuleOptions {
      *
      * You can use this to change the default template, image sizing and more.
      *
-     * @default { component: 'OgImageTemplateFallback', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
+     * @default { component: 'NuxtSeo', width: 1200, height: 630, cache: true, cacheTtl: 24 * 60 * 60 * 1000 }
      */
     defaults: OgImageOptions;
     /**

package/dist/module.json

@@ -5,7 +5,7 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "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, useLogger, addImports, addBuildPlugin, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { useNuxt, tryResolveModule, addTemplate, resolvePath, loadNuxtModuleInstance, createResolver, defineNuxtModule, addImports, addBuildPlugin, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
 import { hash } from 'ohash';
@@ -19,6 +19,7 @@ import { pathToFileURL } from 'node:url';
 import MagicString from 'magic-string';
 import { stripLiteral } from 'strip-literal';
 import { createUnplugin } from 'unplugin';
+import { logger } from '../dist/runtime/logger.js';
 import { Launcher } from 'chrome-launcher';
 import { $fetch } from 'ofetch';
 
@@ -205,6 +206,7 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
     nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias.queue = "unenv/runtime/mock/proxy-cjs";
+    nitroConfig.alias["chromium-bidi"] = "unenv/runtime/mock/proxy-cjs";
   });
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     const target = resolveNitroPreset(nitro.options);
@@ -544,13 +546,12 @@ const module = defineNuxtModule({
   },
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    const { name, version } = await readPackageJSON(resolve("../package.json"));
-    const logger = useLogger(name);
+    const { version } = await readPackageJSON(resolve("../package.json"));
     logger.level = config.debug || nuxt.options.debug ? 4 : 3;
     if (config.enabled === false) {
       logger.debug("The module is disabled, skipping setup.");
-      ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
-        addImports({ name: name2, from: resolve(`./runtime/app/composables/mock`) });
+      ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
+        addImports({ name, from: resolve(`./runtime/app/composables/mock`) });
       });
       return;
     }
@@ -723,13 +724,17 @@ const module = defineNuxtModule({
       route: "/__og-image__/static/**",
       handler: resolve(`${basePath}/image`)
     });
-    nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
-    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name2) => {
+    if (!nuxt.options.dev) {
+      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"] = [];
+    }
+    ["defineOgImage", "defineOgImageComponent", "defineOgImageScreenshot"].forEach((name) => {
       addImports({
-        name: name2,
-        from: resolve(`./runtime/app/composables/${name2}`)
+        name,
+        from: resolve(`./runtime/app/composables/${name}`)
       });
-      nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name2);
+      if (!nuxt.options.dev) {
+        nuxt.options.optimization.treeShake.composables.client["nuxt-og-image"].push(name);
+      }
     });
     if (!config.zeroRuntime || nuxt.options.dev) {
       await addComponentsDir({
@@ -742,10 +747,10 @@ const module = defineNuxtModule({
       // new
       "OgImage",
       "OgImageScreenshot"
-    ].forEach((name2) => {
+    ].forEach((name) => {
       addComponent({
-        name: name2,
-        filePath: resolve(`./runtime/app/components/OgImage/${name2}`),
+        name,
+        filePath: resolve(`./runtime/app/components/OgImage/${name}`),
         ...config.componentOptions
       });
     });
@@ -809,10 +814,10 @@ const module = defineNuxtModule({
     extendTypes("nuxt-og-image", ({ typesPath }) => {
       const componentImports = ogImageComponentCtx.components.map((component) => {
         const relativeComponentPath = relative$1(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), component.path);
-        const name2 = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name3, dir) => {
-          return name3.replace(new RegExp(`^${dir}`), "");
+        const name = config.componentDirs.sort((a, b) => b.length - a.length).reduce((name2, dir) => {
+          return name2.replace(new RegExp(`^${dir}`), "");
         }, component.pascalName);
-        return `    '${name2}': typeof import('${relativeComponentPath}')['default']`;
+        return `    '${name}': typeof import('${relativeComponentPath}')['default']`;
       }).join("\n");
       return `
 declare module 'nitropack' {

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>