nuxt-og-image 3.0.9 → 3.1.1

package/dist/runtime/server/routes/debug.json.d.ts

@@ -1,4 +1,5 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
+    siteConfigUrl: string;
     componentNames: any;
     runtimeConfig: import("../../types").OgImageRuntimeConfig;
     compatibility: any;

package/dist/runtime/server/routes/debug.json.js

@@ -1,3 +1,4 @@
+import { useSiteConfig } from "#imports";
 import compatibility from "#og-image/compatibility";
 import { componentNames } from "#og-image-virtual/component-names.mjs";
 import { defineEventHandler, setHeader } from "h3";
@@ -6,6 +7,7 @@ export default defineEventHandler(async (e) => {
   setHeader(e, "Content-Type", "application/json");
   const runtimeConfig = useOgImageRuntimeConfig();
   return {
+    siteConfigUrl: useSiteConfig(e).url,
     componentNames,
     runtimeConfig,
     compatibility

package/dist/runtime/server/util/plugins.d.ts

@@ -1,2 +1,2 @@
-import type { NitroApp } from 'nitropack';
+import type { NitroApp } from 'nitropack/runtime/app';
 export declare function nuxtContentPlugin(nitroApp: NitroApp): void;

package/dist/runtime/server/util/plugins.js

@@ -1,6 +1,7 @@
 import { defu } from "defu";
 import { stringify } from "devalue";
-import { getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
+import { withQuery } from "ufo";
+import { generateMeta, getOgImagePath, useOgImageRuntimeConfig } from "../../shared.js";
 import { normaliseOptions } from "./options.js";
 export function nuxtContentPlugin(nitroApp) {
   const { isNuxtContentDocumentDriven, strictNuxtContentPaths, defaults } = useOgImageRuntimeConfig();
@@ -17,7 +18,14 @@ export function nuxtContentPlugin(nitroApp) {
     if (path && shouldRenderOgImage) {
       const ogImageConfig = (typeof content.ogImage === "object" ? content.ogImage : {}) || {};
       const optionsWithDefault = defu(ogImageConfig, defaults);
-      const src = getOgImagePath(path, optionsWithDefault);
+      let src = optionsWithDefault.url || getOgImagePath(path, optionsWithDefault);
+      if (optionsWithDefault._query && Object.keys(optionsWithDefault._query).length)
+        src = withQuery(src, { _query: optionsWithDefault._query });
+      const meta = generateMeta(src, optionsWithDefault);
+      if (optionsWithDefault.url) {
+        content.head = defu({ meta }, content.head);
+        return content;
+      }
       const payload = {
         title: content.title,
         excerpt: content.description || content.excerpt,
@@ -52,7 +60,7 @@ export function nuxtContentPlugin(nitroApp) {
           { name: "twitter:image:height", content: optionsWithDefault.height },
           { name: "twitter:image:alt", content: optionsWithDefault.alt }
         ]
-      });
+      }, content.head);
     }
     return content;
   });

package/dist/runtime/shared.d.ts

@@ -1,4 +1,5 @@
 import type { OgImageOptions, OgImageRuntimeConfig } from './types.js';
 export * from './pure.js';
+export declare function generateMeta(url: string, resolvedOptions: OgImageOptions): import("@unhead/schema").Meta<import("@unhead/schema").UserTagConfigWithoutInnerContent>[];
 export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
 export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;

package/dist/runtime/shared.js

@@ -1,7 +1,34 @@
 import { useRuntimeConfig } from "#imports";
 import { defu } from "defu";
 import { joinURL } from "ufo";
+import { getExtension } from "./pure.js";
 export * from "./pure.js";
+export function generateMeta(url, resolvedOptions) {
+  let urlExtension = getExtension(url) || resolvedOptions.extension;
+  if (urlExtension === "jpg")
+    urlExtension = "jpeg";
+  const meta = [
+    { property: "og:image", content: url },
+    { property: "og:image:type", content: `image/${urlExtension}` },
+    { name: "twitter:card", content: "summary_large_image" },
+    // we don't need this but avoids issue when using useSeoMeta({ twitterImage })
+    { name: "twitter:image", content: url },
+    { name: "twitter:image:src", content: url }
+  ];
+  if (resolvedOptions.width) {
+    meta.push({ property: "og:image:width", content: resolvedOptions.width });
+    meta.push({ name: "twitter:image:width", content: resolvedOptions.width });
+  }
+  if (resolvedOptions.height) {
+    meta.push({ property: "og:image:height", content: resolvedOptions.height });
+    meta.push({ name: "twitter:image:height", content: resolvedOptions.height });
+  }
+  if (resolvedOptions.alt) {
+    meta.push({ property: "og:image:alt", content: resolvedOptions.alt });
+    meta.push({ name: "twitter:image:alt", content: resolvedOptions.alt });
+  }
+  return meta;
+}
 export function getOgImagePath(pagePath, _options) {
   const baseURL = useRuntimeConfig().app.baseURL;
   const options = defu(_options, useOgImageRuntimeConfig().defaults);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-og-image",
   "type": "module",
-  "version": "3.0.9",
+  "version": "3.1.1",
   "description": "Enlightened OG Image generation for Nuxt.",
   "author": {
     "website": "https://harlanzw.com",
@@ -59,7 +59,7 @@
     "satori-html": "^0.3.2",
     "sirv": "^3.0.0",
     "std-env": "^3.8.0",
-    "strip-literal": "^2.1.0",
+    "strip-literal": "^2.1.1",
     "ufo": "^1.5.4",
     "unplugin": "^1.16.0",
     "unwasm": "^0.3.9",
@@ -99,11 +99,12 @@
     "playwright": "^1.49.0",
     "sass": "^1.81.0",
     "sharp": "^0.33.5",
-    "typescript": "5.6.3",
     "unocss": "^0.64.1",
-    "vitest": "^2.1.5"
+    "vitest": "^2.1.5",
+    "typescript": "5.6.3"
   },
   "resolutions": {
+    "typescript": "5.6.3",
     "@vue/server-renderer": "3.5.13",
     "vue": "3.5.13",
     "vue-router": "4.4.5"

package/dist/client/_nuxt/builds/meta/d9a165f2-5e19-460e-be70-9359a1d41711.json

@@ -1 +0,0 @@
-{"id":"d9a165f2-5e19-460e-be70-9359a1d41711","timestamp":1732330751730,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

package/dist/client/_nuxt/error-404.DGYJY-kl.css

@@ -1 +0,0 @@
-.spotlight[data-v-56c30bd1]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);bottom:-30vh;filter:blur(20vh);height:40vh}.gradient-border[data-v-56c30bd1]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;position:relative}@media (prefers-color-scheme:light){.gradient-border[data-v-56c30bd1]{background-color:#ffffff4d}.gradient-border[data-v-56c30bd1]:before{background:linear-gradient(90deg,#e2e2e2,#e2e2e2 25%,#00dc82,#36e4da 75%,#0047e1)}}@media (prefers-color-scheme:dark){.gradient-border[data-v-56c30bd1]{background-color:#1414144d}.gradient-border[data-v-56c30bd1]:before{background:linear-gradient(90deg,#303030,#303030 25%,#00dc82,#36e4da 75%,#0047e1)}}.gradient-border[data-v-56c30bd1]:before{background-size:400% auto;border-radius:.5rem;bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute;right:0;top:0;transition:background-position .3s ease-in-out,opacity .2s ease-in-out;width:100%}.gradient-border[data-v-56c30bd1]:hover:before{background-position:-50% 0;opacity:1}.fixed[data-v-56c30bd1]{position:fixed}.left-0[data-v-56c30bd1]{left:0}.right-0[data-v-56c30bd1]{right:0}.z-10[data-v-56c30bd1]{z-index:10}.z-20[data-v-56c30bd1]{z-index:20}.grid[data-v-56c30bd1]{display:grid}.mb-16[data-v-56c30bd1]{margin-bottom:4rem}.mb-8[data-v-56c30bd1]{margin-bottom:2rem}.max-w-520px[data-v-56c30bd1]{max-width:520px}.min-h-screen[data-v-56c30bd1]{min-height:100vh}.w-full[data-v-56c30bd1]{width:100%}.flex[data-v-56c30bd1]{display:flex}.cursor-pointer[data-v-56c30bd1]{cursor:pointer}.place-content-center[data-v-56c30bd1]{place-content:center}.items-center[data-v-56c30bd1]{align-items:center}.justify-center[data-v-56c30bd1]{justify-content:center}.overflow-hidden[data-v-56c30bd1]{overflow:hidden}.bg-white[data-v-56c30bd1]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-4[data-v-56c30bd1]{padding-left:1rem;padding-right:1rem}.px-8[data-v-56c30bd1]{padding-left:2rem;padding-right:2rem}.py-2[data-v-56c30bd1]{padding-bottom:.5rem;padding-top:.5rem}.text-center[data-v-56c30bd1]{text-align:center}.text-8xl[data-v-56c30bd1]{font-size:6rem;line-height:1}.text-xl[data-v-56c30bd1]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-56c30bd1]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-56c30bd1]{font-weight:300}.font-medium[data-v-56c30bd1]{font-weight:500}.leading-tight[data-v-56c30bd1]{line-height:1.25}.font-sans[data-v-56c30bd1]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-56c30bd1]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-56c30bd1]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-56c30bd1]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-56c30bd1]{padding-left:0;padding-right:0}.sm\:px-6[data-v-56c30bd1]{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3[data-v-56c30bd1]{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-4xl[data-v-56c30bd1]{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl[data-v-56c30bd1]{font-size:1.25rem;line-height:1.75rem}}

package/dist/client/_nuxt/error-500.BTkdHbNU.css

@@ -1 +0,0 @@
-.spotlight[data-v-9bb6b492]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);filter:blur(20vh)}.fixed[data-v-9bb6b492]{position:fixed}.-bottom-1\/2[data-v-9bb6b492]{bottom:-50%}.left-0[data-v-9bb6b492]{left:0}.right-0[data-v-9bb6b492]{right:0}.grid[data-v-9bb6b492]{display:grid}.mb-16[data-v-9bb6b492]{margin-bottom:4rem}.mb-8[data-v-9bb6b492]{margin-bottom:2rem}.h-1\/2[data-v-9bb6b492]{height:50%}.max-w-520px[data-v-9bb6b492]{max-width:520px}.min-h-screen[data-v-9bb6b492]{min-height:100vh}.place-content-center[data-v-9bb6b492]{place-content:center}.overflow-hidden[data-v-9bb6b492]{overflow:hidden}.bg-white[data-v-9bb6b492]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-8[data-v-9bb6b492]{padding-left:2rem;padding-right:2rem}.text-center[data-v-9bb6b492]{text-align:center}.text-8xl[data-v-9bb6b492]{font-size:6rem;line-height:1}.text-xl[data-v-9bb6b492]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-9bb6b492]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-9bb6b492]{font-weight:300}.font-medium[data-v-9bb6b492]{font-weight:500}.leading-tight[data-v-9bb6b492]{line-height:1.25}.font-sans[data-v-9bb6b492]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-9bb6b492]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-9bb6b492]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-9bb6b492]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-9bb6b492]{padding-left:0;padding-right:0}.sm\:text-4xl[data-v-9bb6b492]{font-size:2.25rem;line-height:2.5rem}}