nuxtseo-shared 0.1.1 → 0.1.3

package/dist/layer-devtools/components/DevtoolsError.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const { icon = 'carbon:warning', title = 'Something went wrong' } = defineProps<{
+  icon?: string
+  title?: string
+  error?: string | Error | null
+}>()
+</script>
+
+<template>
+  <div class="devtools-error">
+    <div class="devtools-error-icon-wrap">
+      <UIcon :name="icon" class="devtools-error-icon" />
+    </div>
+    <p class="devtools-error-title">
+      {{ title }}
+    </p>
+    <p v-if="error" class="devtools-error-message">
+      {{ typeof error === 'string' ? error : error.message }}
+    </p>
+    <div v-if="$slots.default" class="devtools-error-actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.devtools-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.devtools-error-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-lg);
+  background: oklch(65% 0.15 25 / 0.1);
+}
+
+.dark .devtools-error-icon-wrap {
+  background: oklch(45% 0.1 25 / 0.15);
+}
+
+.devtools-error-icon {
+  font-size: 1.5rem;
+  color: oklch(60% 0.18 25);
+}
+
+.dark .devtools-error-icon {
+  color: oklch(70% 0.15 25);
+}
+
+.devtools-error-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.devtools-error-message {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  max-width: 20rem;
+  line-height: 1.5;
+}
+
+.devtools-error-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+</style>

package/dist/layer-devtools/components/DevtoolsLoading.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex items-center justify-center py-20">
+    <UIcon
+      name="carbon:circle-dash"
+      class="animate-spin text-3xl text-[var(--color-text-muted)]"
+    />
+  </div>
+</template>

package/dist/layer-devtools/components/DevtoolsProductionError.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { previewSource, productionUrl } from '../composables/state'
+
+const { error } = defineProps<{
+  error?: string | Error | null
+}>()
+</script>
+
+<template>
+  <DevtoolsError
+    icon="carbon:cloud-offline"
+    title="Production site unreachable"
+    :error="error"
+  >
+    <template v-if="!error">
+      <p class="text-xs text-[var(--color-text-muted)] max-w-xs leading-relaxed">
+        Could not connect to <code class="prod-url">{{ productionUrl }}</code>.
+        Check that the site is deployed and accessible.
+      </p>
+    </template>
+    <UButton
+      variant="soft"
+      size="xs"
+      icon="carbon:laptop"
+      @click="previewSource = 'local'"
+    >
+      Switch to local
+    </UButton>
+  </DevtoolsError>
+</template>
+
+<style scoped>
+.prod-url {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+}
+</style>

package/dist/layer-devtools/components/OCodeBlock.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useRenderCodeHighlight } from '../composables/shiki'
+
+const { code, lang, lines = false, transformRendered } = defineProps<{
+  code: string
+  lang: 'json' | 'xml' | 'js'
+  lines?: boolean
+  transformRendered?: (code: string) => string
+}>()
+
+const rendered = computed(() => {
+  const highlight = useRenderCodeHighlight(code, lang)
+  return transformRendered ? transformRendered(highlight.value || '') : highlight.value
+})
+</script>
+
+<template>
+  <pre
+    class="code-block p-5"
+    :class="lines ? 'code-block-lines' : ''"
+    v-html="rendered"
+  />
+</template>

package/{src/client → dist/layer-devtools}/components/OSectionBlock.vue

@@ -1,26 +1,17 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-const props = withDefaults(
-  defineProps<{
-    icon?: string
-    text?: string
-    description?: string
-    containerClass?: string
-    headerClass?: string
-    collapse?: boolean
-    open?: boolean
-    padding?: boolean | string
-  }>(),
-  {
-    containerClass: '',
-    open: true,
-    padding: true,
-    collapse: true,
-  },
-)
-
-const open = useVModel(props, 'open')
+const { icon, text, description, containerClass = '', collapse = true, padding = true, headerClass } = defineProps<{
+  icon?: string
+  text?: string
+  description?: string
+  containerClass?: string
+  headerClass?: string
+  collapse?: boolean
+  open?: boolean
+  padding?: boolean | string
+}>()
+
+const open = defineModel('open', { default: true })
+
 function onToggle(e: any) {
   open.value = e.target.open
 }

package/dist/layer-devtools/composables/rpc.ts

@@ -0,0 +1,39 @@
+import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/types'
+import type { $Fetch } from 'nitropack/types'
+import type { Ref } from 'vue'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import { ref, watchEffect } from 'vue'
+
+export const appFetch: Ref<$Fetch | undefined> = ref()
+export const devtools: Ref<NuxtDevtoolsClient | undefined> = ref()
+export const colorMode: Ref<'dark' | 'light'> = ref('dark')
+
+export interface DevtoolsConnectionOptions {
+  onConnected?: (client: any) => void
+  onRouteChange?: (route: any) => void
+}
+
+/**
+ * Initialize the base devtools connection.
+ * Call this in your module's devtools client setup.
+ * Returns a cleanup function.
+ */
+export function useDevtoolsConnection(options: DevtoolsConnectionOptions = {}): void {
+  onDevtoolsClientConnected(async (client) => {
+    // @ts-expect-error untyped
+    appFetch.value = client.host.app.$fetch
+    watchEffect(() => {
+      colorMode.value = client.host.app.colorMode.value
+    })
+    devtools.value = client.devtools
+    options.onConnected?.(client)
+
+    if (options.onRouteChange) {
+      const $route = client.host.nuxt.vueApp.config.globalProperties?.$route
+      options.onRouteChange($route)
+      client.host.nuxt.$router.afterEach((route: any) => {
+        options.onRouteChange!(route)
+      })
+    }
+  })
+}

package/dist/layer-devtools/composables/shiki.ts

@@ -0,0 +1,46 @@
+import type { HighlighterCore, LanguageRegistration } from 'shiki'
+import type { ComputedRef, MaybeRef, Ref } from 'vue'
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { computed, ref, toValue } from 'vue'
+import { colorMode } from './rpc'
+
+export const shiki: Ref<HighlighterCore | undefined> = ref()
+
+export interface LoadShikiOptions {
+  extraLangs?: (LanguageRegistration | Promise<LanguageRegistration>)[]
+}
+
+export async function loadShiki(options: LoadShikiOptions = {}): Promise<HighlighterCore> {
+  const langs: any[] = [
+    import('@shikijs/langs/xml'),
+    import('@shikijs/langs/json'),
+    import('@shikijs/langs/js'),
+  ]
+  if (options.extraLangs) {
+    langs.push(...options.extraLangs)
+  }
+
+  shiki.value = await createHighlighterCore({
+    themes: [
+      import('@shikijs/themes/vitesse-light'),
+      import('@shikijs/themes/vitesse-dark'),
+    ],
+    langs,
+    engine: createJavaScriptRegexEngine(),
+  })
+
+  return shiki.value
+}
+
+export function useRenderCodeHighlight(code: MaybeRef<string>, lang: string): ComputedRef<string> {
+  return computed(() => {
+    if (!shiki.value)
+      return ''
+    const theme = colorMode.value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
+    return shiki.value.codeToHtml(toValue(code) || '', {
+      lang,
+      theme,
+    }) || ''
+  })
+}

package/dist/layer-devtools/composables/state.ts

@@ -0,0 +1,33 @@
+import { useDebounceFn, useLocalStorage } from '@vueuse/core'
+import { hasProtocol, withBase } from 'ufo'
+import { computed, ref } from 'vue'
+
+export const refreshTime = ref(Date.now())
+
+export const hostname = window.location.host
+export const path = ref('/')
+export const query = ref()
+export const base = ref('/')
+
+export const host = computed(() => withBase(base.value, `${window.location.protocol}//${hostname}`))
+
+export const refreshSources = useDebounceFn(() => {
+  refreshTime.value = Date.now()
+}, 200)
+
+export const slowRefreshSources = useDebounceFn(() => {
+  refreshTime.value = Date.now()
+}, 1000)
+
+// Production preview state
+export const previewSource = useLocalStorage<'local' | 'production'>('nuxt-seo:preview-source', 'local')
+export const productionUrl = ref<string>('')
+
+export const hasProductionUrl = computed(() => {
+  const url = productionUrl.value
+  if (!url || !hasProtocol(url))
+    return false
+  return !url.includes('localhost') && !url.includes('127.0.0.1')
+})
+
+export const isProductionMode = computed(() => previewSource.value === 'production' && hasProductionUrl.value)

package/dist/layer-devtools/nuxt.config.ts

@@ -0,0 +1,22 @@
+export default defineNuxtConfig({
+  ssr: false,
+
+  modules: [
+    '@nuxt/fonts',
+    '@nuxt/ui',
+  ],
+
+  css: ['./assets/css/global.css'],
+
+  fonts: {
+    families: [
+      { name: 'Hubot Sans' },
+    ],
+  },
+
+  devtools: {
+    enabled: false,
+  },
+
+  compatibilityDate: '2026-03-13',
+})

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import { ModuleRegistration } from "./pro.mjs";
+import * as _nuxt_schema0 from "@nuxt/schema";
+
+//#region src/module.d.ts
+declare const _default: _nuxt_schema0.NuxtModule<_nuxt_schema0.ModuleOptions, _nuxt_schema0.ModuleOptions, false>;
+/**
+ * Register a Nuxt SEO module with the shared instance.
+ * Pro modules are detected by name and trigger license verification at build time.
+ *
+ * Call this from your module's setup().
+ */
+declare function registerNuxtSeoModule(registration: ModuleRegistration): void;
+//#endregion
+export { _default as default, registerNuxtSeoModule };

package/dist/module.mjs

@@ -0,0 +1,33 @@
+import { hookNuxtSeoProLicense } from "./pro.mjs";
+import { hookNuxtSeoTelemetry } from "./telemetry.mjs";
+import { defineNuxtModule, useNuxt } from "@nuxt/kit";
+//#region src/module.ts
+var module_default = defineNuxtModule({
+	meta: {
+		name: "nuxtseo-shared",
+		configKey: "nuxtSeoShared",
+		compatibility: { nuxt: ">=3.16.0" }
+	},
+	setup() {
+		hookNuxtSeoProLicense();
+		hookNuxtSeoTelemetry();
+	}
+});
+const PRO_MODULES = new Set(["nuxt-skew-protection", "nuxt-ai-ready"]);
+/**
+* Register a Nuxt SEO module with the shared instance.
+* Pro modules are detected by name and trigger license verification at build time.
+*
+* Call this from your module's setup().
+*/
+function registerNuxtSeoModule(registration) {
+	const nuxt = useNuxt();
+	nuxt._nuxtSeoModules = nuxt._nuxtSeoModules || [];
+	nuxt._nuxtSeoModules.push(registration);
+	if (PRO_MODULES.has(registration.name)) {
+		nuxt._nuxtSeoProModules = nuxt._nuxtSeoProModules || [];
+		nuxt._nuxtSeoProModules.push(registration);
+	}
+}
+//#endregion
+export { module_default as default, registerNuxtSeoModule };

package/dist/pro.d.mts

@@ -1,8 +1,8 @@
+//#region src/pro.d.ts
 interface ModuleRegistration {
-    name: string;
-    version?: string;
-    secret?: string;
-    features?: Record<string, boolean | string | number>;
+  name: string;
+  version?: string;
+  features?: Record<string, boolean | string | number>;
 }
 /**
  * Register a Nuxt SEO Pro module for license verification.
@@ -13,6 +13,5 @@ interface ModuleRegistration {
  */
 declare function registerNuxtSeoProModule(registration: ModuleRegistration): void;
 declare function hookNuxtSeoProLicense(): void;
-
-export { hookNuxtSeoProLicense, registerNuxtSeoProModule };
-export type { ModuleRegistration };
+//#endregion
+export { ModuleRegistration, hookNuxtSeoProLicense, registerNuxtSeoProModule };

package/dist/pro.mjs

@@ -1,70 +1,70 @@
-import * as p from '@clack/prompts';
-import { useLogger, useNuxt } from '@nuxt/kit';
-import { useSiteConfig } from 'nuxt-site-config/kit';
-import { $fetch } from 'ofetch';
-import { isTest, isCI } from 'std-env';
-
+import { useLogger, useNuxt } from "@nuxt/kit";
+import { isCI, isTest } from "std-env";
+import * as p from "@clack/prompts";
+import { useSiteConfig } from "nuxt-site-config/kit";
+import { $fetch } from "ofetch";
+//#region src/pro.ts
 const logger = useLogger("nuxt-seo-pro");
+/**
+* Register a Nuxt SEO Pro module for license verification.
+* Uses Nuxt hook so modules don't need to import from each other.
+*
+* Call this in your module setup. Registrations are collected
+* before the single license verification fetch.
+*/
 function registerNuxtSeoProModule(registration) {
-  const nuxt = useNuxt();
-  nuxt._nuxtSeoProModules = nuxt._nuxtSeoProModules || [];
-  nuxt._nuxtSeoProModules.push(registration);
+	const nuxt = useNuxt();
+	nuxt._nuxtSeoProModules = nuxt._nuxtSeoProModules || [];
+	nuxt._nuxtSeoProModules.push(registration);
 }
 function hookNuxtSeoProLicense() {
-  const nuxt = useNuxt();
-  const isBuild = !nuxt.options.dev && !nuxt.options._prepare;
-  if (isBuild && !nuxt._isNuxtSeoProVerifying) {
-    const license = nuxt.options.runtimeConfig.seoProKey || process.env.NUXT_SEO_PRO_KEY;
-    if (isTest || process.env.VITEST) {
-      return;
-    }
-    if (!isCI && !license) {
-      p.log.warn("\u26A0\uFE0F  Building without license in non-CI environment. A license is required for production builds.");
-      return;
-    }
-    if (!license) {
-      p.log.error("\u{1F510} Nuxt SEO Pro license required");
-      p.note("Set NUXT_SEO_PRO_KEY or configure via module options.\n\nhttps://nuxtseo.com/pro/dashboard", "Get your license");
-      throw new Error("Missing Nuxt SEO Pro license key.");
-    }
-    nuxt._isNuxtSeoProVerifying = true;
-    nuxt.hooks.hook("build:before", async () => {
-      p.intro("Nuxt SEO Pro: License Verification");
-      const siteConfig = useSiteConfig();
-      const spinner = p.spinner();
-      spinner.start("\u{1F511} Verifying Nuxt SEO Pro license...");
-      const siteUrl = siteConfig.url?.startsWith("http") ? siteConfig.url : void 0;
-      const siteName = siteConfig.name || void 0;
-      const modules = nuxt._nuxtSeoProModules?.length > 0 ? nuxt._nuxtSeoProModules : void 0;
-      const res = await $fetch("https://nuxtseo.com/api/pro/verify", {
-        method: "POST",
-        body: {
-          apiKey: license,
-          siteUrl,
-          siteName,
-          modules
-        }
-      }).catch((err) => {
-        if (err?.response?.status === 401) {
-          spinner.error("Invalid API key");
-          p.note("Your API key is invalid.\n\nhttps://nuxtseo.com/pro/dashboard", "License Issue");
-          throw new Error("Invalid Nuxt SEO Pro API key.");
-        }
-        if (err?.response?.status === 403) {
-          spinner.error("No active subscription");
-          p.note("Your subscription has expired or is inactive.\n\nhttps://nuxtseo.com/pro/dashboard", "License Issue");
-          throw new Error("No active Nuxt SEO Pro subscription.");
-        }
-        logger.error(err);
-        return null;
-      });
-      if (!res) {
-        spinner.cancel("License verification skipped (network issue)");
-        return;
-      }
-      spinner.stop("License verified \u2713");
-    });
-  }
+	const nuxt = useNuxt();
+	if (!nuxt.options.dev && !nuxt.options._prepare && !nuxt._isNuxtSeoProVerifying) {
+		const license = nuxt.options.runtimeConfig.seoProKey || process.env.NUXT_SEO_PRO_KEY;
+		if (isTest || process.env.VITEST) return;
+		if (!isCI && !license) {
+			p.log.warn("⚠️  Building without license in non-CI environment. A license is required for production builds.");
+			return;
+		}
+		if (!license) {
+			p.log.error("🔐 Nuxt SEO Pro license required");
+			p.note("Set NUXT_SEO_PRO_KEY or configure via module options.\n\nhttps://nuxtseo.com/pro/dashboard", "Get your license");
+			throw new Error("Missing Nuxt SEO Pro license key.");
+		}
+		nuxt._isNuxtSeoProVerifying = true;
+		nuxt.hooks.hook("build:before", async () => {
+			p.intro("Nuxt SEO Pro: License Verification");
+			const siteConfig = useSiteConfig();
+			const spinner = p.spinner();
+			spinner.start("🔑 Verifying Nuxt SEO Pro license...");
+			if (!await $fetch("https://nuxtseo.com/api/pro/verify", {
+				method: "POST",
+				body: {
+					apiKey: license,
+					siteUrl: siteConfig.url?.startsWith("http") ? siteConfig.url : void 0,
+					siteName: siteConfig.name || void 0,
+					modules: nuxt._nuxtSeoProModules?.length > 0 ? nuxt._nuxtSeoProModules : void 0
+				}
+			}).catch((err) => {
+				if (err?.response?.status === 401) {
+					spinner.error("Invalid API key");
+					p.note("Your API key is invalid.\n\nhttps://nuxtseo.com/pro/dashboard", "License Issue");
+					throw new Error("Invalid Nuxt SEO Pro API key.");
+				}
+				if (err?.response?.status === 403) {
+					spinner.error("No active subscription");
+					p.note("Your subscription has expired or is inactive.\n\nhttps://nuxtseo.com/pro/dashboard", "License Issue");
+					throw new Error("No active Nuxt SEO Pro subscription.");
+				}
+				logger.error(err);
+				return null;
+			})) {
+				spinner.cancel("License verification skipped (network issue)");
+				return;
+			}
+			spinner.stop("License verified ✓");
+		});
+	}
 }
-
+//#endregion
 export { hookNuxtSeoProLicense, registerNuxtSeoProModule };

package/dist/telemetry.d.mts

@@ -0,0 +1,11 @@
+//#region src/telemetry.d.ts
+/**
+ * Hook into build to send telemetry. Call once from the shared module.
+ * Reads from the existing _nuxtSeoModules registration list.
+ * Only fires in CI, never in dev/test, fully fire-and-forget.
+ *
+ * Disable with NUXT_SEO_TELEMETRY_DISABLED=1
+ */
+declare function hookNuxtSeoTelemetry(): void;
+//#endregion
+export { hookNuxtSeoTelemetry };

package/dist/telemetry.mjs

@@ -0,0 +1,49 @@
+import { useNuxt } from "@nuxt/kit";
+import { isCI, isTest, provider } from "std-env";
+import { $fetch } from "ofetch";
+import { createHash } from "node:crypto";
+import { detectPackageManager } from "pkg-types";
+//#region src/telemetry.ts
+const TELEMETRY_ENDPOINT = "https://nuxtseo.com/api/telemetry/collect";
+/**
+* Hook into build to send telemetry. Call once from the shared module.
+* Reads from the existing _nuxtSeoModules registration list.
+* Only fires in CI, never in dev/test, fully fire-and-forget.
+*
+* Disable with NUXT_SEO_TELEMETRY_DISABLED=1
+*/
+function hookNuxtSeoTelemetry() {
+	const nuxt = useNuxt();
+	if (!isCI || isTest || process.env.VITEST || process.env.NUXT_SEO_TELEMETRY_DISABLED) return;
+	if (nuxt._isNuxtSeoTelemetryHooked) return;
+	nuxt._isNuxtSeoTelemetryHooked = true;
+	nuxt.hooks.hook("build:done", async () => {
+		const modules = nuxt._nuxtSeoModules || [];
+		if (modules.length === 0) return;
+		const projectHash = createHash("sha256").update(nuxt.options.rootDir).digest("hex").slice(0, 16);
+		const config = {};
+		for (const mod of modules) {
+			if (!mod.features) continue;
+			const safe = {};
+			for (const [k, v] of Object.entries(mod.features)) if (typeof v === "boolean" || typeof v === "number") safe[k] = v;
+			if (Object.keys(safe).length > 0) config[mod.name] = safe;
+		}
+		$fetch(TELEMETRY_ENDPOINT, {
+			method: "POST",
+			body: {
+				projectHash,
+				modules: modules.map((m) => m.name),
+				moduleVersions: Object.fromEntries(modules.filter((m) => m.version).map((m) => [m.name, m.version])),
+				config: Object.keys(config).length > 0 ? config : void 0,
+				nuxtVersion: nuxt._version,
+				nodeVersion: process.version,
+				os: process.platform,
+				packageManager: await detectPackageManager(nuxt.options.rootDir).then((r) => r?.name).catch(() => void 0),
+				ci: provider || "true"
+			},
+			timeout: 5e3
+		}).catch(() => {});
+	});
+}
+//#endregion
+export { hookNuxtSeoTelemetry };