feat: add NqModulesGrid component and integrate it into the theme

Author: onmax

docs/index.md

@@ -7,3 +7,5 @@ sidebar: false
 # Nimiq UI
 
 The home for Nimiq UI development and documentation.
+
+<NqModulesGrid />

packages/nimiq-vitepress-theme/src/components/NqGrid.vue

@@ -2,7 +2,7 @@
 import type { NqCardProps } from './NqCard.vue'
 import { defineAsyncComponent } from 'vue'
 
-const { cards, largeCards = false } = defineProps<{ cards?: NqCardInGrid[], largeCards?: boolean }>()
+const { cards = [], largeCards = false } = defineProps<{ cards?: NqCardInGrid[], largeCards?: boolean }>()
 const NqCard = defineAsyncComponent(() => import('./NqCard.vue'))
 const NqLargeCard = defineAsyncComponent(() => import('./NqLargeCard.vue'))
 
@@ -17,7 +17,7 @@ function getSpan({ span, bgColor }: NqCardInGrid): CardSpan | undefined {
 </script>
 
 <template>
-  <ul grid="~ cols-6 gap-16" class="nq-grid nq-raw">
+  <ul v-if="cards.length > 0" grid="~ cols-6 gap-16" class="nq-grid nq-raw">
     <slot>
       <li v-for="(card, index) in cards" :key="index" :data-span="getSpan(card)">
         <component :is="largeCards ? NqLargeCard : NqCard" v-bind="card" />

packages/nimiq-vitepress-theme/src/components/NqModulesGrid.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NimiqVitepressThemeConfig } from '../types'
+import type { NqCardProps } from './NqCard.vue'
+import { useData, withBase } from 'vitepress'
+import { computed } from 'vue'
+
+const { theme } = useData<NimiqVitepressThemeConfig>()
+
+const items = computed(() => {
+  return theme.value.modules.map(({ text, icon, href, description }) => ({
+    title: text,
+    icon,
+    href: withBase(`/${href}`),
+    description,
+  } satisfies NqCardProps))
+})
+</script>
+
+<template>
+  <NqGrid :cards="items" />
+</template>

packages/nimiq-vitepress-theme/src/theme.ts

@@ -3,6 +3,7 @@ import type { DefineThemeNqVpOptions } from './types'
 import NqCard from './components/NqCard.vue'
 import NqGrid from './components/NqGrid.vue'
 import NqLargeCard from './components/NqLargeCard.vue'
+import NqModulesGrid from './components/NqModulesGrid.vue'
 import Layout from './layout/Layout.vue'
 
 import './assets/index.css'
@@ -17,6 +18,7 @@ export function defineNimiqThemeConfig(options: DefineThemeNqVpOptions): Theme {
       ctx.app.component('NqCard', NqCard)
       ctx.app.component('NqGrid', NqGrid)
       ctx.app.component('NqLargeCard', NqLargeCard)
+      ctx.app.component('NqModulesGrid', NqModulesGrid)
     },
   }
 }