docs: migrate documentation to Nuxt UI

docs/app.config.ts

@@ -1,24 +1,185 @@
+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',
-    },
-    aside: {
-      level: 1,
-    },
-    header: {
-      title: '@vueuse/motion',
-    },
-    footer: {
-      credits: {
-        icon: 'IconDocus',
-        text: 'Powered by Docus',
-        href: 'https://docus.dev',
+  ui: {
+    primary: 'cyan',
+    gray: 'neutral',
+  },
+  header: {
+    search: true,
+    colorMode: true,
+    links: [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': 'https://github.com/vueuse/motion',
+        'target': '_blank',
+        'aria-label': 'VueUse Motion',
+      },
+    ],
+  },
+  seo: { siteName: '@vueuse/motion' },
+  footer: {
+    credits: `Copyright © ${new Date().getFullYear()}`,
+    colorMode: false,
+    links: [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': 'https://github.com/vueuse/motion',
+        'target': '_blank',
+        'aria-label': 'VueUse Motion',
       },
+    ],
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      edit: 'https://github.com/vueuse/motion/edit/main/content',
     },
   },
+
+  motions,
 })

docs/app.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { PageLink } from '#ui-pro/types'
+
+// Seo
+const { seo } = useAppConfig()
+useHead({
+  htmlAttrs: { lang: 'en' },
+  link: [{ rel: 'icon', href: '/favicon.ico' }],
+})
+useSeoMeta({
+  titleTemplate: `%s - ${seo.siteName}`,
+  ogSiteName: seo.siteName,
+  twitterCard: 'summary_large_image',
+})
+
+// Navigation Data
+const { data: navigation } = await useAsyncData('navigation', () =>
+  fetchContentNavigation())
+provide('navigation', navigation)
+
+// Search
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false,
+})
+
+// Header
+const route = useRoute()
+const links: PageLink[] = computed(() => [
+  {
+    label: 'Getting started',
+    to: `/getting-started`,
+    icon: 'i-heroicons-rocket-launch',
+    active: route.path.startsWith('/getting-started'),
+  },
+  {
+    label: 'Features',
+    to: `/features/presets`,
+    icon: 'i-heroicons-rocket-launch',
+    active: route.path.startsWith('/features'),
+  },
+  {
+    label: 'Api',
+    to: `/api/use-motion`,
+    icon: 'i-heroicons-rocket-launch',
+    active: route.path.startsWith('/api'),
+  },
+])
+</script>
+
+<template>
+  <div>
+    <TheHeader :links="links" />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <TheFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation ?? undefined"
+        :links="links"
+      />
+    </ClientOnly>
+
+    <UNotifications />
+  </div>
+</template>
+
+<style>
+body {
+  font-family: 'Inter var experimental', 'Inter var', 'Inter', sans-serif;
+}
+</style>

docs/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  headline: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-neutral-900">
+    <svg
+      class="absolute right-0 top-0"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#1AD6FF"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="w-[700px] pl-[100px]">
+      <p
+        v-if="headline"
+        class="uppercase text-[24px] text-[#1AD6FF] mb-4 font-semibold"
+      >
+        {{ headline }}
+      </p>
+      <h1
+        class="m-0 text-[64px] font-semibold mb-2 text-white flex items-center"
+      >
+        <span>{{ title }}</span>
+      </h1>
+      <p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight">
+        {{ description.slice(0, 200) }}
+      </p>
+    </div>
+
+    <div class="absolute top-[192px] right-[128px]">
+      <img src="/logo.svg" style="width: 256px; height: 256px">
+    </div>
+    <svg
+      class="absolute top-[160px] right-[90px]"
+      width="340"
+      height="340"
+      viewBox="0 0 340 340"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </div>
+</template>