@movk/nuxt-docs 1.2.1 → 1.3.1

package/app/components/header/HeaderBottom.vue

@@ -6,7 +6,7 @@ const route = useRoute()
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const items = computed(() => mapContentNavigation(navigation?.value.map(item => ({ ...item, children: undefined })) ?? [])?.map(item => ({
+const items = computed(() => mapContentNavigation(navigation?.value?.map(item => ({ ...item, children: undefined })) ?? [])?.map(item => ({
   ...item,
   active: route.path.startsWith(item.to as string)
 })))

package/content.config.ts

@@ -1,4 +1,4 @@
-import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+import { defineCollection, defineContentConfig, property, z } from '@nuxt/content'
 import { useNuxt } from '@nuxt/kit'
 import { asSeoCollection } from '@nuxtjs/seo/content'
 import { joinURL } from 'ufo'
@@ -6,26 +6,6 @@ import { joinURL } from 'ufo'
 const { options } = useNuxt()
 const cwd = joinURL(options.rootDir, 'content')
 
-const Avatar = z.object({
-  src: z.string(),
-  alt: z.string().optional()
-})
-
-const Button = z.object({
-  label: z.string(),
-  icon: z.string().optional(),
-  avatar: Avatar.optional(),
-  leadingIcon: z.string().optional(),
-  trailingIcon: z.string().optional(),
-  to: z.string().optional(),
-  target: z.enum(['_blank', '_self']).optional(),
-  color: z.enum(['primary', 'neutral', 'success', 'warning', 'error', 'info']).optional(),
-  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl']).optional(),
-  variant: z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']).optional(),
-  id: z.string().optional(),
-  class: z.string().optional()
-})
-
 export default defineContentConfig({
   collections: {
     landing: defineCollection(asSeoCollection({
@@ -42,27 +22,12 @@ export default defineContentConfig({
         include: 'docs/**/*'
       }],
       schema: z.object({
-        links: z.array(Button),
+        links: property(z.object({})).inherit('@nuxt/ui/components/Button.vue'),
         category: z.string().optional(),
         navigation: z.object({
           title: z.string().optional()
         })
       })
-    })),
-    releases: defineCollection(asSeoCollection({
-      type: 'page',
-      source: {
-        cwd,
-        include: 'releases.yml'
-      },
-      schema: z.object({
-        hero: z.object({
-          title: z.string(),
-          description: z.string().optional(),
-          releases: z.string(),
-          links: z.array(Button).optional()
-        })
-      })
     }))
   }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt-docs",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "private": false,
   "description": "An elegant documentation theme for Nuxt, powered by Nuxt UI and Nuxt Content.",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -27,19 +27,19 @@
     "README.md"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.71",
-    "@iconify-json/simple-icons": "^1.2.56",
+    "@iconify-json/lucide": "^1.2.73",
+    "@iconify-json/simple-icons": "^1.2.58",
     "@iconify-json/vscode-icons": "^1.2.33",
     "@movk/core": "^0.0.5",
     "@nuxt/content": "^3.8.0",
-    "@nuxt/image": "^1.11.0",
-    "@nuxt/kit": "^4.2.0",
+    "@nuxt/image": "^2.0.0",
+    "@nuxt/kit": "^4.2.1",
     "@nuxt/ui": "^4.1.0",
     "@nuxtjs/seo": "^3.2.2",
     "@vueuse/core": "^14.0.0",
     "@vueuse/nuxt": "^14.0.0",
     "defu": "^6.1.4",
-    "exsolve": "^1.0.7",
+    "exsolve": "^1.0.8",
     "git-url-parse": "^16.1.0",
     "motion-v": "^1.7.4",
     "nuxt-component-meta": "^0.14.1",
@@ -49,7 +49,7 @@
     "pkg-types": "^2.3.0",
     "prettier": "^3.6.2",
     "scule": "^1.3.0",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "ufo": "^1.6.1"
   }
 }

package/app/components/StarsBg.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import { kebabCase } from 'scule'
-
-interface Star {
-  x: number
-  y: number
-  size: number
-}
-
-const { starCount = 300, color = 'var(--ui-primary)', size = { min: 1, max: 2 } } = defineProps<{
-  starCount?: number
-  color?: string
-  size?: { min: number, max: number }
-}>()
-
-const route = useRoute()
-
-// Generate random star positions and sizes
-function generateStars(count: number): Star[] {
-  return Array.from({ length: count }, () => ({
-    x: Math.floor(Math.random() * 2000),
-    y: Math.floor(Math.random() * 2000),
-    size: typeof size === 'number'
-      ? size
-      : Math.random() * (size.max - size.min) + size.min
-  }))
-}
-
-// Define speed configurations once
-const speedMap = {
-  slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
-  normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
-  fast: { duration: 100, opacity: 1, ratio: 0.4 }
-}
-
-// Use a more efficient approach to generate and store stars
-const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>(`${kebabCase(route.path)}-stars`, () => {
-  return {
-    slow: generateStars(Math.floor(starCount * speedMap.slow.ratio)),
-    normal: generateStars(Math.floor(starCount * speedMap.normal.ratio)),
-    fast: generateStars(Math.floor(starCount * speedMap.fast.ratio))
-  }
-})
-
-// Compute star layers with different speeds and opacities
-const starLayers = computed(() => [
-  { stars: stars.value.fast, ...speedMap.fast },
-  { stars: stars.value.normal, ...speedMap.normal },
-  { stars: stars.value.slow, ...speedMap.slow }
-])
-</script>
-
-<template>
-  <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
-    <div class="stars size-full absolute inset-x-0 top-0">
-      <div
-        v-for="(layer, index) in starLayers"
-        :key="index"
-        class="star-layer"
-        :style="{
-          '--star-duration': `${layer.duration}s`,
-          '--star-opacity': layer.opacity,
-          '--star-color': color
-        }"
-      >
-        <div
-          v-for="(star, starIndex) in layer.stars"
-          :key="starIndex"
-          class="star absolute rounded-full"
-          :style="{
-            left: `${star.x}px`,
-            top: `${star.y}px`,
-            width: `${star.size}px`,
-            height: `${star.size}px`,
-            backgroundColor: 'var(--star-color)',
-            opacity: 'var(--star-opacity)'
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.stars {
-  left: 50%;
-  transform: translate(-50%);
-  -webkit-mask-image: linear-gradient(
-    180deg,
-    rgba(217, 217, 217, 0) 0%,
-    rgba(217, 217, 217, 0.8) 25%,
-    #d9d9d9 50%,
-    rgba(217, 217, 217, 0.8) 75%,
-    rgba(217, 217, 217, 0) 100%
-  );
-  mask-image: linear-gradient(
-    180deg,
-    rgba(217, 217, 217, 0) 0%,
-    rgba(217, 217, 217, 0.8) 25%,
-    #d9d9d9 50%,
-    rgba(217, 217, 217, 0.8) 75%,
-    rgba(217, 217, 217, 0) 100%
-  );
-  -webkit-mask-size: cover;
-  mask-size: cover;
-}
-
-.star-layer {
-  animation: risingStarsAnimation linear infinite;
-  animation-duration: var(--star-duration);
-  will-change: transform;
-}
-
-@keyframes risingStarsAnimation {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-2000px);
-  }
-}
-</style>

package/app/pages/releases.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-const { data: page } = await useAsyncData('releases', () => queryCollection('releases').first())
-if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-}
-
-const title = page.value.seo?.title || page.value.title
-const description = page.value.seo?.description || page.value.description
-
-useSeoMeta({
-  title,
-  description,
-  ogTitle: title,
-  ogDescription: description
-})
-
-defineOgImageComponent('Nuxt', {
-  title,
-  description
-})
-
-const { data: versions } = await useFetch(page.value.hero.releases || '', {
-  transform: (data: {
-    releases: {
-      name?: string
-      tag: string
-      publishedAt: string
-      markdown: string
-    }[]
-  }) => {
-    return data.releases.map(release => ({
-      tag: release.tag,
-      title: release.name || release.tag,
-      date: release.publishedAt,
-      markdown: release.markdown
-    }))
-  }
-})
-</script>
-
-<template>
-  <div v-if="page">
-    <UPageHero
-      :title="page.hero.title"
-      :description="page.hero.description"
-      :links="page.hero.links"
-      class="md:border-b border-default"
-      :ui="{
-        container: 'relative lg:py-32'
-      }"
-    >
-      <template #top>
-        <div
-          class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80"
-        />
-      </template>
-
-      <LazyStarsBg />
-
-      <div
-        aria-hidden="true"
-        class="hidden md:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8"
-      />
-    </UPageHero>
-
-    <UPageSection :ui="{ container: 'py-0!' }">
-      <div class="py-4 md:py-8 lg:py-16 md:border-x border-default">
-        <UContainer class="max-w-5xl">
-          <UChangelogVersions>
-            <UChangelogVersion
-              v-for="version in versions"
-              :key="version.tag"
-              v-bind="version"
-              :ui="{
-                root: 'flex items-start',
-                container: 'max-w-xl',
-                header: 'border-b border-default pb-4',
-                title: 'text-3xl',
-                date: 'text-xs/9 text-highlighted font-mono',
-                indicator: 'sticky top-0 pt-16 -mt-16 sm:pt-24 sm:-mt-24 lg:pt-32 lg:-mt-32'
-              }"
-            >
-              <template #body>
-                <MDC v-if="version.markdown" :value="version.markdown" />
-              </template>
-            </UChangelogVersion>
-          </UChangelogVersions>
-        </UContainer>
-      </div>
-    </UPageSection>
-  </div>
-</template>