chore(#179): update modules pages

docs/content/modules/README.md

@@ -2,4 +2,6 @@
 title: Druxt modules
 ---
 
-Druxt modules bridge the gap between Drupal and Nuxt, making it easy to add additional decoupled elements to your site or application.
+Druxt is built on two frameworks, Drupal and Nuxt, both with their own modules which can be used alongside Druxt modules.
+
+Druxt modules provide specific solutions for decoupled integration by bridging the gap between your Drupal and Nuxt applications.

docs/content/modules/blocks.md

@@ -1,9 +1,8 @@
 ---
 title: Blocks
+description: Drupal Block and Block Region Druxt components.
 ---
 
-> Drupal Block and Block Region Druxt components.
-
 ## Components
 
 ### \<DruxtBlock /\>

docs/content/modules/breadcrumb.md

@@ -1,9 +1,8 @@
 ---
 title: Breadcrumb
+description: Decoupled Router based Breadcrumb Druxt component.
 ---
 
-> Decoupled Router based Breadcrumb Druxt component.
-
 ## Components
 
 ### \<DruxtBreadcrumb /\>
@@ -16,4 +15,4 @@ Renders a list of breacrumbs based on the active route.
 
 ![Example DruxtBreadcrumb component](/images/druxt-breadcrumb.png)
 
-Get started with the [Guide](/guide/breadcrumb) and [API Documentation](/api/packages/breadcrumb/components/DruxtBreadcrumb).
+Get started with the [Guide](/guide/breadcrumb) and [API Documentation](/api/packages/breadcrumb/components/DruxtBreadcrumb).

docs/content/modules/entity.md

@@ -1,9 +1,8 @@
 ---
 title: Entity
+description: Drupal Display Mode powered Entity, Form and Field Druxt components.
 ---
 
-> Drupal Display Mode powered Entity, Form and Field Druxt components.
-
 ## Components
 
 ### \<DruxtEntity /\>
@@ -31,4 +30,4 @@ Renders a Drupal Content Entity form with submission and validation support.
 
 ![Example DruxtEntityForm component](/images/druxt-entity-form.png)
 
-Get started with the [Guide](/guide/entity) and [API Documentation](/api/packages/entity/components/DruxtEntityForm).
+Get started with the [Guide](/guide/entity) and [API Documentation](/api/packages/entity/components/DruxtEntityForm).

docs/content/modules/menu.md

@@ -1,9 +1,8 @@
 ---
 title: Menu
+description: Drupal Menu and Menu item Druxt components, with support for the JSON:API Menu Items module.
 ---
 
-> Drupal Menu and Menu item Druxt components, with support for the JSON:API Menu Items module.
-
 ## Components
 
 ### \<DruxtMenu /\>
@@ -16,4 +15,4 @@ Renders a Drupal menu using either the default Drupal content menus, or the full
 
 ![Example DruxtMenu component](/images/druxt-menu.png)
 
-Get started with the [Guide](/guide/menu) and [API Documentation](/api/packages/menu/components/DruxtMenu).
+Get started with the [Guide](/guide/menu) and [API Documentation](/api/packages/menu/components/DruxtMenu).

docs/content/modules/router.md

@@ -1,9 +1,8 @@
 ---
 title: Router
+description: Drupal router for Nuxt, powered by the Drupal Decoupled Router module.
 ---
 
-> Drupal router for Nuxt, powered by the Drupal Decoupled Router module.
-
 ##  Components
 
 ### \<DruxtRouter /\>
@@ -14,4 +13,4 @@ Renders a Druxt module router component based on the resolved route provided by
 <DruxtRouter />
 ```
 
-Get started with the [Guide](/guide/router) and [API Documentation](/api/packages/router/components/DruxtRouter).
+Get started with the [Guide](/guide/router) and [API Documentation](/api/packages/router/components/DruxtRouter).

docs/content/modules/schema.md

@@ -1,5 +1,6 @@
 ---
 title: Schema
+description: Drupal Content Entity schema generator for Druxt with support for View and Form displays.
 ---
 
-> Drupal Content Entity schema generator for Druxt with support for View and Form displays.
+@TODO

docs/content/modules/site.md

@@ -1,9 +1,8 @@
 ---
 title: Site
+description: Out of the box Decoupled Drupal sites with Druxt.
 ---
 
-> Out of the box Decoupled Drupal sites with Druxt.
-
 Using Drupal's built in Entity display modes and Field formatter system, Views, Blocks and more, the Druxt Site module provides the out of the box experience you expect.
 
 

docs/content/modules/views.md

@@ -1,9 +1,8 @@
 ---
 title: Views
+description: Drupal Views components for Druxt with support for filters, pagination and sorting.
 ---
 
-> Drupal Views components for Druxt with support for filters, pagination and sorting.
-
 ## Components
 
 ### \<DruxtView /\>

docs/pages/modules/_.vue

@@ -3,6 +3,10 @@
     <!-- TODO: Add breadcrumb / path -->
     <h2 class="mb-5 text-3xl">{{ document.title }}</h2>
 
+    <div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mb-10">
+      <blockquote v-text="document.description" />
+    </div>
+
     <NuxtContent
       v-if="document"
       class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl"
@@ -19,7 +23,10 @@ export default {
     const path = params.pathMatch || "README";
     let response;
     try {
-      response = await $content("modules/", params.pathMatch || "README").fetch();
+      response = await $content(
+        "modules/",
+        params.pathMatch || "README"
+      ).fetch();
     } catch (e) {
       return error({ message: "Document not found" });
     }

docs/pages/modules/index.vue

@@ -1,7 +1,62 @@
+<template>
+  <div>
+    <!-- TODO: Add breadcrumb / path -->
+    <h2 class="mb-5 text-3xl">{{ document.title }}</h2>
+
+    <NuxtContent
+      v-if="document"
+      class="mb-10 prose prose-sm sm:prose lg:prose-lg xl:prose-xl"
+      :document="document"
+    />
+
+    <div
+      v-for="module of modules"
+      :key="module.title"
+      class="card mb-5 shadow-lg hover:shadow-2xl"
+    >
+      <div class="card-body">
+        <h2 class="card-title" v-text="module.title" />
+        <p v-text="module.description" />
+        <div class="card-actions">
+          <NuxtLink class="btn btn-secondary" tag="button" :to="module.path">
+            <AppIconModules class="h-5 w-5 mr-1" /> Get Started
+          </NuxtLink>
+          <NuxtLink
+            class="btn btn-ghost"
+            tag="button"
+            :to="`/api/packages/${module.slug}`"
+          >
+            <AppIconApi class="h-5 w-5 mr-1" /> API documentation
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script>
 import Default from "./_.vue";
 
 export default {
   extends: Default,
+
+  async asyncData(ctx) {
+    const { $content, error } = ctx;
+    let response;
+    try {
+      response = await $content("modules")
+        .where({ slug: { $ne: "README" } })
+        .only(["description", "path", "slug", "title"])
+        .sortBy("title")
+        .fetch();
+    } catch (e) {
+      return error({ message: "Document not found" });
+    }
+
+    return {
+      ...(await Default.asyncData(ctx)),
+      modules: response,
+    };
+  },
 };
 </script>