add: category, date sorting

Add category layouts and date sorting

app/assets/css/blogCard.css

@@ -12,6 +12,17 @@
         scale: 1.05;
     }
 
+    & > .image {
+        flex: 0 0 200px;
+        width: 100%;
+
+        & img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+
     & .card-content {
         display: flex;
         flex-direction: column;
@@ -24,6 +35,11 @@
         margin-bottom: 1rem;
     }
 
+    & header {
+        display: flex;
+        flex-direction: column;
+    }
+
     & footer {
         margin-top: auto;
         display: flex;
@@ -41,4 +57,12 @@
             color: var(--color-orange);
         }
     }
+}
+
+
+
+@media (width <= 780px) {
+    .BlogCard header {
+        align-items: center;
+    }
 }

app/assets/css/global.css

@@ -290,7 +290,7 @@ span.chip {
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }
 
@@ -325,7 +325,7 @@ span.chip {
 }
 
 @media (width <= 780px) {
-    h1, h2, h3, h4, h5, h6, p {
+    h1, h2, h3, h4, h5, h6, p, small {
         text-align: center;
     }
 }

app/components/Blog/Author.vue

@@ -1,7 +1,7 @@
 <template>
   <aside class="BlogAuthor">
     <div class="image">
-      <img :src="image" :alt="`Bild von ${name}`" />
+      <img :src="image" :alt="`Bild von ${name}`"/>
     </div>
     <div class="meta">
       <span class="name">{{ name }}</span>
@@ -12,9 +12,9 @@
 
 <script setup lang="ts">
 type Props = {
-  name : string
-  image : string
-  date : string
+  name: string
+  image: string
+  date: string
 }
 
 const { date } = defineProps<Props>()

app/components/Blog/Card.vue

@@ -1,9 +1,11 @@
 <template>
   <NuxtLink :to="link" class="BlogCard z-2">
-    <img :src="image" alt=" " aria-hidden="true" />
+    <div class="image">
+      <img :src="image" alt=" " aria-hidden="true" />
+    </div>
     <div class="card-content">
       <header>
-        <span class="chip">{{ category }}</span>
+        <span class="chip"><BlogCategory :name="category" /></span>
         <h2>{{ title }}</h2>
         <small>{{ description }}</small>
       </header>
@@ -22,6 +24,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Category } from './types'
+
 type Props = {
   title : string
   description : string
@@ -30,7 +34,7 @@ type Props = {
   excerpt : { type: string, children?: any }
   link : string
   tags : string[]
-  category : string
+  category : Category
   author : {
     name : string
     image : string

app/components/Blog/Category.vue

@@ -0,0 +1,24 @@
+<template>
+  <Icon :name="icon" mode="svg"/>
+  {{ name }}
+</template>
+
+<script setup lang="ts">
+import type { Category } from './types'
+
+type Props = {
+  name: Category
+}
+
+const { name } = defineProps<Props>()
+
+const icons: Record<Category, string> = {
+  'story': 'ph:chat-circle-dots-duotone',
+  'snippet': 'ph:code-duotone',
+  'tutorial': 'ph:lightbulb-duotone',
+  'news': 'ph:newspaper-duotone',
+  'freelancing': 'ph:laptop-duotone',
+}
+
+const icon = computed(() => name ? icons[name] : 'ph:question-mark-duotone')
+</script>

app/components/Blog/types.ts

@@ -0,0 +1 @@
+export type Category = 'story' | 'snippet' | 'tutorial' | 'news' | 'freelancing'

app/pages/blog/index.vue

@@ -1,25 +1,33 @@
 <template>
   <section id="blog" class="Blog content">
     <div class="grid">
-      <BlogCard v-for="article in articles" v-bind="makeBlogCard(article)" />
+      <BlogCard v-for="article in articles" v-bind="makeBlogCard(article)"/>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-const { data } = await useAsyncData('articles', () => queryCollection('blog').limit(10).all())
+import type { Category } from '../../components/Blog/types'
+
+const { data } = await useAsyncData('articles', () => queryCollection('blog').order('date', 'DESC').limit(10).all())
 
 const articles = data.value!
 
-const makeBlogCard = (article : typeof articles[0]) => ({
+const makeBlogCard = (article: typeof articles[0]) => ({
   title: article.title,
   description: article.description,
   image: article.meta.image as string,
-  date: article.meta.date as string,
+  date: article.date as string,
   excerpt: article.excerpt,
   link: article.path,
   tags: article.meta.tags as string[],
-  category: article.meta.category as string,
+  category: article.meta.category as Category,
   author: article.meta.author as { name: string, image: string },
 })
+
+useHead({
+  link: [
+    { rel: 'alternate', type: 'application/rss+xml', href: '/blog/rss.xml', title: 'blogfussel' },
+  ],
+})
 </script>