nuxt-og-image 5.1.10 → 5.1.11

package/dist/runtime/app/utils/plugins.js

@@ -0,0 +1,92 @@
+import { useRequestEvent } from "#app";
+import { withSiteUrl } from "#site-config/app/composables";
+import { TemplateParamsPlugin } from "@unhead/vue/plugins";
+import { defu } from "defu";
+import { parse, stringify } from "devalue";
+import { createRouter as createRadixRouter, toRouteMatcher } from "radix3";
+import { parseURL, withoutBase } from "ufo";
+import { toValue } from "vue";
+import { createOgImageMeta } from "../../app/utils.js";
+import { isInternalRoute, separateProps } from "../../shared.js";
+import { getOgImagePath } from "../utils.js";
+export function ogImageCanonicalUrls(nuxtApp) {
+  nuxtApp.hooks.hook("app:rendered", async (ctx) => {
+    const { ssrContext } = ctx;
+    const e = useRequestEvent();
+    const path = parseURL(e?.path || "").pathname;
+    if (isInternalRoute(path))
+      return;
+    ssrContext?.head.use(TemplateParamsPlugin);
+    ssrContext?.head.use({
+      key: "nuxt-og-image:overrides-and-canonical-urls",
+      hooks: {
+        "tags:resolve": async (ctx2) => {
+          const hasPrimaryPayload = ctx2.tags.some((tag) => tag.tag === "script" && tag.props.id === "nuxt-og-image-options");
+          let overrides;
+          for (const tag of ctx2.tags) {
+            if (tag.tag === "script" && tag.props.id === "nuxt-og-image-overrides") {
+              if (hasPrimaryPayload) {
+                overrides = separateProps(parse(tag.innerHTML || "{}"));
+                delete ctx2.tags[ctx2.tags.indexOf(tag)];
+              } else {
+                tag.props.id = "nuxt-og-image-options";
+                tag.innerHTML = stringify(separateProps(parse(tag.innerHTML || "{}")));
+                tag._d = "script:id:nuxt-og-image-options";
+              }
+              break;
+            }
+          }
+          ctx2.tags = ctx2.tags.filter(Boolean);
+          for (const tag of ctx2.tags) {
+            if (tag.tag === "meta" && (tag.props.property === "og:image" || ["twitter:image:src", "twitter:image"].includes(tag.props.name || ""))) {
+              if (!tag.props.content) {
+                tag.props = {};
+                continue;
+              }
+              if (!tag.props.content?.startsWith("https")) {
+                await nuxtApp.runWithContext(() => {
+                  tag.props.content = toValue(withSiteUrl(tag.props.content || "", {
+                    withBase: true
+                  }));
+                });
+              }
+            } else if (overrides && tag.tag === "script" && tag.props.id === "nuxt-og-image-options") {
+              tag.innerHTML = stringify(defu(overrides, parse(tag.innerHTML || "{}")));
+            }
+          }
+        }
+      }
+    });
+  });
+}
+export function routeRuleOgImage(nuxtApp) {
+  nuxtApp.hooks.hook("app:rendered", async (ctx) => {
+    const { ssrContext } = ctx;
+    const e = useRequestEvent();
+    const path = parseURL(e?.path || "").pathname;
+    if (isInternalRoute(path))
+      return;
+    const _routeRulesMatcher = toRouteMatcher(
+      createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules })
+    );
+    const matchedRules = _routeRulesMatcher.matchAll(
+      withoutBase(path.split("?")?.[0] || "", ssrContext?.runtimeConfig?.app.baseURL || "")
+    ).reverse();
+    const combinedRules = defu({}, ...matchedRules);
+    let routeRules = combinedRules?.ogImage;
+    if (typeof routeRules === "undefined")
+      return;
+    const ogImageInstances = nuxtApp.ssrContext._ogImageInstances || [];
+    if (routeRules === false) {
+      ogImageInstances?.forEach((e2) => {
+        e2.dispose();
+      });
+      nuxtApp.ssrContext._ogImagePayload = void 0;
+      nuxtApp.ssrContext._ogImageInstances = void 0;
+      return;
+    }
+    routeRules = defu(nuxtApp.ssrContext?.event?.context._nitro?.routeRules?.ogImage, routeRules);
+    const src = getOgImagePath(ssrContext.url, routeRules);
+    createOgImageMeta(src, routeRules, nuxtApp.ssrContext);
+  });
+}

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

@@ -0,0 +1,7 @@
+import type { NuxtSSRContext } from 'nuxt/app';
+import type { OgImageOptions, OgImagePrebuilt, OgImageRuntimeConfig } from '../types.js';
+export declare function setHeadOgImagePrebuilt(input: OgImagePrebuilt): void;
+export declare function createOgImageMeta(src: string, input: OgImageOptions | OgImagePrebuilt, ssrContext: NuxtSSRContext): void;
+export declare function resolveComponentName(component: OgImageOptions['component'], fallback: string): OgImageOptions['component'];
+export declare function getOgImagePath(pagePath: string, _options?: Partial<OgImageOptions>): string;
+export declare function useOgImageRuntimeConfig(): OgImageRuntimeConfig;

package/dist/runtime/app/utils.js

@@ -0,0 +1,94 @@
+import { componentNames } from "#build/nuxt-og-image/components.mjs";
+import { resolveUnrefHeadInput } from "@unhead/vue";
+import { defu } from "defu";
+import { stringify } from "devalue";
+import { useHead, useRuntimeConfig } from "nuxt/app";
+import { joinURL, withQuery } from "ufo";
+import { generateMeta, separateProps } from "../shared.js";
+export function setHeadOgImagePrebuilt(input) {
+  if (import.meta.client) {
+    return;
+  }
+  const url = input.url;
+  if (!url)
+    return;
+  const meta = generateMeta(url, input);
+  useHead({ meta }, { tagPriority: "high" });
+}
+export function createOgImageMeta(src, input, ssrContext) {
+  if (import.meta.client) {
+    return;
+  }
+  const { defaults } = useOgImageRuntimeConfig();
+  const _input = separateProps(defu(input, ssrContext._ogImagePayload));
+  if (input._query && Object.keys(input._query).length)
+    src = withQuery(src, { _query: input._query });
+  const meta = generateMeta(src, input);
+  ssrContext._ogImageInstances = ssrContext._ogImageInstances || [];
+  const script = [];
+  if (src) {
+    script.push({
+      id: "nuxt-og-image-options",
+      type: "application/json",
+      processTemplateParams: true,
+      innerHTML: () => {
+        const payload = resolveUnrefHeadInput(_input);
+        if (payload.props && typeof payload.props.title === "undefined")
+          payload.props.title = "%s";
+        payload.component = resolveComponentName(input.component, defaults.component || "");
+        delete payload.url;
+        if (payload._query && Object.keys(payload._query).length === 0) {
+          delete payload._query;
+        }
+        const final = {};
+        for (const k in payload) {
+          if (payload[k] !== defaults[k]) {
+            final[k] = payload[k];
+          }
+        }
+        return stringify(final);
+      },
+      // we want this to be last in our head
+      tagPosition: "bodyClose"
+    });
+  }
+  const instance = useHead({
+    script,
+    meta
+  }, {
+    tagPriority: "high"
+  });
+  ssrContext._ogImagePayload = _input;
+  ssrContext._ogImageInstances.push(instance);
+}
+export function resolveComponentName(component, fallback) {
+  component = component || fallback || componentNames?.[0]?.pascalName;
+  if (component && componentNames) {
+    const originalName = component;
+    for (const component2 of componentNames) {
+      if (component2.pascalName.endsWith(originalName) || component2.kebabName.endsWith(originalName)) {
+        return component2.pascalName;
+      }
+    }
+  }
+  return component;
+}
+export function getOgImagePath(pagePath, _options) {
+  const baseURL = useRuntimeConfig().app.baseURL;
+  const extension = _options?.extension || useOgImageRuntimeConfig().defaults?.extension || "png";
+  const path = joinURL("/", baseURL, `__og-image__/${import.meta.prerender ? "static" : "image"}`, pagePath, `og.${extension}`);
+  if (Object.keys(_options?._query || {}).length) {
+    return withQuery(path, _options._query);
+  }
+  return path;
+}
+export function useOgImageRuntimeConfig() {
+  const c = useRuntimeConfig();
+  return {
+    defaults: {},
+    ...c["nuxt-og-image"],
+    app: {
+      baseURL: c.app.baseURL
+    }
+  };
+}