feat(#179): add Modules section to docs site

docs/components/app/icon/Modules.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+    />
+  </svg>
+</template>

docs/pages/modules.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="container mx-auto my-20 px-5">
+    <h1 class="text-4xl text-secondary border-b mb-10">Modules</h1>
+
+    <NuxtChild />
+  </div>
+</template>

docs/pages/modules/_.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <!-- TODO: Add breadcrumb / path -->
+    <h2 class="mb-5 text-3xl">{{ document.title }}</h2>
+
+    <NuxtContent
+      v-if="document"
+      class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl"
+      :document="document"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppGuideDocument",
+
+  async asyncData({ $content, error, params, store, route }) {
+    const path = params.pathMatch || "README";
+    let response;
+    try {
+      response = await $content("modules/", params.pathMatch || "README").fetch();
+    } catch (e) {
+      return error({ message: "Document not found" });
+    }
+
+    store.commit("addRecent", { text: response.title, to: route.path });
+
+    return { document: response, path };
+  },
+
+  head() {
+    return {
+      title: this.document.title,
+    };
+  },
+};
+</script>

docs/pages/modules/index.vue

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

docs/store/index.js

@@ -1,23 +1,35 @@
 export const actions = {
-  async nuxtServerInit ({ commit }, { $content }) {
+  async nuxtServerInit({ commit }, { $content }) {
     try {
+      // Add Modules menu children to the vuex store.
+      const moduleIndex = await $content("modules").sortBy("title").only(["path", "title"]).fetch();
+      const modules = moduleIndex
+        .filter((o) => !o.path.endsWith("/README"))
+        .map((o) => ({
+          component: "NuxtLink",
+          text: o.title,
+          props: { to: o.path },
+        }));
+      commit("addMenuChildren", { children: modules, parent: "/modules" });
+
       // Add Guide menu children to the vuex store.
-      const apiIndex = await $content("api").only(["path", "title"]).fetch();
-      const apiChildren = apiIndex.map((o) => ({
+      const guideIndex = await $content("guide").only(["path", "title"]).fetch();
+      const guideChildren = guideIndex.map((o) => ({
         component: "NuxtLink",
         text: o.title,
         props: { to: o.path.replace("/README", "") },
       }));
-      commit("addMenuChildren", { children: apiChildren, parent: "/api" });
+      commit("addMenuChildren", { children: guideChildren, parent: "/guide" });
 
-      // Add Guide menu children to the vuex store.
-      const guideIndex = await $content("guide").only(["path", "title"]).fetch();
-      const guideChildren = guideIndex.map((o) => ({
+      // Add API menu children to the vuex store.
+      const apiIndex = await $content("api").only(["path", "title"]).fetch();
+      const apiChildren = apiIndex.map((o) => ({
         component: "NuxtLink",
         text: o.title,
         props: { to: o.path.replace("/README", "") },
       }));
-      commit("addMenuChildren", { children: guideChildren, parent: "/guide" });
+      commit("addMenuChildren", { children: apiChildren, parent: "/api" });
+
     } catch (err) {
       console.log(err)
     }

docs/store/state.js

@@ -9,9 +9,9 @@ export default () => ({
   },
   {
     component: "NuxtLink",
-    text: "API",
-    icon: "api",
-    props: { to: "/api" },
+    text: "Modules",
+    icon: "modules",
+    props: { to: "/modules" },
     children: [],
   },
   {
@@ -21,6 +21,13 @@ export default () => ({
     props: { to: "/guide" },
     children: [],
   },
+  {
+    component: "NuxtLink",
+    text: "API",
+    icon: "api",
+    props: { to: "/api" },
+    children: [],
+  },
   {
     component: "a",
     text: "GitHub",