npm - nuxt-og-image - Versions diffs - 2.0.0-beta.9 → 2.0.1 - Mend

nuxt-og-image 2.0.0-beta.9 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/README.md CHANGED Viewed

@@ -10,17 +10,17 @@
 <p align="center">
-Enlightened OG Image generation for Nuxt 3.
+Enlightened runtime images generated with Vue templates, for Nuxt.
 </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>
 <tbody>
 <td align="center">
 <img width="800" height="0" /><br>
-<i>Status:</i> <a href="https://github.com/harlan-zw/nuxt-og-image/releases/tag/v1.0.0">v1 Released</a></b> <br>
+<i>Status:</i> <a href="https://github.com/harlan-zw/nuxt-og-image/releases/tag/v2.0.0">v2 Released</a></b> <br>
 <sup> Please report any issues 🐛</sup><br>
 <sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help</sub><br>
 <img width="800" height="0" />
@@ -29,7 +29,6 @@ Enlightened OG Image generation for Nuxt 3.
 </table>
 </p>
-ℹ️ Looking for a complete SEO solution? Check out [Nuxt SEO Kit](https://github.com/harlan-zw/nuxt-seo-kit).
 ## Features
@@ -38,529 +37,37 @@ 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
+1. Install `nuxt-og-image` dependency to your project:
-- [Vercel Edge Demo](https://nuxt-og-image-playground.vercel.app/)
-- [StackBlitz - Minimal Playground Example](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue)
-- [StackBlitz - Alpine Theme](https://stackblitz.com/edit/github-hgunsf?file=package.json)
-## Install
 ```bash
-# Install module
-npm install --save-dev nuxt-og-image
-# Using yarn
-yarn add --dev nuxt-og-image
-```
-## Setup
-_nuxt.config.ts_
-```ts
-export default defineNuxtConfig({
-  modules: [
-    'nuxt-og-image',
-  ],
-})
-```
-#### 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',
-  },
-})
-```
-# Guides
-## Your first Satori `og:image`
-For this guide, you will create your Satori OG image using the default component for your home page.
-### 1. Define a static 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.
-```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()
-</script>
-<template>
-  <div>
-    <!-- 2b. OR Component API -->
-    <OgImageStatic />
-  </div>
-</template>
-```
-### 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
-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 `http://localhost:3000`, you can view your `og:image` at `http://localhost:3000/__og_image__`.
-### 3. Customize your `og:image`
-While you have the playground open, start customising the OG Image by providing options to the `defineOgImageStatic` function.
-```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.
-## 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`.
-Within this directory make a new component called `MyOgImage.vue`,
-you can use the following template to begin:
-```vue
-<script setup lang="ts">
-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>
-</template>
-```
-### 2. Use the new template
-Now that you have your template, you can use it in for your `defineOgImageStatic` function.
-```vue
-<script lang="ts" setup>
-defineOgImageStatic({
-  component: 'MyOgImage',
-  title: 'Welcome to my site!'
-})
-</script>
-```
-View this image in your browser by appending `/__og_image__` to the end of the URL.
-### 3. Customize your template
-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
-add support for changing the background color.
-```vue
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  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>
-</template>
-```
-Now let's customise the background to be green instead.
-```vue
-<script lang="ts" setup>
-defineOgImageStatic({
-  component: 'MyOgImage',
-  title: 'Welcome to my site!',
-  backgroundColor: 'bg-green-500'
-})
-</script>
-```
-Within the playground, you should now see the background color change to green.
-## Using Satori
-It's important to familiarize yourself with [Satori](https://github.com/vercel/satori) before you make more complex templates.
-Satori has limited capacity for rendering styles;
-you should reference which ones are available within their documentation.
-Out of the box, this module provides support for the following:
-- Tailwind classes (Note: Satori Tailwind support is experimental, not all classes are supported)
-- Google Fonts, default is Inter
-- Emoji support with [Twemoji](https://github.com/twitter/twemoji)
-- Relative image support (you should link images from your public directory `/my-image.png`)
-If you find Satori is too limiting for your needs, you can always use the `browser` provider to capture browser screenshots instead.
-## Taking screenshots
-If you want to simply take a screenshot of your page, you can use the `OgImageScreenshot` component or `defineOgImageScreenshot` composable.
-```vue
-<script lang="ts" setup>
-defineOgImageScreenshot()
-</script>
-```
-Alternatively you can pass the `{ provider: 'browser' }` option to `defineOgImageStatic`.
-```vue
-<script lang="ts" setup>
-defineOgImageStatic({
-  component: 'MyAwesomeOgImage',
-  // this will take a browser screenshot
-  provider: 'browser'
-})
-</script>
-```
-### Requirements
-If you don't have a chromium binary installed on your system, run `npx playwright install`.
-If you are using this module in a CI context and the images aren't being generated,
-you may need to install a chromium binary.
-You can do this by running `npx playwright install` within your build command.
-_package.json_
-```json
-{
-  "scripts": {
-    "build": "npx playwright install && nuxt build"
-  }
-}
-```
-# 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
-The `OgImageStatic` component and the `defineOgImageStatic` composable creates a static image
-that will be pre-rendered.
-The options follow the [OgImageOptions](#OgImageOptions) interface,
-any additional options will be passed to the `component` as props.
-It is useful for images that do not change at runtime.
-### Example
-```vue
-<script setup lang="ts">
-// a. Composition API
-defineOgImageStatic({
-  component: 'MyOgImageTemplate',
-  title: 'Hello world',
-  theme: 'dark'
-})
-</script>
-<template>
-  <!-- b. Component API -->
-  <OgImageStatic
-    component="MyOgImageTemplate"
-    title="Hello world"
-    theme="dark"
-  />
-</template>
-```
-## OgImageDynamic / defineOgImageDynamic
-The `OgImageDynamic` component and the `defineOgImageDynamic` composable creates a dynamic image. They are not pre-rendered and will
-be generated at runtime.
-The options follow the [OgImageOptions](#OgImageOptions) interface,
-any additional options will be passed to the `component` as props.
-This feature is not compatible with static sites built using `nuxi generate`.
-### Example
-```vue
-<script setup lang="ts">
-const dynamicData = await fetch('https://example.com/api')
-// a. Composition API
-defineOgImageDynamic({
-  component: 'MyOgImageTemplate',
-  title: 'Hello world',
-  dynamicData,
-})
-</script>
-<template>
-  <!-- b. Component API -->
-  <OgImageDynamic
-    component="MyOgImageTemplate"
-    title="Hello world"
-    :dynamic-data="dynamicData"
-  />
-</template>
-```
-## OgImageOptions
-### `alt`
-- Type: `string`
-- Default: `''`
-- Required: `false`
-The `og:image:alt` attribute for the image. It should describe the contents of the image.
-### `height`
-- Type: `number`
-- Default: `630`
-- Required: `true`
-The height of the screenshot. Will be used to generate the `og:image:height` meta tag.
-### `width`
-- Type: `number`
-- Default: `1200`
-- Required: `true`
-The width of the screenshot. Will be used to generate the `og:image:width` meta tag.
-### `component`
-- Type: `string`
-- Default: `OgImageBasic`
-- Required: `true`
-The name of the component to use as the template. By default, it uses OgImageBasic provided by the module.
-### `provider`
-- Type: `string`
-- Default: `satori`
-- 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.
-### `prerender`
-- Type: `boolean`
-- Default: `true` when static, `false` when dynamic
-## OgImageScreenshot / defineOgImageScreenshot
-The `OgImageScreenshot` component and the `defineOgImageScreenshot` composable creates a screenshot of a page using a browser.
-The options follow the [ScreenshotsOptions](#ScreenshotsOptions) interface.
-### Example
-```vue
-<script setup lang="ts">
-// a. Composition API
-defineOgImageScreenshot({
-  // wait for animations
-  delay: 1000,
-})
-</script>
-<template>
-  <!-- b. Component API -->
-  <OgImageScreenshot
-    url="https://example.com"
-    title="Hello world"
-    theme="dark"
-  />
-</template>
-```
-### ScreenshotsOptions
-This interface extends the [OgImageOptions](#OgImageOptions).
-#### `colorScheme`
-- Type: `'dark' | 'light'`
-- Default: `light`
-- Required: `false`
-The color scheme to use when generating the image. This is useful for generating dark mode images.
-```ts
-defineOgImageScreenshot({
-  colorScheme: 'dark'
-})
-```
-#### `delay`
-- Type: `number`
-- Default: `0`
-- Required: `false`
-The delay to wait before taking the screenshot. This is useful if you want to wait for animations to complete.
-```ts
-defineOgImageScreenshot({
-  // wait 2 seconds
-  delay: 2000
-})
+#
+yarn add -D nuxt-og-image
+#
+npm install -D nuxt-og-image
+#
+pnpm i -D nuxt-og-image
 ```
-#### `mask`
-- Type: `string`
-- Default: `undefined`
-- Required: `false`
-HTML selectors that should be removed from the image. Useful for removing popup banners or other elements that may be in the way.
-```ts
-defineOgImageScreenshot({
-  mask: '.popup-banner, .cookie-banner'
-})
-```
-#### `selector`
-- Type: `string`
-- Default: `undefined`
-- Required: `false`
-The selector to take a screenshot of. This is useful if you want to exclude header / footer elements.
-```ts
-defineOgImageScreenshot({
-  selector: '.page-content'
-})
-```
-## Module Config
-### `host`
-- Type: `string`
-- Default: `undefined`
-- Required: `true`
-The host of your site. This is required to generate the absolute path of the `og:image`.
-### `defaults`
-- Type: `OgImageOptions`
-- Default: `{ component: 'OgImageBasic', width: 1200, height: 630, }`
-- Required: `false`
-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}`[]`
-- Default: `['Inter:400', 'Inter:700']`
-- Required: `false`
-Fonts families to use when generating images with Satori. When not using Inter it will automatically fetch the font from Google Fonts.
-For example, if you wanted to add the Roboto font, you would add the following:
+2. Add it to your `modules` section in your `nuxt.config`:
 ```ts
 export default defineNuxtConfig({
-  ogImage: {
-    fonts: ['Roboto:400', 'Roboto:700']
-  }
+  modules: ['nuxt-og-image']
 })
 ```
-### `satoriOptions`
-- Type: `SatoriOptions`
-- Default: `{}`
-- Required: `false`
-Options to pass to Satori when generating images. See the [Satori docs](https://github.com/vercel/satori).
-### `experimentalNitroBrowser` (experimental)
-- Type: `boolean`
-- Default: `false`
-- Required: `false`
+## Playgrounds
-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.
-This is experimental and may not work in all environments.
+- [StackBlitz - Minimal Playground Example](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=pages/index.vue)
+- [StackBlitz - Alpine Theme](https://stackblitz.com/edit/github-hgunsf?file=package.json)
-## Examples
+# Documentation
-- [Unhead Docs](https://github.com/unjs/unhead/tree/main/docs)
-- [harlanzw.com](https://github.com/harlan-zw/harlanzw.com)
+[📖 Read the full documentation](https://nuxt-seo.netlify.app/og-image/getting-started/installation) for more information.
 ## Sponsors
@@ -570,12 +77,6 @@ This is experimental and may not work in all environments.
   </a>
 </p>
-## Credits
-- Pooya Parsa [Kachick](https://github.com/unjs/kachik)
-- Anthony Fu (Nuxt Devtools)
-- Nuxt Team
 ## License
 MIT License © 2023-PRESENT [Harlan Wilton](https://github.com/harlan-zw)

package/dist/client/200.html CHANGED Viewed

@@ -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.fc9150b0.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.09f25aaf.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.8148b615.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.09f25aaf.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.0fc037e0.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.068f19dd.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.4d72610e.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.fc9150b0.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.0fc037e0.js" crossorigin></script></body>
 </html>

package/dist/client/404.html CHANGED Viewed

@@ -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.fc9150b0.js"><link rel="preload" as="style" href="/__nuxt_og_image__/client/_nuxt/entry.09f25aaf.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt_og_image__/client/_nuxt/error-component.8148b615.js"><link rel="stylesheet" href="/__nuxt_og_image__/client/_nuxt/entry.09f25aaf.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.0fc037e0.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.068f19dd.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.4d72610e.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.fc9150b0.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.0fc037e0.js" crossorigin></script></body>
 </html>

package/dist/client/_nuxt/IconCSS.685477c5.js ADDED Viewed

@@ -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.0fc037e0.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 ADDED Viewed

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

	@@ -0,0 +1 @@
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.fb4e5eb3.js ADDED Viewed

@@ -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.0fc037e0.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 _};