nuxt-link-checker 5.0.9 → 5.1.0

package/dist/devtools/components/link-checker/CodeDiff.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+
+const props = defineProps<{
+  code: string
+  lang?: BundledLanguage
+  diff: { added: number[], removed: number[], result: string }
+}>()
+
+const start = ref(props.diff.added[0] - 2)
+
+const shikiClassRe = /class="shiki/
+const lineClassRe = /class="line"/g
+const codeContentRe = /<code>([\s\S]*)<\/code>/
+
+function transformRendered(code: string) {
+  let count = 0
+  const linesToInclude = new Set<number>()
+  const diffed = code
+    .replace(shikiClassRe, 'class="shiki diff')
+    .replace(lineClassRe, (_) => {
+      count++
+      const hasAdded = props.diff.added.includes(count - 1)
+      const hasRemoved = props.diff.removed.includes(count - 1)
+      if (hasAdded || hasRemoved) {
+        for (let i = count - 3; i < count + 3; i++) {
+          if (i >= 0)
+            linesToInclude.add(i)
+        }
+      }
+      if (hasAdded)
+        return 'class="line line-added"'
+      if (hasRemoved)
+        return 'class="line line-removed"'
+      return _
+    })
+  return diffed.replace(codeContentRe, (_, p1) => {
+    const lines = p1.split('\n')
+    const filtered = lines.filter((_: any, i: number) => linesToInclude.has(i + 1))
+    return `<code>${filtered.join('\n')}</code>`
+  })
+}
+
+const elRef = useTemplateRef<HTMLDivElement>('elRef')
+</script>
+
+<template>
+  <OCodeBlock
+    ref="elRef"
+    :code="diff.result"
+    :lang="lang"
+    :transform-rendered="transformRendered"
+    :style="`--start: ${start};`"
+  />
+</template>

package/dist/devtools/components/link-checker/CodeHighlight.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+
+const props = defineProps<{
+  code: string
+  lang: BundledLanguage
+  link: string
+}>()
+
+function transformRendered(code: string) {
+  return code.replaceAll(props.link, `<span class="highlight">${props.link}</span>`)
+}
+
+const elRef = useTemplateRef<HTMLDivElement>('elRef')
+</script>
+
+<template>
+  <OCodeBlock
+    ref="elRef"
+    :code="code"
+    :lang="lang"
+    :transform-rendered="transformRendered"
+    v-bind="$attrs"
+  />
+</template>
+
+<style>
+.highlight {
+  background-color: #ffd5d5;
+}
+
+.dark .highlight {
+  background-color: #5c0000;
+}
+</style>

package/dist/devtools/components/link-checker/FixActionDialog.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { FixDialog } from '../../lib/link-checker/dialog'
+import { host } from '../../lib/link-checker/rpc'
+
+function openFilePath(filepath: string) {
+  host.value?.openInEditor(filepath)
+}
+
+function handleClose(_a: any, resolve: (value: boolean) => void) {
+  resolve(false)
+}
+</script>
+
+<template>
+  <FixDialog v-slot="{ resolve, args }">
+    <UModal :open="true" @close="handleClose('close', resolve)">
+      <div class="flex flex-col gap-2 w-full p-6">
+        <h2 class="text-xl font-semibold text-[var(--color-primary)]">
+          Confirm Code Diff
+        </h2>
+
+        <div v-for="(source, i) in args[0].diff" :key="i">
+          <div class="flex items-center gap-2 mb-1">
+            <div class="text-sm gap-2 flex flex-row mb-1 justify-end">
+              <span class="text-green-500">+{{ source.diff.added.length }}</span>
+              <span class="text-red-500">-{{ source.diff.removed.length }}</span>
+            </div>
+            <button
+              type="button"
+              class="opacity-50 text-xs font-mono cursor-pointer hover:opacity-80"
+              @click="openFilePath(source.filepath)"
+            >
+              {{ source.filepath }}
+            </button>
+          </div>
+
+          <div class="rounded-lg border border-[var(--color-border)] overflow-hidden max-h-50 overflow-auto">
+            <div class="flex flex-col gap-1 items-start px-4 py-2">
+              <CodeDiff v-bind="source" lang="vue-html" class="overflow-auto" />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex gap-3 mt-2 justify-end items-center">
+          <DevtoolsAlert variant="info" class="flex-auto text-sm">
+            Experimental.
+          </DevtoolsAlert>
+          <UButton variant="ghost" @click="resolve(false)">
+            Cancel
+          </UButton>
+          <UButton color="primary" @click="resolve(true)">
+            Apply Fix
+          </UButton>
+        </div>
+      </div>
+    </UModal>
+  </FixDialog>
+</template>

package/dist/devtools/components/link-checker/LinkInspection.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { FixDialog } from '../../lib/link-checker/dialog'
+import { host, linkCheckerRpc } from '../../lib/link-checker/rpc'
+
+const { item } = defineProps<{
+  item: any
+}>()
+
+function openFilePath(filepath: string) {
+  host.value?.openInEditor(filepath)
+}
+
+async function fixDialog() {
+  if (!await FixDialog.start(item))
+    return
+  await linkCheckerRpc.value!.applyLinkFixes(item.diff, item.link, item.fix)
+}
+
+async function scrollToLink() {
+  await linkCheckerRpc.value!.scrollToLink(item.link)
+}
+</script>
+
+<template>
+  <div v-if="item" class="text-sm lg:flex w-full gap-5">
+    <div class="flex-shrink-0">
+      <UButton variant="ghost" size="xs" icon="carbon:cursor-2" @click="scrollToLink" />
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="flex space-x-2">
+        <UTooltip :text="item.textContent">
+          <div class="opacity-90 truncate" style="max-width: 150px;">
+            {{ item.textContent }}
+          </div>
+        </UTooltip>
+        <a :href="item.link" target="_blank" class="font-mono mb-3 truncate text-[var(--color-primary)] hover:underline">
+          {{ item.link }}
+        </a>
+      </div>
+      <div>
+        <div v-for="(inspection, i) in [...item.error, ...item.warning]" :key="i" class="flex flex-row gap-2 items-center mb-2">
+          <div class="flex gap-2 w-full">
+            <div style="min-width: 150px; margin-top: 1px;">
+              <template v-if="inspection.scope === 'error'">
+                <div class="text-red-800 text-xs flex items-center font-medium dark:text-red-300">
+                  <UIcon name="carbon:error" class="mr-1 text-xs" />
+                  Error
+                </div>
+              </template>
+              <template v-else>
+                <div class="text-yellow-800 flex items-center text-xs font-medium dark:text-yellow-300">
+                  <UIcon name="carbon:warning" class="mr-1 text-xs" />
+                  Warning
+                </div>
+              </template>
+              <span class="text-[var(--color-text-muted)]">{{ inspection.name }}</span>
+            </div>
+            <div class="flex-grow">
+              <div>{{ inspection.message }}</div>
+              <div v-if="inspection.tip">
+                <span class="opacity-60">{{ inspection.tip }}</span>
+              </div>
+              <UButton
+                v-if="inspection.fix"
+                variant="outline"
+                color="green"
+                size="xs"
+                icon="carbon:magic-wand"
+                :label="inspection.fixDescription"
+                class="mt-2"
+                @click="fixDialog"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template v-if="item.passes">
+      <div class="flex gap-2 items-center">
+        <div style="flex-basis: 4rem;">
+          <span class="text-green-800 text-xs flex items-center font-medium dark:text-green-300">
+            <UIcon name="carbon:checkmark-outline" class="mr-1 text-xs" />
+            Pass
+          </span>
+        </div>
+      </div>
+    </template>
+    <div v-else class="flex flex-col w-full">
+      <div v-if="!item.sources?.length" class="text-[var(--color-text-muted)]">
+        No source code found.
+      </div>
+      <div v-for="(source, i) in item.sources" :key="i" class="mb-4">
+        <div class="flex mb-1 items-center">
+          <button
+            type="button"
+            class="opacity-50 text-xs font-mono cursor-pointer hover:opacity-80"
+            @click="openFilePath(source.filepath)"
+          >
+            {{ source.filepath }}
+          </button>
+        </div>
+        <div v-for="(preview, pk) in source.previews" :key="pk" class="rounded-lg border border-[var(--color-border)] overflow-hidden">
+          <CodeHighlight :link="item.link" :code="preview.code" lang="vue-html" class="overflow-auto" :style="{ '--start': Math.max(preview.lineNumber - 2, 1) }" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/devtools/components/link-checker/LinkPassing.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  item: any
+}>()
+</script>
+
+<template>
+  <div class="text-sm flex w-full gap-5">
+    <div class="min-w-0 flex-1">
+      <a :href="item.link" target="_blank" class="font-mono mb-3 text-[var(--color-primary)] hover:underline">
+        {{ item.link }}
+      </a>
+    </div>
+    <div class="flex gap-2 items-center">
+      <div style="flex-basis: 4rem;">
+        <span class="text-green-800 text-xs flex items-center font-medium dark:text-green-300">
+          <UIcon name="carbon:checkmark-outline" class="mr-1 text-xs" />
+          Pass
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/devtools/lib/link-checker/dialog.ts

@@ -0,0 +1 @@
+export const FixDialog = createTemplatePromise<boolean, [any]>()

package/dist/devtools/lib/link-checker/rpc-types.ts

@@ -0,0 +1 @@
+export type { ClientFunctions, ServerFunctions } from '../../../src/rpc-types'

package/dist/devtools/lib/link-checker/rpc.ts

@@ -0,0 +1,45 @@
+import type { BirpcReturn } from 'birpc'
+import type { ClientFunctions, ServerFunctions } from './rpc-types'
+import type { NuxtLinkCheckerClient } from './types'
+import { useDevtoolsConnection } from 'nuxtseo-layer-devtools/composables/rpc'
+import { getQuery } from 'ufo'
+import { ref, unref } from 'vue'
+import { linkDb, linkFilter, queueLength, visibleLinks } from './state'
+
+const RPC_NAMESPACE = 'nuxt-link-checker-rpc'
+
+export const host = ref<any>()
+export const linkCheckerRpc = ref<BirpcReturn<ServerFunctions>>()
+
+useDevtoolsConnection({
+  onConnected(connectedHost) {
+    host.value = connectedHost
+
+    const linkCheckerClient = connectedHost.inject<NuxtLinkCheckerClient>('linkChecker')
+    // The injected link-checker client holds the live link data; without it there
+    // is nothing to mirror, so finish with the layer's data refresh (already fired).
+    if (!linkCheckerClient)
+      return
+
+    linkDb.value = linkCheckerClient.linkDb.value
+    visibleLinks.value = [...linkCheckerClient.visibleLinks]
+    linkFilter.value = getQuery(window.location.href).link as string
+
+    const rpc = connectedHost.rpc<ServerFunctions, ClientFunctions>(RPC_NAMESPACE, {
+      queueWorking(payload) {
+        queueLength.value = payload.queueLength
+        linkDb.value = unref(linkCheckerClient.linkDb)
+        visibleLinks.value = [...linkCheckerClient.visibleLinks]
+      },
+      updated() {
+        linkDb.value = unref(linkCheckerClient.linkDb)
+        visibleLinks.value = [...linkCheckerClient.visibleLinks]
+      },
+      filter(payload) {
+        linkFilter.value = payload.link
+      },
+    })
+    linkCheckerRpc.value = rpc
+    rpc?.connected()
+  },
+})

package/dist/devtools/lib/link-checker/state.ts

@@ -0,0 +1,53 @@
+import type { LinkInspectionResult } from './types'
+import { useLocalStorage } from '@vueuse/core'
+import { appFetch } from 'nuxtseo-layer-devtools/composables/rpc'
+import { refreshTime } from 'nuxtseo-layer-devtools/composables/state'
+import { computed, ref } from 'vue'
+import { useAsyncData } from '#imports'
+
+export const linkDb = ref<LinkInspectionResult[]>([])
+export const showLiveInspections = useLocalStorage<boolean>('nuxt-link-checker:show-live-inspections', true)
+export const visibleLinks = ref<string[]>([])
+export const queueLength = ref(0)
+
+export const linkFilter = ref<string | false>('')
+
+// Derived link views shared across the Inspections and Links tabs
+export const nodes = computed(() => {
+  const validLinks = visibleLinks.value
+  let n = [...linkDb.value]
+  if (linkFilter.value)
+    n = n.filter(node => node.link === linkFilter.value)
+  else
+    n = n.filter(node => validLinks.includes(node.link))
+  return n.sort((a, b) => (a.fix && !b.fix ? 1 : -1))
+})
+
+export const failingNodes = computed(() => {
+  const seen = new Set<string>()
+  return nodes.value.filter((n) => {
+    if (!n.error.length && !n.warning.length)
+      return false
+    if (seen.has(n.link))
+      return false
+    seen.add(n.link)
+    return true
+  })
+})
+
+export const internalLinks = computed(() => nodes.value.filter(n => n.passes && n.link.startsWith('/')))
+export const externalLinks = computed(() => nodes.value.filter(n => n.passes && !n.link.startsWith('/')))
+export const errorCount = computed(() => nodes.value.reduce((count, n) => count + n.error.length, 0))
+export const warningCount = computed(() => nodes.value.reduce((count, n) => count + n.warning.length, 0))
+export const visibleLinkCount = computed(() => visibleLinks.value.length)
+
+export function useDebugData(): any {
+  return useAsyncData<{ runtimeConfig: any } | null>('link-checker-debug', () => {
+    if (!appFetch.value)
+      return null
+    return appFetch.value('/__link-checker__/debug.json')
+  }, {
+    watch: [appFetch, refreshTime],
+    default: () => null,
+  })
+}

package/dist/devtools/lib/link-checker/types.ts

@@ -0,0 +1 @@
+export type { LinkInspectionResult, NuxtLinkCheckerClient } from '../../../src/runtime/types'

package/dist/devtools/nuxt.config.ts

@@ -0,0 +1,7 @@
+import { resolve } from 'pathe'
+
+// Nuxt SEO devtools panel, shipped as a layer (Model C). Components flat-registered
+// so intra-panel references resolve by name.
+export default defineNuxtConfig({
+  components: [{ path: resolve(__dirname, './components'), pathPrefix: false }],
+})

package/dist/devtools/pages/link-checker/debug.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDebugData } from '../../lib/link-checker/state'
+
+const { data } = useDebugData()
+
+const runtimeConfigItems = computed(() => {
+  const config = data.value?.runtimeConfig || {}
+  return Object.entries(config)
+    .filter(([key]) => key !== 'version')
+    .map(([key, value]) => ({
+      key,
+      value: typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value ?? ''),
+      mono: true,
+      copyable: true,
+      code: typeof value === 'object' ? 'json' as const : undefined,
+    }))
+})
+</script>
+
+<template>
+  <DevtoolsSection icon="carbon:settings" text="Runtime Config">
+    <DevtoolsKeyValue :items="runtimeConfigItems" striped />
+  </DevtoolsSection>
+</template>

package/dist/devtools/pages/link-checker/docs.vue

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

package/dist/devtools/pages/link-checker/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import FixActionDialog from '../../components/link-checker/FixActionDialog.vue'
+import {
+  errorCount,
+  failingNodes,
+  linkFilter,
+  nodes,
+  queueLength,
+  visibleLinkCount,
+  warningCount,
+} from '../../lib/link-checker/state'
+</script>
+
+<template>
+  <div class="space-y-2">
+    <DevtoolsToolbar>
+      <DevtoolsMetric
+        v-if="queueLength"
+        icon="carbon:progress-bar-round"
+        :value="`${visibleLinkCount ? Math.round((Math.abs(queueLength - visibleLinkCount) / visibleLinkCount) * 100) : 0}%`"
+      />
+      <DevtoolsMetric
+        v-if="errorCount"
+        icon="carbon:error"
+        :value="errorCount"
+        label="Errors"
+        variant="danger"
+      />
+      <DevtoolsMetric
+        v-if="warningCount"
+        icon="carbon:warning"
+        :value="warningCount"
+        label="Warnings"
+        variant="warning"
+      />
+      <DevtoolsMetric
+        v-if="!warningCount && !errorCount"
+        icon="carbon:checkmark-outline"
+        value="All links passing"
+        variant="success"
+      />
+    </DevtoolsToolbar>
+
+    <p v-if="linkFilter" class="text-sm flex items-center gap-1 mb-4">
+      <UIcon name="carbon:filter" />
+      Filtering Results.
+      <button type="button" class="underline" @click="linkFilter = false">
+        Show All
+      </button>
+    </p>
+
+    <div v-if="!linkFilter">
+      <template v-if="failingNodes.length">
+        <LinkInspection
+          v-for="(item, index) of failingNodes"
+          :key="index"
+          :item="item"
+          class="odd:bg-[var(--color-bg-elevated)] p-2"
+        />
+      </template>
+      <DevtoolsEmptyState
+        v-else-if="!queueLength"
+        icon="carbon:checkmark-outline"
+        title="No issues found"
+        description="All visible links are passing validation."
+      />
+    </div>
+    <div v-else>
+      <LinkInspection v-for="(item, index) of nodes" :key="index" :item="item" />
+    </div>
+    <FixActionDialog />
+  </div>
+</template>

package/dist/devtools/pages/link-checker/links.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { externalLinks, internalLinks } from '../../lib/link-checker/state'
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DevtoolsSection icon="carbon:chart-network" text="Internal Links">
+      <LinkPassing v-for="(item, index) of internalLinks" :key="index" :item="item" />
+      <DevtoolsEmptyState v-if="!internalLinks.length" icon="carbon:link" title="No internal links" />
+    </DevtoolsSection>
+    <DevtoolsSection icon="carbon:launch" text="External Links">
+      <LinkPassing v-for="(item, index) of externalLinks" :key="index" :item="item" />
+      <DevtoolsEmptyState v-if="!externalLinks.length" icon="carbon:link" title="No external links" />
+    </DevtoolsSection>
+  </div>
+</template>

package/dist/devtools/pages/link-checker.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { loadShiki } from 'nuxtseo-layer-devtools/composables/shiki'
+import { isProductionMode, refreshSources } from 'nuxtseo-layer-devtools/composables/state'
+import { computed, ref, watch } from 'vue'
+import { navigateTo, useRoute } from '#imports'
+import { linkCheckerRpc } from '../lib/link-checker/rpc'
+import { linkDb, queueLength, showLiveInspections, useDebugData } from '../lib/link-checker/state'
+
+await loadShiki({
+  extraLangs: [
+    import('@shikijs/langs/vue-html'),
+  ],
+})
+
+const { data } = await useDebugData()
+
+const route = useRoute()
+const currentTab = computed(() => {
+  const p = route.path
+  if (p.startsWith('/link-checker/links'))
+    return 'links'
+  if (p.startsWith('/link-checker/debug'))
+    return 'debug'
+  if (p.startsWith('/link-checker/docs'))
+    return 'docs'
+  return 'inspections'
+})
+
+const navItems = [
+  { value: 'inspections', to: '/link-checker', icon: 'carbon:warning-diamond', label: 'Inspections', devOnly: false },
+  { value: 'links', to: '/link-checker/links', icon: 'carbon:checkmark-outline', label: 'Links', devOnly: false },
+  { value: 'debug', to: '/link-checker/debug', icon: 'carbon:debug', label: 'Debug', devOnly: true },
+  { value: 'docs', to: '/link-checker/docs', icon: 'carbon:book', label: 'Docs', devOnly: false },
+]
+
+const loading = ref(false)
+
+async function retryAll() {
+  linkDb.value = []
+  queueLength.value = 0
+  await linkCheckerRpc.value!.reset()
+}
+async function toggleLiveInspections() {
+  showLiveInspections.value = !showLiveInspections.value
+  await linkCheckerRpc.value!.toggleLiveInspections(showLiveInspections.value)
+}
+async function refresh() {
+  loading.value = true
+  await retryAll()
+  refreshSources()
+  setTimeout(() => {
+    loading.value = false
+  }, 300)
+}
+
+// Debug data is dev-only; leave the debug tab when the header switches to Production
+watch(isProductionMode, (isProd) => {
+  if (isProd && currentTab.value === 'debug')
+    return navigateTo('/link-checker')
+})
+</script>
+
+<template>
+  <DevtoolsLayout
+    v-model:active-tab="currentTab"
+    module-name="nuxt-link-checker"
+    title="Link Checker"
+    icon="carbon:cloud-satellite-link"
+    :version="data?.runtimeConfig?.version"
+    :nav-items="navItems"
+    github-url="https://github.com/harlan-zw/nuxt-link-checker"
+    :loading="loading"
+    @refresh="refresh"
+  >
+    <template #actions>
+      <UButton
+        :icon="showLiveInspections ? 'carbon:view-off' : 'carbon:view'"
+        variant="ghost"
+        size="xs"
+        :label="showLiveInspections ? 'Hide Inspections' : 'Show Inspections'"
+        @click="toggleLiveInspections"
+      />
+    </template>
+    <NuxtPage />
+  </DevtoolsLayout>
+</template>

package/dist/eslint.mjs

@@ -28,6 +28,13 @@ function extractMarkdownLinks(text) {
   return links;
 }
 const lineMapStack = [];
+const OWN_RULES = /* @__PURE__ */ new Set(["valid-route", "valid-sitemap-link"]);
+function isOwnRule(ruleId) {
+  if (!ruleId)
+    return false;
+  const name = ruleId.includes("/") ? ruleId.slice(ruleId.lastIndexOf("/") + 1) : ruleId;
+  return OWN_RULES.has(name);
+}
 const markdownProcessor = {
   meta: {
     name: "link-checker/markdown",
@@ -54,9 +61,10 @@ const markdownProcessor = {
   },
   postprocess(messages) {
     const lineMap = lineMapStack.pop();
+    const filtered = messages.flat().filter((msg) => isOwnRule(msg.ruleId));
     if (!lineMap || !lineMap.size)
-      return messages.flat();
-    return messages.flat().map((msg) => {
+      return filtered;
+    return filtered.map((msg) => {
       const link = lineMap.get(msg.line);
       if (link) {
         return {

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.9.0"
   },
   "configKey": "linkChecker",
-  "version": "5.0.9",
+  "version": "5.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"