From bbe2eb622e9dc1c30c0d8c9c62c580d962ce64dd Mon Sep 17 00:00:00 2001
From: suxiong <44074974+YeSuX@users.noreply.github.com>
Date: Wed, 10 Jan 2024 10:19:02 +0800
Subject: [PATCH] docs: add guide section (#11)

* docs: optmize the introduction

* fix: some bugs

* docs: optimize the introduction docs

* docs: add some words

* docs: add guide
---
 .docs/composables/useNavigationMotion.ts        | 11 +++++++++--
 .../2.guide/1.animation/1.simple-animations.md  | 17 +++++++++++++++++
 .../content/motion/2.guide/1.animation/_dir.yml |  3 +++
 .docs/content/motion/2.guide/_dir.yml           |  4 ++++
 .../{2.examples => 3.examples}/1.index.md       |  0
 .../motion/{2.examples => 3.examples}/_dir.yml  |  0
 .../animate-between.md                          |  0
 .../motion/{2.examples => 3.examples}/exit.md   |  0
 .../motion/{2.examples => 3.examples}/glide.md  |  0
 .../motion/{2.examples => 3.examples}/spring.md |  0
 .../{2.examples => 3.examples}/stagger.md       |  0
 .../1.getting-help.md                           |  0
 .../{3.community => 5.community}/_dir.yml       |  0
 13 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 .docs/content/motion/2.guide/1.animation/1.simple-animations.md
 create mode 100644 .docs/content/motion/2.guide/1.animation/_dir.yml
 create mode 100644 .docs/content/motion/2.guide/_dir.yml
 rename .docs/content/motion/{2.examples => 3.examples}/1.index.md (100%)
 rename .docs/content/motion/{2.examples => 3.examples}/_dir.yml (100%)
 rename .docs/content/motion/{2.examples => 3.examples}/animate-between.md (100%)
 rename .docs/content/motion/{2.examples => 3.examples}/exit.md (100%)
 rename .docs/content/motion/{2.examples => 3.examples}/glide.md (100%)
 rename .docs/content/motion/{2.examples => 3.examples}/spring.md (100%)
 rename .docs/content/motion/{2.examples => 3.examples}/stagger.md (100%)
 rename .docs/content/motion/{3.community => 5.community}/1.getting-help.md (100%)
 rename .docs/content/motion/{3.community => 5.community}/_dir.yml (100%)

diff --git a/.docs/composables/useNavigationMotion.ts b/.docs/composables/useNavigationMotion.ts
index 224fdf2..974f14b 100644
--- a/.docs/composables/useNavigationMotion.ts
+++ b/.docs/composables/useNavigationMotion.ts
@@ -13,14 +13,21 @@ function _useNavigation() {
         children: [
           {
             label: 'Getting Started',
-            description: 'Learn how to get started with Vue3 and Nuxt3.',
+            description: 'Learn how to get started with Oku Motion.',
             icon: 'i-ph-rocket-launch-duotone',
             to: '/motion/getting-started',
             active: route.path.startsWith('/motion/getting-started'),
           },
+          {
+            label: 'Guide',
+            description: 'Learn to build animations with Oku Motion',
+            icon: 'i-ph-book-open-duotone',
+            to: '/motion/guide/animation/simple-animations',
+            active: route.path.startsWith('/motion/guide'),
+          },
           {
             label: 'API',
-            description: 'Learn about APIs of Oku Motion.',
+            description: 'Explore the Oku Motion API.',
             icon: 'i-ph-brackets-curly-duotone',
             to: '/motion/api',
             active: route.path.startsWith('/motion/api'),
diff --git a/.docs/content/motion/2.guide/1.animation/1.simple-animations.md b/.docs/content/motion/2.guide/1.animation/1.simple-animations.md
new file mode 100644
index 0000000..a120a67
--- /dev/null
+++ b/.docs/content/motion/2.guide/1.animation/1.simple-animations.md
@@ -0,0 +1,17 @@
+---
+title: 'Simple animations'
+description: ''
+---
+
+Most animations will be performed with the `motion` component and the animate prop.
+
+```html
+<Motion animate={{ x: 100 }} />
+```
+
+When any value in `animate` changes, the component will automatically animate to the updated target.
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-wmhgda?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
diff --git a/.docs/content/motion/2.guide/1.animation/_dir.yml b/.docs/content/motion/2.guide/1.animation/_dir.yml
new file mode 100644
index 0000000..2103f0f
--- /dev/null
+++ b/.docs/content/motion/2.guide/1.animation/_dir.yml
@@ -0,0 +1,3 @@
+title: Animation
+icon: i-ph-sparkle-duotone
+# navigation: false
diff --git a/.docs/content/motion/2.guide/_dir.yml b/.docs/content/motion/2.guide/_dir.yml
new file mode 100644
index 0000000..82f580b
--- /dev/null
+++ b/.docs/content/motion/2.guide/_dir.yml
@@ -0,0 +1,4 @@
+title: Guide
+icon: i-ph-folder-notch-open-duotone
+deep: true
+# navigation: false
diff --git a/.docs/content/motion/2.examples/1.index.md b/.docs/content/motion/3.examples/1.index.md
similarity index 100%
rename from .docs/content/motion/2.examples/1.index.md
rename to .docs/content/motion/3.examples/1.index.md
diff --git a/.docs/content/motion/2.examples/_dir.yml b/.docs/content/motion/3.examples/_dir.yml
similarity index 100%
rename from .docs/content/motion/2.examples/_dir.yml
rename to .docs/content/motion/3.examples/_dir.yml
diff --git a/.docs/content/motion/2.examples/animate-between.md b/.docs/content/motion/3.examples/animate-between.md
similarity index 100%
rename from .docs/content/motion/2.examples/animate-between.md
rename to .docs/content/motion/3.examples/animate-between.md
diff --git a/.docs/content/motion/2.examples/exit.md b/.docs/content/motion/3.examples/exit.md
similarity index 100%
rename from .docs/content/motion/2.examples/exit.md
rename to .docs/content/motion/3.examples/exit.md
diff --git a/.docs/content/motion/2.examples/glide.md b/.docs/content/motion/3.examples/glide.md
similarity index 100%
rename from .docs/content/motion/2.examples/glide.md
rename to .docs/content/motion/3.examples/glide.md
diff --git a/.docs/content/motion/2.examples/spring.md b/.docs/content/motion/3.examples/spring.md
similarity index 100%
rename from .docs/content/motion/2.examples/spring.md
rename to .docs/content/motion/3.examples/spring.md
diff --git a/.docs/content/motion/2.examples/stagger.md b/.docs/content/motion/3.examples/stagger.md
similarity index 100%
rename from .docs/content/motion/2.examples/stagger.md
rename to .docs/content/motion/3.examples/stagger.md
diff --git a/.docs/content/motion/3.community/1.getting-help.md b/.docs/content/motion/5.community/1.getting-help.md
similarity index 100%
rename from .docs/content/motion/3.community/1.getting-help.md
rename to .docs/content/motion/5.community/1.getting-help.md
diff --git a/.docs/content/motion/3.community/_dir.yml b/.docs/content/motion/5.community/_dir.yml
similarity index 100%
rename from .docs/content/motion/3.community/_dir.yml
rename to .docs/content/motion/5.community/_dir.yml