nuxt-og-image 2.0.0-beta.7 → 2.0.0-beta.70

package/README.md

@@ -13,7 +13,7 @@
 Enlightened OG Image generation for Nuxt 3.
 </p>
 
-<img src="https://repository-images.githubusercontent.com/578125755/05ce0b00-ef15-48d0-94b5-b999373a20f9">
+<img src="https://repository-images.githubusercontent.com/578125755/90f77ca8-95be-4e06-9600-332afe1ba24f">
 
 <p align="center">
 <table>
@@ -38,7 +38,7 @@ Enlightened OG Image generation for Nuxt 3.
 - ▲ Render using [Satori](https://github.com/vercel/satori): Tailwind classes, Google fonts, emoji support and more!
 - 🤖 Or prerender using the Browser: Supporting painless, complex templates
 - 📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
-- ⚙️ Works on the edge: Vercel Edge and Cloudflare Workers
+- ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers
 
 ## Demos
 
@@ -50,9 +50,11 @@ Enlightened OG Image generation for Nuxt 3.
 
 ```bash
 # Install module
-npm install --save-dev nuxt-og-image
+npm install --save-dev nuxt-og-image@beta
 # Using yarn
-yarn add --dev nuxt-og-image
+yarn add --dev nuxt-og-image@beta
+#
+pnpm add -D nuxt-og-image@beta
 ```
 
 ## Setup
@@ -67,30 +69,8 @@ export default defineNuxtConfig({
 })
 ```
 
-#### Requirements
-
-This feature uses Nuxt Islands, which requires Nuxt >= 3.1.
-
-### Add your host name
-
-The `og:image` meta tag requires the full URL, so you must provide your site host.
-
-_nuxt.config.ts_
-
-```ts
-export default defineNuxtConfig({
-  // Recommended
-  runtimeConfig: {
-    public: {
-      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
-    }
-  },
-  // OR
-  ogImage: {
-    host: 'https://example.com',
-  },
-})
-```
+This module requires [Nuxt Server Components](https://nuxt.com/docs/guide/directory-structure/components#standalone-server-components)
+which will be enabled for you.
 
 # Guides
 
@@ -98,31 +78,31 @@ export default defineNuxtConfig({
 
 For this guide, you will create your Satori OG image using the default component for your home page.
 
-### 1. Define a static OG Image
+### 1. Define an OG Image
 
-Within your `pages/index.vue`, use `defineOgImageStatic` or `OgImageStatic` to define your `og:image` component.
-
-Make sure you have defined some metadata as props will be inferred from it.
+Within your `pages/index.vue`, use `defineOgImage()` or `<OgImage />` to define your `og:image` component.
 
 ```vue
 <script lang="ts" setup>
-// 1. make sure you have some meta
-useSeoMeta({
-  title: 'Home',
-  description: 'My awesome home page.',
-})
-// 2a. Use the Composition API
-defineOgImageStatic()
+const ogImageOptions = {
+  title: 'My awesome home page.',
+}
+// a. Use the Composition API
+defineOgImage(ogImageOptions)
 </script>
 
 <template>
   <div>
-    <!-- 2b. OR Component API -->
-    <OgImageStatic />
+    <!-- b. OR Component API -->
+    <OgImage v-bind="ogImageOptions" />
   </div>
 </template>
 ```
 
+This will use the default template [OgImageBasic](./src/runtime/components/OgImageBasic.island.vue),
+provided by this module.
+
+
 ### 2. View your `og:image`
 
 Appending `/__og_image__` to the end of the URL will show you the playground for that pages `og:image`. This provides
@@ -132,54 +112,58 @@ For example, if your local site is hosted at `http://localhost:3000`, you can vi
 
 ### 3. Customize your `og:image`
 
-While you have the playground open, start customising the OG Image by providing options to the `defineOgImageStatic` function.
+While you have the playground open, start customizing the OG Image by modifying the `ogImageOptions`.
+Full HMR is supported, so you should see your changes instantly.
 
-```vue
-<script lang="ts" setup>
-defineOgImageStatic({
-  title: 'Welcome to my site!',
-  background: 'lightblue'
-})
-</script>
-```
-
-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.
+Congrats, you've set up your first Satori `og:image`! 
+You can check out the [options](./src/runtime/components/OgImageBasic.island.vue) of the default template.
 
 ## Making your own Satori template
 
 Templates for OG images are powered by Nuxt Islands, which are just Vue components. In this guide we'll create a new 
 template and use it for our `og:image`.
 
-### 1. Create an island component
-
-Make a folder in your components directory called `islands`. 
+### 1. Create your template component
 
-Within this directory make a new component called `MyOgImage.vue`, 
-you can use the following template to begin:
+Make a new file at the path `./components/OgImage/Default.vue` with the following contents:
 
 ```vue
 <script setup lang="ts">
 const props = defineProps({
   title: String,
 })
+
+// inherited attrs can mess up the satori parser
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <template>
   <div class="w-full h-full flex text-white bg-blue-500 items-center justify-center">
-    <h1 :style="{ fontSize: '70px' }">
+    <h1>
       {{ title }} 👋
     </h1>
   </div>
 </template>
+<style scoped>
+h1 {
+  font-size: 70px;
+}
+</style>
 ```
 
+The convention is to use either the `OgImage` or `OgImageTemplate`  folders within `components`.
+
+See [componentDirs](#component-dirs) if you prefer to use a different named directory.
+
 ### 2. Use the new template
 
-Now that you have your template, you can use it in for your `defineOgImageStatic` function.
+Now that you have your template, you can use it in for your `defineOgImage` composable.
 
 ```vue
 <script lang="ts" setup>
-defineOgImageStatic({
+defineOgImage({
   component: 'MyOgImage',
   title: 'Welcome to my site!'
 })
@@ -192,7 +176,7 @@ View this image in your browser by appending `/__og_image__` to the end of the U
 
 Now that you have your template, you can start customizing it.
 
-Any options you pass to the `defineOgImageStatic` composable will be available in the component. With this in mind, we can
+Any options you pass to the `defineOgImage` composable will be available in the component. With this in mind, we can
 add support for changing the background color.
 
 ```vue
@@ -205,18 +189,23 @@ const props = defineProps({
 
 <template>
   <div :class="[backgroundColor]" class="w-full h-full flex text-white items-center justify-center">
-    <h1 :style="{ fontSize: '70px' }">
+    <h1>
       {{ title }} 👋
     </h1>
   </div>
 </template>
+<style scoped>
+h1 {
+  font-size: 70px;
+}
+</style>
 ```
 
-Now let's customise the background to be green instead.
+Now let's customize the background to be green instead.
 
 ```vue
 <script lang="ts" setup>
-defineOgImageStatic({
+defineOgImage({
   component: 'MyOgImage',
   title: 'Welcome to my site!',
   backgroundColor: 'bg-green-500'
@@ -241,6 +230,105 @@ Out of the box, this module provides support for the following:
 
 If you find Satori is too limiting for your needs, you can always use the `browser` provider to capture browser screenshots instead.
 
+
+## Bypassing cache
+
+Caching og images is enabled by default, if you need to generate dynamically at runtime,
+you can modify the use the `defineOgImageWithoutCache(options)` composable or `<OgImageWithoutCache v-bind="options" />` component.
+
+This mode is not compatible with `nuxt generate`.
+
+## SSG Images
+
+When using `nuxt generate`, you will need to provide some additional configuration.
+
+- You must provide a `siteUrl` so that the meta tags can be generated correctly as absolute URLs.
+
+```ts
+export default defineNuxtConfig({
+  // Recommended
+  runtimeConfig: {
+    public: {
+      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
+    }
+  },
+  // OR
+  ogImage: {
+    host: 'https://example.com',
+  },
+})
+```
+
+- You must prerender all pages that use `og:image`.
+
+```ts
+export default defineNuxtConfig({
+  nitro: {
+    prerender: {
+      crawlLinks: true, // recommended  
+      routes: [
+        '/',
+        // list all routes that use og:image if you're not using crawlLinks
+        '/about',
+        '/blog',
+        '/blog/my-first-post',
+      ]
+    }
+  }
+})
+```
+
+## SSR Images
+
+### Compatibility
+
+Both Satori and Browser will work in Node based environments. Prerendering is fully supported.
+
+When you want to generate dynamic images at runtime there are certain Nitro runtime limitations.
+
+| Provider                                                                        | Satori                | Browser |
+|---------------------------------------------------------------------------------|-----------------------|---------|
+| Node                                                                            | ✅                     | ✅       |
+| [Vercel](https://nuxt-og-image-playground.vercel.app/)                          | ✅                     | ❌    |
+| [Vercel Edge](https://nuxt-og-image-playground-gkdt.vercel.app/)                | ✅                     | ❌       |
+| [Cloudflare Pages](https://nuxt-og-image-playground.pages.dev/)                 | ✅                     | ❌       |
+| [Netlify](https://nuxt-og-image-playground-netlify.netlify.app/)                | ✅                     | ❌       |
+| [Netlify Edge](https://nuxt-og-image-playground-netlify-edge.netlify.app/)      | (Soon)                | ❌       |
+| [StackBlitz](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=package.json) | ✅ (emojis don't work) | ❌       |
+
+Other providers are yet to be tested. Please create an issue if your nitro preset is not listed.
+
+
+When using `nuxt build`, you can only use the `browser` provider with the `node` Nitro preset.
+
+If you intend to use the `browser` provider in production, make sure you include the `playwright` dependency.
+
+  ```bash
+  npm i playwright
+  ```
+
+You can get around this by prerendering any pages that use `og:image`. Note that dynamic browser generated images are not supported at all,
+you should use the Satori provider.
+
+
+```ts
+export default defineNuxtConfig({
+  nitro: {
+    prerender: {
+      crawlLinks: true, // recommended  
+      routes: [
+        '/',
+        // list all routes that use og:image if you're not using crawlLinks
+        '/about',
+        '/blog',
+        '/blog/my-first-post',
+      ]
+    }
+  }
+})
+```
+
+
 ## Taking screenshots
 
 If you want to simply take a screenshot of your page, you can use the `OgImageScreenshot` component or `defineOgImageScreenshot` composable.
@@ -251,11 +339,11 @@ defineOgImageScreenshot()
 </script>
 ```
 
-Alternatively you can pass the `{ provider: 'browser' }` option to `defineOgImageStatic`.
+Alternatively you can pass the `{ provider: 'browser' }` option to `defineOgImage`.
 
 ```vue
 <script lang="ts" setup>
-defineOgImageStatic({
+defineOgImage({
   component: 'MyAwesomeOgImage',
   // this will take a browser screenshot
   provider: 'browser'
@@ -282,15 +370,144 @@ _package.json_
 }
 ```
 
+## Custom Fonts / Supporting non-english characters
+
+When creating your OG Image, you'll probably want to use a font custom to your project. 
+
+To make this easier for you, Google Fonts are loaded by default with Inter 400 and Inter 700. 
+
+You can easily load different Google Fonts by using their name+weight. For example:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    fonts: [
+      // will load the Noto Sans font from Google fonts
+      'Noto+Sans:400'
+    ]
+  }
+})
+```
+
+This also lets you support non-english characters by adding the appropriate font to your config.
+
+For example, to support Hebrew characters, you can use the config:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+      fonts: [
+        // will load this font from Google fonts
+        'Noto+Sans+Hebrew:400'
+      ]
+  }
+})
+````
+
+If you'd like to load a font locally,
+then you can provide the configuration as an object:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    fonts: [
+      {
+        name: 'optieinstein',
+        weight: 800,
+        // path must point to a public font file
+        path: '/OPTIEinstein-Black.otf',
+      }
+    ],
+  }
+})
+```
+
+Make sure to set the font family in your component to match the font name.
+
+```vue
+<template>
+<div :style="{ fontFamily: 'optieinstein' }">
+  <!-- Your component  -->
+</div>
+</template>
+```
+
+## Runtime Caching
+
+When images are generated at runtime, caching is enabled by default to reduce the load on your server. 
+
+By default, it will use the default storage engine for your Nitro preset. 
+You can customise the storage engine by providing a `runtimeCacheStorage` option to the `ogImage` config.
+
+The option takes the same configuration as the Nuxt `nitro.storage` option. 
+See the [Nitro Storage Layer](https://nitro.unjs.io/guide/storage) documentation for more details.
+
+For example:
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    // cloudflare kv binding example, set your own config
+    runtimeCacheStorage: {
+      driver: 'cloudflare-kv-binding',
+      binding: 'OG_IMAGE_CACHE'
+    }
+  }
+})
+````
+
+By default, static images will be cached for 24 hours. You can change the image TTL by providing `cacheTtl` when defining the image.
+
+```ts
+defineOgImage({
+  // ...
+  cacheTtl: 60 * 60 * 24 * 7 // 7 days
+})
+```
+
+Alternatively, you can change the default cacheTtl time in your nuxt.config.
+
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    defaults: {
+      cacheTtl: 60 * 60 * 24 * 7 // 7 days
+    }
+  }
+})
+````
+
+You can also provide a configuration for the `cacheKey`. This gives you control over the cache bursting of the images.
+
+```vue
+<script lang="ts" setup>
+defineOgImage({
+  cacheKey: `${myData.id}:${myData.updatedAt}`,
+})
+</script>
+```
+
+If you prefer not to cache your images you can always disable them by providing a `false` value.
+
+```ts
+export default defineNuxtConfig({
+  ogImage: {
+    // no runtime cache
+    runtimeCacheStorage: false
+  }
+})
+````
+
 # API
 
 The module exposes a composition and component API to implement your `og:image` generation. You should pick
 whichever one you prefer using.
 
-## OgImageStatic / defineOgImageStatic
+## OgImage / defineOgImage
 
-The `OgImageStatic` component and the `defineOgImageStatic` composable creates a static image
-that will be pre-rendered.
+The `OgImage` component and the `defineOgImage` composable creates a static image
+that will be prerendered.
 
 The options follow the [OgImageOptions](#OgImageOptions) interface,
 any additional options will be passed to the `component` as props.
@@ -302,7 +519,7 @@ It is useful for images that do not change at runtime.
 ```vue
 <script setup lang="ts">
 // a. Composition API
-defineOgImageStatic({
+defineOgImage({
   component: 'MyOgImageTemplate',
   title: 'Hello world',
   theme: 'dark'
@@ -311,7 +528,7 @@ defineOgImageStatic({
 
 <template>
   <!-- b. Component API -->
-  <OgImageStatic
+  <OgImage
     component="MyOgImageTemplate"
     title="Hello world"
     theme="dark"
@@ -320,9 +537,9 @@ defineOgImageStatic({
 ```
 
 
-## OgImageDynamic / defineOgImageDynamic
+## OgImageWithoutCache / defineOgImageWithoutCache
 
-The `OgImageDynamic` component and the `defineOgImageDynamic` composable creates a dynamic image. They are not pre-rendered and will
+The `OgImageWithoutCache` component and the `defineOgImageWithoutCache` composable creates a dynamic image. They are not prerendered and will
 be generated at runtime.
 
 The options follow the [OgImageOptions](#OgImageOptions) interface,
@@ -337,19 +554,19 @@ This feature is not compatible with static sites built using `nuxi generate`.
 const dynamicData = await fetch('https://example.com/api')
 
 // a. Composition API
-defineOgImageDynamic({
+defineOgImageWithoutCache({
   component: 'MyOgImageTemplate',
   title: 'Hello world',
-  dynamicData,
+  ...dynamicData,
 })
 </script>
 
 <template>
   <!-- b. Component API -->
-  <OgImageDynamic
+  <OgImageWithoutCache
     component="MyOgImageTemplate"
     title="Hello world"
-    :dynamic-data="dynamicData"
+    v-bind="dynamicData"
   />
 </template>
 ```
@@ -396,12 +613,14 @@ The name of the component to use as the template. By default, it uses OgImageBas
 - Required: `false`
 
 The provider to use to generate the image. The default provider is `satori`.
-When you use `browser` it will use Puppeteer to generate the image.
+When you use `browser` it will use Playwright to generate the image.
 
-### `prerender`
+### `cache`
 
 - Type: `boolean`
-- Default: `true` when static, `false` when dynamic
+- Default: `true` when using `defineOgImage`, `false` when dynamic
+
+Controls the prerendering of the image. A non-static image is one that will be generated at runtime and not cached.
 
 
 ## OgImageScreenshot / defineOgImageScreenshot
@@ -495,13 +714,13 @@ defineOgImageScreenshot({
 
 ## Module Config
 
-### `host`
+### `siteUrl`
 
 - Type: `string`
 - Default: `undefined`
 - Required: `true`
 
-The host of your site. This is required to generate the absolute path of the `og:image`.
+The site URL of your site. This is required when prerendering to generate the absolute path of the `og:image`.
 
 ### `defaults`
 
@@ -511,15 +730,6 @@ The host of your site. This is required to generate the absolute path of the `og
 
 The default options to use when generating images.
 
-### `forcePrerender`
-
-- Type: `boolean`
-- Default: `false`
-- Required: `false`
-
-This is enabled when you run `nuxi generate`. It forces all OG images to be pre-rendered as the server is not available to generate
-runtime images.
-
 ### `fonts`
 
 - Type: ``${string}:${number}`[]`
@@ -546,16 +756,21 @@ export default defineNuxtConfig({
 
 Options to pass to Satori when generating images. See the [Satori docs](https://github.com/vercel/satori).
 
-### `experimentalNitroBrowser` (experimental)
+### `runtimeSatori`
 
 - Type: `boolean`
-- Default: `false`
-- Required: `false`
+- Default: `true`
+
+Whether to use Satori at runtime. This is useful to disable if you're prerendering all your images.
+
+### `runtimeBrowser`
+
+- Type: `boolean`
+- Default: `process.dev`
 
-In a server runtime, the default behaviour is to generate images using Satori. If you'd like to generate runtime images using the a browser instance 
-for screenshots, you can enable this setting.
+Whether to use Playwright at runtime. You will need to enable this for production environments and ensure you are using 
+a supported nitro preset and have the required dependencies.
 
-This is experimental and may not work in all environments.
 
 ## Examples
 

package/dist/client/200.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html >
 <head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.cf7543e5.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.212e85d9.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.1311cc29.css"><link rel="prefetch" as="style" href="/__nuxt_og_image__/client/_nuxt/error-404.f3dd5020.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-404.0875e3f6.js"><link rel="prefetch" as="style" href="/__nuxt_og_image__/client/_nuxt/error-500.06915589.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-500.f06aa28f.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.1311cc29.css"><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?f():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:f,addColorScheme:i,removeColorScheme:d};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function d(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function f(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
 </script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js" crossorigin></script></body>
+<body ><div id="__nuxt"><svg class="nuxt-spa-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80"><path d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567"></path></svg><style>.nuxt-spa-loading{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.nuxt-spa-loading>path{fill:none;stroke:#00DC82;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:128;stroke-dashoffset:128;animation:nuxt-spa-loading-move 3s linear infinite}@keyframes nuxt-spa-loading-move{100%{stroke-dashoffset:-128}}</style></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_og_image__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.212e85d9.js" crossorigin></script></body>
 </html>

package/dist/client/404.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html >
 <head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.cf7543e5.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.7a8c1ab2.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/entry.212e85d9.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.1311cc29.css"><link rel="prefetch" as="style" href="/__nuxt_og_image__/client/_nuxt/error-404.f3dd5020.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-404.0875e3f6.js"><link rel="prefetch" as="style" href="/__nuxt_og_image__/client/_nuxt/error-500.06915589.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-500.f06aa28f.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.1311cc29.css"><script>"use strict";(()=>{const a=window,e=document.documentElement,m=["dark","light"],c=window.localStorage.getItem("nuxt-color-mode")||"system";let n=c==="system"?f():c;const l=e.getAttribute("data-color-mode-forced");l&&(n=l),i(n),a["__NUXT_COLOR_MODE__"]={preference:c,value:n,getColorScheme:f,addColorScheme:i,removeColorScheme:d};function i(o){const t=""+o+"",s="";e.classList?e.classList.add(t):e.className+=" "+t,s&&e.setAttribute("data-"+s,o)}function d(o){const t=""+o+"",s="";e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp(t,"g"),""),s&&e.removeAttribute("data-"+s)}function r(o){return a.matchMedia("(prefers-color-scheme"+o+")")}function f(){if(a.matchMedia&&r("").media!=="not all"){for(const o of m)if(r(":"+o).matches)return o}return"light"}})();
 </script></head>
-<body ><div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F__nuxt_og_image__\u002Fclient",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},data:{},state:{}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.74018bda.js" crossorigin></script></body>
+<body ><div id="__nuxt"><svg class="nuxt-spa-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80"><path d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567"></path></svg><style>.nuxt-spa-loading{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.nuxt-spa-loading>path{fill:none;stroke:#00DC82;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:128;stroke-dashoffset:128;animation:nuxt-spa-loading-move 3s linear infinite}@keyframes nuxt-spa-loading-move{100%{stroke-dashoffset:-128}}</style></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt_og_image__/client",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/__nuxt_og_image__/client/_nuxt/entry.212e85d9.js" crossorigin></script></body>
 </html>

package/dist/client/_nuxt/IconCSS.78433ecd.js

@@ -0,0 +1 @@
+import{g as r,H as u,I as p,n as t,o as l,c as _,s as f,_ as m}from"./entry.212e85d9.js";const d=r({__name:"IconCSS",props:{name:{type:String,required:!0},size:{type:String,default:""}},setup(a){const s=a;u(e=>({"193e663e":i.value}));const n=p();n?.nuxtIcon?.aliases;const c=t(()=>(n?.nuxtIcon?.aliases||{})[s.name]||s.name),i=t(()=>`url('https://api.iconify.design/${c.value.replace(":","/")}.svg')`),o=t(()=>{if(!s.size&&typeof n.nuxtIcon?.size=="boolean"&&!n.nuxtIcon?.size)return;const e=s.size||n.nuxtIcon?.size||"1em";return String(Number(e))===e?`${e}px`:e});return(e,x)=>(l(),_("span",{style:f({width:o.value,height:o.value})},null,4))}});const g=m(d,[["__scopeId","data-v-1172c8f8"]]);export{g as default};

package/dist/client/_nuxt/IconCSS.b41b9663.css

@@ -0,0 +1 @@
+span[data-v-1172c8f8]{background-color:currentColor;display:inline-block;-webkit-mask-image:var(--193e663e);mask-image:var(--193e663e);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:middle}

package/dist/client/_nuxt/ImageLoader.7571516f.css

@@ -0,0 +1 @@
+img[data-v-23ec6856]{height:auto!important;margin:0 auto;max-width:100%;transition:.4s ease-in-out;width:auto!important}

package/dist/client/_nuxt/ImageLoader.b930015f.js

@@ -0,0 +1 @@
+import{g as p,r as c,k as m,l as r,n as u,q as d,o as g,c as f,s as y,_ as v}from"./entry.212e85d9.js";const x=p({__name:"ImageLoader",props:{src:String,aspectRatio:Number,description:String},setup(a){const s=a,n=c(),o=c(0);function i(e){const t=n.value,_=Date.now();t.src="",o.value=0,t.style.opacity="0",t.onload=()=>{t.style.opacity="1",o.value=Date.now()-_},t.src=e}m(()=>{r(()=>s.src,e=>{i(e)},{immediate:!0})});const l=u(()=>s.description.replace("%s",o.value.toString()));return r(l,e=>{d.value=e}),(e,t)=>(g(),f("img",{ref_key:"image",ref:n,class:"max-h-full border-1 border-light-500 rounded",style:y({aspectRatio:a.aspectRatio})},null,4))}});const S=v(x,[["__scopeId","data-v-23ec6856"]]);export{S as _};