[DRAFT] docs: migrate documentation to Nuxt UI v3

docs/.env.example

@@ -0,0 +1,5 @@
+# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
+
+# Public URL, used for OG Image when running nuxt generate
+NUXT_PUBLIC_SITE_URL=

docs/.gitignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# VSC
+.history

docs/app.config.ts

@@ -1,24 +1,215 @@
+const motions = {
+  common: {
+    initial: {
+      y: 100,
+      opacity: 0,
+      transition: { mass: 0.5, damping: 10 },
+    },
+    visibleOnce: {
+      y: 0,
+      opacity: 1,
+      transition: { mass: 0.5, damping: 10 },
+    },
+  },
+  presetSection: {
+    initial: { y: 100, opacity: 0 },
+    visibleOnce: { y: 0, opacity: 1 },
+  },
+  a: {
+    initial: {
+      y: '0em',
+      opacity: 1,
+      scale: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    visibleOnce: {
+      y: '0em',
+      opacity: 1,
+      rotate: 0,
+      scale: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    hovered: {
+      scale: 1.1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    tapped: {
+      scale: 0.95,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+  },
+  codeGroupButton: {
+    initial: {
+      scale: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    hovered: {
+      scale: 1.1,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+    tapped: {
+      scale: 0.95,
+      transition: { stiffness: 250, mass: 0.5, damping: 5 },
+    },
+  },
+  pre: {
+    initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
+    visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
+  },
+  code: {
+    initial: {
+      scaleY: 0.5,
+      opacity: 0,
+      transition: { stiffness: 250, mass: 0.5, damping: 10 },
+    },
+    visibleOnce: {
+      scaleY: 1,
+      opacity: 1,
+      transition: { stiffness: 250, mass: 0.5, damping: 10 },
+    },
+  },
+  ul: {
+    initial: { x: 100, y: 100, opacity: 0 },
+    visibleOnce: { x: 0, y: 0, opacity: 1 },
+  },
+  li: {
+    initial: { x: 40, y: 20, opacity: 0 },
+    hovered: {
+      x: 10,
+      opacity: 1,
+      transition: { mass: 1, delay: 0 },
+    },
+    visibleOnce: {
+      x: 0,
+      y: 0,
+      opacity: 1,
+      transition: { mass: 1 },
+    },
+  },
+  pageHeader: {
+    initial: { y: 100, opacity: 0, transition: { mass: 0.25, damping: 10 } },
+    visibleOnce: {
+      y: 0,
+      opacity: 1,
+      transition: { mass: 0.25, damping: 10 },
+    },
+  },
+  headers: {
+    h1: {
+      initial: {
+        y: 100,
+        opacity: 0,
+        transition: { mass: 0.85, damping: 10 },
+      },
+      visibleOnce: {
+        y: 0,
+        opacity: 1,
+        transition: { mass: 0.85, damping: 10 },
+      },
+    },
+    common: {
+      initial: {
+        y: 100,
+        opacity: 0,
+        transition: { mass: 0.75, damping: 10 },
+      },
+      visibleOnce: {
+        y: 0,
+        opacity: 1,
+        transition: { mass: 0.75, damping: 10 },
+      },
+    },
+  },
+}
+
+/**
+ * This is to disable animations, the animations are a bit much and need tweaking
+ * we should also provide a way for users to disable them when enabled.
+ */
+for (const val of Object.values(motions)) {
+  // set each variant to an empty object
+  for (const k of Object.keys(val)) {
+    // h1,common are nested reset their variants to an empty object
+    if (['h1', 'common'].includes(k)) {
+      // @ts-expect-error not specific
+      for (const nestedK of Object.keys(val[k])) {
+        // @ts-expect-error not specific
+        val[k][nestedK] = {}
+      }
+    } else {
+      // @ts-expect-error not specific
+      val[k] = {}
+    }
+  }
+}
+
 export default defineAppConfig({
-  docus: {
-    title: '@vueuse/motion',
-    description: '🤹 Vue Composables putting your components in motion',
-    image: 'https://motion.vueuse.org/banner.png',
-    socials: {
-      twitter: 'yaeeelglx',
-      github: 'vueuse/motion',
+  legacy: {
+    ui: {
+      primary: 'cyan',
+      neutral: 'slate',
     },
-    aside: {
-      level: 1,
+  },
+  default: {
+    ui: {
+      primary: 'cyan',
+      neutral: 'zinc',
     },
-    header: {
-      title: '@vueuse/motion',
+  },
+  theme: {
+    radius: 0.25,
+  },
+  ui: {
+    colors: {
+      primary: 'cyan',
+      neutral: 'zinc',
     },
+  },
+  uiPro: {
     footer: {
-      credits: {
-        icon: 'IconDocus',
-        text: 'Powered by Docus',
-        href: 'https://docus.dev',
+      bottom: {
+        left: 'text-sm text-gray-500 dark:text-gray-400',
+        wrapper: 'border-t border-gray-200 dark:border-gray-800',
+      },
+    },
+  },
+  seo: { siteName: '@vueuse/motion' },
+  header: {
+    search: true,
+    colorMode: true,
+    links: [
+      {
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/vueuse/motion',
+        target: '_blank',
+        'aria-label': 'VueUse Motion',
+      },
+    ],
+  },
+  footer: {
+    credits: `Copyright © ${new Date().getFullYear()}`,
+    colorMode: false,
+    links: [
+      {
+        icon: 'i-simple-icons-nuxtdotjs',
+        to: 'https://nuxt.com',
+        target: '_blank',
+        'aria-label': 'Nuxt Website',
       },
+      {
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/vueuse/motion',
+        target: '_blank',
+        'aria-label': 'VueUse Motion',
+      },
+    ],
+  },
+  toc: {
+    title: 'On this page',
+    bottom: {
+      edit: 'https://github.com/vueuse/motion/edit/main/content',
     },
   },
+
+  motions,
 })

docs/app.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { mapContentNavigation } from '@nuxt/ui-pro/runtime/utils/content.js'
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const appConfig = useAppConfig()
+const radius = computed(
+  () => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`,
+)
+
+useHead({
+  htmlAttrs: { lang: 'en' },
+  meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+  link: [{ rel: 'icon', href: '/favicon.ico' }],
+  style: [{ innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 }],
+})
+
+useSeoMeta({
+  titleTemplate: `%s - ${appConfig.seo.siteName}`,
+  ogSiteName: appConfig.seo.siteName,
+  twitterCard: 'summary_large_image',
+})
+
+// Navigation Data
+const { data: navigation } = await useAsyncData('navigation', () =>
+  queryCollectionNavigation('docs'))
+
+const nav = computed<ContentNavigationItem[]>(() =>
+  mapContentNavigation(navigation.value),
+)
+provide('navigation', nav)
+
+// Search
+const { data: files } = useAsyncData(
+  '/api/search.json',
+  () => queryCollectionSearchSections('docs'),
+  { server: false },
+)
+
+// // Header
+const route = useRoute()
+const links = computed<unknown[]>(() => [
+  {
+    label: 'Getting started',
+    to: `/getting-started`,
+    icon: 'i-heroicons-rocket-launch',
+  },
+  {
+    label: 'Features',
+    to: '/features',
+    icon: 'i-heroicons-book-open',
+  },
+  {
+    label: 'API',
+    to: '/api',
+    icon: 'i-heroicons-code-bracket',
+  },
+])
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+    <Header :links="links" />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <Footer />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+        :multiple="true"
+        :kbds="['meta', 'K']"
+      />
+    </ClientOnly>
+  </UApp>
+</template>
+
+<style></style>

docs/assets/css/main.css

@@ -0,0 +1,24 @@
+@import 'tailwindcss';
+@import '@nuxt/ui-pro';
+
+@theme {
+  --container-8xl: 90rem;
+  --font-sans: 'Public Sans', sans-serif;
+  /* --font-sans: 'DM Sans', sans-serif; */
+
+  --color-green-50: #effdf5;
+  --color-green-100: #d9fbe8;
+  --color-green-200: #b3f5d1;
+  --color-green-300: #75edae;
+  --color-green-400: #00dc82;
+  --color-green-500: #00c16a;
+  --color-green-600: #00a155;
+  --color-green-700: #007f45;
+  --color-green-800: #016538;
+  --color-green-900: #0a5331;
+  --color-green-950: #052e16;
+}
+
+:root {
+  --ui-container: var(--container-8xl);
+}

docs/components/Footer.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>