Added package list base, still WIP

docs/.vitepress/theme/components/packages/PackageList.data.ts

@@ -0,0 +1,19 @@
+import packageData from '../../../data/packageData.json';
+import thirdPartyPackages from '../../../data/packageData.thirdParty.json';
+import fetchPackages from "../../../lib/fetchPackages";
+
+export default {
+  async load() {
+    const packages = await fetchPackages();
+    return {
+      packages: packages
+        .filter(p => p.name in packageData)
+        .map((pData) => ({
+        ...pData,
+        ...packageData[pData.name],
+        icon: `/framework-logos/${packageData[pData.name].icon}.svg`,
+      })).sort((a, b) => a.order - b.order),
+      thirdPartyPackages,
+    };
+  }
+}

docs/.vitepress/theme/components/packages/PackageList.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { data } from './PackageList.data'
+import PackageListItem from "./PackageListItem.vue";
+</script>
+
+<template>
+  <section class="package-group">
+    <h1 class="name">Packages</h1>
+    <div class="grid package-list" ref="container">
+      <PackageListItem v-for="p in data.packages" :packageData="p" />
+    </div>
+  </section>
+  <section class="package-group">
+    <h1 class="name">Third-party packages</h1>
+    <div class="grid package-list" ref="container">
+      <PackageListItem v-for="p in data.thirdPartyPackages" :packageData="p" />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.package-group {
+  margin-bottom: 96px;
+}
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  align-content: space-evenly;
+  gap: 24px;
+}
+.grid > * {
+  flex-basis: 256px;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+</style>

docs/.vitepress/theme/components/packages/PackageListItem.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useRouter } from 'vitepress';
+import {PackageItem} from "../../types";
+
+const { go } = useRouter()
+const props = defineProps<{
+  packageData: PackageItem,
+}>()
+</script>
+
+<template>
+  <article class="package">
+    <header class="package-header">
+      <div class="package-icon-well">
+        <img :src="packageData.icon" alt="" class="package-icon" />
+      </div>
+      <div class="package-title">
+        <h2 class="title">{{ props.packageData.name }}</h2>
+        <a v-for="shield in props.packageData.shields" :href="shield.href" class="package-shield">
+          <img :src="shield.src" :alt="shield.href" />
+        </a>
+      </div>
+    </header>
+    <div class="details">
+      {{ packageData.description }}
+    </div>
+    <footer class="package-footer">
+      <button></button>
+    </footer>
+  </article>
+</template>
+
+<style scoped>
+.package {
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-soft);
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+}
+.package {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.package-icon-well {
+  padding: 16px;
+  border-radius: 12px;
+  background-color: var(--vp-c-bg);
+}
+.package-icon {
+  width: 64px;
+  height: 64px;
+}
+.package-header {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+}
+h2.title {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 20px;
+  font-weight: bold;
+}
+.package-title {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

docs/packages.md

@@ -0,0 +1,8 @@
+---
+aside: false
+---
+<script setup>
+import PackageList from '.vitepress/theme/components/packages/PackageList.vue'
+</script>
+
+<PackageList />