nuxt-og-image 5.1.0 → 5.1.2

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

@@ -1,20 +1,14 @@
-<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 setup>
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  bg: { type: String, required: false, default: "linear-gradient(to bottom right, #171717, #131313)" },
+  icon: { type: String, required: false },
+  logo: { type: String, required: false },
+  image: { type: String, required: false },
+  username: { type: String, required: false },
+  socials: { type: Array, required: false }
+});
 </script>
 
 <template>
@@ -56,7 +50,7 @@ withDefaults(defineProps<{
       <Icon
         v-for="social of socials"
         :key="social.name"
-        :name="social.icon!"
+        :name="social.icon"
         class="w-7 h-7"
       />
     </div>

package/dist/runtime/app/components/Templates/Community/Frame.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @credits @arashsheyda <https://github.com/arashsheyda>
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    bg?: string;
+    icon?: string;
+    logo?: string;
+    image?: string;
+    username?: string;
+    socials?: {
+        name: string;
+        icon: string;
+    }[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bg: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,18 +1,12 @@
-<script lang="ts" setup>
-/**
- * @credits NuxtLabs <https://nuxtlabs.com/>
- * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/Docs.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))
-const description = computed(() => (props.description || '').slice(0, 200))
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false, default: "description" },
+  headline: { type: String, required: false, default: "headline" }
+});
+const title = computed(() => (props.title || "").slice(0, 60));
+const description = computed(() => (props.description || "").slice(0, 200));
 </script>
 
 <template>

package/dist/runtime/app/components/Templates/Community/Nuxt.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,91 +1,54 @@
-<script setup lang="ts">
-/**
- * @credits Nuxt SEO <https://nuxtseo.com/>
- */
-
-import { useSiteConfig } from '#imports'
-import { useOgImageRuntimeConfig } from '#og-image/shared'
-import { computed, defineComponent, h, resolveComponent } from 'vue'
-
-// 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()
-
+<script setup>
+import { useSiteConfig } from "#imports";
+import { useOgImageRuntimeConfig } from "#og-image/shared";
+import { computed, defineComponent, h, resolveComponent } from "vue";
+const props = defineProps({
+  colorMode: { type: String, required: false },
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false },
+  icon: { type: [String, Boolean], required: false },
+  siteName: { type: String, required: false },
+  siteLogo: { type: String, required: false },
+  theme: { type: String, required: false, default: "#00dc82" }
+});
+const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i;
+const runtimeConfig = useOgImageRuntimeConfig();
 const colorMode = computed(() => {
-  return props.colorMode || runtimeConfig.colorPreference || 'light'
-})
-
+  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
+    return props.theme;
   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 `#${props.theme}`;
+  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 hex2 = v.toString(16);
+      return hex2.length === 1 ? `0${hex2}` : hex2;
+    }).join("");
+    return `#${hex}`;
   }
-  return '#FFFFFF'
-})
-
+  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()
+  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
-})
+  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('\nnpx nuxi module add icon\n')
-  // create simple div renderer component
+  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.");
+  console.log("\nnpx nuxi module add icon\n");
 }
 </script>
 
@@ -93,15 +56,15 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
   <div
     class="w-full h-full flex justify-between relative p-[60px]"
     :class="[
-      colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-white'],
-    ]"
+  colorMode === 'light' ? ['bg-white', 'text-gray-900'] : ['bg-gray-900', 'text-white']
+]"
   >
     <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%)`,
-      }"
+  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">
@@ -111,8 +74,8 @@ if (typeof props.icon === 'string' && !runtimeConfig.hasNuxtIcon && process.dev)
           </h1>
           <p
             v-if="description" class="text-[35px]" :class="[
-              colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300'],
-            ]"
+  colorMode === 'light' ? ['text-gray-700'] : ['text-gray-300']
+]"
           >
             {{ description }}
           </p>

package/dist/runtime/app/components/Templates/Community/NuxtSeo.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    colorMode?: 'dark' | 'light';
+    title?: string;
+    description?: string;
+    icon?: string | boolean;
+    siteName?: string;
+    siteLogo?: string;
+    theme?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    theme: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,16 +1,11 @@
-<script lang="ts" setup>
-/**
- * @credits Pergel <https://nuxtlabs.com/>
- */
-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 setup>
+import { computed } from "vue";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false, default: "description" },
+  headline: { type: String, required: false, default: "headline" }
+});
+const title = computed(() => props.title.slice(0, 60));
 </script>
 
 <template>

package/dist/runtime/app/components/Templates/Community/Pergel.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    headline?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    headline: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/app/components/Templates/Community/SimpleBlog.vue

@@ -1,22 +1,13 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-import { computed, useSiteConfig } from '#imports'
-import { parseURL } from 'ufo'
-
-const props = withDefaults(defineProps<{
-  title?: string
-  website?: string
-}>(), {
-  title: 'title',
-})
-
-// fallback to site name
+<script setup>
+import { computed, useSiteConfig } from "#imports";
+import { parseURL } from "ufo";
+const props = defineProps({
+  title: { type: String, required: false, default: "title" },
+  website: { type: String, required: false }
+});
 const website = computed(() => {
-  return props.website || parseURL(useSiteConfig().url).host
-})
+  return props.website || parseURL(useSiteConfig().url).host;
+});
 </script>
 
 <template>

package/dist/runtime/app/components/Templates/Community/SimpleBlog.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    title?: string;
+    website?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,37 +1,22 @@
-<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])
-
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  title: { type: String, required: false, default: "unjs/h3" },
+  description: { type: String, required: false, default: "Minimal H(TTP) framework built for high performance and portability" },
+  emoji: { type: String, required: false, default: "\u26A1" },
+  downloads: { type: [String, Number], required: false, default: "2500000" },
+  stars: { type: [String, Number], required: false, default: "2400" },
+  contributors: { type: [String, Number], required: false, default: "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(Number(props.stars || 0))
-})
-const downloads = computed(() => new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' })
-  .format(Number(props.downloads || 0)),
-)
-
-const description = computed(() => (props.description || '').slice(0, 200))
+  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(Number(props.downloads || 0))
+);
+const description = computed(() => (props.description || "").slice(0, 200));
 </script>
 
 <template>

package/dist/runtime/app/components/Templates/Community/UnJs.vue.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @credits UnJS <https://unjs.io/>
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    emoji?: string;
+    downloads?: string | number;
+    stars?: string | number;
+    contributors?: string | number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    emoji: string;
+    downloads: string | number;
+    stars: string | number;
+    contributors: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/app/components/Templates/Community/Wave.vue

@@ -1,13 +1,7 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-withDefaults(defineProps<{
-  title?: string
-}>(), {
-  title: 'title',
-})
+<script setup>
+defineProps({
+  title: { type: String, required: false, default: "title" }
+});
 </script>
 
 <template>

package/dist/runtime/app/components/Templates/Community/Wave.vue.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    title?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/app/components/Templates/Community/WithEmoji.vue

@@ -1,15 +1,8 @@
-<script setup lang="ts">
-/**
- * @credits Full Stack Heroes <https://fullstackheroes.com/>
- */
-
-withDefaults(defineProps<{
-  emoji?: string
-  title?: string
-}>(), {
-  title: 'title',
-  emoji: '👋',
-})
+<script setup>
+defineProps({
+  emoji: { type: String, required: false, default: "\u{1F44B}" },
+  title: { type: String, required: false, default: "title" }
+});
 </script>
 
 <template>

package/dist/runtime/app/components/Templates/Community/WithEmoji.vue.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @credits Full Stack Heroes <https://fullstackheroes.com/>
+ */
+type __VLS_Props = {
+    emoji?: string;
+    title?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    emoji: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/app/composables/defineOgImage.js

@@ -1,10 +1,9 @@
-import { defu } from "defu";
 import { appendHeader } from "h3";
 import { createError, useNuxtApp, useRequestEvent, useRoute, useState } from "nuxt/app";
-import { ref } from "vue";
+import { ref, toValue } from "vue";
 import { createNitroRouteRuleMatcher } from "../../server/util/kit.js";
-import { getOgImagePath, separateProps, useOgImageRuntimeConfig } from "../../shared.js";
-import { createOgImageMeta, normaliseOptions } from "../utils.js";
+import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+import { createOgImageMeta, setHeadOgImagePrebuilt } from "../utils.js";
 export function defineOgImage(_options = {}) {
   const nuxtApp = useNuxtApp();
   const route = useRoute();
@@ -33,21 +32,24 @@ export function defineOgImage(_options = {}) {
     return;
   }
   const { defaults } = useOgImageRuntimeConfig();
-  const options = normaliseOptions(defu({
-    ..._options
-  }, {
-    component: defaults.component
-  }));
+  const options = toValue(_options);
+  for (const key in routeRules) {
+    if (options[key] === void 0)
+      options[key] = routeRules[key];
+  }
+  for (const key in defaults) {
+    if (options[key] === void 0)
+      options[key] = defaults[key];
+  }
   if (route.query)
     options._query = route.query;
-  const resolvedOptions = normaliseOptions(defu(separateProps(_options), separateProps(routeRules), defaults));
-  if (resolvedOptions.url) {
-    createOgImageMeta(null, options, resolvedOptions, nuxtApp.ssrContext);
-  } else {
-    const path = getOgImagePath(basePath, defu(resolvedOptions, { _query: options._query }));
-    if (import.meta.prerender) {
-      appendHeader(useRequestEvent(nuxtApp), "x-nitro-prerender", path);
-    }
-    createOgImageMeta(path, options, resolvedOptions, nuxtApp.ssrContext);
+  if (options.url) {
+    setHeadOgImagePrebuilt(options);
+    return;
+  }
+  const path = getOgImagePath(basePath, options);
+  if (import.meta.prerender) {
+    appendHeader(useRequestEvent(nuxtApp), "x-nitro-prerender", path);
   }
+  createOgImageMeta(path, options, nuxtApp.ssrContext);
 }

package/dist/runtime/app/utils/plugins.js

@@ -5,9 +5,9 @@ import { parse, stringify } from "devalue";
 import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
 import { parseURL, withoutBase } from "ufo";
 import { toValue } from "vue";
-import { createOgImageMeta, normaliseOptions } from "../../app/utils.js";
+import { createOgImageMeta } from "../../app/utils.js";
 import { isInternalRoute, separateProps } from "../../pure.js";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+import { getOgImagePath } from "../../shared.js";
 export function ogImageCanonicalUrls(nuxtApp) {
   nuxtApp.hooks.hook("app:rendered", async (ctx) => {
     const { ssrContext } = ctx;
@@ -82,12 +82,8 @@ export function routeRuleOgImage(nuxtApp) {
       nuxtApp.ssrContext._ogImageInstances = void 0;
       return;
     }
-    const { defaults } = useOgImageRuntimeConfig();
-    routeRules = normaliseOptions(defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules, {
-      component: defaults.component
-    }));
-    const resolvedOptions = normaliseOptions(defu(routeRules, defaults));
-    const src = getOgImagePath(ssrContext.url, resolvedOptions);
-    createOgImageMeta(src, routeRules, resolvedOptions, nuxtApp.ssrContext);
+    routeRules = defu(nuxtApp.ssrContext?.event.context._nitro?.routeRules?.ogImage, routeRules);
+    const src = getOgImagePath(ssrContext.url, routeRules);
+    createOgImageMeta(src, routeRules, nuxtApp.ssrContext);
   });
 }

package/dist/runtime/app/utils.d.ts

@@ -1,4 +1,5 @@
 import type { NuxtSSRContext } from 'nuxt/app';
-import type { DefineOgImageInput, OgImageOptions, OgImagePrebuilt } from '../types.js';
-export declare function createOgImageMeta(src: string | null, input: OgImageOptions | OgImagePrebuilt, resolvedOptions: OgImageOptions, ssrContext: NuxtSSRContext): void;
-export declare function normaliseOptions(_options: DefineOgImageInput): OgImageOptions | OgImagePrebuilt;
+import type { OgImageOptions, OgImagePrebuilt } from '../types.js';
+export declare function setHeadOgImagePrebuilt(input: OgImagePrebuilt): void;
+export declare function createOgImageMeta(src: string, input: OgImageOptions | OgImagePrebuilt, ssrContext: NuxtSSRContext): void;
+export declare function resolveComponentName(component: OgImageOptions['component'], fallback: string): OgImageOptions['component'];