nuxt-og-image 1.4.12 → 1.4.14

package/README.md

@@ -79,11 +79,11 @@ _nuxt.config.ts_
 
 ```ts
 export default defineNuxtConfig({
-  // Recommended 
+  // Recommended
   runtimeConfig: {
-   public: {
-     siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
-   }
+    public: {
+      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
+    }
   },
   // OR
   ogImage: {
@@ -114,6 +114,7 @@ useSeoMeta({
 // 2a. Use the Composition API
 defineOgImageStatic()
 </script>
+
 <template>
   <div>
     <!-- 2b. OR Component API -->
@@ -127,7 +128,7 @@ defineOgImageStatic()
 Appending `/__og_image__` to the end of the URL will show you the playground for that pages `og:image`. This provides
 a live preview of your `og:image` and allows you to edit it in real-time.
 
-For example, if your local site is hosted at `https://localhost:3000`, you can view your `og:image` at `https://localhost:3000/__og_image__`.
+For example, if your local site is hosted at `http://localhost:3000`, you can view your `og:image` at `http://localhost:3000/__og_image__`.
 
 ### 3. Customize your `og:image`
 
@@ -136,12 +137,13 @@ While you have the playground open, start customising the OG Image by providing
 ```vue
 <script lang="ts" setup>
 defineOgImageStatic({
-  title: 'Welcome to my site!'
+  title: 'Welcome to my site!',
+  background: 'lightblue'
 })
 </script>
 ```
 
-Congrats, you've set up your first Satori `og:image`!
+Congrats, you've set up your first Satori `og:image`! You can checkout the [options](./src/runtime/components/OgImageBasic.island.vue) of the default template.
 
 ## Making your own Satori template
 
@@ -161,10 +163,13 @@ const props = defineProps({
   title: String,
 })
 </script>
+
 <template>
-<div class="w-full h-full flex text-white bg-blue-500 items-center justify-center">
-  <h1 :style="{ fontSize: '70px' }">{{ title }} 👋</h1>
-</div>
+  <div class="w-full h-full flex text-white bg-blue-500 items-center justify-center">
+    <h1 :style="{ fontSize: '70px' }">
+      {{ title }} 👋
+    </h1>
+  </div>
 </template>
 ```
 
@@ -197,10 +202,13 @@ const props = defineProps({
   backgroundColor: String
 })
 </script>
+
 <template>
-<div :class="[backgroundColor]" class="w-full h-full flex text-white items-center justify-center">
-  <h1 :style="{ fontSize: '70px' }">{{ title }} 👋</h1>
-</div>
+  <div :class="[backgroundColor]" class="w-full h-full flex text-white items-center justify-center">
+    <h1 :style="{ fontSize: '70px' }">
+      {{ title }} 👋
+    </h1>
+  </div>
 </template>
 ```
 
@@ -300,6 +308,7 @@ defineOgImageStatic({
   theme: 'dark'
 })
 </script>
+
 <template>
   <!-- b. Component API -->
   <OgImageStatic
@@ -325,7 +334,7 @@ This feature is not compatible with static sites built using `nuxi generate`.
 
 ```vue
 <script setup lang="ts">
-const dynamicData = await fetch('https://example.com/api') 
+const dynamicData = await fetch('https://example.com/api')
 
 // a. Composition API
 defineOgImageDynamic({
@@ -334,12 +343,13 @@ defineOgImageDynamic({
   dynamicData,
 })
 </script>
+
 <template>
   <!-- b. Component API -->
   <OgImageDynamic
     component="MyOgImageTemplate"
     title="Hello world"
-    :dynamicData="dynamicData"
+    :dynamic-data="dynamicData"
   />
 </template>
 ```
@@ -411,6 +421,7 @@ defineOgImageScreenshot({
   delay: 1000,
 })
 </script>
+
 <template>
   <!-- b. Component API -->
   <OgImageScreenshot

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "1.4.12"
+  "version": "1.4.14"
 }

package/dist/module.mjs

@@ -315,7 +315,6 @@ export {}
     await addComponent({
       name: "OgImageBasic",
       filePath: resolve("./runtime/components/OgImageBasic.island.vue"),
-      global: true,
       island: true
     });
     ["OgImageStatic", "OgImageDynamic", "OgImageScreenshot"].forEach((name) => {
@@ -360,9 +359,9 @@ export default async function() {
 `;
       }
       if (config.satoriProvider) {
-        nitroConfig.virtual["#nuxt-og-image/satori"] = `import webworker from '${providerPath}/satori/${isWebWorkerEnv ? "webworker" : "node"}'
+        nitroConfig.virtual["#nuxt-og-image/satori"] = `import satori from '${providerPath}/satori/${isWebWorkerEnv ? "webworker" : "node"}'
 export default async function() {
-  return webworker
+  return satori
 }`;
         nitroConfig.virtual["#nuxt-og-image/svg2png"] = `
 import svg2png from '${providerPath}/svg2png/universal'

package/dist/runtime/components/OgImageBasic.island.vue

@@ -1,20 +1,90 @@
 <script setup lang="ts">
-defineProps({
+const props = defineProps({
   path: String,
-  title: String,
-  description: String,
+  title: {
+    type: String,
+    default: 'Og Image Template',
+  },
+  description: {
+    type: String,
+    default: 'Set a description to change me.',
+  },
+  background: {
+    type: String,
+  },
+  color: {
+    type: String,
+  },
+  padding: {
+    type: String,
+    default: '0 100px',
+  },
+  titleFontSize: {
+    type: String,
+    default: '60px',
+  },
+  descriptionFontSize: {
+    type: String,
+    default: '26px',
+  },
+})
+
+const containerAttrs = computed(() => {
+  const isBackgroundTw = props.background?.startsWith('bg-')
+  const isColorTw = props.color?.startsWith('text-')
+
+  const classes = [
+    'w-full',
+    'h-full',
+    'items-center',
+    'justify-center',
+  ]
+  const styles: Record<string, any> = {
+    padding: props.padding,
+  }
+
+  if (isBackgroundTw)
+    classes.push(props.background)
+  else
+    styles.backgroundColor = props.background
+
+  if (isColorTw)
+    classes.push(props.color)
+  else
+    styles.color = props.color
+  return { class: classes, style: styles }
+})
+
+const titleAttrs = computed(() => {
+  const classes = []
+  const styles = {
+    fontWeight: 'bold',
+    marginBottom: '20px',
+    fontSize: props.titleFontSize,
+  }
+  return { class: classes, style: styles }
+})
+
+const descriptionAttrs = computed(() => {
+  const classes = []
+  const styles = {
+    fontSize: props.descriptionFontSize,
+  }
+  return { class: classes, style: styles }
 })
 </script>
 
 <template>
-  <div :style="{ padding: '0 60px', width: '100%', height: '100%', backgroundColor: '#0c0c0c', backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #fff1f1)', display: 'flex', alignItems: 'center' }">
-    <div :style="{ padding: '0 30px', display: 'flex', flexDirection: 'column' }">
-      <p :style="{ fontSize: '60px', fontWeight: 'bold', marginBottom: '20px' }">
-        {{ title || 'Og Image Template' }}
-      </p>
-      <p :style="{ fontSize: '26px' }">
-        {{ description || 'Set a description to change me.' }}
-      </p>
+<div>
+  <div v-bind="containerAttrs">
+    <div class="flex flex-col">
+      <div v-bind="titleAttrs">
+        {{ title }}
+      </div>
+      <div v-bind="descriptionAttrs">
+        {{ description }}
+      </div>
     </div>
   </div>
+</div>
 </template>

package/dist/runtime/nitro/middleware/og.png.mjs

@@ -15,5 +15,11 @@ export default defineEventHandler(async (e) => {
   setHeader(e, "Expires", "0");
   const options = await fetchOptions(e, basePath);
   const provider = await useProvider(options.provider);
+  if (!provider) {
+    return {
+      status: 500,
+      body: `Provider ${options.provider} is missing.`
+    };
+  }
   return provider.createPng(withBase(basePath, useHostname(e)), options);
 });

package/dist/runtime/nitro/routes/options.mjs

@@ -24,8 +24,12 @@ export default defineEventHandler(async (e) => {
   const path = query.path;
   const html = await globalThis.$fetch(path);
   const extractedPayload = extractOgImageOptions(html);
-  if (!extractedPayload)
-    return false;
+  if (!extractedPayload) {
+    return {
+      status: 500,
+      body: `The path ${path} is missing the og-image payload.`
+    };
+  }
   e.node.req.url = path;
   e.context._nitro.routeRules = void 0;
   const routeRules = getRouteRules(e)?.ogImage;

package/dist/runtime/nitro/routes/svg.mjs

@@ -7,5 +7,11 @@ export default defineEventHandler(async (e) => {
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "image/svg+xml");
   const provider = await useProvider(options.provider);
+  if (!provider) {
+    return {
+      status: 500,
+      body: `Provider ${options.provider} is missing.`
+    };
+  }
   return provider.createSvg(withBase(path, useHostname(e)), options);
 });

package/dist/runtime/nitro/routes/vnode.mjs

@@ -7,5 +7,11 @@ export default defineEventHandler(async (e) => {
   const options = await fetchOptions(e, path);
   setHeader(e, "Content-Type", "application/json");
   const provider = await useProvider(options.provider);
+  if (!provider) {
+    return {
+      status: 500,
+      body: `Provider ${options.provider} is missing.`
+    };
+  }
   return provider.createVNode(withBase(path, useHostname(e)), options);
 });

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

@@ -2,7 +2,7 @@
 import type { H3Event } from 'h3';
 import type { OgImageOptions } from '../../types';
 export declare function wasmLoader(key: any, fallback: string, baseUrl: string): {
-    loaded(): Promise<boolean>;
+    loaded(): boolean | Promise<any>;
     load(): Promise<any>;
 };
 export declare function fetchOptions(e: H3Event, path: string): Promise<OgImageOptions>;

package/dist/runtime/nitro/utils.mjs

@@ -6,11 +6,11 @@ export function wasmLoader(key, fallback, baseUrl) {
   let promise;
   let loaded = false;
   return {
-    async loaded() {
+    loaded() {
       if (loaded)
         return true;
       if (typeof promise !== "undefined")
-        await promise;
+        return promise;
       return false;
     },
     async load() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "1.4.12",
+  "version": "1.4.14",
   "packageManager": "pnpm@7.8.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",