Add tags to guide/

src/components/ArticleCard.astro

@@ -0,0 +1,13 @@
+---
+const { id, title, tags, description } = Astro.props
+---
+
+<div class="article">
+    <div class="title">
+        <a href={`/guide/${id}`}>{title}</a>
+    </div>
+    <div class="description">{description}</div>
+    <div class="tags">
+        {tags.map(tag => <a href={`/guide/tags/${tag}`}>#{tag}</a>)}
+    </div>
+</div>

src/content/config.ts

@@ -24,6 +24,7 @@ const guidesCollection = defineCollection({
         title: z.string(),
         description: z.string(),
         series: z.string().optional(),
+        tags: z.array(z.string()),
     }),
 })
 
@@ -35,6 +36,7 @@ const seminariettiCollection = defineCollection({
         author: z.string(),
         publishDate: z.date(),
         eventDate: z.date(),
+        tags: z.array(z.string()),
     }),
 })
 

src/content/guides/2024-02-29-git-101.md

@@ -3,7 +3,8 @@ id: git-101-example
 title: Git 101 (Esempio)
 description: Una guida introduttiva alle basi di Git (Esempio)
 author: Copilot
-# series: git
+tags:
+    - git
 ---
 
 Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti.

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')
+    const guides = await getCollection('guides')
-    return blogEntries.map(entry => ({
+    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>

src/styles/components.scss

@@ -12,11 +12,7 @@ $news-accent-bg: #f8e8b1;
     place-content: center;
 
     font-size: 24px;
-    font-variation-settings:
+    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
-        'FILL' 0,
-        'wght' 300,
-        'GRAD' 0,
-        'opsz' 24;
 }
 
 .search {
@@ -235,3 +231,41 @@ $news-accent-bg: #f8e8b1;
         font-size: 16px;
     }
 }
+
+.article-list {
+    display: grid;
+    grid-auto-flow: column;
+
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+
+    .article {
+        display: grid;
+        grid-template-rows: auto auto auto;
+
+        background: var(--card-bg, $project-card-bg);
+        color: #000e;
+
+        @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+        padding: 1rem;
+        .title {
+            font-family: 'Source Sans Pro', sans-serif;
+            font-weight: 700;
+            font-size: 32px;
+        }
+
+        .description {
+            font-size: 16px;
+        }
+
+        .tags {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            font-size: 14px;
+            padding-top: 0.5rem;
+            color: #555;
+        }
+    }
+}

src/styles/main.scss

@@ -429,7 +429,7 @@ body {
     }
 }
 
-.guide {
+.guida {
     background: #f0f0f0;
 
     &.series {
@@ -462,6 +462,36 @@ body {
     }
 }
 
+.guide {
+    main {
+        justify-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        max-width: 80ch;
+        padding: 5rem 0;
+
+        gap: 5rem;
+    }
+}
+
+.tag {
+    main {
+        justify-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        max-width: 80ch;
+        padding: 5rem 0;
+
+        gap: 5rem;
+    }
+}
+
 //
 // Misc
 //

tsconfig.json

@@ -10,7 +10,8 @@
         "paths": {
             "@/*": ["src/*"],
             "@layouts/*": ["src/layouts/*"],
-            "@client/*": ["src/client/*"]
+            "@client/*": ["src/client/*"],
+            "@components/*": ["src/components/*"]
         }
     }
 }