npm - nuxt-og-image - Versions diffs - 3.0.0-rc.63 → 3.0.0-rc.65 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/client/index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html><html  data-capo=""><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.BCfFhbeW.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/DtDGQseG.js">
+<link rel="stylesheet" href="/__nuxt-og-image/_nuxt/entry.BJu2ITzA.css">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-og-image/_nuxt/xettH10j.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/DXFkqnOI.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/BigF1UXR.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/CowR2XfX.js">
@@ -258,9 +258,9 @@
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/Bxkoe-BC.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/Br6ll-O0.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/B6E6ObS_.js">
-<link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-404.BMGu0azq.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/eEwap3HF.js">
-<link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-500.DUmFq9tp.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/x0e1-5KE.js">
-<script type="module" src="/__nuxt-og-image/_nuxt/DtDGQseG.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildId:"59641a36-dc02-4d42-99e6-b1a25f3b3613",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-404.B3wjZPBT.css">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/DVxyIIKo.js">
+<link rel="prefetch" as="style" href="/__nuxt-og-image/_nuxt/error-500.Dxoa4Ooo.css">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-og-image/_nuxt/WfFM8TlZ.js">
+<script type="module" src="/__nuxt-og-image/_nuxt/xettH10j.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-og-image",buildId:"5876a781-42f1-459e-a560-bbe16edad6b7",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/module.json CHANGED Viewed

@@ -5,7 +5,7 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "3.0.0-rc.62",
+  "version": "3.0.0-rc.64",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "2.0.0"

package/dist/module.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
 import { existsSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import { useNuxt, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, tryResolveModule, defineNuxtModule, useLogger, addImports, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
+import { useNuxt, tryResolveModule, addTemplate, loadNuxtModuleInstance, createResolver, resolvePath, defineNuxtModule, useLogger, addImports, hasNuxtModule, addServerPlugin, addServerHandler, addComponentsDir, addComponent, addPlugin } from '@nuxt/kit';
 import { assertSiteConfig, installNuxtSiteConfig } from 'nuxt-site-config-kit';
 import { provider, env, isCI, isDevelopment } from 'std-env';
 import { hash } from 'ohash';
@@ -35,7 +35,7 @@ const NodeRuntime = {
   // node-server runtime
   "chromium": "on-demand",
   // this gets changed build start
-  "css-inline": "wasm",
+  "css-inline": "node",
   "resvg": "node",
   "satori": "node",
   "sharp": "node"
@@ -122,7 +122,7 @@ function resolveNitroPreset(nitroConfig) {
   if (nitroConfig && nitroConfig?.preset)
     preset = nitroConfig.preset;
   if (!preset)
-    preset = env.NITRO_PRESET || detectTarget() || "node-server";
+    preset = env.NITRO_PRESET || env.SERVER_PRESET || detectTarget() || "node-server";
   return preset.replace("_", "-");
 }
 function getPresetNitroPresetCompatibility(target) {
@@ -131,9 +131,11 @@ function getPresetNitroPresetCompatibility(target) {
     compatibility = RuntimeCompatibility["nitro-dev"];
   return compatibility;
 }
-function applyNitroPresetCompatibility(nitroConfig, options) {
+async function applyNitroPresetCompatibility(nitroConfig, options) {
   const target = resolveNitroPreset(nitroConfig);
   const compatibility = getPresetNitroPresetCompatibility(target);
+  const hasCssInlineNode = !!await tryResolveModule("@css-inline/css-inline");
+  const hasCssInlineWasm = !!await tryResolveModule("@css-inline/css-inline-wasm");
   const { resolve } = options;
   const satoriEnabled = typeof options.compatibility?.satori !== "undefined" ? !!options.compatibility.satori : !!compatibility.satori;
   const chromiumEnabled = typeof options.compatibility?.chromium !== "undefined" ? !!options.compatibility.chromium : !!compatibility.chromium;
@@ -146,6 +148,11 @@ function applyNitroPresetCompatibility(nitroConfig, options) {
       binding = compatibility[key];
     if (key === "chromium" && binding === "node")
       binding = "playwright";
+    if (key === "css-inline") {
+      if (binding === "node" && !hasCssInlineNode || binding === "wasm" && !hasCssInlineWasm) {
+        binding = false;
+      }
+    }
     resolvedCompatibility[key] = binding;
     return {
       [`#nuxt-og-image/bindings/${key}`]: binding === false ? "unenv/runtime/mock/empty" : resolve(`./runtime/nitro/og-image/bindings/${key}/${binding}`)
@@ -294,13 +301,13 @@ function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
 function setupDevHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
+    await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.dev, resolve });
   });
 }
 function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    applyNitroPresetCompatibility(nitroConfig, {
+    await applyNitroPresetCompatibility(nitroConfig, {
       compatibility: {
         "chromium": false,
         "satori": false,
@@ -321,7 +328,7 @@ function setupGenerateHandler(options, resolve, nuxt = useNuxt()) {
 function setupPrerenderHandler(options, resolve, nuxt = useNuxt()) {
   nuxt.hooks.hook("nitro:init", async (nitro) => {
     nitro.hooks.hook("prerender:config", async (nitroConfig) => {
-      applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.prerender, resolve });
+      await applyNitroPresetCompatibility(nitroConfig, { compatibility: options.compatibility?.prerender, resolve });
       nitroConfig.wasm = nitroConfig.wasm || {};
       nitroConfig.wasm.esmImport = false;
       const prerenderingPages = (nuxt.options.nitro.prerender?.routes || []).some((r) => r && (!r.includes(".") || r.includes("*")));
@@ -341,7 +348,7 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
   if (typeof config.runtimeCacheStorage === "object")
     nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
   nuxt.hooks.hook("nitro:config", async (nitroConfig) => {
-    applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
+    await applyNitroPresetCompatibility(nitroConfig, { compatibility: config.compatibility?.runtime, resolve });
     nitroConfig.alias.electron = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias.bufferutil = "unenv/runtime/mock/proxy-cjs";
     nitroConfig.alias["utf-8-validate"] = "unenv/runtime/mock/proxy-cjs";
@@ -363,15 +370,19 @@ async function setupBuildHandler(config, resolve, nuxt = useNuxt()) {
         ].filter(existsSync)[0] || serverEntry;
       }
       const contents = await readFile(serverEntry, "utf-8");
-      const resvgHash = sha1(await readFile(await resolvePath("@resvg/resvg-wasm/index_bg.wasm")));
-      const yogaHash = sha1(await readFile(await resolvePath("yoga-wasm-web/dist/yoga.wasm")));
-      const cssInlineHash = sha1(await readFile(await resolvePath("@css-inline/css-inline-wasm/index_bg.wasm")));
+      const resvgHash = await resolveFilePathSha1("@resvg/resvg-wasm/index_bg.wasm");
+      const yogaHash = await resolveFilePathSha1("yoga-wasm-web/dist/yoga.wasm");
+      const cssInlineHash = await resolveFilePathSha1("@css-inline/css-inline-wasm/index_bg.wasm");
       const postfix = target === "vercel-edge" ? "?module" : "";
       const path = isCloudflarePagesOrModule ? `../wasm/` : `./wasm/`;
       await writeFile(serverEntry, contents.replaceAll('"@resvg/resvg-wasm/index_bg.wasm?module"', `"${path}index_bg-${resvgHash}.wasm${postfix}"`).replaceAll('"@css-inline/css-inline-wasm/index_bg.wasm?module"', `"${path}index_bg-${cssInlineHash}.wasm${postfix}"`).replaceAll('"yoga-wasm-web/dist/yoga.wasm?module"', `"${path}yoga-${yogaHash}.wasm${postfix}"`), { encoding: "utf-8" });
     });
   });
 }
+async function resolveFilePathSha1(path) {
+  const _path = await resolvePath(path);
+  return sha1(existsSync(_path) ? await readFile(_path) : path);
+}
 function sha1(source) {
   return createHash("sha1").update(source).digest("hex").slice(0, 16);
 }

package/dist/runtime/nitro/og-image/bindings/css-inline/node.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
+import { inline } from '@css-inline/css-inline';
 declare const _default: {
     initWasmPromise: Promise<void>;
     cssInline: {
-        inline: any;
+        inline: typeof inline;
     };
 };
 export default _default;

package/dist/runtime/nitro/og-image/bindings/css-inline/wasm-fs.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import { inline } from '@css-inline/css-inline-wasm';
 declare const _default: {
-    initWasmPromise: Promise<void>;
+    initWasmPromise: any;
     cssInline: {
-        inline: typeof inline;
+        inline: any;
     };
 };
 export default _default;

package/dist/runtime/nitro/og-image/bindings/css-inline/wasm.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import { inline } from '@css-inline/css-inline-wasm';
 declare const _default: {
-    initWasmPromise: Promise<void>;
+    initWasmPromise: any;
     cssInline: {
-        inline: typeof inline;
+        inline: any;
     };
 };
 export default _default;

package/dist/runtime/nitro/og-image/context.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { createError, getQuery } from "h3";
 import { defu } from "defu";
 import { normalizeKey } from "unstorage";
 import { hash } from "ohash";
-import { useNitroApp } from "nitropack/runtime/app";
+import { useNitroApp } from "nitropack/runtime";
 import { parse } from "devalue";
 import { separateProps, useOgImageRuntimeConfig } from "../../shared.js";
 import { createNitroRouteRuleMatcher } from "../util/kit.js";

package/dist/runtime/nitro/og-image/satori/instances.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import type _sharp from 'sharp';
 import type _satori from 'satori';
-import type _cssInline from '@css-inline/css-inline-wasm';
 export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
     free(): void;
     render(): {
@@ -39,4 +38,4 @@ export declare function useResvg(): Promise<new (svg: Uint8Array | string, optio
 }>;
 export declare function useSatori(): Promise<typeof _satori>;
 export declare function useSharp(): Promise<typeof _sharp>;
-export declare function useCssInline(): Promise<typeof _cssInline>;
+export declare function useCssInline(): Promise<any>;

package/dist/runtime/nitro/og-image/satori/plugins/imageSrc.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { withBase } from "ufo";
 import sizeOf from "image-size";
 import { defineSatoriTransformer } from "../utils.js";
 import { toBase64Image } from "../../../../pure.js";
+import { logger } from "../../../util/logger.js";
 import { useNitroOrigin, useStorage } from "#imports";
 async function resolveLocalFilePathImage(publicStoragePath, src) {
   const key = `${publicStoragePath}${src.replace("./", ":").replace("/", ":")}`;
@@ -17,6 +18,9 @@ export default defineSatoriTransformer([
       const isRelative = src.startsWith("/");
       let dimensions;
       let imageBuffer;
+      if (src.endsWith(".webp")) {
+        logger.warn("Using WebP images with Satori is not supported. Please consider switching image format or use the chromium renderer.", src);
+      }
       if (isRelative) {
         if (import.meta.prerender || import.meta.dev) {
           imageBuffer = await resolveLocalFilePathImage(publicStoragePath, src);

package/dist/runtime/nitro/og-image/satori/transforms/inlineCss.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { createConsola } from "consola";
 import { useCssInline } from "../instances.js";
 import { useNitroOrigin } from "#imports";
 export async function applyInlineCss(ctx, island) {
@@ -30,6 +31,13 @@ export async function applyInlineCss(ctx, island) {
   if (!css.trim().length)
     return false;
   const cssInline = await useCssInline();
+  if (!cssInline || cssInline?.__unenv__) {
+    if (componentInlineStyles.length) {
+      const logger = createConsola().withTag("Nuxt OG Image");
+      logger.warn("To have inline styles applied you need to install either the `@css-inline/css-inline` or `@css-inline/css-inline-wasm` package.");
+    }
+    return false;
+  }
   html = cssInline.inline(island.html, {
     loadRemoteStylesheets: false,
     extraCss: css

package/dist/runtime/nitro/tsconfig.json CHANGED Viewed

@@ -1,3 +1,3 @@
-{
-  "extends": "../../../.nuxt/tsconfig.server.json"
-}
+{
+  "extends": "../../../.nuxt/tsconfig.server.json"
+}

package/dist/runtime/nitro/util/logger.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const logger: import("consola").ConsolaInstance;

package/dist/runtime/nitro/util/logger.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { createConsola } from "consola";
+export const logger = createConsola({
+  defaults: {
+    tag: "Nuxt OG Image"
+  }
+});

package/dist/runtime/nuxt/components/Templates/Community/BrandedLogo.vue CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>