nuxtseo-shared 0.1.4 → 0.1.6

package/dist/content.d.mts

@@ -1,14 +1,10 @@
-import { z } from "zod";
-
 //#region src/content.d.ts
-type ZodInstance = typeof z;
-type ZodTypeAny = z.ZodTypeAny;
 interface ContentSchemaOptions {
   /**
    * Pass the `z` instance from `@nuxt/content` to ensure `.editor()` works
    * across Zod versions. When omitted, the module's bundled `z` is used.
    */
-  z?: ZodInstance;
+  z?: any;
 }
 interface ContentEditorConfig {
   hidden?: boolean;
@@ -19,13 +15,12 @@ interface ContentEditorConfig {
  * Apply Nuxt Content `.editor()` metadata to a zod schema field.
  * No-ops gracefully when `.editor()` is not patched onto ZodType (outside Nuxt Content).
  */
-declare function withEditor<T extends ZodTypeAny>(schema: T, config: ContentEditorConfig): T;
+declare function withEditor<T>(schema: T, config: ContentEditorConfig): T;
 /**
  * Hide a zod schema field from the Nuxt Content / Studio editor.
- * Only use for fields that genuinely don't work in a form (freeform JSON, deeply nested arrays).
  */
-declare function withEditorHidden<T extends ZodTypeAny>(schema: T): T;
-interface DefineContentSchemaConfig<TSchema extends ZodTypeAny, TDefineOptions extends ContentSchemaOptions = ContentSchemaOptions> {
+declare function withEditorHidden<T>(schema: T): T;
+interface DefineContentSchemaConfig<TSchema = any, TDefineOptions extends ContentSchemaOptions = ContentSchemaOptions> {
   /**
    * The field name used in frontmatter (e.g. 'robots', 'sitemap', 'ogImage').
    */
@@ -34,7 +29,7 @@ interface DefineContentSchemaConfig<TSchema extends ZodTypeAny, TDefineOptions e
    * Build the zod schema for this field. Receives the zod instance
    * (either the user's `@nuxt/content` patched version or the module's bundled one).
    */
-  buildSchema: (z: ZodInstance) => TSchema;
+  buildSchema: (z: any) => TSchema;
   /**
    * Module label for deprecation warnings (e.g. 'robots', 'sitemap').
    */
@@ -58,7 +53,6 @@ interface DefineContentSchemaConfig<TSchema extends ZodTypeAny, TDefineOptions e
  * - Deprecated `asXxxCollection()` wrapper with migration warning
  *
  * @example
- * // In @nuxtjs/robots/content.ts
  * import { z } from 'zod'
  * import { createContentSchemaFactory } from 'nuxtseo-shared/content'
  *
@@ -66,21 +60,15 @@ interface DefineContentSchemaConfig<TSchema extends ZodTypeAny, TDefineOptions e
  *   fieldName: 'robots',
  *   label: 'robots',
  *   docsUrl: 'https://nuxtseo.com/robots/guides/content',
- *   buildSchema: (z) => z.enum(['index, follow', 'noindex', 'nofollow', 'noindex, nofollow', 'none']).optional(),
+ *   buildSchema: (z) => z.union([z.string(), z.boolean()]).optional(),
  * }, z)
  *
  * export { defineSchema as defineRobotsSchema, asCollection as asRobotsCollection, schema }
  */
-declare function createContentSchemaFactory<TSchema extends ZodTypeAny, TDefineOptions extends ContentSchemaOptions = ContentSchemaOptions>(config: DefineContentSchemaConfig<TSchema, TDefineOptions>, defaultZ: ZodInstance): {
+declare function createContentSchemaFactory<TSchema, TDefineOptions extends ContentSchemaOptions = ContentSchemaOptions>(config: DefineContentSchemaConfig<TSchema, TDefineOptions>, defaultZ: any): {
   defineSchema: (options?: TDefineOptions) => TSchema;
   asCollection: <T>(collection: any) => T;
-  schema: z.ZodObject<{
-    [x: string]: TSchema;
-  }, "strip", z.ZodTypeAny, z.objectUtil.addQuestionMarks<z.baseObjectOutputType<{
-    [x: string]: TSchema;
-  }>, any> extends infer T ? { [k in keyof T]: T[k] } : never, z.baseObjectInputType<{
-    [x: string]: TSchema;
-  }> extends infer T_1 ? { [k_1 in keyof T_1]: T_1[k_1] } : never>;
+  schema: any;
   fieldSchema: TSchema;
 };
 //#endregion

package/dist/content.mjs

@@ -9,7 +9,6 @@ function withEditor(schema, config) {
 }
 /**
 * Hide a zod schema field from the Nuxt Content / Studio editor.
-* Only use for fields that genuinely don't work in a form (freeform JSON, deeply nested arrays).
 */
 function withEditorHidden(schema) {
 	return withEditor(schema, { hidden: true });
@@ -23,7 +22,6 @@ function withEditorHidden(schema) {
 * - Deprecated `asXxxCollection()` wrapper with migration warning
 *
 * @example
-* // In @nuxtjs/robots/content.ts
 * import { z } from 'zod'
 * import { createContentSchemaFactory } from 'nuxtseo-shared/content'
 *
@@ -31,7 +29,7 @@ function withEditorHidden(schema) {
 *   fieldName: 'robots',
 *   label: 'robots',
 *   docsUrl: 'https://nuxtseo.com/robots/guides/content',
-*   buildSchema: (z) => z.enum(['index, follow', 'noindex', 'nofollow', 'noindex, nofollow', 'none']).optional(),
+*   buildSchema: (z) => z.union([z.string(), z.boolean()]).optional(),
 * }, z)
 *
 * export { defineSchema as defineRobotsSchema, asCollection as asRobotsCollection, schema }

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/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" class="w-full h-full border-none" style="min-height: calc(100vh - 100px);" />
+  </div>
+</template>

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

@@ -0,0 +1,213 @@
+<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"
+              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">
+                <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
+                class="devtools-preview-btn"
+                :class="{ active: previewSource === 'local' }"
+                @click="previewSource = 'local'"
+              >
+                <UIcon name="carbon:laptop" class="w-3.5 h-3.5" />
+                <span class="hidden sm:inline">Local</span>
+              </button>
+              <button
+                class="devtools-preview-btn"
+                :class="{ active: previewSource === 'production' }"
+                @click="previewSource = 'production'"
+              >
+                <UIcon name="carbon:cloud" class="w-3.5 h-3.5" />
+                <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"
+                  class="devtools-nav-action"
+                  @click="emit('refresh')"
+                />
+              </UTooltip>
+
+              <UTooltip text="GitHub">
+                <UButton
+                  icon="simple-icons: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/composables/init.ts

@@ -0,0 +1,15 @@
+import { computed } from 'vue'
+import { colorMode } from './rpc'
+
+export function useDevtoolsInit(title: string) {
+  const isDark = computed(() => colorMode.value === 'dark')
+
+  useHead({
+    title: `Nuxt ${title}`,
+    htmlAttrs: {
+      class: () => isDark.value ? 'dark' : '',
+    },
+  })
+
+  return { isDark }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-shared",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Shared utilities for Nuxt SEO modules.",
   "author": {
     "name": "Harlan Wilton",
@@ -50,7 +50,7 @@
     "nuxt": "^3.16.0 || ^4.0.0",
     "nuxt-site-config": "^3.2.0",
     "vue": "^3.5.0",
-    "zod": "^3.23.0"
+    "zod": "^3.23.0 || ^4.0.0"
   },
   "peerDependenciesMeta": {
     "nuxt-site-config": {