nuxtseo-shared 0.1.8 → 0.2.0

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

@@ -1,41 +0,0 @@
-<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/DevtoolsSnippet.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-const {
-  label,
-  code,
-  lang = 'js',
-} = defineProps<{
-  label?: string
-  code: string
-  lang?: 'js' | 'json' | 'xml'
-}>()
-</script>
-
-<template>
-  <div class="devtools-snippet">
-    <div v-if="label || $slots.header" class="devtools-snippet-header">
-      <slot name="header">
-        <code class="devtools-snippet-label">{{ label }}</code>
-      </slot>
-      <DevtoolsCopyButton :text="code" />
-    </div>
-    <OCodeBlock :code="code" :lang="lang" class="devtools-snippet-block" />
-  </div>
-</template>
-
-<style scoped>
-.devtools-snippet {
-  margin: 0.5rem 0.75rem;
-}
-
-.devtools-snippet-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.375rem;
-}
-
-.devtools-snippet-label {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--color-text-muted);
-  letter-spacing: -0.01em;
-}
-
-.devtools-snippet-block {
-  border-radius: var(--radius-sm);
-  font-size: 0.6875rem;
-  line-height: 1.6;
-  padding: 0.5rem 0.625rem !important;
-}
-</style>

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

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-const {
-  variant = 'default',
-} = defineProps<{
-  variant?: 'default' | 'minimal'
-}>()
-</script>
-
-<template>
-  <div class="devtools-toolbar" :class="`devtools-toolbar-${variant}`">
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.devtools-toolbar {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.devtools-toolbar-default {
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  background: var(--color-surface-elevated);
-  position: relative;
-}
-
-@media (min-width: 640px) {
-  .devtools-toolbar-default {
-    padding: 0.75rem 1rem;
-  }
-}
-
-.devtools-toolbar-minimal {
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.75rem;
-  background: var(--color-surface-sunken);
-}
-</style>

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

@@ -1,77 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <svg viewBox="0 0 64 64" class="pop-quick w-7 h-7">
-      <defs>
-        <linearGradient id="wmLine1" x1="0%" y1="100%" x2="100%" y2="0%">
-          <stop offset="0%" stop-color="#22c55e" />
-          <stop offset="100%" stop-color="#86efac" />
-        </linearGradient>
-        <linearGradient id="wmFill1" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stop-color="#22c55e" stop-opacity="0.6" />
-          <stop offset="100%" stop-color="#22c55e" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-      <path
-        class="fill"
-        d="M8 52 Q20 48 24 36 T40 20 T56 12 L56 56 L8 56 Z"
-        fill="url(#wmFill1)"
-      />
-      <path
-        class="line"
-        d="M8 52 Q20 48 24 36 T40 20 T56 12"
-        fill="none"
-        stroke="url(#wmLine1)"
-        stroke-width="4"
-        stroke-linecap="round"
-      />
-      <circle class="node" cx="56" cy="12" r="6" fill="url(#wmLine1)" />
-    </svg>
-    <span class="-ml-1 dark:text-white text-black text-lg font-bold tracking-tight slide-right">
-      Nuxt<span class="ml-1 text-green-400">SEO</span>
-    </span>
-  </div>
-</template>
-
-<style scoped>
-@keyframes drawLine {
-  0% { stroke-dashoffset: 100; }
-  100% { stroke-dashoffset: 0; }
-}
-@keyframes revealFill {
-  0% { clip-path: inset(0 100% 0 0); }
-  100% { clip-path: inset(0 0% 0 0); }
-}
-@keyframes popNode {
-  0%, 70% { opacity: 0; transform: scale(0); }
-  85% { transform: scale(1.3); opacity: 1; }
-  100% { transform: scale(1); opacity: 1; }
-}
-@keyframes slideRight {
-  from {
-    transform: scale(0.6) translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.pop-quick .line {
-  stroke-dasharray: 100;
-  stroke-dashoffset: 100;
-  animation: drawLine 0.8s ease-out forwards;
-}
-.pop-quick .fill {
-  clip-path: inset(0 100% 0 0);
-  animation: revealFill 0.4s ease-out forwards;
-}
-.pop-quick .node {
-  opacity: 0;
-  transform-origin: 56px 12px;
-  animation: popNode 0.6s ease-out forwards;
-}
-.slide-right {
-  animation: slideRight 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
-}
-</style>

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

@@ -1,23 +0,0 @@
-<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/dist/layer-devtools/components/OSectionBlock.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-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
-}
-</script>
-
-<template>
-  <details :open="open" class="section-block" @toggle="onToggle">
-    <summary class="section-header" :class="collapse ? '' : 'pointer-events-none'">
-      <div class="section-title" :class="[open ? '' : 'opacity-60', headerClass]">
-        <UIcon v-if="icon" :name="icon" class="section-icon" />
-        <div class="flex-1 min-w-0">
-          <div class="section-label">
-            <slot name="text">
-              {{ text }}
-            </slot>
-          </div>
-          <div v-if="description || $slots.description" class="section-description">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </div>
-        </div>
-        <slot name="actions" />
-        <UIcon
-          v-if="collapse"
-          name="carbon:chevron-down"
-          class="chevron"
-        />
-      </div>
-    </summary>
-    <div
-      class="section-content"
-      :class="typeof padding === 'string' ? padding : padding ? 'px-4' : ''"
-    >
-      <slot name="details" />
-      <div :class="containerClass">
-        <slot />
-      </div>
-      <slot name="footer" />
-    </div>
-  </details>
-</template>
-
-<style scoped>
-.section-block {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  background: var(--color-surface-elevated);
-  transition: border-color 200ms ease;
-}
-
-.section-block:hover {
-  border-color: var(--color-neutral-300);
-}
-
-.dark .section-block:hover {
-  border-color: var(--color-neutral-700);
-}
-
-.section-header {
-  cursor: pointer;
-  user-select: none;
-  padding: 0.875rem 1rem;
-  transition: background 150ms ease;
-  list-style: none;
-}
-
-.section-header::-webkit-details-marker {
-  display: none;
-}
-
-.section-header:hover {
-  background: var(--color-surface-sunken);
-}
-
-details[open] .section-header {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  transition: opacity 150ms ease;
-}
-
-.section-icon {
-  color: var(--color-text-muted);
-  font-size: 1.125rem;
-  flex-shrink: 0;
-}
-
-.section-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.section-description {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  margin-top: 0.125rem;
-}
-
-.chevron {
-  color: var(--color-text-subtle);
-  font-size: 0.875rem;
-  flex-shrink: 0;
-  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-details[open] .chevron {
-  transform: rotate(180deg);
-  color: var(--color-text-muted);
-}
-
-.section-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  background: var(--color-surface-sunken);
-}
-</style>

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

@@ -1,21 +0,0 @@
-import { useClipboard } from '@vueuse/core'
-import { ref, watch } from 'vue'
-
-export function useCopy(timeout = 2000) {
-  const { copy, copied } = useClipboard({ legacy: true })
-  const justCopied = ref(false)
-
-  watch(copied, (val) => {
-    if (val) {
-      justCopied.value = true
-      setTimeout(() => {
-        justCopied.value = false
-      }, timeout)
-    }
-  })
-
-  return {
-    copy,
-    copied: justCopied,
-  }
-}

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

@@ -1,39 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import { createResolver } from '@nuxt/kit'
-
-const { resolve } = createResolver(import.meta.url)
-
-export default defineNuxtConfig({
-  ssr: false,
-
-  modules: [
-    '@nuxt/fonts',
-    '@nuxt/ui',
-  ],
-
-  css: [resolve('./assets/css/global.css')],
-
-  fonts: {
-    families: [
-      { name: 'Hubot Sans' },
-    ],
-  },
-
-  devtools: {
-    enabled: false,
-  },
-
-  compatibilityDate: '2026-03-13',
-})