add: category, date sorting

Add category layouts and date sorting

app/pages/blog/index.vue

@@ -1,19 +1,52 @@
 <template>
-  <section id="blog" class="Blog content">
-    <div class="grid">
-      <BlogCard v-for="article in articles" v-bind="makeBlogCard(article)"/>
-    </div>
+  <section id="blog" class="BlogOverview content">
+    <main>
+      <ul class="category-list">
+        <li>
+          <NuxtLink class="inline-flex-row gap-sm side" to="/blog">
+            <span class="chip" :class="{ 'dark' : route.query.category}">Alle {{ articles?.length }}</span>
+          </NuxtLink>
+        </li>
+        <li v-for="(count, category) in allCategoriesAndCount">
+          <NuxtLink class="inline-flex-row gap-sm side" :to="`?category=${category}`">
+            <span class="chip" :class="{ 'dark' : category !== route.query.category}"><BlogCategory :name="category"/> {{ count }}</span>
+          </NuxtLink>
+        </li>
+      </ul>
+      <div class="grid margin-top-middle article-overview">
+        <BlogCard v-for="article in firstTen" v-bind="makeBlogCard(article)"/>
+      </div>
+    </main>
   </section>
 </template>
 
 <script setup lang="ts">
+import type { BlogCollectionItem } from '@nuxt/content'
 import type { Category } from '../../components/Blog/types'
 
-const { data } = await useAsyncData('articles', () => queryCollection('blog').order('date', 'DESC').limit(10).all())
+const route = useRoute()
 
-const articles = data.value!
+const { data: articles } = await useAsyncData('articles', () => queryCollection('blog').order('date', 'DESC').all())
 
-const makeBlogCard = (article: typeof articles[0]) => ({
+const firstTen = computed(() => {
+  if (route.query.category) {
+    return articles.value?.filter(article => article.meta.category === route.query.category).slice(0, 10) ?? []
+  }
+  return articles.value?.slice(0, 10) ?? []
+})
+
+const allCategoriesAndCount = computed(() => {
+  const categories = {} as Record<Category, number>
+  articles.value?.forEach(article => {
+    const category = article.meta.category as Category
+    if (category) {
+      categories[category] = (categories[category] ?? 0) + 1
+    }
+  })
+  return categories
+})
+
+const makeBlogCard = (article: BlogCollectionItem) => ({
   title: article.title,
   description: article.description,
   image: article.meta.image as string,