nuxt-seo-utils 8.3.3 → 8.4.1

package/dist/cli.mjs

@@ -1,4 +1,3 @@
-import { Buffer } from 'node:buffer';
 import { existsSync } from 'node:fs';
 import { writeFile } from 'node:fs/promises';
 import process from 'node:process';
@@ -6,9 +5,11 @@ import { loadNuxtConfig } from '@nuxt/kit';
 import { defineCommand, runMain } from 'citty';
 import { colors } from 'consola/utils';
 import { resolve } from 'pathe';
+import { p as pngToIco } from './shared/nuxt-seo-utils.NAV2YNQn.mjs';
+import 'node:buffer';
 
 const name = "nuxt-seo-utils";
-const version = "8.3.3";
+const version = "8.4.1";
 const description = "SEO utilities to improve your Nuxt sites discoverability and shareability";
 
 const ICON_SIZES = [
@@ -27,33 +28,6 @@ const cwdArgs = {
     default: "."
   }
 };
-function pngToIco(pngBuffers) {
-  const count = pngBuffers.length;
-  const headerSize = 6;
-  const dirEntrySize = 16;
-  const dataOffset = headerSize + dirEntrySize * count;
-  const header = Buffer.alloc(headerSize);
-  header.writeUInt16LE(0, 0);
-  header.writeUInt16LE(1, 2);
-  header.writeUInt16LE(count, 4);
-  const dirEntries = [];
-  let offset = dataOffset;
-  for (const png of pngBuffers) {
-    const entry = Buffer.alloc(dirEntrySize);
-    const size = Math.min(256, 32);
-    entry.writeUInt8(size === 256 ? 0 : size, 0);
-    entry.writeUInt8(size === 256 ? 0 : size, 1);
-    entry.writeUInt8(0, 2);
-    entry.writeUInt8(0, 3);
-    entry.writeUInt16LE(1, 4);
-    entry.writeUInt16LE(32, 6);
-    entry.writeUInt32LE(png.length, 8);
-    entry.writeUInt32LE(offset, 12);
-    dirEntries.push(entry);
-    offset += png.length;
-  }
-  return Buffer.concat([header, ...dirEntries, ...pngBuffers]);
-}
 async function loadSharp() {
   const mod = await import('sharp').catch(() => {
     console.error(colors.red("sharp is required for icon generation. Install it with:"));
@@ -107,9 +81,14 @@ const main = defineCommand({
           await sharp(sourcePath).resize(icon.width, icon.height, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } }).png().toFile(outputPath);
           console.log(colors.green(`  ${icon.name} (${icon.width}x${icon.height})`));
         }
-        const faviconPng = await sharp(sourcePath).resize(32, 32, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } }).png().toBuffer();
-        await writeFile(resolve(publicDir, "favicon.ico"), pngToIco([faviconPng]));
-        console.log(colors.green("  favicon.ico (32x32)"));
+        const faviconSizes = [16, 32, 48];
+        const faviconPngs = await Promise.all(faviconSizes.map(async (size) => ({
+          buffer: await sharp(sourcePath).resize(size, size, { fit: "contain", background: { r: 0, g: 0, b: 0, alpha: 0 } }).png().toBuffer(),
+          width: size,
+          height: size
+        })));
+        await writeFile(resolve(publicDir, "favicon.ico"), pngToIco(faviconPngs));
+        console.log(colors.green("  favicon.ico (16x16, 32x32, 48x48)"));
         console.log(colors.bold(colors.green("\nDone! Generated all icon variants.")));
       }
     })

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

@@ -1,7 +1,7 @@
 import { ref, watch } from 'vue'
 
 export interface DebugData {
-  runtimeConfig: { version: string, [key: string]: any }
+  runtimeConfig: { version: string, appBaseURL: string, [key: string]: any }
   siteConfig: {
     url: string
     name: string

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

@@ -0,0 +1,31 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it } from 'vitest'
+import { getIconIssues, parseMetaTags, resolveAppUrl } from './tools'
+
+describe('identity icon inspection', () => {
+  it('finds semantic icon rel tokens case-insensitively', () => {
+    const parsed = parseMetaTags('<link rel="alternate ICON" href="/favicon.ico" sizes="any">')
+
+    expect(parsed.iconLinks).toEqual([{
+      rel: 'icon',
+      href: '/favicon.ico',
+      type: undefined,
+      sizes: 'any',
+      media: undefined,
+    }])
+  })
+
+  it('resolves inspected routes within the Nuxt baseURL', () => {
+    expect(resolveAppUrl('https://example.com', '/docs/', '/guide')).toBe('https://example.com/docs/guide')
+    expect(resolveAppUrl('https://example.com', '/docs/', '/docs/guide')).toBe('https://example.com/docs/guide')
+  })
+
+  it('reports invalid runtime bitmap metadata', () => {
+    expect(getIconIssues([{
+      rel: 'icon',
+      href: 'https://example.com/favicon.ico',
+      sizes: 'any',
+    }])).toEqual(['https://example.com/favicon.ico uses sizes="any", which is reserved for scalable icons.'])
+  })
+})

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

@@ -7,10 +7,41 @@ export const SEO_LIMITS = {
   DESC_MAX_PIXELS: 920,
 } as const
 
+export interface ParsedIconLink {
+  rel: string
+  href: string
+  type?: string
+  sizes?: string
+  media?: string
+}
+
 export function estimatePixelWidth(text: string, fontSize: number = 16): number {
   return Math.round(text.length * fontSize * 0.55)
 }
 
+export function resolveAppUrl(origin: string, appBaseURL: string, path: string): string {
+  const base = new URL(appBaseURL, origin)
+  if (!base.pathname.endsWith('/'))
+    base.pathname += '/'
+
+  const candidate = new URL(path, origin)
+  const basePath = base.pathname.replace(/\/$/, '')
+  if (candidate.pathname === basePath || candidate.pathname.startsWith(`${basePath}/`))
+    return candidate.href
+  return new URL(path.replace(/^\//, ''), base).href
+}
+
+export function getIconIssues(icons: ParsedIconLink[]): string[] {
+  return icons.flatMap((icon) => {
+    const isSvg = icon.type === 'image/svg+xml' || /\.svg(?:[?#]|$)/i.test(icon.href)
+    if (!icon.sizes)
+      return [`${icon.href} has no sizes attribute.`]
+    if (icon.sizes.toLowerCase().split(/\s+/).includes('any') && !isSvg)
+      return [`${icon.href} uses sizes="any", which is reserved for scalable icons.`]
+    return []
+  })
+}
+
 export function parseMetaTags(html: string) {
   const parser = new DOMParser()
   const doc = parser.parseFromString(html, 'text/html')
@@ -64,13 +95,21 @@ export function parseMetaTags(html: string) {
     }
   })
 
-  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 iconLinks: ParsedIconLink[] = []
+  doc.querySelectorAll('link[rel][href]').forEach((el) => {
+    const relTokens = (el.getAttribute('rel') || '').toLowerCase().split(/\s+/)
+    const rel = relTokens.includes('apple-touch-icon')
+      ? 'apple-touch-icon'
+      : relTokens.includes('icon')
+        ? 'icon'
+        : null
+    if (!rel)
+      return
     const href = el.getAttribute('href')
     if (!href)
       return
     iconLinks.push({
-      rel: el.getAttribute('rel') || 'icon',
+      rel,
       href,
       type: el.getAttribute('type') || undefined,
       sizes: el.getAttribute('sizes') || undefined,

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

@@ -1,24 +1,17 @@
 <script setup lang="ts">
+import type { ParsedIconLink } from '../../lib/seo-utils/tools'
 import { useClipboard } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { data } from '../../lib/seo-utils/state'
-import { parseMetaTags } from '../../lib/seo-utils/tools'
+import { getIconIssues, parseMetaTags, resolveAppUrl } from '../../lib/seo-utils/tools'
 
 const { copy } = useClipboard()
 
 const loading = ref(false)
 const error = ref<string | null>(null)
 
-interface IconLink {
-  rel: string
-  href: string
-  type?: string
-  sizes?: string
-  media?: string
-}
-
 interface ParsedIdentity {
-  icons: IconLink[]
+  icons: ParsedIconLink[]
   ogImages: Array<{ url: string, width?: string, height?: string, alt?: string }>
   twitterImages: Array<{ url: string, width?: string, height?: string }>
   themeColors: Array<{ color: string, media?: string, context: 'light' | 'dark' | 'default' }>
@@ -30,9 +23,10 @@ const parsedPage = ref<ParsedIdentity | null>(null)
 const siteConfig = computed(() => data.value?.siteConfig || null)
 const pageIcons = computed(() => parsedPage.value?.icons || [])
 const hasIcons = computed(() => pageIcons.value.length > 0)
+const iconIssues = computed(() => getIconIssues(pageIcons.value))
 
 const iconsByRel = computed(() => {
-  const groups: Record<string, IconLink[]> = {}
+  const groups: Record<string, ParsedIconLink[]> = {}
   pageIcons.value.forEach((link) => {
     const rel = link.rel || 'icon'
     if (!groups[rel])
@@ -110,7 +104,8 @@ async function checkIdentity() {
 
   try {
     const baseUrl = window.parent?.location?.origin || window.location.origin
-    const response = await fetch(`${baseUrl}${path.value}`, {
+    const pageUrl = resolveAppUrl(baseUrl, data.value?.runtimeConfig.appBaseURL || '/', path.value)
+    const response = await fetch(pageUrl, {
       headers: { Accept: 'text/html' },
     })
     if (!response.ok)
@@ -155,7 +150,7 @@ async function checkIdentity() {
     // Resolve relative icon URLs to absolute
     const icons = parsed.iconLinks.map(icon => ({
       ...icon,
-      href: icon.href.startsWith('http') ? icon.href : `${baseUrl}${icon.href.startsWith('/') ? '' : '/'}${icon.href}`,
+      href: new URL(icon.href, response.url).href,
     }))
 
     parsedPage.value = {
@@ -182,7 +177,7 @@ watch([() => data.value, path, refreshTime], () => {
 const cliCommand = 'npx nuxt-seo-utils icons --source <your-logo.svg>'
 
 const iconSizesGenerated = [
-  { name: 'favicon.ico', size: '32x32', desc: 'Browser tab' },
+  { name: 'favicon.ico', size: '16x16, 32x32, 48x48', desc: 'Browser tab' },
   { name: 'icon-16x16.png', size: '16x16', desc: 'Small favicon' },
   { name: 'icon-32x32.png', size: '32x32', desc: 'Standard favicon' },
   { name: 'apple-touch-icon.png', size: '180x180', desc: 'iOS home screen' },
@@ -258,6 +253,14 @@ const iconSizesGenerated = [
         </template>
 
         <template v-if="hasIcons">
+          <div v-if="iconIssues.length" class="hint-callout mb-4">
+            <UIcon name="carbon:warning" class="hint-callout-icon text-sm mt-0.5 shrink-0" />
+            <div class="text-xs text-[var(--color-text-muted)]">
+              <p v-for="issue in iconIssues" :key="issue">
+                {{ issue }}
+              </p>
+            </div>
+          </div>
           <div v-for="(icons, rel) in iconsByRel" :key="rel" class="mb-5 last:mb-0">
             <div class="id-group-header">
               <span>{{ iconRelLabels[rel]?.label || rel }}</span>

package/dist/module.d.mts

@@ -121,7 +121,7 @@ interface ModuleOptions {
      * **Build mode**: Minifies static `app.head` scripts/styles and prerendered route HTML using esbuild (JS) and lightningcss (CSS).
      * **Runtime mode**: Minifies all inline scripts/styles per SSR request via an Unhead `ssr:render` plugin using lightweight pure JS minifiers.
      *
-     * @default true
+     * @default { build: true, runtime: false }
      */
     minify: boolean | {
         build?: boolean;

package/dist/module.d.ts

@@ -121,7 +121,7 @@ interface ModuleOptions {
      * **Build mode**: Minifies static `app.head` scripts/styles and prerendered route HTML using esbuild (JS) and lightningcss (CSS).
      * **Runtime mode**: Minifies all inline scripts/styles per SSR request via an Unhead `ssr:render` plugin using lightweight pure JS minifiers.
      *
-     * @default true
+     * @default { build: true, runtime: false }
      */
     minify: boolean | {
         build?: boolean;

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "8.3.3",
+  "version": "8.4.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"