docs: change structure

Author: BobbieGoede

docs/app.config.ts

@@ -8,9 +8,9 @@ export default defineAppConfig({
     colorMode: true,
     links: [
       {
-        'icon': 'i-simple-icons-github',
-        'to': 'https://github.com/vueuse/motion',
-        'target': '_blank',
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/vueuse/motion',
+        target: '_blank',
         'aria-label': 'VueUse Motion',
       },
     ],
@@ -21,17 +21,17 @@ export default defineAppConfig({
     colorMode: false,
     links: [
       {
-        'icon': 'i-simple-icons-github',
-        'to': 'https://github.com/vueuse/motion',
-        'target': '_blank',
+        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/docs/edit/main/content',
+      edit: 'https://github.com/vueuse/motion/edit/main/content',
     },
   },
 
@@ -52,51 +52,62 @@ export default defineAppConfig({
       initial: {
         y: '0em',
         opacity: 1,
-        scaleY: 1.15,
-        scaleX: 0.95,
-        transition: { damping: 5, mass: 1 },
+        scale: 1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
       visibleOnce: {
         y: '0em',
         opacity: 1,
         rotate: 0,
-        scaleY: 1,
-        scaleX: 1,
-        transition: { damping: 5, mass: 1 },
+        scale: 1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
+      // hovered: {
+      //   scale: 1.05,
+      //   rotate: -0.25,
+      //   transition: { damping: 5, mass: 1 },
+      // },
+      // tapped: {
+      //   scale: 0.95,
+      //   rotate: 0.25,
+      //   transition: { damping: 5, mass: 1 },
+      // },
+      // initial: { scale: 1, transition: { stiffness: 250, mass: .5, damping: 5 }, },
       hovered: {
-        scaleY: 1.05,
-        scaleX: 1.05,
-        rotate: -0.25,
-        transition: { damping: 5, mass: 1 },
+        scale: 1.1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
       tapped: {
-        scaleY: 0.95,
-        scaleX: 0.95,
-        rotate: 0.25,
-        transition: { damping: 5, mass: 1 },
+        scale: 0.95,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
     },
     codeGroupButton: {
       initial: { scaleY: 1, scaleX: 1, transition: { damping: 5, mass: 0.25 } },
       hovered: {
-        scaleY: 1.15,
-        scaleX: 0.9,
-        transition: { damping: 5, mass: 0.25 },
+        scale: 1.1,
+        transition: { stiffness: 250, mass: 0.5, damping: 5 },
       },
       tapped: {
-        scaleY: 0.5,
-        scaleX: 1.15,
-        transition: { damping: 5, mass: 0.25 },
+        scale: 0.9,
+        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: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } },
-      visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } },
+      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, opacity: 0 },

docs/app.vue

@@ -27,14 +27,26 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
 
 // Header
 const route = useRoute()
-const links: PageLink[] = [
+const links: PageLink[] = computed(() => [
   {
-    label: 'Docs',
-    to: `/docs/getting-started`,
+    label: 'Getting started',
+    to: `/getting-started`,
     icon: 'i-heroicons-rocket-launch',
-    active: route.path.startsWith('/docs'),
+    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>

docs/components/content/PresetSection.vue

@@ -91,16 +91,16 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
       `::code-group`,
       ...[
         '```vue [<Motion />]',
-        '<template>',
-        `  <Motion preset="${props.name}" :duration="600" />`,
-        '</template>',
+        // '<template>',
+        `<Motion preset="${props.name}" :duration="600" />`,
+        // '</template>',
         '```',
       ],
       ...[
         '```vue [v-motion]',
-        '<template>',
-        `  <div v-motion-${slugify(props.name)} :duration="600" />`,
-        '</template>',
+        // '<template>',
+        `<div v-motion-${slugify(props.name)} :duration="600" />`,
+        // '</template>',
         '```',
       ],
       ...[
@@ -149,6 +149,7 @@ const { data } = await useAsyncData(`preset-${props.name}`, () =>
   flex-direction: column;
 }
 
+
 .content {
   display: flex;
   gap: 1em;

docs/components/content/ProseCode.vue

@@ -50,6 +50,7 @@ const { ui } = useUI('content.prose.code', undefined, config, undefined, true)
 <template>
   <Motion
     v-bind="$nuxt._appConfig.motions.code"
+    style="transform-origin: top;"
     class="relative prose-code" :class="!!filename && ui.wrapper"
   >
     <div v-if="filename && !hideHeader" :class="ui.header">

docs/components/content/ProsePre.vue renamed to docs/components/content/ProsePre.vue.bak

@@ -52,12 +52,21 @@ const selectedTab = computed(() => tabs.value.find((_, index) => index === selec
 
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
+    <!-- v-bind="$nuxt._appConfig.motions.codeGroupButton" -->
     <div :class="ui.header">
       <Motion
         is="button"
         v-for="(tab, index) in tabs"
         :key="index"
-        v-bind="$nuxt._appConfig.motions.codeGroupButton"
+        :initial="{ scale: 1, transition: { stiffness: 250, mass: .5, damping: 5 }, }"
+        :hovered="{
+        scale: 1.1,
+        transition: { stiffness: 250, mass: .5, damping: 5 },
+      }"
+       :tapped="{
+        scale: .95,
+        transition: { stiffness: 250, mass: .5, damping: 5 },
+      }"
         tabindex="-1"
         :class="[ui.tab.base, selectedIndex === index ? ui.tab.active : ui.tab.inactive]"
         @click="selectedIndex = index"

docs/components/global/CodeGroup.vue

@@ -59,12 +59,12 @@ export default {
 
 ## Usage
 
-- How to use directives? Check out [Directive Usage](/docs/features/directive-usage).
+- How to use directives? Check out [Directive Usage](/features/directive-usage).
 
-- What properties you can animate? Check out [Motion Properties](/docs/features/motion-properties).
+- What properties you can animate? Check out [Motion Properties](/features/motion-properties).
 
-- How to create your own animations styles? Check out [Transition Properties](/docs/features/transition-properties).
+- How to create your own animations styles? Check out [Transition Properties](/features/transition-properties).
 
-- What are variants and how you can use them? Check out [Variants](/docs/features/variants).
+- What are variants and how you can use them? Check out [Variants](/features/variants).
 
-- How to control your declared variants? Check out [Motion Instance](/docs/features/motion-instance).
+- How to control your declared variants? Check out [Motion Instance](/features/motion-instance).

docs/content/docs/1.getting-started/1.index.md renamed to docs/content/1.getting-started/1.index.md

@@ -6,7 +6,7 @@ toc: false
 
 It allows you to start implementing animations straight after installing the plugin in your Vue app.
 
-You can add your own presets to your app using [Custom Directives](/docs/features/directive-usage#custom-directives).
+You can add your own presets to your app using [Custom Directives](/features/directive-usage#custom-directives).
 
 If you have any ideas for new presets add an issue on [GitHub](https://github.com/vueuse/motion#issues), or reach me on [Twitter](https://twitter.com/yaeeelglx).
 

docs/content/docs/1.getting-started/2.nuxt.md renamed to docs/content/1.getting-started/2.nuxt.md

@@ -1,4 +1,4 @@
-# Components
+# Component usage
 
 vueuse/motion allows you to implement your animations directly within the template of your components without the need to wrap target elements in any additional components.
 
@@ -47,7 +47,7 @@ The `<MotionGroup>` can be used to apply motion configuration to all of its chil
 The `<Motion>` and `<MotionGroup>` components allow you to define animation properties (variants) as props.
 
 - **`is`**: What element should rendered (`div` by default for `<Motion>`).
-- **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/docs/features/presets).
+- **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/features/presets).
 
 ### Variant props
 
@@ -63,7 +63,7 @@ Variants can be passed as an object using the `:variants` prop.
 
 The `:variants` prop combines with other variant properties, allowing for the definition of custom variants from this object.
 
-Additional variant properties can be explored on the [Variants](/docs/features/variants) page.
+Additional variant properties can be explored on the [Variants](/features/variants) page.
 
 ### Shorthand Props