add: category, date sorting

Add category layouts and date sorting

app/assets/css/blog/card.css

@@ -1,7 +1,7 @@
 .BlogCard {
     overflow: hidden;
     border-radius: 1rem;
-    background: var(--color-orange-black);
+    background: var(--color-black);
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -60,7 +60,6 @@
 }
 
 
-
 @media (width <= 780px) {
     .BlogCard header {
         align-items: center;

app/assets/css/blog/overview.css

@@ -0,0 +1,15 @@
+.BlogOverview {
+    & .category-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        list-style: none;
+    }
+
+    & .article-overview {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 2rem;
+    }
+}

app/assets/css/global.css

@@ -97,6 +97,15 @@ a {
     color: var(--color-white);
 }
 
+a.side {
+    color: var(--color-orange);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--color-orange-light);
+    }
+}
+
 a.text {
     color: var(--color-orange);
     text-decoration: underline;
@@ -148,6 +157,7 @@ span.chip {
     align-items: center;
     gap: .5em;
     width: max-content;
+    transition: var(--transition-time);
 
     &:not(.dark) {
         --background: var(--color-orange);
@@ -197,6 +207,10 @@ span.chip {
     margin-top: 1rem;
 }
 
+.margin-top-middle {
+    margin-top: 2rem;
+}
+
 .margin-top-big {
     margin-top: 6rem;
 }
@@ -241,6 +255,10 @@ span.chip {
     flex-direction: column;
 }
 
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
 .gap-default {
     gap: 3rem;
 }
@@ -288,12 +306,6 @@ span.chip {
     align-items: center;
 }
 
-.grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-}
-
 .tip-container .tip {
     scale: 0;
     position: absolute;

app/components/Blog/Category.vue

@@ -20,5 +20,5 @@ const icons: Record<Category, string> = {
   'freelancing': 'ph:laptop-duotone',
 }
 
-const icon = computed(() => name ? icons[name] : 'ph:question-mark-duotone')
+const icon = computed(() => icons[name] ?? 'ph:question-mark-duotone')
 </script>

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)"/>
+  <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,

nuxt.config.ts

@@ -22,8 +22,8 @@ export default defineNuxtConfig({
         '/flatrate',
         '/references',
         '/contact',
-      ]
-    }
+      ],
+    },
   },
 
   css: [
@@ -43,8 +43,9 @@ export default defineNuxtConfig({
     '~/assets/css/burger.css',
     '~/assets/css/teaser.css',
     '~/assets/css/project.css',
-    '~/assets/css/blogCard.css',
-    '~/assets/css/blogAuthor.css',
+    '~/assets/css/blog/card.css',
+    '~/assets/css/blog/author.css',
+    '~/assets/css/blog/overview.css',
   ],
 
   postcss: {
@@ -69,7 +70,7 @@ export default defineNuxtConfig({
     },
     head: {
       htmlAttrs: { lang: 'de' },
-    }
+    },
   },
 
   modules: ['@nuxt/icon', '@nuxt/fonts', '@vueuse/nuxt', '@nuxtjs/seo', '@nuxt/content'],
@@ -78,8 +79,8 @@ export default defineNuxtConfig({
     customCollections: [
       {
         prefix: 'wf',
-        dir: './app/assets/icons'
-      }
+        dir: './app/assets/icons',
+      },
     ],
     provider: 'iconify',
     serverBundle: 'local',
@@ -94,5 +95,5 @@ export default defineNuxtConfig({
     trailingSlash: true,
   },
 
-  compatibilityDate: '2024-12-04'
+  compatibilityDate: '2024-12-04',
 })