nuxt-seo-utils 8.2.0 → 8.3.0

package/dist/cli.mjs

@@ -8,7 +8,7 @@ import { colors } from 'consola/utils';
 import { resolve } from 'pathe';
 
 const name = "nuxt-seo-utils";
-const version = "8.2.0";
+const version = "8.3.0";
 const description = "SEO utilities to improve your Nuxt sites discoverability and shareability";
 
 const ICON_SIZES = [

package/dist/devtools/lib/seo-utils/rpc.ts

@@ -0,0 +1,3 @@
+// The layer refreshes data on connect and on every host route change, so seo-utils
+// needs no module-level host access.
+useDevtoolsConnection()

package/dist/devtools/lib/seo-utils/state.ts

@@ -0,0 +1,35 @@
+import { ref, watch } from 'vue'
+
+export interface DebugData {
+  runtimeConfig: { version: string, [key: string]: any }
+  siteConfig: {
+    url: string
+    name: string
+    description: string
+    env: string
+    indexable: boolean
+    trailingSlash: boolean
+    titleSeparator: string
+    defaultLocale: string
+    currentLocale: string
+    twitter: string
+  }
+  headConfig: {
+    link: Array<{ rel: string, href: string, type?: string, sizes?: string, media?: string }>
+    meta: Array<{ name?: string, property?: string, content?: string }>
+  }
+}
+
+export const data = ref<DebugData | null>(null)
+
+export async function refreshSources() {
+  if (!appFetch.value)
+    return
+  data.value = await appFetch.value('/__nuxt-seo-utils/debug.json', {
+    query: { path: path.value },
+  }).catch(() => null)
+}
+
+watch([path, appFetch, refreshTime], () => {
+  refreshSources()
+})

package/dist/devtools/lib/seo-utils/tools.ts

@@ -0,0 +1,98 @@
+export const SEO_LIMITS = {
+  TITLE_MAX_CHARS: 60,
+  TITLE_WARN_CHARS: 50,
+  TITLE_MAX_PIXELS: 580,
+  DESC_MAX_CHARS: 160,
+  DESC_WARN_CHARS: 150,
+  DESC_MAX_PIXELS: 920,
+} as const
+
+export function estimatePixelWidth(text: string, fontSize: number = 16): number {
+  return Math.round(text.length * fontSize * 0.55)
+}
+
+export function parseMetaTags(html: string) {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, 'text/html')
+
+  const title = doc.querySelector('title')?.textContent?.trim() || ''
+  const description = doc.querySelector('meta[name="description"]')?.getAttribute('content')?.trim() || ''
+  const canonical = doc.querySelector('link[rel="canonical"]')?.getAttribute('href') || ''
+
+  const ogTags: Record<string, string> = {}
+  doc.querySelectorAll('meta[property^="og:"]').forEach((el) => {
+    const prop = el.getAttribute('property')
+    const content = el.getAttribute('content')
+    if (prop && content)
+      ogTags[prop] = content
+  })
+
+  const twitterTags: Record<string, string> = {}
+  doc.querySelectorAll('meta[name^="twitter:"]').forEach((el) => {
+    const name = el.getAttribute('name')
+    const content = el.getAttribute('content')
+    if (name && content)
+      twitterTags[name] = content
+  })
+
+  const allMeta: { name: string, content: string, type: 'name' | 'property' | 'http-equiv', media?: string }[] = []
+  doc.querySelectorAll('meta').forEach((el) => {
+    const name = el.getAttribute('name')
+    const property = el.getAttribute('property')
+    const httpEquiv = el.getAttribute('http-equiv')
+    const content = el.getAttribute('content') || ''
+    const media = el.getAttribute('media') || undefined
+
+    if (name)
+      allMeta.push({ name, content, type: 'name', media })
+    else if (property)
+      allMeta.push({ name: property, content, type: 'property', media })
+    else if (httpEquiv)
+      allMeta.push({ name: httpEquiv, content, type: 'http-equiv', media })
+  })
+
+  const schemas: Array<{ type: string, data: any, raw: string }> = []
+  doc.querySelectorAll('script[type="application/ld+json"]').forEach((el) => {
+    const raw = el.textContent?.trim() || ''
+    try {
+      const data = JSON.parse(raw)
+      const type = data['@type'] || (data['@graph'] ? 'Graph' : 'Unknown')
+      schemas.push({ type, data, raw })
+    }
+    catch {
+      schemas.push({ type: 'Invalid JSON', data: null, raw })
+    }
+  })
+
+  const iconLinks: Array<{ rel: string, href: string, type?: string, sizes?: string, media?: string }> = []
+  doc.querySelectorAll('link[rel="icon"], link[rel="apple-touch-icon"], link[rel="shortcut icon"]').forEach((el) => {
+    const href = el.getAttribute('href')
+    if (!href)
+      return
+    iconLinks.push({
+      rel: el.getAttribute('rel') || 'icon',
+      href,
+      type: el.getAttribute('type') || undefined,
+      sizes: el.getAttribute('sizes') || undefined,
+      media: el.getAttribute('media') || undefined,
+    })
+  })
+
+  return { title, description, ogTags, twitterTags, allMeta, canonical, schemas, iconLinks }
+}
+
+export function titleColor(length: number) {
+  if (length > SEO_LIMITS.TITLE_MAX_CHARS)
+    return 'error'
+  if (length < 30)
+    return 'warning'
+  return 'success'
+}
+
+export function descColor(length: number) {
+  if (length > SEO_LIMITS.DESC_MAX_CHARS)
+    return 'error'
+  if (length > SEO_LIMITS.DESC_WARN_CHARS || length < 70)
+    return 'warning'
+  return 'success'
+}

package/dist/devtools/nuxt.config.ts

@@ -0,0 +1,3 @@
+// Nuxt SEO devtools panel, shipped as a layer (Model C). The unified devtools client
+// (assembled by nuxtseo-shared in the user's project) extends this to render /seo-utils.
+export default defineNuxtConfig({})

package/dist/devtools/pages/seo-utils/debug.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { data } from '../../lib/seo-utils/state'
+
+const runtimeConfigItems = computed(() => {
+  if (!data.value?.runtimeConfig)
+    return []
+  return Object.entries(data.value.runtimeConfig).map(([key, value]) => ({
+    key,
+    value: typeof value === 'object' ? JSON.stringify(value) : String(value),
+    mono: true,
+  }))
+})
+
+const siteConfigItems = computed(() => {
+  if (!data.value?.siteConfig)
+    return []
+  return Object.entries(data.value.siteConfig).map(([key, value]) => ({
+    key,
+    value: String(value),
+    mono: true,
+  }))
+})
+</script>
+
+<template>
+  <div class="space-y-5 stagger-children">
+    <DevtoolsSection icon="carbon:settings" text="Runtime Config">
+      <template #actions>
+        <DevtoolsMetric :value="runtimeConfigItems.length" label="keys" />
+      </template>
+      <DevtoolsKeyValue :items="runtimeConfigItems" striped />
+    </DevtoolsSection>
+
+    <DevtoolsSection icon="carbon:earth" text="Site Config">
+      <template #actions>
+        <DevtoolsMetric :value="siteConfigItems.length" label="keys" />
+      </template>
+      <DevtoolsKeyValue :items="siteConfigItems" striped />
+    </DevtoolsSection>
+
+    <DevtoolsSection icon="carbon:code" text="Raw JSON">
+      <DevtoolsSnippet
+        :code="JSON.stringify(data || {}, null, 2)"
+        lang="json"
+        label="debug.json"
+      />
+    </DevtoolsSection>
+  </div>
+</template>

package/dist/devtools/pages/seo-utils/docs.vue

@@ -0,0 +1,3 @@
+<template>
+  <DevtoolsDocs url="https://nuxtseo.com/docs/seo-utils" />
+</template>