nuxt-og-image 3.0.0-beta.5 → 3.0.0-beta.51

package/dist/runtime/cache.d.ts

@@ -1,12 +1,9 @@
-import type { H3Event } from 'h3';
-export declare function useNitroCache<T>(e: H3Event, options: {
-    key: string;
-    cacheTtl: number;
-    cache: boolean;
-    headers: boolean;
-    skipRestore?: boolean;
-}): Promise<{
-    cachedItem: false | T;
+import type { OgImageRenderEventContext } from './types';
+export declare function useOgImageBufferCache(ctx: OgImageRenderEventContext, options: {
+    baseCacheKey: string | false;
+    cacheMaxAgeSeconds?: number;
+}): Promise<void | {
+    cachedItem: false | BufferSource;
     enabled: boolean;
-    update: (item: T) => Promise<void>;
+    update: (image: BufferSource) => Promise<void>;
 }>;

package/dist/runtime/cache.mjs

@@ -1,45 +1,58 @@
 import { prefixStorage } from "unstorage";
-import { getQuery, setHeader } from "h3";
-import { useRuntimeConfig, useStorage } from "#imports";
-export async function useNitroCache(e, options) {
-  const module = "nuxt-og-image";
-  const { runtimeCacheStorage, version } = useRuntimeConfig()[module];
-  const enabled = options.cache && runtimeCacheStorage && options.cacheTtl && options.cacheTtl > 0;
-  const baseCacheKey = runtimeCacheStorage === "default" ? `/cache/${module}@${version}` : `/${module}@${version}`;
-  const cache = prefixStorage(useStorage(), `${baseCacheKey}/`);
-  const key = options.key;
-  let xCacheHeader = "DISABLED";
-  let xCacheExpires = 0;
-  const newExpires = Date.now() + (options.cacheTtl || 0);
-  const purge = typeof getQuery(e).purge !== "undefined";
+import { getQuery, handleCacheHeaders, setHeader, setHeaders } from "h3";
+import { withTrailingSlash } from "ufo";
+import { hash } from "ohash";
+import { useStorage } from "#imports";
+export async function useOgImageBufferCache(ctx, options) {
+  const maxAge = Number(options.cacheMaxAgeSeconds);
+  const enabled = !import.meta.dev && import.meta.env.MODE !== "test" && maxAge > 0;
+  const cache = prefixStorage(useStorage(), withTrailingSlash(options.baseCacheKey || "/"));
+  const key = ctx.key;
   let cachedItem = false;
-  if (!options.skipRestore && enabled && await cache.hasItem(key).catch(() => false)) {
-    const { value, expiresAt } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
-    if (purge) {
-      xCacheHeader = "PURGE";
-      xCacheExpires = newExpires;
+  if (enabled && await cache.hasItem(key).catch(() => false)) {
+    const { value, expiresAt, headers } = await cache.getItem(key).catch(() => ({ value: null, expiresAt: Date.now() }));
+    if (typeof getQuery(ctx.e).purge !== "undefined") {
       await cache.removeItem(key).catch(() => {
       });
     } else if (expiresAt > Date.now()) {
-      xCacheHeader = "HIT";
-      xCacheExpires = newExpires;
-      cachedItem = value;
+      cachedItem = Buffer.from(value, "base64");
+      if (handleCacheHeaders(ctx.e, {
+        modifiedTime: new Date(headers["last-modified"]),
+        etag: headers.etag,
+        maxAge
+      }))
+        return;
+      setHeaders(ctx.e, headers);
     } else {
-      xCacheHeader = "MISS";
-      xCacheExpires = expiresAt;
       await cache.removeItem(key).catch(() => {
       });
     }
   }
-  if (options.headers) {
-    setHeader(e, `x-${module}-cache`, xCacheHeader);
-    setHeader(e, `x-${module}-expires`, xCacheExpires.toString());
+  if (!enabled) {
+    setHeader(ctx.e, "Cache-Control", "no-cache, no-store, must-revalidate");
+    setHeader(ctx.e, "Pragma", "no-cache");
+    setHeader(ctx.e, "Expires", "0");
   }
   return {
     enabled,
     cachedItem,
     async update(item) {
-      enabled && await cache.setItem(key, { value: item, expiresAt: Date.now() + (options.cacheTtl || 0) });
+      if (!enabled)
+        return;
+      const value = Buffer.from(item).toString("base64");
+      const headers = {
+        // avoid multi-tenancy cache issues
+        "Vary": "accept-encoding, host",
+        "etag": `W/"${hash(value)}"`,
+        "last-modified": (/* @__PURE__ */ new Date()).toUTCString(),
+        "cache-control": `public, s-maxage=${maxAge}, stale-while-revalidate`
+      };
+      setHeaders(ctx.e, headers);
+      await cache.setItem(key, {
+        value,
+        headers,
+        expiresAt: Date.now() + maxAge * 1e3
+      });
     }
   };
 }

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

@@ -0,0 +1,5 @@
+import type { OgImageOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImageOptions<"NuxtSeo">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImageOptions<"NuxtSeo">>, {
+    props?: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/OgImage/{index.mjs → OgImage.mjs}

@@ -4,7 +4,7 @@ export default defineComponent({
   name: "OgImage",
   async setup(_, { attrs }) {
     if (import.meta.server)
-      await defineOgImage(attrs);
+      defineOgImage(attrs);
     return () => null;
   }
 });

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

@@ -0,0 +1,5 @@
+import type { OgImagePageScreenshotOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<OgImagePageScreenshotOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<OgImagePageScreenshotOptions>, {
+    props?: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/OgImage/{Screenshot.mjs → OgImageScreenshot.mjs}

@@ -4,7 +4,7 @@ export default defineComponent({
   name: "OgImageScreenshot",
   async setup(_, { attrs }) {
     if (import.meta.server)
-      await defineOgImageScreenshot(attrs);
+      defineOgImageScreenshot(attrs);
     return () => null;
   }
 });

package/dist/runtime/components/Templates/{Official → Community}/BrandedLogo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-// inherited attrs can mess up the satori parser
-defineOptions({ inheritAttrs: false })
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
 
 withDefaults(defineProps<{
   title?: string

package/dist/runtime/components/Templates/Community/Nuxt.vue

@@ -3,14 +3,15 @@
  * @credits NuxtLabs <https://nuxtlabs.com/>
  * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/OgImageDocs.vue
  */
+import { computed } from 'vue'
 
-defineOptions({ inheritAttrs: false })
-
-withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
   title: 'title',
   description: 'description',
   headline: 'headline',
 })
+
+const title = computed(() => props.title.slice(0, 60))
 </script>
 
 <template>
@@ -43,11 +44,11 @@ withDefaults(defineProps<{ title?: string, description?: string, headline?: stri
       </defs>
     </svg>
 
-    <div class="w-[700px] pl-[100px]">
+    <div class="w-[600px] pl-[100px]">
       <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
         {{ headline }}
       </p>
-      <h1 class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
+      <h1 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">

package/dist/runtime/components/Templates/Community/NuxtSeo.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+/**
+ * @credits Nuxt SEO <https://nuxtseo.com/>
+ */
+
+import { computed, defineComponent, h, resolveComponent } from 'vue'
+import { useOgImageRuntimeConfig } from '../../../utils'
+import { useSiteConfig } from '#imports'
+
+// convert to typescript props
+const props = withDefaults(defineProps<{
+  colorMode?: 'dark' | 'light'
+  title?: string
+  description?: string
+  icon?: string | boolean
+  siteName?: string
+  siteLogo?: string
+  theme?: string
+}>(), {
+  theme: '#00dc82',
+  title: 'title',
+})
+
+const HexRegex = /^#([0-9a-f]{3}){1,2}$/i
+
+const runtimeConfig = useOgImageRuntimeConfig()
+
+const colorMode = computed(() => {
+  return props.colorMode || runtimeConfig.colorPreference || 'light'
+})
+
+const themeHex = computed(() => {
+  // regex test if valid hex
+  if (HexRegex.test(props.theme))
+    return props.theme
+
+  // if it's hex without the hash, just add the hash
+  if (HexRegex.test(`#${props.theme}`))
+    return `#${props.theme}`
+
+  // if it's rgb or rgba, we convert it to hex
+  if (props.theme.startsWith('rgb')) {
+    const rgb = props.theme
+      .replace('rgb(', '')
+      .replace('rgba(', '')
+      .replace(')', '')
+      .split(',')
+      .map(v => Number.parseInt(v.trim(), 10))
+    const hex = rgb
+      .map((v) => {
+        const hex = v.toString(16)
+        return hex.length === 1 ? `0${hex}` : hex
+      })
+      .join('')
+    return `#${hex}`
+  }
+  return '#FFFFFF'
+})
+
+const themeRgb = computed(() => {
+  // we want to convert it so it's just `<red>, <green>, <blue>` (255, 255, 255)
+  return themeHex.value
+    .replace('#', '')
+    .match(/.{1,2}/g)
+    ?.map(v => Number.parseInt(v, 16))
+    .join(', ')
+})
+
+const siteConfig = useSiteConfig()
+const siteName = computed(() => {
+  return props.siteName || siteConfig.name
+})
+const siteLogo = computed(() => {
+  return props.siteLogo || siteConfig.logo
+})
+
+const IconComponent = runtimeConfig.hasNuxtIcon
+  ? resolveComponent('Icon')
+  : defineComponent({
+    render() {
+      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.')
+  // eslint-disable-next-line no-console
+  console.log('\nnpm add -D nuxt-icon\n')
+  // create simple div renderer component
+}
+</script>
+
+<template>
+  <div
+    class="w-full h-full flex justify-between relative p-[60px]"
+    :class="[
+      colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-gray-50'],
+    ]"
+  >
+    <div
+      class="flex absolute top-0 right-[-100%]" :style="{
+        width: '200%',
+        height: '200%',
+        backgroundImage: `radial-gradient(circle, rgba(${themeRgb}, 0.5) 0%,  ${colorMode === 'dark' ? 'rgba(5, 5, 5,0.3)' : 'rgba(255, 255, 255, 0.7)'} 50%, ${props.colorMode === 'dark' ? 'rgba(5, 5, 5,0)' : 'rgba(255, 255, 255, 0)'} 70%)`,
+      }"
+    />
+    <div class="h-full w-full justify-between relative">
+      <div class="flex flex-row justify-between items-start">
+        <div class="flex flex-col w-full max-w-[65%]">
+          <h1 class="m-0 font-bold mb-[30px] text-[75px]">
+            {{ title }}
+          </h1>
+          <p
+            v-if="description" class="text-[35px]" :class="[
+              colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300'],
+            ]"
+          >
+            {{ description }}
+          </p>
+        </div>
+        <div v-if="icon" style="width: 30%;" class="flex justify-end">
+          <IconComponent :name="icon" size="250px" style="margin: 0 auto; opacity: 0.7;" />
+        </div>
+      </div>
+      <div class="flex flex-row justify-center items-center text-left w-full">
+        <img v-if="siteLogo" :src="siteLogo" height="30">
+        <template v-else>
+          <svg height="50" width="50" class="mr-3" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+            <path :fill="theme.includes('#') ? theme : `#${theme}`" d="M62.3,-53.9C74.4,-34.5,73.5,-9,67.1,13.8C60.6,36.5,48.7,56.5,30.7,66.1C12.7,75.7,-11.4,74.8,-31.6,65.2C-51.8,55.7,-67.9,37.4,-73.8,15.7C-79.6,-6,-75.1,-31.2,-61.1,-51C-47.1,-70.9,-23.6,-85.4,0.8,-86C25.1,-86.7,50.2,-73.4,62.3,-53.9Z" transform="translate(100 100)" />
+          </svg>
+          <p v-if="siteName" style="font-size: 25px;" class="font-bold">
+            {{ siteName }}
+          </p>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/Templates/Community/Pergel.vue

@@ -0,0 +1,104 @@
+<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'
+
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+  headline: 'headline',
+})
+
+const title = computed(() => props.title.slice(0, 60))
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-[#212121]">
+    <svg class="absolute top-0 right-0" width="1200" height="675" viewBox="0 0 1200 675" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g style="mix-blend-mode:overlay" opacity="0.7" filter="url(#filter0_f_448_25)">
+        <circle cx="901.5" cy="45.5" r="199.5" fill="#FFA7A7" />
+        <circle cx="600.5" cy="216.5" r="199.5" fill="#FFCC49" />
+        <circle cx="179.5" cy="317.5" r="199.5" fill="#FFA149" />
+      </g>
+      <defs>
+        <filter id="filter0_f_448_25" x="-240" y="-374" width="1561" height="1111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="110" result="effect1_foregroundBlur_448_25" />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="w-[600px] pl-[100px]">
+      <p v-if="headline" class="uppercase text-[24px] text-[#FEC476] mb-4 font-semibold">
+        Oku - Pergel
+      </p>
+      <h1 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>
+    </div>
+
+    <svg class="absolute top-[250px] right-[190px]" width="241" height="184" viewBox="0 0 241 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_ddd_563_6)">
+        <path d="M204.852 126.822C204.852 127.098 204.677 128.114 202.583 129.748C200.551 131.335 197.276 133.034 192.613 134.687C183.325 137.979 169.872 140.62 153.875 142.19C137.92 143.755 120.334 144.166 103.363 143.367C86.3776 142.566 70.8801 140.594 58.8213 137.738C52.7901 136.31 47.8449 134.713 44.0617 133.037C40.1988 131.325 37.891 129.679 36.7621 128.335C36.2309 127.702 36.0703 127.267 36.0227 127.035C35.9829 126.842 35.9842 126.629 36.1192 126.305C36.459 125.488 37.6413 124.038 40.7165 122.28C46.7614 118.823 57.5073 115.641 71.9244 113.359C86.2251 111.096 103.109 109.879 120.426 109.879" stroke="url(#paint0_angular_563_6)" stroke-width="8" />
+      </g>
+      <g clip-path="url(#clip0_563_6)">
+        <g filter="url(#filter1_i_563_6)">
+          <path d="M211.514 112.29L209.41 124.066L200.573 115.781L182.897 61.0337C186.772 60.5223 190.442 59.2291 193.777 57.2455L211.514 112.29ZM196.523 35.7822C195.733 40.2018 193.22 44.1268 189.537 46.6936C185.853 49.2604 181.301 50.2588 176.881 49.4691L174.437 49.0324L131.693 103.474L120.534 108.187L122.638 96.4106L165.598 41.721C160.708 33.7969 163.149 23.3421 171.139 18.407C174.615 16.2766 178.781 15.416 182.836 16.1405L184.821 5.03095C186.294 5.29416 187.603 6.13183 188.458 7.35968C189.314 8.58752 189.647 10.105 189.383 11.5782L188.212 18.1328C194.461 21.6568 197.783 28.7276 196.523 35.7822ZM185.413 33.7973C185.677 32.3241 185.344 30.8066 184.488 29.5788C183.633 28.3509 182.324 27.5133 180.851 27.25C179.378 26.9868 177.861 27.3196 176.633 28.1752C175.405 29.0308 174.567 30.3391 174.304 31.8123C174.041 33.2856 174.374 34.803 175.229 36.0308C176.085 37.2587 177.393 38.0964 178.866 38.3596C180.339 38.6228 181.857 38.29 183.085 37.4344C184.313 36.5788 185.15 35.2705 185.413 33.7973Z" fill="url(#paint1_diamond_563_6)" />
+        </g>
+      </g>
+      <defs>
+        <filter id="filter0_ddd_563_6" x="-3.8147e-05" y="77.8786" width="240.852" height="105.886" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dy="3.62319" />
+          <feGaussianBlur stdDeviation="7.24638" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.667391 0 0 0 0 0.3625 0 0 0 0.75 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_563_6" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="16" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.854792 0 0 0 0 0.4875 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="effect1_dropShadow_563_6" result="effect2_dropShadow_563_6" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="effect2_dropShadow_563_6" result="effect3_dropShadow_563_6" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_563_6" result="shape" />
+        </filter>
+        <filter id="filter1_i_563_6" x="120.534" y="5.03094" width="94.9804" height="123.035" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dx="7" dy="5" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_563_6" />
+        </filter>
+        <radialGradient id="paint0_angular_563_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120.426 126.822) rotate(90) scale(20.943 88.4261)">
+          <stop offset="0.0677083" stop-color="#FFE092" />
+          <stop offset="0.333333" stop-color="#FFD792" />
+          <stop offset="0.666667" stop-color="#FFD192" />
+          <stop offset="1" stop-color="#FFAC5F" />
+        </radialGradient>
+        <radialGradient id="paint1_diamond_563_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(303.899 145.741) rotate(-155.036) scale(253.361 239.508)">
+          <stop offset="0.333674" stop-color="#FEC479" />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </radialGradient>
+        <clipPath id="clip0_563_6">
+          <rect width="135.426" height="135.426" fill="white" transform="translate(96.5743)" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>

package/dist/runtime/components/Templates/{Official → Community}/SimpleBlog.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { parseURL } from 'ufo'
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
 
-// inherited attrs can mess up the satori parser
-defineOptions({ inheritAttrs: false })
+import { parseURL } from 'ufo'
+import { computed, useSiteConfig } from '#imports'
 
 const props = withDefaults(defineProps<{
   title?: string
@@ -24,9 +26,9 @@ const website = computed(() => {
         <h1 class="text-[80px] p-20 font-black text-left">
           {{ title }}
         </h1>
-        <div class="text-2xl pb-10 px-20 font-bold mb-0">
+        <p class="text-2xl pb-10 px-20 font-bold mb-0">
           {{ website }}
-        </div>
+        </p>
       </div>
     </div>
   </div>

package/dist/runtime/components/Templates/Community/UnJs.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from '#imports'
+
+/**
+ * @credits UnJS <https://unjs.io/>
+ */
+
+const props = withDefaults(defineProps<{
+  title?: string
+  description?: string
+  emoji?: string
+  downloads?: string | number
+  stars?: string | number
+  contributors?: string | number
+}>(), {
+  title: 'unjs/h3',
+  description: 'Minimal H(TTP) framework built for high performance and portability',
+  emoji: '⚡',
+  downloads: '2500000',
+  stars: '2400',
+  contributors: '30',
+})
+
+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)
+})
+const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
+  .format(props.downloads || 0),
+)
+
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col bg-white">
+    <div class="pt-[60px] pb-[70px] px-[6.75rem] h-full flex flex-col justify-between">
+      <div class="flex flex-row justify-between">
+        <div class="max-w-[700px]">
+          <h1 class="mb-[30px] max-w-[700px] text-[60px] text-gray-900 font-normal flex flex-row">
+            <span>{{ org }}</span>
+            <span v-if="repo" class="ml-2">/</span>
+            <span v-if="repo" class="ml-2 font-bold">{{ repo }}</span>
+          </h1>
+          <p class="text-gray-500 max-w-[700px] text-[35px] leading-[60px]">
+            {{ description }}
+          </p>
+        </div>
+        <div class="text-[200px]">
+          {{ emoji }}
+        </div>
+      </div>
+      <div class="flex flex-row items-center justify-between">
+        <div class="flex flex-row text-[40px]">
+          <div class="flex flex-row pr-10">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="m4.67 28l6.39-12l7.3 6.49a2 2 0 0 0 1.7.47a2 2 0 0 0 1.42-1.07L27 10.9l-1.82-.9l-5.49 11l-7.3-6.49a2 2 0 0 0-1.68-.51a2 2 0 0 0-1.42 1L4 25V2H2v26a2 2 0 0 0 2 2h26v-2Z" /></svg>
+            <div class="pl-2">
+              <div>{{ downloads }}</div>
+              <div class="text-lg text-gray-600">
+                Monthly Downloads
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-row pr-10">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="m16 6.52l2.76 5.58l.46 1l1 .15l6.16.89l-4.38 4.3l-.75.73l.18 1l1.05 6.13l-5.51-2.89L16 23l-.93.49l-5.51 2.85l1-6.13l.18-1l-.74-.77l-4.42-4.35l6.16-.89l1-.15l.46-1L16 6.52M16 2l-4.55 9.22l-10.17 1.47l7.36 7.18L6.9 30l9.1-4.78L25.1 30l-1.74-10.13l7.36-7.17l-10.17-1.48Z" /></svg>
+            <div class="pl-2">
+              <div>{{ stars }}</div>
+              <div class="text-lg text-gray-600">
+                Stars
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-row pr-10">
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="#888888" d="M22.45 6a5.47 5.47 0 0 1 3.91 1.64a5.7 5.7 0 0 1 0 8L16 26.13L5.64 15.64a5.7 5.7 0 0 1 0-8a5.48 5.48 0 0 1 7.82 0l2.54 2.6l2.53-2.58A5.44 5.44 0 0 1 22.45 6m0-2a7.47 7.47 0 0 0-5.34 2.24L16 7.36l-1.11-1.12a7.49 7.49 0 0 0-10.68 0a7.72 7.72 0 0 0 0 10.82L16 29l11.79-11.94a7.72 7.72 0 0 0 0-10.82A7.49 7.49 0 0 0 22.45 4Z" /></svg>
+            <div class="pl-2">
+              <div>{{ contributors }}</div>
+              <div class="text-lg text-gray-600">
+                Contributors
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-row">
+          <svg width="100" height="100" class="rounded-[0.25rem] w-[100px] h-[100px]" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_206_4645)">
+              <mask id="mask0_206_4645" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+                <path d="M32 0H0V32H32V0Z" fill="white" />
+              </mask>
+              <g mask="url(#mask0_206_4645)">
+                <path d="M31.9142 32.0223C21.2766 32.0223 10.6506 32.0223 0.0246745 32.0223C0.0238272 32.0194 0.0222373 32.0166 0.0222373 32.0137C0.0221323 21.3508 0.0221329 10.688 0.0221329 0.0236816C10.6877 0.0236816 21.3534 0.0236816 32.0206 0.0236816C32.0206 10.6878 32.0206 21.3533 32.0206 32.0223C31.9901 32.0223 31.958 32.0223 31.9142 32.0223ZM26.4121 20.9345C26.361 20.8762 26.3128 20.8153 26.2585 20.7601C25.6577 20.1492 24.9011 20.0218 24.0955 20.0946C23.3969 20.1577 22.7984 20.4652 22.2811 20.9345C22.2532 20.9598 22.2227 20.9823 22.1824 21.0151C22.1824 20.9497 22.185 20.902 22.182 20.8546C22.1669 20.6225 22.0579 20.4465 21.8514 20.3407C21.649 20.2371 21.4421 20.247 21.2512 20.3689C21.0389 20.5045 20.9665 20.713 20.9667 20.958C20.9682 22.7933 20.9675 24.6286 20.9675 26.4639C20.9675 26.5784 20.9652 26.693 20.968 26.8074C20.9751 27.102 21.1313 27.3354 21.3685 27.4101C21.7847 27.5411 22.1817 27.2525 22.1823 26.8136C22.1839 25.5543 22.1836 24.2951 22.1824 23.0359C22.1821 22.6812 22.2717 22.356 22.4979 22.0791C23.025 21.434 23.7075 21.1616 24.5332 21.2556C24.9353 21.3015 25.2602 21.4881 25.4831 21.8327C25.6923 22.1561 25.7639 22.5212 25.7668 22.8971C25.7747 23.9347 25.7716 24.9724 25.7727 26.01C25.7731 26.2943 25.7683 26.5788 25.7739 26.863C25.7826 27.3076 26.2605 27.5828 26.6518 27.3716C26.9007 27.2373 26.9891 27.0176 26.9888 26.7463C26.9873 25.5683 26.9907 24.3903 26.9862 23.2123C26.9852 22.9326 26.9757 22.6511 26.9432 22.3735C26.883 21.8589 26.7401 21.3697 26.4121 20.9345ZM18.7519 20.2768C18.6788 20.282 18.6027 20.2759 18.5331 20.2944C18.2433 20.3715 18.0835 20.6019 18.0833 20.9365C18.0826 22.1367 18.0851 23.337 18.081 24.5372C18.0803 24.7357 18.07 24.9372 18.035 25.1319C17.9425 25.6461 17.6668 26.0312 17.1721 26.2263C16.6902 26.4164 16.194 26.423 15.695 26.2875C15.3165 26.1848 15.0263 25.9676 14.8367 25.6226C14.7009 25.3752 14.6347 25.1055 14.6298 24.8266C14.6199 24.2617 14.6232 23.6966 14.6226 23.1316C14.6218 22.4004 14.6236 21.6691 14.6219 20.9379C14.6211 20.5778 14.3819 20.295 14.069 20.2767C13.6814 20.254 13.4081 20.518 13.4076 20.9221C13.4063 22.1556 13.4047 23.389 13.4085 24.6225C13.4099 25.0635 13.4572 25.4984 13.6251 25.9135C13.9436 26.701 14.5379 27.1764 15.3353 27.4077C15.8372 27.5533 16.3542 27.5622 16.8722 27.5012C17.2723 27.4541 17.6549 27.3449 18.0035 27.1424C18.8265 26.6641 19.2453 25.9203 19.2718 24.9916C19.3108 23.63 19.2949 22.2667 19.2963 20.9041C19.2968 20.5622 19.0957 20.3353 18.7519 20.2768Z" fill="#ECDC5A" />
+                <path d="M26.4164 20.9411C26.7401 21.3697 26.883 21.8589 26.9432 22.3735C26.9757 22.6511 26.9852 22.9326 26.9862 23.2123C26.9907 24.3903 26.9873 25.5683 26.9888 26.7463C26.9891 27.0176 26.9007 27.2373 26.6518 27.3716C26.2605 27.5828 25.7825 27.3076 25.7739 26.863C25.7683 26.5787 25.773 26.2943 25.7728 26.01C25.7716 24.9723 25.7746 23.9347 25.7668 22.8971C25.7639 22.5212 25.6923 22.1561 25.4831 21.8327C25.2603 21.488 24.9353 21.3014 24.5332 21.2556C23.7076 21.1616 23.025 21.434 22.4979 22.0791C22.2718 22.356 22.182 22.6812 22.1824 23.0358C22.1836 24.2951 22.1839 25.5543 22.1823 26.8136C22.1817 27.2525 21.7847 27.5411 21.3686 27.4101C21.1313 27.3354 20.9751 27.102 20.968 26.8074C20.9653 26.6929 20.9676 26.5784 20.9676 26.4639C20.9676 24.6286 20.9682 22.7933 20.9667 20.9579C20.9665 20.713 21.039 20.5045 21.2512 20.3689C21.4421 20.2469 21.649 20.2371 21.8513 20.3407C22.0578 20.4465 22.1669 20.6224 22.182 20.8546C22.185 20.9019 22.1824 20.9497 22.1824 21.015C22.2227 20.9823 22.2532 20.9598 22.2811 20.9344C22.7984 20.4652 23.3969 20.1577 24.0955 20.0946C24.901 20.0218 25.6577 20.1492 26.2585 20.7601C26.3127 20.8153 26.361 20.8762 26.4164 20.9411Z" fill="#111827" />
+                <path d="M18.7618 20.2773C19.0957 20.3354 19.2968 20.5622 19.2963 20.9041C19.2949 22.2667 19.3108 23.63 19.2718 24.9916C19.2453 25.9204 18.8265 26.6641 18.0035 27.1424C17.6549 27.345 17.2723 27.4542 16.8722 27.5012C16.3542 27.5622 15.8372 27.5534 15.3353 27.4078C14.5379 27.1764 13.9436 26.701 13.6251 25.9135C13.4572 25.4984 13.4099 25.0635 13.4085 24.6225C13.4047 23.3891 13.4063 22.1556 13.4076 20.9221C13.4081 20.518 13.6814 20.2541 14.069 20.2767C14.3819 20.2951 14.6211 20.5779 14.6219 20.938C14.6236 21.6692 14.6218 22.4004 14.6226 23.1316C14.6232 23.6966 14.6199 24.2618 14.6298 24.8266C14.6347 25.1055 14.7009 25.3753 14.8367 25.6226C15.0263 25.9677 15.3165 26.1848 15.695 26.2876C16.1939 26.423 16.6902 26.4164 17.1721 26.2263C17.6668 26.0313 17.9425 25.6461 18.035 25.132C18.07 24.9372 18.0803 24.7358 18.081 24.5373C18.0851 23.337 18.0826 22.1368 18.0833 20.9366C18.0835 20.602 18.2433 20.3715 18.5331 20.2944C18.6027 20.2759 18.6788 20.282 18.7618 20.2773Z" fill="#111827" />
+              </g>
+            </g>
+            <defs>
+              <clipPath id="clip0_206_4645">
+                <rect width="32" height="32" rx="2" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <div class="absolute bottom-0 w-full h-8 bg-[#ECDC5A]" />
+  </div>
+</template>

package/dist/runtime/components/Templates/{Official → Community}/Wave.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-// inherited attrs can mess up the satori parser
-defineOptions({ inheritAttrs: false })
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
 
 withDefaults(defineProps<{
   title?: string

package/dist/runtime/components/Templates/{Official → Community}/WithEmoji.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-// inherited attrs can mess up the satori parser
-defineOptions({ inheritAttrs: false })
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
 
 withDefaults(defineProps<{
   emoji?: string

package/dist/runtime/composables/defineOgImage.d.ts

@@ -1,23 +1,2 @@
-import type { AllowedComponentProps, Component, ComponentCustomProps, VNodeProps } from '@vue/runtime-core';
-import type { OgImageOptions, OgImageScreenshotOptions } from '../types';
-import type { OgImageComponents } from '#nuxt-og-image/components';
-export declare function defineOgImageScreenshot(options?: OgImageScreenshotOptions): void;
-/**
- * @param options
- * @deprecated Use `defineOgImage` or `defineOgImageCached` instead
- */
-export declare function defineOgImageStatic(options?: OgImageOptions): void;
-export declare function defineOgImageCached(options?: OgImageOptions): void;
-export declare function defineOgImageWithoutCache(options?: OgImageOptions): void;
-/**
- * @param options
- * @deprecated Use `defineOgImageWithoutCache` instead
- */
-export declare function defineOgImageDynamic(options?: OgImageOptions): void;
-type OgImagePrebuilt = {
-    url: string;
-} & Pick<OgImageOptions, 'width' | 'height' | 'alt'>;
-type ExtractComponentProps<T extends Component> = T extends new (...args: any) => any ? Omit<InstanceType<T>['$props'], keyof ComponentCustomProps | keyof VNodeProps | keyof AllowedComponentProps> : never;
-export declare function defineOgImageComponent<T extends keyof OgImageComponents>(component: T, props: ExtractComponentProps<OgImageComponents[T]>, options?: OgImageOptions): void;
-export declare function defineOgImage(_options?: OgImagePrebuilt | OgImageOptions): void;
-export {};
+import type { DefineOgImageInput } from '../types';
+export declare function defineOgImage(_options?: DefineOgImageInput): void;