nuxt-og-image 2.0.0-beta.34 → 2.0.0-beta.36

package/README.md

@@ -52,26 +52,28 @@ Both Satori and Browser will work in Node based environments. Prerendering is fu
 
 When you want to generate dynamic images at runtime there are certain Nitro runtime limitations.
 
-| Provider                           | Satori |  Browser |
-|------------------------------------|----------------| -- |
-| StackBlitz                         | ✅             | ❌             |
-| Node                               | ✅             | ✅              |
-| Vercel                             | ✅             | ✅             |
-| Vercel Edge                        | ✅             | ❌              |
-| Cloudflare Workers (requires paid) | ✅            | ❌             |
-| Cloudflare Pages (requires paid)   | ✅            | ❌             |
-| Netlify                            | ✅              | ❌             |
-| Netlify Edge (TBC)                 | ❌             | ❌             |
-
-Other providers are yet to be tested. Please create an issue if you have tested one.
+| Provider                                                                        | Satori | Browser |
+|---------------------------------------------------------------------------------|--------|---------|
+| Node                                                                            | ✅      | ✅       |
+| [Vercel](https://nuxt-og-image-playground.vercel.app/)                          | ✅      | Soon    |
+| [Vercel Edge](https://nuxt-og-image-playground-gkdt.vercel.app/)                | ✅      | ❌       |
+| Cloudflare Workers (requires paid)                                              | ✅      | ❌       |
+| [Cloudflare Pages](https://nuxt-og-image-playground.pages.dev/)                 | ✅      | ❌       |
+| [Netlify](https://nuxt-og-image-playground-netlify.netlify.app/)                | Soon   | ❌       |
+| [Netlify Edge](https://nuxt-og-image-playground-netlify-edge.netlify.app/)      | Soon   | ❌       |
+| [StackBlitz](https://stackblitz.com/edit/nuxt-starter-pxs3wk?file=package.json) | ✅      | ❌       |
+
+Other providers are yet to be tested. Please create an issue if your nitro preset is not listed.
 
 ## Install
 
+Note: The `main` branch is documentation for the beta version, it's recommended to use this version.
+
 ```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
 ```
 
 ## Setup
@@ -414,12 +416,14 @@ Make sure to set the font family in your component to match the font name.
 </template>
 ```
 
-## Caching
+## Runtime Caching
+
+When images are generated at runtime, caching is enabled by default to reduce the load on your server. 
 
-It's recommended to cache your images to reduce the load on your server. This can be achieved
-by providing a `runtimeCacheStorage` option to the `ogImage` config.
+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.
 
-This `runtimeCacheStorage` option takes the same configuration as the Nuxt `nitro.storage` option. 
+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:
@@ -436,7 +440,7 @@ export default defineNuxtConfig({
 })
 ````
 
-By default, images will be cached for 24 hours. You can change the image TTL by providing `cacheTtl` when defining the image.
+By default, static images will be cached for 24 hours. You can change the image TTL by providing `cacheTtl` when defining the image.
 
 ```ts
 defineOgImageStatic({
@@ -466,8 +470,18 @@ defineOgImageStatic({
   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
 

package/dist/module.d.ts

@@ -59,7 +59,7 @@ interface ModuleOptions {
      * Enables debug logs and a debug endpoint.
      */
     debug: boolean;
-    runtimeCacheStorage: false | (Record<string, any> & {
+    runtimeCacheStorage: boolean | (Record<string, any> & {
         driver: string;
     });
 }

package/dist/module.json

@@ -5,5 +5,5 @@
     "bridge": false
   },
   "configKey": "ogImage",
-  "version": "2.0.0-beta.34"
+  "version": "2.0.0-beta.36"
 }

package/dist/module.mjs

@@ -238,6 +238,10 @@ const DefaultRuntimeCompatibility = {
   png: "resvg"
 };
 const RuntimeCompatibility = {
+  "nitro-dev": {
+    wasm: "fetch",
+    browser: "universal"
+  },
   "stackblitz": {
     browser: false,
     satori: "yoga-wasm",
@@ -247,6 +251,9 @@ const RuntimeCompatibility = {
     browser: "lambda",
     wasm: "inline"
   },
+  "netlify-edge": {
+    wasm: "inline"
+  },
   "vercel": {
     browser: "lambda"
   },
@@ -265,6 +272,24 @@ const RuntimeCompatibility = {
   }
 };
 
+const autodetectableProviders = {
+  azure_static: "azure",
+  cloudflare_pages: "cloudflare-pages",
+  netlify: "netlify",
+  stormkit: "stormkit",
+  vercel: "vercel",
+  cleavr: "cleavr"
+};
+const autodetectableStaticProviders = {
+  netlify: "netlify-static",
+  vercel: "vercel-static"
+};
+function detectTarget(options = {}) {
+  return options?.static ? autodetectableStaticProviders[provider] : autodetectableProviders[provider];
+}
+function getNitroPreset(nuxt) {
+  return process.env.NITRO_PRESET || nuxt.options.nitro.preset || detectTarget() || "node-server";
+}
 function getNitroProviderCompatibility(nuxt) {
   if (nuxt.options.dev || nuxt.options._prepare || nuxt.options._generate) {
     return defu({
@@ -274,7 +299,7 @@ function getNitroProviderCompatibility(nuxt) {
   }
   if (provider === "stackblitz")
     return defu(RuntimeCompatibility.stackblitz, DefaultRuntimeCompatibility);
-  const target = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
+  const target = getNitroPreset(nuxt);
   const compatibility = RuntimeCompatibility[target];
   if (compatibility === false)
     return false;
@@ -318,8 +343,11 @@ const module = defineNuxtModule({
   },
   async setup(config, nuxt) {
     const logger = useLogger("nuxt-og-image");
+    logger.level = config.debug ? 4 : 3;
     const { resolve } = createResolver(import.meta.url);
+    logger.debug("Using Nitro preset", getNitroPreset(nuxt));
     const nitroCompatibility = getNitroProviderCompatibility(nuxt);
+    logger.debug("Nitro compatibility", nitroCompatibility);
     if (!nitroCompatibility) {
       const target = process.env.NITRO_PRESET || nuxt.options.nitro.preset;
       logger.warn(`It looks like the nitro target ${target} doesn't support \`nuxt-og-image\`.`);
@@ -341,7 +369,7 @@ const module = defineNuxtModule({
       nuxt.options.nitro.storage["og-image"] = {
         driver: "memory"
       };
-    } else if (config.runtimeCacheStorage && !nuxt.options.dev) {
+    } else if (config.runtimeCacheStorage && !nuxt.options.dev && typeof config.runtimeCacheStorage === "object") {
       nuxt.options.nitro.storage["og-image"] = config.runtimeCacheStorage;
     }
     if (!config.fonts.length)

package/dist/runtime/composables/defineOgImage.mjs

@@ -18,6 +18,7 @@ export function defineOgImageDynamic(options = {}) {
   defineOgImage({
     provider: runtimeSatori ? "satori" : "browser",
     static: false,
+    cacheTtl: 0,
     ...options
   });
 }

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

@@ -23,10 +23,11 @@ export default defineEventHandler(async (e) => {
       statusMessage: `Provider ${options.provider} is missing.`
     });
   }
+  const useCache = runtimeCacheStorage && !process.dev && options.cacheTtl && options.cacheTtl > 0;
   const cache = prefixStorage(useStorage(), "og-image-cache:images");
   const key = options.cacheKey || e.node.req.url;
   let png;
-  if (runtimeCacheStorage && await cache.hasItem(key)) {
+  if (useCache && await cache.hasItem(key)) {
     const { value, expiresAt } = await cache.getItem(key);
     if (expiresAt > Date.now()) {
       setHeader(e, "Cache-Control", "public, max-age=31536000");
@@ -39,7 +40,7 @@ export default defineEventHandler(async (e) => {
   if (!png) {
     try {
       png = await provider.createPng(withBase(basePath, useHostname(e)), options);
-      if (png && runtimeCacheStorage && options.static) {
+      if (useCache && png) {
         const base64png = Buffer.from(png).toString("base64");
         await cache.setItem(key, { value: base64png, expiresAt: Date.now() + (options.cacheTtl || 0) });
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "2.0.0-beta.34",
+  "version": "2.0.0-beta.36",
   "packageManager": "pnpm@8.1.0",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",