nuxtseo-shared 0.1.5 → 0.1.7

package/dist/layer-devtools/assets/css/global.css

@@ -375,3 +375,219 @@ h1, h2, h3, h4, h5, h6 {
 .dark ::selection {
   background: oklch(65% 0.2 145 / 0.35);
 }
+
+/* ---- DevtoolsLayout ---- */
+
+/* Base HTML for devtools */
+html {
+  font-family: var(--font-sans);
+  overflow-y: scroll;
+  overscroll-behavior: none;
+}
+
+body {
+  min-height: 100vh;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+/* Header */
+.devtools-header {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.devtools-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.625rem 1rem;
+  max-width: 80rem;
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .devtools-header-content {
+    padding: 0.75rem 1.25rem;
+  }
+}
+
+.devtools-divider {
+  width: 1px;
+  height: 1.25rem;
+  background: var(--color-border);
+}
+
+.devtools-brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-sm);
+  background: oklch(65% 0.2 145 / 0.12);
+  color: var(--seo-green);
+}
+
+/* Navigation tabs */
+.devtools-nav-tabs {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.devtools-nav-tab {
+  position: relative;
+  border-radius: var(--radius-sm);
+  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.devtools-nav-tab-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  color: var(--color-text-muted);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+@media (min-width: 640px) {
+  .devtools-nav-tab-inner {
+    padding: 0.375rem 0.75rem;
+  }
+}
+
+.devtools-nav-tab:hover .devtools-nav-tab-inner {
+  color: var(--color-text);
+}
+
+.devtools-nav-tab.active {
+  background: var(--color-surface-elevated);
+  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
+}
+
+.dark .devtools-nav-tab.active {
+  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
+}
+
+.devtools-nav-tab.active .devtools-nav-tab-inner {
+  color: var(--color-text);
+}
+
+.devtools-nav-label {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .devtools-nav-label {
+    display: inline;
+  }
+}
+
+.devtools-nav-action {
+  color: var(--color-text-muted) !important;
+}
+
+.devtools-nav-action:hover {
+  color: var(--color-text) !important;
+  background: var(--color-surface-sunken) !important;
+}
+
+/* Preview source toggle */
+.devtools-preview-toggle {
+  display: flex;
+  gap: 1px;
+  background: var(--color-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.devtools-preview-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  background: var(--color-surface-sunken);
+  border: none;
+  cursor: pointer;
+  transition: color 150ms, background 150ms;
+  white-space: nowrap;
+}
+
+.devtools-preview-btn:hover {
+  color: var(--color-text);
+  background: var(--color-surface-elevated);
+}
+
+.devtools-preview-btn.active {
+  color: var(--color-text);
+  background: var(--color-surface-elevated);
+  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.06);
+}
+
+.dark .devtools-preview-btn.active {
+  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.2);
+}
+
+/* Production URL badge */
+.devtools-production-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: oklch(85% 0.12 145 / 0.12);
+  color: oklch(45% 0.15 145);
+  font-weight: 500;
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.dark .devtools-production-badge {
+  background: oklch(35% 0.08 145 / 0.2);
+  color: oklch(75% 0.12 145);
+}
+
+.devtools-production-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: oklch(65% 0.2 145);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Main content wrapper */
+.devtools-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  min-height: calc(100vh - 60px);
+}
+
+@media (min-width: 640px) {
+  .devtools-main {
+    padding: 1rem;
+  }
+}
+
+@media (max-height: 600px) {
+  .devtools-main {
+    padding: 0;
+    min-height: 0;
+  }
+}

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useCopy } from '../composables/clipboard'
+
+const { text } = defineProps<{
+  text: string
+}>()
+
+const { copy, copied } = useCopy()
+</script>
+
+<template>
+  <UTooltip :text="copied ? 'Copied!' : 'Copy'">
+    <UButton
+      :icon="copied ? 'carbon:checkmark' : 'carbon:copy'"
+      :aria-label="copied ? 'Copied' : 'Copy to clipboard'"
+      :class="copied ? 'text-[var(--seo-green)]' : ''"
+      @click="copy(text)"
+    />
+  </UTooltip>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { url } = defineProps<{
+  url: string
+}>()
+</script>
+
+<template>
+  <div class="h-full max-h-full overflow-hidden">
+    <iframe :src="url" :title="`Documentation - ${url}`" class="w-full h-full border-none" style="min-height: calc(100vh - 100px);" />
+  </div>
+</template>

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+export interface KeyValueItem {
+  key: string
+  value: string | number | boolean | undefined
+  copyable?: boolean
+  mono?: boolean
+  link?: string
+}
+
+const { items, striped = false } = defineProps<{
+  items: KeyValueItem[]
+  striped?: boolean
+}>()
+</script>
+
+<template>
+  <div class="divide-y divide-[var(--color-border-subtle)]">
+    <div
+      v-for="item in items"
+      :key="item.key"
+      class="devtools-kv-row group"
+      :class="{ 'devtools-kv-striped': striped }"
+    >
+      <span class="devtools-kv-key">{{ item.key }}</span>
+      <div class="devtools-kv-value-wrap">
+        <a
+          v-if="item.link"
+          :href="item.link"
+          target="_blank"
+          rel="noopener"
+          class="link-external text-sm"
+        >
+          {{ item.value }}
+        </a>
+        <span
+          v-else
+          class="devtools-kv-value"
+          :class="{
+            'font-mono': item.mono !== false,
+            'devtools-kv-true': item.value === true,
+            'devtools-kv-false': item.value === false,
+            'devtools-kv-empty': item.value === undefined || item.value === '',
+          }"
+        >
+          {{ item.value === undefined || item.value === '' ? '(empty)' : item.value }}
+        </span>
+        <DevtoolsCopyButton
+          v-if="item.copyable && item.value !== undefined && item.value !== ''"
+          :text="String(item.value)"
+          class="opacity-0 group-hover:opacity-100 transition-opacity"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.devtools-kv-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.625rem 1.25rem;
+  transition: background-color 150ms ease;
+}
+
+.devtools-kv-row:hover {
+  background: var(--color-surface-sunken);
+}
+
+.devtools-kv-striped:nth-child(even) {
+  background: oklch(from var(--color-surface-sunken) l c h / 0.5);
+}
+
+.devtools-kv-key {
+  font-size: 0.8125rem;
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.devtools-kv-value-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.devtools-kv-value {
+  font-size: 0.8125rem;
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.devtools-kv-true {
+  color: var(--seo-green);
+}
+
+.devtools-kv-false {
+  color: oklch(65% 0.15 25);
+}
+
+.devtools-kv-empty {
+  color: var(--color-text-subtle);
+  font-style: italic;
+}
+</style>

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

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { colorMode } from '../composables/rpc'
+import { hasProductionUrl, isProductionMode, previewSource, productionUrl } from '../composables/state'
+
+export interface DevtoolsNavItem {
+  value: string
+  to?: string
+  icon: string
+  label: string
+  devOnly?: boolean
+}
+
+const {
+  title,
+  icon,
+  version,
+  navItems,
+  githubUrl,
+  loading = false,
+} = defineProps<{
+  title: string
+  icon: string
+  version?: string
+  navItems: DevtoolsNavItem[]
+  githubUrl: string
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  refresh: []
+}>()
+
+const activeTab = defineModel<string>('activeTab')
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+useHead({
+  title: `Nuxt ${title}`,
+  htmlAttrs: {
+    class: () => isDark.value ? 'dark' : '',
+  },
+})
+
+const filteredNavItems = computed(() =>
+  isProductionMode.value
+    ? navItems.filter(item => !item.devOnly)
+    : navItems,
+)
+
+const productionHostname = computed(() => {
+  try {
+    return new URL(productionUrl.value).hostname
+  }
+  catch {
+    return productionUrl.value
+  }
+})
+
+const isRouteNav = computed(() => navItems.some(item => item.to))
+</script>
+
+<template>
+  <UApp>
+    <div class="relative bg-base flex flex-col min-h-screen">
+      <div class="gradient-bg" />
+
+      <header class="devtools-header glass sticky top-0 z-50">
+        <div class="devtools-header-content">
+          <!-- Logo & Brand -->
+          <div class="flex items-center gap-3 sm:gap-4">
+            <a
+              href="https://nuxtseo.com"
+              target="_blank"
+              rel="noopener"
+              aria-label="Nuxt SEO"
+              class="flex items-center opacity-90 hover:opacity-100 transition-opacity"
+            >
+              <NuxtSeoLogo class="h-6 sm:h-7" />
+            </a>
+
+            <div class="devtools-divider" />
+
+            <div class="flex items-center gap-2">
+              <div class="devtools-brand-icon" aria-hidden="true">
+                <UIcon :name="icon" class="text-base sm:text-lg" />
+              </div>
+              <h1 class="text-sm sm:text-base font-semibold tracking-tight text-[var(--color-text)]">
+                {{ title }}
+              </h1>
+              <UBadge
+                v-if="version"
+                class="font-mono text-[10px] sm:text-xs hidden sm:inline-flex"
+              >
+                {{ version }}
+              </UBadge>
+            </div>
+          </div>
+
+          <!-- Navigation -->
+          <nav class="flex items-center gap-1 sm:gap-2">
+            <!-- Nav Tabs -->
+            <div class="devtools-nav-tabs">
+              <template v-if="isRouteNav">
+                <NuxtLink
+                  v-for="item of filteredNavItems"
+                  :key="item.value"
+                  :to="item.to"
+                  class="devtools-nav-tab"
+                  :class="[
+                    activeTab === item.value ? 'active' : '',
+                    loading ? 'opacity-50 pointer-events-none' : '',
+                  ]"
+                >
+                  <UTooltip :text="item.label">
+                    <div class="devtools-nav-tab-inner">
+                      <UIcon
+                        :name="item.icon"
+                        class="text-base sm:text-lg"
+                        :class="activeTab === item.value ? 'text-[var(--seo-green)]' : ''"
+                      />
+                      <span class="devtools-nav-label">{{ item.label }}</span>
+                    </div>
+                  </UTooltip>
+                </NuxtLink>
+              </template>
+              <template v-else>
+                <button
+                  v-for="item of filteredNavItems"
+                  :key="item.value"
+                  type="button"
+                  class="devtools-nav-tab"
+                  :class="[
+                    activeTab === item.value ? 'active' : '',
+                    loading ? 'opacity-50 pointer-events-none' : '',
+                  ]"
+                  @click="activeTab = item.value"
+                >
+                  <UTooltip :text="item.label">
+                    <div class="devtools-nav-tab-inner">
+                      <UIcon
+                        :name="item.icon"
+                        class="text-base sm:text-lg"
+                        :class="activeTab === item.value ? 'text-[var(--seo-green)]' : ''"
+                      />
+                      <span class="devtools-nav-label">{{ item.label }}</span>
+                    </div>
+                  </UTooltip>
+                </button>
+              </template>
+            </div>
+
+            <!-- Preview source toggle -->
+            <div v-if="hasProductionUrl" class="devtools-preview-toggle">
+              <button
+                type="button"
+                class="devtools-preview-btn"
+                :class="{ active: previewSource === 'local' }"
+                @click="previewSource = 'local'"
+              >
+                <UIcon name="carbon:laptop" class="w-3.5 h-3.5" aria-hidden="true" />
+                <span class="hidden sm:inline">Local</span>
+              </button>
+              <button
+                type="button"
+                class="devtools-preview-btn"
+                :class="{ active: previewSource === 'production' }"
+                @click="previewSource = 'production'"
+              >
+                <UIcon name="carbon:cloud" class="w-3.5 h-3.5" aria-hidden="true" />
+                <span class="hidden sm:inline">Production</span>
+              </button>
+            </div>
+
+            <!-- Production URL indicator -->
+            <UTooltip v-if="isProductionMode" :text="productionUrl">
+              <span class="devtools-production-badge">
+                <span class="devtools-production-dot" />
+                <span class="hidden sm:inline text-xs">{{ productionHostname }}</span>
+              </span>
+            </UTooltip>
+
+            <!-- Actions -->
+            <div class="flex items-center gap-1">
+              <slot name="actions" />
+
+              <UTooltip text="Refresh">
+                <UButton
+                  icon="carbon:reset"
+                  aria-label="Refresh"
+                  class="devtools-nav-action"
+                  @click="emit('refresh')"
+                />
+              </UTooltip>
+
+              <UTooltip text="GitHub">
+                <UButton
+                  icon="simple-icons:github"
+                  aria-label="GitHub"
+                  :to="githubUrl"
+                  target="_blank"
+                  class="devtools-nav-action hidden sm:flex"
+                />
+              </UTooltip>
+            </div>
+          </nav>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <div class="devtools-main">
+        <main class="mx-auto flex flex-col w-full max-w-7xl">
+          <DevtoolsLoading v-if="loading" />
+          <slot v-else />
+        </main>
+      </div>
+    </div>
+  </UApp>
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const {
+  label,
+  value,
+  icon,
+  variant = 'default',
+} = defineProps<{
+  label?: string
+  value: string | number
+  icon?: string
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'
+}>()
+</script>
+
+<template>
+  <div class="devtools-metric" :class="`devtools-metric-${variant}`">
+    <UIcon v-if="icon" :name="icon" class="devtools-metric-icon" aria-hidden="true" />
+    <span class="devtools-metric-value">{{ value }}</span>
+    <span v-if="label" class="devtools-metric-label">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.devtools-metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.devtools-metric-icon {
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+.devtools-metric-value {
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+.devtools-metric-label {
+  color: inherit;
+  opacity: 0.7;
+}
+
+/* Variants */
+.devtools-metric-default {
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  color: var(--color-text);
+}
+
+.devtools-metric-success {
+  background: oklch(75% 0.15 145 / 0.12);
+  color: oklch(50% 0.15 145);
+}
+
+.dark .devtools-metric-success {
+  background: oklch(50% 0.15 145 / 0.15);
+  color: oklch(75% 0.18 145);
+}
+
+.devtools-metric-warning {
+  background: oklch(80% 0.12 85 / 0.12);
+  color: oklch(55% 0.15 85);
+}
+
+.dark .devtools-metric-warning {
+  background: oklch(55% 0.12 85 / 0.15);
+  color: oklch(75% 0.15 85);
+}
+
+.devtools-metric-danger {
+  background: oklch(65% 0.12 25 / 0.1);
+  color: oklch(55% 0.15 25);
+}
+
+.dark .devtools-metric-danger {
+  background: oklch(45% 0.1 25 / 0.15);
+  color: oklch(70% 0.12 25);
+}
+
+.devtools-metric-info {
+  background: oklch(85% 0.08 200 / 0.1);
+  color: oklch(50% 0.12 200);
+}
+
+.dark .devtools-metric-info {
+  background: oklch(35% 0.08 200 / 0.15);
+  color: oklch(70% 0.1 200);
+}
+</style>

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

@@ -0,0 +1,21 @@
+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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-shared",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Shared utilities for Nuxt SEO modules.",
   "author": {
     "name": "Harlan Wilton",
@@ -38,7 +38,9 @@
       "types": "./dist/pro.d.mts",
       "import": "./dist/pro.mjs"
     },
-    "./layer-devtools": "./dist/layer-devtools"
+    "./package.json": "./package.json",
+    "./layer-devtools": "./dist/layer-devtools",
+    "./layer-devtools/*": "./dist/layer-devtools/*"
   },
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -78,7 +80,7 @@
     "@nuxtjs/i18n": "^10.2.3",
     "@shikijs/langs": "^4.0.2",
     "@shikijs/themes": "^4.0.2",
-    "@vueuse/core": "^14.2.1",
+    "@vueuse/core": "^13.9.0",
     "nuxt-site-config": "^4.0.0",
     "obuild": "^0.4.32",
     "shiki": "^4.0.2",