docs: improve documentation pages config

Author: astraldev

docs/app/app.config.ts

@@ -0,0 +1 @@
+export default defineAppConfig({})

docs/app/assets/css/main.css

@@ -0,0 +1,31 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --font-sans: 'Geom', 'Public Sans', sans-serif;
+
+  /* Colors gotten from the anime.js website root styles */
+  --hex-black-1: #252423;
+  --hex-red-1: #ff4b4b;
+  --hex-corail-1: #ff7d36;
+  --hex-orange-1: #ffa828;
+  --hex-yellow-1: #ffcc2a;
+  --hex-citrus-1: #f9f640;
+  --hex-lime-1: #b7ff54;
+  --hex-green-1: #8dff55;
+  --hex-turquoise-1: #00ffaa;
+  --hex-cyan-1: #26f2d5;
+  --hex-sky-1: #05dbe9;
+  --hex-sega-1: #33b3f1;
+  --hex-king-1: #4d9cff;
+  --hex-indigo-1: #7c85ff;
+  --hex-lavender-1: #a369ff;
+  --hex-purple-1: #c06ddf;
+  --hex-magenta-1: #e962bf;
+  --hex-pink-1: #ff718b;
+  --hex-bg-1: #252423;
+  --hex-fg-1: #f6f4f2;
+
+  --color-primary: var(--hex-red-1);
+  --color-neutral: var(--hex-black-1);
+}

docs/components/content/CopyCodeInput.vue …app/components/content/CopyCodeInput.vuedocs/components/content/CopyCodeInput.vue renamed to docs/app/components/content/CopyCodeInput.vue docs/components/content/CopyCodeInput.vue renamed to docs/app/components/content/CopyCodeInput.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { stagger } from 'animejs/utils'
+
+useAnimate('.boxes > .box', {
+  scale: [
+    { to: [0, 1.25] },
+    { to: 0 },
+  ],
+  boxShadow: [
+    { to: '0 0 1rem 0 currentColor' },
+    { to: '0 0 0rem 0 currentColor' },
+  ],
+  delay: stagger(100, {
+    grid: [10, 4],
+    from: 'center',
+  }),
+  duration: 600,
+  loop: true,
+})
+</script>
+
+<template>
+  <div class="p-8 flex items-center h-64 relative isolate bg-(--hex-bg-1) rounded-lg">
+    <div class="grid-wrapper boxes">
+      <div
+        v-for="i in 40"
+        :key="i"
+        class="box"
+      />
+    </div>
+    <div class="grid-wrapper">
+      <div
+        v-for="i in 40"
+        :key="i"
+        class="box"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@reference "~/assets/css/main.css";
+
+.grid-wrapper {
+  @apply grid grid-cols-10 place-items-center gap-0.5 absolute inset-0 p-5;
+}
+
+.box {
+  @apply size-9 rounded-sm bg-white/40 aspect-square;
+}
+</style>

docs/app/components/content/HeroAnimation.vue

@@ -9,43 +9,48 @@ seo:
 ---
 orientation: horizontal
 ---
-  ::code-group
-    ::hero-animation{label="Preview"}
-    ::
-    ```html [Template]
-    <div class="boxes grid grid-cols-5 place-items-center gap-2.5">
-      <div class="box size-8 rounded-md bg-white/40" v-for="i in 20" :key="i" />
+  ::tabs
+    :::tabs-item{icon="i-lucide-eye" label="Preview"}
+      ::hero-animation
+      ::
+    :::
+
+    :::tabs-item{icon="i-lucide-code" label="Template"}
+    ```html
+    <div class="boxes grid grid-cols-10 place-items-center gap-0.5 absolute inset-0 p-5">
+      <div v-for="i in 40" :key="i" class="box size-9 rounded-sm bg-white/40 aspect-square" />
     </div>
     ```
-    ```ts [Script]
-    import { useAnimate } from '#imports';
-    import { stagger } from "#nanime/utils";
 
-    useAnimate(".boxes > .box", {
-      y: {
-        to: '-80%',
-        ease: 'outBack',
-        duration: 600,
-      },
-      rotate: {
-        from: '-1turn',
-        delay: 0
-      },
-      scale: [1, 1.1, 0.8, 1],
-      delay: stagger(50),
-      ease: 'inOutCirc',
-      loopDelay: 1000,
-      loop: true,
-      alternate: true,
-    });
+    :::
+
+    :::tabs-item{icon="i-lucide-file-code" label="Script"}
+    ```ts
+    import { stagger } from '#nanime/utils'
+
+    useAnimate('.boxes > .box', {
+      scale: [
+        { to: [0, 1.25] },
+        { to: 0 }
+      ],
+      boxShadow: [
+        { to: '0 0 1rem 0 currentColor' },
+        { to: '0 0 0rem 0 currentColor' }
+      ],
+      delay: stagger(100, {
+        grid: [10, 4],
+        from: 'center',
+      }),
+    })
     ```
+    :::
   ::
 
 #title
 Effortless animations with [AnimeJS]{.text-primary}
 
 #description
-Build SSR Safe animations for Nuxt without having to worry about targets, hooks and component lifecycle.
+Create SSR Safe animations for Nuxt without having to worry about targets and component lifecycle.
 
 #links
   :::u-button
@@ -96,7 +101,7 @@ Shipped with many features
 
   :::u-page-card
   ---
-  icon: i-simple-icons-nuxt
+  icon: i-tabler-server-cog
   spotlight: true
   target: _blank
   to: https://nuxt.com
@@ -105,12 +110,12 @@ Shipped with many features
   [SSR]{.text-primary} safe
 
   #description
-  Using composables doesn't break ssr nor cause hydration issues
+  Composables doesn't break ssr nor cause hydration issues
   :::
 
   :::u-page-card
   ---
-  icon: i-simple-icons-nuxt
+  icon: i-tabler-settings-bolt
   spotlight: true
   target: _blank
   to: https://nuxt.com/docs/guide/directory-structure/app-config

docs/components/content/HeroAnimation.vue

@@ -1,6 +1,7 @@
 export default defineNuxtConfig({
   extends: ['docus'],
-  modules: ['../src/module'],
+  modules: ['nanime'],
+  css: ['./app/assets/css/main.css'],
   devServer: {
     port: 3001,
   },

docs/content/index.md

@@ -1,12 +1,13 @@
 {
   "name": "docs",
   "scripts": {
-    "dev": "nuxt dev --extends docus",
-    "build": "nuxt build --extends docus"
+    "dev": "nuxt dev",
+    "build": "nuxt build"
   },
   "dependencies": {
-    "docus": "latest",
     "better-sqlite3": "^12.5.0",
-    "nuxt": "^4.2.2"
+    "docus": "latest",
+    "nanime": "workspace:*",
+    "nuxt": "^4.3.0"
   }
 }

docs/nuxt.config.ts

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json",
+}

docs/package.json

@@ -12,6 +12,7 @@ export default createConfigForNuxt({
   dirs: {
     src: [
       './playground',
+      './docs',
     ],
   },
 })