From 4104477533097c34dd0e97129e29a4a08e5083c2 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Thu, 12 Jun 2025 14:11:52 +0200
Subject: [PATCH] add: article view

View for blog articles
---
 app/assets/css/blog/article.css  | 20 ++++++++++++++++++
 app/assets/css/blog/excerpt.css  |  4 ++++
 app/assets/css/blog/overview.css |  1 +
 app/components/Blog/Card.vue     | 36 +++++++++++++++++---------------
 app/components/Blog/Excerpt.vue  |  9 ++++++++
 app/pages/blog/[slug].vue        | 24 +++++++++++++++++++++
 app/pages/blog/index.vue         | 21 +++++++++++++------
 content.config.ts                |  8 +++++++
 content/blog/0000.start.md       | 11 +++++-----
 content/blog/0001.entry1.md      |  2 +-
 content/blog/0002.entry2.md      |  2 +-
 content/blog/0003.entry3.md      |  2 +-
 content/blog/0004.entry4.md      |  2 +-
 nuxt.config.ts                   |  2 ++
 server/routes/blog/rss.xml.ts    | 10 ++++++++-
 15 files changed, 121 insertions(+), 33 deletions(-)
 create mode 100644 app/assets/css/blog/article.css
 create mode 100644 app/assets/css/blog/excerpt.css
 create mode 100644 app/components/Blog/Excerpt.vue

diff --git a/app/assets/css/blog/article.css b/app/assets/css/blog/article.css
new file mode 100644
index 0000000..c58326e
--- /dev/null
+++ b/app/assets/css/blog/article.css
@@ -0,0 +1,20 @@
+.BlogArticle {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    & .image {
+        width: 100%;
+        height: 450px;
+        border-radius: 1rem;
+        overflow: hidden;
+        background: #000;
+
+        & img {
+            width: 100%;
+            height: 100%;
+            opacity: .8;
+            object-fit: cover;
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/assets/css/blog/excerpt.css b/app/assets/css/blog/excerpt.css
new file mode 100644
index 0000000..38ecff1
--- /dev/null
+++ b/app/assets/css/blog/excerpt.css
@@ -0,0 +1,4 @@
+.Excerpt {
+    font-size: 1.5rem;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/app/assets/css/blog/overview.css b/app/assets/css/blog/overview.css
index 6556419..8bdda6b 100644
--- a/app/assets/css/blog/overview.css
+++ b/app/assets/css/blog/overview.css
@@ -1,6 +1,7 @@
 .BlogOverview {
     & .category-list {
         display: flex;
+        justify-content: center;
         flex-wrap: wrap;
         gap: 1rem;
         list-style: none;
diff --git a/app/components/Blog/Card.vue b/app/components/Blog/Card.vue
index a0a8be5..8f1546d 100644
--- a/app/components/Blog/Card.vue
+++ b/app/components/Blog/Card.vue
@@ -1,22 +1,23 @@
 <template>
   <NuxtLink :to="link" class="BlogCard z-2">
     <div class="image">
-      <img :src="image" alt=" " aria-hidden="true" />
+      <img :src="image" alt=" " aria-hidden="true"/>
     </div>
     <div class="card-content">
       <header>
-        <span class="chip"><BlogCategory :name="category" /></span>
+        <span class="chip"><BlogCategory :name="category"/></span>
         <h2>{{ title }}</h2>
-        <small>{{ description }}</small>
       </header>
       <main>
-        <ContentRenderer :value="excerpt" />
+        <p>
+          {{ generatePlainText(excerpt.value).at(0)?.text ?? '' }}
+        </p>
       </main>
       <footer>
-        <BlogAuthor :name="author.name" :image="author.image" :date="date" />
+        <BlogAuthor :name="author.name" :image="author.image" :date="date"/>
         <div class="tags">
           <span>tags</span>
-          <span class="tag" v-for="tag in tags">{{tag}}</span>
+          <span class="tag" v-for="tag in tags">{{ tag }}</span>
         </div>
       </footer>
     </div>
@@ -25,19 +26,20 @@
 
 <script setup lang="ts">
 import type { Category } from './types'
+import type { MinimalNode } from '@nuxt/content'
 
 type Props = {
-  title : string
-  description : string
-  image : string
-  date : string
-  excerpt : { type: string, children?: any }
-  link : string
-  tags : string[]
-  category : Category
-  author : {
-    name : string
-    image : string
+  title: string
+  description: string
+  image: string
+  date: string
+  excerpt: { type: string, value: MinimalNode[], children?: any }
+  link: string
+  tags: string[]
+  category: Category
+  author: {
+    name: string
+    image: string
   }
 }
 
diff --git a/app/components/Blog/Excerpt.vue b/app/components/Blog/Excerpt.vue
new file mode 100644
index 0000000..14540b1
--- /dev/null
+++ b/app/components/Blog/Excerpt.vue
@@ -0,0 +1,9 @@
+<template>
+  <p class="Excerpt">
+    <slot/>
+  </p>
+</template>
+
+<script setup lang="ts">
+
+</script>
\ No newline at end of file
diff --git a/app/pages/blog/[slug].vue b/app/pages/blog/[slug].vue
index b802c0a..f035be2 100644
--- a/app/pages/blog/[slug].vue
+++ b/app/pages/blog/[slug].vue
@@ -1,9 +1,33 @@
 <template>
+  <section class="BlogArticle content">
+    <NuxtLink class="text inline-flex-row" to="/blog">
+      <Icon name="ph:arrow-left-duotone"/>
+      Zurück zur Übersicht
+    </NuxtLink>
 
+    <p v-if="!article">
+      Sorry bro, aber der Artikel existiert einfach nicht.
+    </p>
+
+    <div v-else>
+      <header>
+        <div class="image z-2">
+          <img :src="article.image" alt="Artikelbild" aria-hidden="true"/>
+        </div>
+        <h1 class="margin-top">{{ article.title }}</h1>
+        <h2>{{ article.description }}</h2>
+      </header>
+      <div class="flex-col gap-default">
+        <ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script setup lang="ts">
+const route = useRoute()
 
+const { data: article } = await useAsyncData('article', () => queryCollection('blog').path(route.path).first())
 </script>
 
 <style scoped>
diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue
index 512b7c7..3f0558f 100644
--- a/app/pages/blog/index.vue
+++ b/app/pages/blog/index.vue
@@ -26,7 +26,16 @@ import type { Category } from '../../components/Blog/types'
 
 const route = useRoute()
 
-const { data: articles } = await useAsyncData('articles', () => queryCollection('blog').order('date', 'DESC').all())
+const simpleDate = (date: Date) => {
+  date.setDate(date.getDate() + 1)
+  return `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${date.getDate()}`
+}
+
+const { data: articles } = await useAsyncData('articles', () => queryCollection('blog')
+  .where('date', '<', simpleDate(new Date()))
+  .order('date', 'DESC')
+  .all(),
+)
 
 const firstTen = computed(() => {
   if (route.query.category) {
@@ -49,13 +58,13 @@ const allCategoriesAndCount = computed(() => {
 const makeBlogCard = (article: BlogCollectionItem) => ({
   title: article.title,
   description: article.description,
-  image: article.meta.image as string,
+  image: article.thumbnail as string,
   date: article.date as string,
-  excerpt: article.excerpt,
+  excerpt: article.excerpt as any,
   link: article.path,
-  tags: article.meta.tags as string[],
-  category: article.meta.category as Category,
-  author: article.meta.author as { name: string, image: string },
+  tags: article.tags as string[],
+  category: article.category as Category,
+  author: article.author as { name: string, image: string },
 })
 
 useHead({
diff --git a/content.config.ts b/content.config.ts
index 86dd758..fffe2f5 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -7,6 +7,14 @@ export default defineContentConfig({
       source: 'blog/*.md',
       schema: z.object({
         date: z.string(),
+        image: z.string(),
+        thumbnail: z.string(),
+        category: z.string(),
+        tags: z.array(z.string()),
+        author: z.object({
+          name: z.string(),
+          image: z.string(),
+        }),
         excerpt: z.object({
           type: z.string(),
           children: z.any(),
diff --git a/content/blog/0000.start.md b/content/blog/0000.start.md
index 1ceba13..26fa078 100644
--- a/content/blog/0000.start.md
+++ b/content/blog/0000.start.md
@@ -1,9 +1,9 @@
 ---
-image: 'https://picsum.photos/600/250?random=4'
+image: 'https://picsum.photos/1920/450?random=4'
+thumbnail: 'https://picsum.photos/750/250?random=4'
 title: 'Blogfussel - für mehr Fussel im Blog'
-description: 'Und nochmal...'
 navigation: true
-date: 2025-07-01
+date: 2025-06-11
 category: 'story'
 tags: [ 'start', 'story' ]
 author:
@@ -11,8 +11,9 @@ author:
   image: '/img/og.webp'
 ---
 
-Warum ich mich dazu entschlossen habe jetzt doch wieder mit dem Bloggen anzufangen? Nun ja, das hat alles angefangen, als man mich einfach so auf
-Instagram gesperrt hat.
+::blog-excerpt
+Warum ich mich dazu entschlossen habe jetzt doch wieder mit dem Bloggen anzufangen? Da muss ich etwas ausholen.
+::
 
 <!-- more -->
 
diff --git a/content/blog/0001.entry1.md b/content/blog/0001.entry1.md
index 3c47a1a..49d8d25 100644
--- a/content/blog/0001.entry1.md
+++ b/content/blog/0001.entry1.md
@@ -3,7 +3,7 @@ image: 'https://picsum.photos/600/250?random=3'
 title: 'Post 1'
 description: 'Blablabla'
 navigation: true
-date: 2025-06-20
+date: 2025-05-20
 category: 'tutorial'
 tags: [ 'test', 'wasd' ]
 author:
diff --git a/content/blog/0002.entry2.md b/content/blog/0002.entry2.md
index abba29c..1033dfa 100644
--- a/content/blog/0002.entry2.md
+++ b/content/blog/0002.entry2.md
@@ -3,7 +3,7 @@ image: 'https://picsum.photos/600/250?random=2'
 title: 'Post 2'
 description: 'Blablabla'
 navigation: true
-date: 2025-06-16
+date: 2025-05-16
 category: 'snippet'
 tags: [ 'test', 'asdf' ]
 author:
diff --git a/content/blog/0003.entry3.md b/content/blog/0003.entry3.md
index 03a6140..8e19bbb 100644
--- a/content/blog/0003.entry3.md
+++ b/content/blog/0003.entry3.md
@@ -3,7 +3,7 @@ image: 'https://picsum.photos/600/250?random=1'
 title: 'Post 3'
 description: 'Blablabla'
 navigation: true
-date: 2025-06-25
+date: 2025-05-25
 category: 'freelancing'
 tags: [ 'test', '123' ]
 author:
diff --git a/content/blog/0004.entry4.md b/content/blog/0004.entry4.md
index dd08fde..476906d 100644
--- a/content/blog/0004.entry4.md
+++ b/content/blog/0004.entry4.md
@@ -3,7 +3,7 @@ image: 'https://picsum.photos/600/250?random=5'
 title: 'Post 4'
 description: 'Blablabla'
 navigation: true
-date: 2025-06-25
+date: 2025-05-25
 category: 'news'
 tags: [ 'test', '123' ]
 author:
diff --git a/nuxt.config.ts b/nuxt.config.ts
index cda71d6..1c35f27 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -46,6 +46,8 @@ export default defineNuxtConfig({
     '~/assets/css/blog/card.css',
     '~/assets/css/blog/author.css',
     '~/assets/css/blog/overview.css',
+    '~/assets/css/blog/article.css',
+    '~/assets/css/blog/excerpt.css',
   ],
 
   postcss: {
diff --git a/server/routes/blog/rss.xml.ts b/server/routes/blog/rss.xml.ts
index cee57aa..9073d17 100644
--- a/server/routes/blog/rss.xml.ts
+++ b/server/routes/blog/rss.xml.ts
@@ -17,11 +17,19 @@ const makeItem = (article: BlogCollectionItem, base: string) => `
     </item>
 `
 
+const simpleDate = (date: Date) => {
+  date.setDate(date.getDate() + 1)
+  return `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${date.getDate()}`
+}
+
 export default defineEventHandler(async event => {
   const baseUrl = getRequestURL(event)
   const blogUrl = `${baseUrl.protocol}//${baseUrl.host}`
 
-  const articles = (await queryCollection(event, 'blog').order('date', 'DESC').all())
+  const articles = await queryCollection(event, 'blog')
+    .where('date', '<', simpleDate(new Date()))
+    .order('date', 'DESC')
+    .all()
 
   const xmlItems = articles.map(article => makeItem(article, blogUrl)).join('')