Add tags to guide/

src/pages/guide/[id].astro

@@ -4,8 +4,8 @@ import { getCollection } from 'astro:content'
 import ArticleLayout from '../../layouts/ArticleLayout.astro'
 
 export async function getStaticPaths() {
-    const blogEntries = await getCollection('guides')
-    return blogEntries.map(entry => ({
+    const guides = await getCollection('guides')
+    return guides.map(entry => ({
         params: { id: entry.data.id },
         props: { entry },
     }))
@@ -15,7 +15,7 @@ const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
-<ArticleLayout {...entry.data} pageName={['guide', entry.data.id, entry.data.series && 'series']}>
+<ArticleLayout {...entry.data} pageName={['guida', entry.data.id, entry.data.series && 'series']}>
     <h1>{entry.data.title}</h1>
     {entry.data.series && <div class="series">Serie: {entry.data.series}</div>}
     <Content />

src/pages/guide/index.astro

@@ -0,0 +1,23 @@
+---
+import { getCollection } from 'astro:content'
+
+import PageLayout from '@layouts/PageLayout.astro'
+import ArticleCard from '@components/ArticleCard.astro'
+
+const blogposts = await getCollection('guides')
+---
+
+<PageLayout pageName="guide">
+    <div class="article-list">
+        {
+            blogposts.map(post => (
+                <ArticleCard
+                    title={post.data.title}
+                    id={post.data.id}
+                    description={post.data.description}
+                    tags={post.data.tags}
+                />
+            ))
+        }
+    </div>
+</PageLayout>

src/pages/guide/tags/[tag].astro

@@ -0,0 +1,55 @@
+---
+import { getCollection } from 'astro:content'
+import type { CollectionEntry } from 'astro:content'
+import PageLayout from '@/layouts/PageLayout.astro'
+
+export async function getStaticPaths() {
+    const guides = await getCollection('guides')
+
+    const tags: string[] = []
+
+    guides.forEach(post => {
+        post.data.tags.forEach(tag => {
+            tags.push(tag)
+        })
+    })
+
+    return Array.from(new Set(tags)).map(tag => {
+        return {
+            params: { tag },
+            props: {
+                tag,
+                blogposts: guides.filter(post => post.data.tags.includes(tag)),
+            },
+        }
+    })
+}
+
+interface Props {
+    tag: string
+    blogposts: CollectionEntry<'guides'>[]
+}
+
+const { tag, blogposts } = Astro.props
+---
+
+<PageLayout pageName="tag">
+    <h1>#{tag}</h1>
+    <div class="article-list">
+        {
+            blogposts.map(post => (
+                <div class="article">
+                    <div class="title">
+                        <a href={`/guide/${post.data.id}`}>{post.data.title}</a>
+                    </div>
+                    <div class="description">{post.data.description}</div>
+                    <div class="tags">
+                        {post.data.tags.map(tag => (
+                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
+                        ))}
+                    </div>
+                </div>
+            ))
+        }
+    </div>
+</PageLayout>