From c76f3afdfbc0913af64b5021d359ae4dca3eea79 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Thu, 26 Aug 2021 09:41:02 +0000
Subject: [PATCH] chore(#150): update docs components

---
 docs/components/app/Menu.vue         | 28 +++++++++++++++++++++++++-
 docs/components/app/Sidebar.vue      | 16 +++++++--------
 docs/components/app/api/Packages.vue | 30 +++++++---------------------
 docs/pages/api/_.vue                 |  6 ++++++
 docs/pages/api/index.vue             |  4 ++--
 docs/pages/guide/_.vue               |  8 +++++++-
 docs/pages/guide/index.vue           |  4 ++--
 docs/pages/index.vue                 |  4 ++--
 8 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/docs/components/app/Menu.vue b/docs/components/app/Menu.vue
index e054ce7f8..87c5cefef 100644
--- a/docs/components/app/Menu.vue
+++ b/docs/components/app/Menu.vue
@@ -2,7 +2,33 @@
   <ul class="menu">
     <slot name="title" />
     <li v-for="(item, key) of $store.state.menu" :key="key">
-      <component :is="item.component" class="rounded-btn" v-bind="item.props" v-text="item.text" />
+      <component
+        :is="item.component"
+        class="rounded-btn"
+        v-bind="item.props"
+        v-text="item.text"
+      />
+      <ul v-if="children && item.children" class="menu">
+        <li v-for="(child, childKey) of item.children" :key="childKey">
+          <component
+            :is="child.component"
+            class="rounded-btn"
+            v-bind="child.props"
+            v-text="child.text"
+          />
+        </li>
+      </ul>
     </li>
   </ul>
 </template>
+
+<script>
+export default {
+  props: {
+    children: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
diff --git a/docs/components/app/Sidebar.vue b/docs/components/app/Sidebar.vue
index fece001aa..34691c20b 100644
--- a/docs/components/app/Sidebar.vue
+++ b/docs/components/app/Sidebar.vue
@@ -1,13 +1,6 @@
 <template>
   <div class="px-1 pt-20 overflow-y-auto w-80 bg-base-100">
-    <!-- Main menu -->
-    <AppMenu class="mb-5">
-      <li slot="title" class="menu-title">
-        <span>Navigation</span>
-      </li>
-    </AppMenu>
-
-    <!-- Recent/Pinned documents -->
+    <!-- Recent documents -->
     <ul v-if="$store.state.recent.length" class="mb-5 menu">
       <li slot="title" class="menu-title">
         <span>Recent documents</span>
@@ -17,6 +10,13 @@
       </li>
     </ul>
 
+    <!-- Main menu -->
+    <AppMenu class="mb-5" :children="true">
+      <li slot="title" class="menu-title">
+        <span>Navigation</span>
+      </li>
+    </AppMenu>
+
     <!-- API menu -->
     <ul class="mb-5 menu">
       <li slot="title" class="menu-title">
diff --git a/docs/components/app/api/Packages.vue b/docs/components/app/api/Packages.vue
index 8bb44095f..970b07da2 100644
--- a/docs/components/app/api/Packages.vue
+++ b/docs/components/app/api/Packages.vue
@@ -1,29 +1,13 @@
 <template>
-  <ul>
-    <li v-for="item of $store.state.packages" :key="item">
+  <div>
+    <div v-for="item of $store.state.packages" :key="item">
       <h3 v-text="item" />
 
-      <NuxtLink
-        class="btn btn-secondary"
-        tag="button"
-        :to="`/api/packages/${item}/`"
-      >
-        Read the docs
+      <!-- TODO: Add details about package -->
 
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          class="inline-block w-6 h-6 ml-2 stroke-current"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 5l7 7-7 7"
-          />
-        </svg>
+      <NuxtLink class="link" :to="`/api/packages/${item}/`">
+        Read the docs
       </NuxtLink>
-    </li>
-  </ul>
+    </div>
+  </div>
 </template>
diff --git a/docs/pages/api/_.vue b/docs/pages/api/_.vue
index fd2866127..116e0bb71 100644
--- a/docs/pages/api/_.vue
+++ b/docs/pages/api/_.vue
@@ -53,6 +53,12 @@ export default {
     return { document: response };
   },
 
+  head() {
+    return {
+      title: this.document.title,
+    };
+  },
+
   computed: {
     module: ({ document }) => document.dir.split("/")[3],
 
diff --git a/docs/pages/api/index.vue b/docs/pages/api/index.vue
index 3de65ab1a..cf1fb7062 100644
--- a/docs/pages/api/index.vue
+++ b/docs/pages/api/index.vue
@@ -1,7 +1,7 @@
 <script>
-import Default from './_.vue'
+import Default from "./_.vue";
 
 export default {
   extends: Default,
-}
+};
 </script>
diff --git a/docs/pages/guide/_.vue b/docs/pages/guide/_.vue
index e86678677..5dc710ba7 100644
--- a/docs/pages/guide/_.vue
+++ b/docs/pages/guide/_.vue
@@ -19,7 +19,7 @@ export default {
   name: "AppGuideDocument",
 
   async asyncData({ $content, error, params, store, route }) {
-    const path = params.pathMatch || "README"
+    const path = params.pathMatch || "README";
     let response;
     try {
       response = await $content("guide/", params.pathMatch || "README").fetch();
@@ -31,5 +31,11 @@ export default {
 
     return { document: response, path };
   },
+
+  head() {
+    return {
+      title: this.document.title,
+    };
+  },
 };
 </script>
diff --git a/docs/pages/guide/index.vue b/docs/pages/guide/index.vue
index 3de65ab1a..cf1fb7062 100644
--- a/docs/pages/guide/index.vue
+++ b/docs/pages/guide/index.vue
@@ -1,7 +1,7 @@
 <script>
-import Default from './_.vue'
+import Default from "./_.vue";
 
 export default {
   extends: Default,
-}
+};
 </script>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index b79f9ebd1..c61ec1ab2 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -19,8 +19,8 @@
 
     <!-- Quote -->
     <div class="bg-gray-200 p-10">
-      <div class="prose prose-lg mx-auto">
-        <blockquote v-text="quote" />
+      <div class="container mx-auto text-center">
+        <blockquote class="text-2xl" v-text="quote" />
       </div>
     </div>