chore(#150): update docs/api pages/components

docs/components/app/Sidebar.vue

@@ -23,7 +23,9 @@
         <span>API documents</span>
       </li>
       <li>
-        <NuxtLink class="rounded-btn" to="/api/packages">Packages</NuxtLink>
+        <NuxtLink class="rounded-btn" :to="{ path: '/api', hash: '#packages' }"
+          >Packages</NuxtLink
+        >
         <!-- <ul class="menu">
           <li v-for="item of $store.state.packages" :key="item">
             <NuxtLink class="rounded-btn" :to="`/api/packages/${item}/`" v-text="item" />

docs/components/app/api/Packages.vue

@@ -0,0 +1,29 @@
+<template>
+  <ul>
+    <li 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
+
+        <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>
+    </li>
+  </ul>
+</template>

docs/content/api/README.md

@@ -0,0 +1,10 @@
+---
+title: The Druxt API
+---
+
+This API documents below where generated using JSDoc and Vue Docgen API.
+
+## Packages
+
+<!-- Package list inserted via Vue component -->
+<AppApiPackages />

docs/pages/api/index.vue

@@ -1,7 +1,7 @@
-<template>
-  <div>
-    <h2 class="text-2xl border-b mb-10">Table of contents</h2>
+<script>
+import Default from './_.vue'
 
-    <!-- TODO: Add table of contents menu -->
-  </div>
-</template>
+export default {
+  extends: Default,
+}
+</script>

docs/pages/guide/index.vue

@@ -0,0 +1,7 @@
+<script>
+import Default from './_.vue'
+
+export default {
+  extends: Default,
+}
+</script>

docs/pages/index.vue

@@ -1,14 +1,16 @@
 <template>
   <div>
+    <!-- Hero -->
     <div class="bg-gray-100 border-b text-center">
       <div class="container mx-auto py-20">
         <AppLogo class="w-1/4 mx-auto" />
         <h1 class="text-6xl my-10" v-text="title" />
         <h2 class="text-3xl my-5" v-text="slogan" />
-        <button class="btn btn-primary btn-lg">Get started</button>
+        <NuxtLink class="btn btn-primary btn-lg" tag="button" to="/guide/getting-started">Get started</NuxtLink>
       </div>
     </div>
 
+    <!-- Features / blocks -->
     <div class="container flex flex-col lg:flex-row mx-auto my-20">
       <div
         v-for="(block, index) of blocks"
@@ -20,7 +22,8 @@
       </div>
     </div>
 
-    <div class="bg-gray-200 p-15 text-center">
+    <!-- Quote -->
+    <div class="bg-gray-200 p-10 text-center">
       <blockquote class="container font-bold mx-auto text-2xl" v-text="quote" />
     </div>