nuxt-og-image 3.0.0-rc.6 → 3.0.0-rc.60

package/dist/runtime/nitro/og-image/satori/transforms/inlineCss.d.ts

@@ -0,0 +1,3 @@
+import type { NuxtIslandResponse } from 'nuxt/dist/core/runtime/nitro/renderer';
+import type { OgImageRenderEventContext } from '../../../../types.js';
+export declare function applyInlineCss(ctx: OgImageRenderEventContext, island: NuxtIslandResponse): Promise<boolean>;

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

@@ -0,0 +1,42 @@
+import { useCssInline } from "../instances.js";
+import { useNitroOrigin } from "#imports";
+export async function applyInlineCss(ctx, island) {
+  const { e } = ctx;
+  let html = island.html;
+  let css = island.head.style.map((s) => s.innerHTML).filter(Boolean).join("\n");
+  const componentInlineStyles = island.head.link.filter((l) => l.href.startsWith("/_nuxt/components") && l.href.replaceAll("/", "").includes(ctx.options.component));
+  if (!import.meta.prerender && !componentInlineStyles.length) {
+    return false;
+  }
+  let linksToCss = [];
+  if (import.meta.dev) {
+    linksToCss = componentInlineStyles.length ? (await Promise.all(
+      componentInlineStyles.map((l) => {
+        const url = l.href.endsWith("lang.css") ? `${l.href}&hmr=false` : l.href;
+        return e.$fetch(url, {
+          responseType: "text",
+          baseURL: useNitroOrigin(e)
+        }).then((res) => {
+          if (res.includes("__vite__css"))
+            return res.match(/__vite__css = "([^"]+)"/)?.[1];
+          return res.trim().split("\n").filter((l2) => !l2.startsWith("//")).join("\n").trim();
+        }).catch(() => {
+          return "";
+        });
+      })
+    )).join("\n") : "";
+    css = [linksToCss, css].join("\n");
+  }
+  if (!css.trim().length)
+    return false;
+  const cssInline = await useCssInline();
+  html = cssInline.inline(island.html, {
+    loadRemoteStylesheets: false,
+    extraCss: css
+  });
+  const classes = css.match(/\.([\w-]+)/g)?.map((c) => c.replace(".", ""));
+  if (classes)
+    html = html.replace(new RegExp(`class="(${classes.join("|")})"`, "g"), "");
+  island.html = html;
+  return true;
+}

package/dist/runtime/{core/renderers → nitro/og-image}/satori/utils.d.ts

@@ -1,3 +1,3 @@
-import type { OgImageRenderEventContext, SatoriTransformer, VNode } from '../../../types';
-export declare function walkSatoriTree(e: OgImageRenderEventContext, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): Promise<void>;
+import type { OgImageRenderEventContext, SatoriTransformer, VNode } from '../../../types.js';
+export declare function walkSatoriTree(e: OgImageRenderEventContext, node: VNode, plugins: (SatoriTransformer | SatoriTransformer[])[]): (void | Promise<void>)[];
 export declare function defineSatoriTransformer(transformer: SatoriTransformer | SatoriTransformer[]): SatoriTransformer | SatoriTransformer[];

package/dist/runtime/{core/renderers/satori/utils.mjs → nitro/og-image/satori/utils.js}

@@ -1,19 +1,23 @@
-export async function walkSatoriTree(e, node, plugins) {
+export function walkSatoriTree(e, node, plugins) {
+  const promises = [];
   if (!node.props?.children || !Array.isArray(node.props.children))
-    return;
+    return promises;
   if (node.props.children.length === 0) {
     delete node.props.children;
-    return;
+    return promises;
   }
   for (const child of node.props.children || []) {
     if (child) {
       for (const plugin of plugins.flat()) {
         if (plugin.filter(child))
-          await plugin.transform(child, e);
+          promises.push(plugin.transform(child, e));
       }
-      await walkSatoriTree(e, child, plugins);
+      promises.push(
+        ...walkSatoriTree(e, child, plugins)
+      );
     }
   }
+  return promises;
 }
 export function defineSatoriTransformer(transformer) {
   return transformer;

package/dist/runtime/{core/renderers → nitro/og-image}/satori/vnodes.d.ts

@@ -1,2 +1,2 @@
-import type { OgImageRenderEventContext, VNode } from '../../../types';
+import type { OgImageRenderEventContext, VNode } from '../../../types.js';
 export declare function createVNodes(ctx: OgImageRenderEventContext): Promise<VNode>;

package/dist/runtime/nitro/og-image/satori/vnodes.js

@@ -0,0 +1,38 @@
+import { html as convertHtmlToSatori } from "satori-html";
+import { fetchIsland } from "../../util/kit.js";
+import { htmlDecodeQuotes } from "../../util/encoding.js";
+import { applyInlineCss } from "./transforms/inlineCss.js";
+import { applyEmojis } from "./transforms/emojis.js";
+import { walkSatoriTree } from "./utils.js";
+import unocss from "./plugins/unocss.js";
+import emojis from "./plugins/emojis.js";
+import classes from "./plugins/classes.js";
+import imageSrc from "./plugins/imageSrc.js";
+import flex from "./plugins/flex.js";
+import encoding from "./plugins/encoding.js";
+export async function createVNodes(ctx) {
+  let html = ctx.options.html;
+  if (!html) {
+    const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
+    island.html = htmlDecodeQuotes(island.html);
+    await applyInlineCss(ctx, island);
+    await applyEmojis(ctx, island);
+    html = island.html;
+    if (html?.includes("<body>")) {
+      html = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || "";
+    }
+  }
+  const template = `<div style="position: relative; display: flex; margin: 0 auto; width: ${ctx.options.width}px; height: ${ctx.options.height}px; overflow: hidden;">${html}</div>`;
+  const satoriTree = convertHtmlToSatori(template);
+  walkSatoriTree(ctx, satoriTree, [
+    emojis,
+    classes,
+    flex,
+    encoding
+  ]);
+  await Promise.all(walkSatoriTree(ctx, satoriTree, [
+    unocss,
+    imageSrc
+  ]));
+  return satoriTree;
+}

package/dist/runtime/nitro/og-image/templates/html.d.ts

@@ -0,0 +1,2 @@
+import type { OgImageRenderEventContext } from '../../../types.js';
+export declare function html(ctx: OgImageRenderEventContext): Promise<string>;

package/dist/runtime/{core/html/devIframeTemplate.mjs → nitro/og-image/templates/html.js}

@@ -1,21 +1,29 @@
 import { createHeadCore } from "@unhead/vue";
 import { renderSSRHead } from "@unhead/ssr";
-import { useOgImageRuntimeConfig } from "../../utils.mjs";
-import { applyEmojis } from "./applyEmojis.mjs";
-import { fetchIsland } from "./fetchIsland.mjs";
+import { createError } from "h3";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../../shared.js";
+import { fetchIsland } from "../../util/kit.js";
+import { applyEmojis } from "../satori/transforms/emojis.js";
 import { theme } from "#nuxt-og-image/unocss-config.mjs";
-export async function devIframeTemplate(ctx) {
+export async function html(ctx) {
   const { options } = ctx;
   const { fonts } = useOgImageRuntimeConfig();
-  const island = await fetchIsland(ctx);
+  if (!options.component) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: `[Nuxt OG Image] Rendering an invalid component. Received options: ${JSON.stringify(options)}.`
+    });
+  }
+  const island = await fetchIsland(ctx.e, ctx.options.component, typeof ctx.options.props !== "undefined" ? ctx.options.props : ctx.options);
   const head = createHeadCore();
   head.push(island.head);
   let defaultFontFamily = "sans-serif";
-  const firstFont = fonts[0];
+  const normalisedFonts = normaliseFontInput([...options.fonts || [], ...fonts]);
+  const firstFont = normalisedFonts[0];
   if (firstFont)
     defaultFontFamily = firstFont.name;
   await applyEmojis(ctx, island);
-  let html = island.html;
+  let html2 = island.html;
   const googleFonts = {};
   fonts.filter((font) => !font.path).forEach((font) => {
     if (!googleFonts[font.name])
@@ -98,11 +106,11 @@ svg[data-emoji] {
       })
     ]
   });
-  html = html.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+  html2 = html2.replaceAll(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
   const headChunk = await renderSSRHead(head);
   return `<!DOCTYPE html>
 <html ${headChunk.htmlAttrs}>
 <head>${headChunk.headTags}</head>
-<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html}</div>${headChunk.bodyTags}</body>
+<body ${headChunk.bodyAttrs}>${headChunk.bodyTagsOpen}<div data-v-inspector-ignore="true" style="position: relative; display: flex; margin: 0 auto; width: ${options.width}px; height: ${options.height}px; overflow: hidden;">${html2}</div>${headChunk.bodyTags}</body>
 </html>`;
 }

package/dist/runtime/nitro/plugins/nuxt-content.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nitropack/dist/runtime/plugin").NitroAppPlugin;
+declare const _default: import("nitropack").NitroAppPlugin;
 export default _default;

package/dist/runtime/nitro/plugins/{nuxt-content.mjs → nuxt-content.js}

@@ -1,15 +1,18 @@
 import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
 import { defu } from "defu";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../utils.mjs";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
 export default defineNitroPlugin((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;
-    if (content.path && content.ogImage) {
+    let path = content.path;
+    if (isNuxtContentDocumentDriven)
+      path = content._path;
+    if (path && content.ogImage) {
       const ogImageConfig = typeof content.ogImage === "object" ? content.ogImage : {};
-      const { defaults } = useOgImageRuntimeConfig();
       const optionsWithDefault = defu(ogImageConfig, defaults);
-      const src = getOgImagePath(content.path, optionsWithDefault);
+      const src = getOgImagePath(path, optionsWithDefault);
       const payload = {
         title: content.title,
         excerpt: content.description || content.excerpt,

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

@@ -0,0 +1,28 @@
+import { parseURL } from "ufo";
+import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
+import { extractAndNormaliseOgImageOptions, resolvePathCacheKey } from "../og-image/context.js";
+import { prerenderOptionsCache } from "../og-image/cache.js";
+import { isInternalRoute } from "../../pure.js";
+import { createNitroRouteRuleMatcher } from "../util/kit.js";
+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 routeRuleMatcher = createNitroRouteRuleMatcher();
+    const routeRules = routeRuleMatcher(path);
+    if (routeRules.ogImage === 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/{server/routes/__og-image__ → nitro/routes}/debug.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
     componentNames: any;
-    runtimeConfig: import("../../../types").OgImageRuntimeConfig;
+    runtimeConfig: import("../../types").OgImageRuntimeConfig;
     compatibility: any;
 }>>;
 export default _default;

package/dist/runtime/{server/routes/__og-image__/debug.json.mjs → nitro/routes/debug.json.js}

@@ -1,5 +1,5 @@
 import { defineEventHandler, setHeader } from "h3";
-import { useOgImageRuntimeConfig } from "../../../utils.mjs";
+import { useOgImageRuntimeConfig } from "../../shared.js";
 import compatibility from "#nuxt-og-image/compatibility";
 import { componentNames } from "#nuxt-og-image/component-names.mjs";
 export default defineEventHandler(async (e) => {

package/dist/runtime/{server/routes/__og-image__/font-[name]-[weight].[extension].mjs → nitro/routes/font.js}

@@ -1,5 +1,6 @@
-import { createError, defineEventHandler } from "h3";
+import { createError, defineEventHandler, getQuery, proxyRequest, sendRedirect } from "h3";
 import { parseURL } from "ufo";
+import { normaliseFontInput, useOgImageRuntimeConfig } from "../../shared.js";
 export default defineEventHandler(async (e) => {
   const path = parseURL(e.path).pathname;
   const [_name, _weight] = path.split("/font/")[1].split(".")[0].split("/");
@@ -7,6 +8,22 @@ export default defineEventHandler(async (e) => {
     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.
@@ -20,11 +37,11 @@ export default defineEventHandler(async (e) => {
     });
   }
   const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-  if (ttfResource[1])
-    return globalThis.$fetch(ttfResource[1], { responseType: "arrayBuffer" });
+  if (ttfResource?.[1])
+    return proxyRequest(e, ttfResource[1], {});
   const woff2Resource = css.match(/src: url\((.+)\) format\('woff2'\)/);
-  if (woff2Resource[1])
-    return globalThis.$fetch(woff2Resource[1], { responseType: "arrayBuffer" });
+  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 → nitro/routes/image.js}

@@ -1,12 +1,10 @@
 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";
+import { useOgImageBufferCache } from "../util/cache.js";
+import { useOgImageRuntimeConfig } from "../../shared.js";
+import { resolveContext } from "../og-image/context.js";
+import { html } from "../og-image/templates/html.js";
 export default defineEventHandler(async (e) => {
-  const ctx = await resolveRendererContext(e);
+  const ctx = await resolveContext(e);
   if (ctx instanceof H3Error)
     return ctx;
   const { isDebugJsonPayload, extension, options, renderer } = ctx;
@@ -18,10 +16,11 @@ export default defineEventHandler(async (e) => {
       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,
@@ -31,7 +30,7 @@ export default defineEventHandler(async (e) => {
   switch (extension) {
     case "html":
       setHeader(e, "Content-Type", `text/html`);
-      return devIframeTemplate(ctx);
+      return html(ctx);
     case "svg":
       if (!debug && !import.meta.dev) {
         return createError({

package/dist/runtime/nitro/tsconfig.json

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

package/dist/runtime/{cache.d.ts → nitro/util/cache.d.ts}

@@ -1,5 +1,5 @@
-import { type H3Error } from 'h3';
-import type { OgImageRenderEventContext } from './types';
+import type { H3Error } from 'h3';
+import type { OgImageRenderEventContext } from '../../types.js';
 export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
     baseCacheKey: string | false;
     cacheMaxAgeSeconds?: number;

package/dist/runtime/{cache.mjs → nitro/util/cache.js}

@@ -34,8 +34,9 @@ export async function useOgImageBufferCache(ctx, options) {
           modifiedTime: new Date(headers["last-modified"]),
           etag: headers.etag,
           maxAge
-        }))
+        })) {
           return;
+        }
         setHeaders(ctx.e, headers);
       } else {
         await cache.removeItem(key).catch(() => {

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

@@ -0,0 +1,3 @@
+export declare function htmlDecodeQuotes(html: string): string;
+export declare function decodeHtml(html: string): string;
+export declare function decodeObjectHtmlEntities(obj: Record<string, string | any>): Record<string, any>;

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

@@ -0,0 +1,15 @@
+export function htmlDecodeQuotes(html) {
+  return html.replace(/"/g, '"').replace(/'/g, "'").replace(/'/g, "'");
+}
+export function decodeHtml(html) {
+  return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&cent;/g, "\xA2").replace(/&pound;/g, "\xA3").replace(/&yen;/g, "\xA5").replace(/&euro;/g, "\u20AC").replace(/&copy;/g, "\xA9").replace(/&reg;/g, "\xAE").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&#x2F;/g, "/").replace(/&#(\d+);/g, (full, int) => {
+    return String.fromCharCode(Number.parseInt(int));
+  });
+}
+export function decodeObjectHtmlEntities(obj) {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (typeof value === "string")
+      obj[key] = decodeHtml(value);
+  });
+  return obj;
+}

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

@@ -0,0 +1,6 @@
+import type { NitroRouteRules } from 'nitropack';
+import type { H3Event } from 'h3';
+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;
+export declare function createNitroRouteRuleMatcher(): ((path: string) => NitroRouteRules);

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

@@ -0,0 +1,32 @@
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { defu } from "defu";
+import { withoutBase, withoutTrailingSlash } from "ufo";
+import { hash } from "ohash";
+import { useRuntimeConfig } from "#imports";
+export function fetchIsland(e, component, props) {
+  const hashId = hash([component, props]);
+  return e.$fetch(`/__nuxt_island/${component}_${hashId}.json`, {
+    params: {
+      props: JSON.stringify(props)
+    }
+  });
+}
+export function withoutQuery(path) {
+  return path.split("?")[0];
+}
+export function createNitroRouteRuleMatcher() {
+  const { nitro, app } = useRuntimeConfig();
+  const _routeRulesMatcher = toRouteMatcher(
+    createRadixRouter({
+      routes: Object.fromEntries(
+        Object.entries(nitro?.routeRules || {}).map(([path, rules]) => [withoutTrailingSlash(path), rules])
+      )
+    })
+  );
+  return (path) => {
+    return defu({}, ..._routeRulesMatcher.matchAll(
+      // radix3 does not support trailing slashes
+      withoutBase(withoutTrailingSlash(withoutQuery(path)), app.baseURL)
+    ).reverse());
+  };
+}

package/dist/runtime/{core/utils → nitro/util}/wasm.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="node" />
 export declare function importWasm(input: any): Promise<any>;
 export declare function readWasmFile(input: string): Promise<Buffer>;

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

@@ -0,0 +1,5 @@
+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;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,5 @@
+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;
+}, {}>;
+export default _default;

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

@@ -0,0 +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>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 /**
  * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
+ * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/Docs.vue
  */
 import { computed } from 'vue'
 
@@ -11,7 +11,8 @@ const props = withDefaults(defineProps<{ title?: string, description?: string, h
   headline: 'headline',
 })
 
-const title = computed(() => props.title.slice(0, 60))
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
 </script>
 
 <template>
@@ -48,11 +49,11 @@ const title = computed(() => props.title.slice(0, 60))
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
+      <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
         <span>{{ title }}</span>
       </h1>
-      <p class="text-[32px] text-[#E4E4E7] leading-tight">
-        {{ description.slice(0, 200) }}
+      <p v-if="description" class="text-[32px] text-[#E4E4E7] leading-tight">
+        {{ description }}
       </p>
     </div>
     <svg

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

@@ -4,7 +4,7 @@
  */
 
 import { computed, defineComponent, h, resolveComponent } from 'vue'
-import { useOgImageRuntimeConfig } from '../../../utils'
+import { useOgImageRuntimeConfig } from '../../../../shared'
 import { useSiteConfig } from '#imports'
 
 // convert to typescript props
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<{
   title: 'title',
 })
 
-const HexRegex = /^#([0-9a-f]{3}){1,2}$/i
+const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
 
 const runtimeConfig = useOgImageRuntimeConfig()
 
@@ -78,13 +78,13 @@ const IconComponent = runtimeConfig.hasNuxtIcon
   ? resolveComponent('Icon')
   : defineComponent({
     render() {
-      return h('div', 'missing nuxt-icon')
+      return h('div', 'missing @nuxt/icon')
     },
   })
 if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev) {
-  console.warn('Please install `nuxt-icon` to use icons with the fallback OG Image component.')
+  console.warn('Please install `@nuxt/icon` to use icons with the fallback OG Image component.')
   // eslint-disable-next-line no-console
-  console.log('\nnpm add -D nuxt-icon\n')
+  console.log('\nnpx nuxi module add icon\n')
   // create simple div renderer component
 }
 </script>

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 /**
  * @credits Pergel <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
  */
 import { computed } from 'vue'
 
@@ -33,7 +32,7 @@ const title = computed(() => props.title.slice(0, 60))
 
     <div class="w-[600px] pl-[100px]">
       <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
-        Oku - Pergel
+        {{ headline }}
       </p>
       <h1 class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
         <span>{{ title }}</span>

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

@@ -25,10 +25,10 @@ const org = computed(() => props.title.split('/')[0])
 const repo = computed(() => props.title.split('/')[1])
 
 const stars = computed(() => {
-  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(props.stars || 0)
+  return new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(Number(props.stars || 0))
 })
 const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
-  .format(props.downloads || 0),
+  .format(Number(props.downloads || 0)),
 )
 
 const description = computed(() => (props.description || '').slice(0, 200))

package/dist/runtime/{composables → nuxt/composables}/defineOgImage.d.ts

@@ -1,2 +1,2 @@
-import type { DefineOgImageInput } from '../types';
+import type { DefineOgImageInput } from '../../types.js';
 export declare function defineOgImage(_options?: DefineOgImageInput): void;