From 0c6218f27f8c0485e9529c20f12e8a77b222f817 Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Sun, 17 Nov 2024 23:55:23 +0100
Subject: [PATCH] add: guides now show author and tags

---
 src/content/config.ts                         |  1 +
 .../2024-11-17-recupero-password-poisson.md   |  2 +
 src/pages/guide/[id].astro                    | 14 +++++
 src/pages/guide/index.astro                   |  4 +-
 src/pages/guide/tags/[tag].astro              |  2 +-
 src/pages/notizie/index.astro                 |  2 +-
 src/styles/pages.scss                         | 55 +++++++++++++++++++
 src/styles/typography.scss                    | 13 +++++
 8 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/src/content/config.ts b/src/content/config.ts
index 4434a1f..6033808 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -25,6 +25,7 @@ const guidesCollection = defineCollection({
         id: z.string(),
         title: z.string(),
         description: z.string(),
+        author: z.string(),
         series: z.string().optional(),
         tags: z.array(z.string()),
     }),
diff --git a/src/content/guides/2024-11-17-recupero-password-poisson.md b/src/content/guides/2024-11-17-recupero-password-poisson.md
index 2a6a271..2a12532 100644
--- a/src/content/guides/2024-11-17-recupero-password-poisson.md
+++ b/src/content/guides/2024-11-17-recupero-password-poisson.md
@@ -9,7 +9,9 @@ tags: [poisson, password]
 Se per qualche strano motivo hai dimenticato la tua password Poisson, niente paura! La procedura è super semplice:
 
 1. Scrivi una mail a **macchinisti@lists.dm.unipi.it**.
+
 2. Nella mail, specifica il tuo nome, cognome, username di ateneo (quello della tua email istituzionale) e se lo ricordi, anche il tuo username Poisson.
+
 3. Attendi pazientemente la risposta dei macchinisti, che ti resetteranno la password e ti invieranno una nuova via email.
 
 E voilà, in un batter d'occhio sarai di nuovo pronto a entrare nel fantastico mondo di Poisson.
diff --git a/src/pages/guide/[id].astro b/src/pages/guide/[id].astro
index 1c20ac3..14e0807 100644
--- a/src/pages/guide/[id].astro
+++ b/src/pages/guide/[id].astro
@@ -18,6 +18,20 @@ const { Content } = await entry.render()
 
 <ArticleLayout {...entry.data} pageTags={['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 />
+
+    <div class="metadata">
+        <div class="metadata-item">
+            <strong>Autore</strong>
+            {entry.data.author}
+        </div>
+        <div class="metadata-item">
+            <strong>Tags</strong>
+            <div class="tags">
+                {entry.data.tags.map(tag => <a href={`/guide/tags/${tag}`}>#{tag}</a>)}
+            </div>
+        </div>
+    </div>
 </ArticleLayout>
diff --git a/src/pages/guide/index.astro b/src/pages/guide/index.astro
index cab5027..977187b 100644
--- a/src/pages/guide/index.astro
+++ b/src/pages/guide/index.astro
@@ -7,7 +7,9 @@ const guides = await getCollection('guides')
 ---
 
 <PageLayout pageTags="guide">
-    <h1>Guide</h1>
+    <h1>
+        <a href="/guide">Guide</a>
+    </h1>
     <div class="card-list">
         {
             guides.toReversed().map(guide => (
diff --git a/src/pages/guide/tags/[tag].astro b/src/pages/guide/tags/[tag].astro
index 00939c2..9452c4c 100644
--- a/src/pages/guide/tags/[tag].astro
+++ b/src/pages/guide/tags/[tag].astro
@@ -34,7 +34,7 @@ const { tag, guides } = Astro.props
 ---
 
 <PageLayout pageTags="guide tag">
-    <h1>Guide > #{tag}</h1>
+    <h1><a href="/guide">Guide</a> > <a href={`/guide/tags/${tag}`}>#{tag}</a></h1>
     <div class="card-list">
         {
             guides.map(guide => (
diff --git a/src/pages/notizie/index.astro b/src/pages/notizie/index.astro
index ce8002c..e1a0767 100644
--- a/src/pages/notizie/index.astro
+++ b/src/pages/notizie/index.astro
@@ -7,7 +7,7 @@ const news = await getCollection('news')
 ---
 
 <PageLayout pageTags="notizie">
-    <h1>Notizie</h1>
+    <h1><a href="/notizie">Notizie</a></h1>
     <div class="card-list">
         {
             news.map(newsItem => (
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
index 115de11..cb2ad80 100644
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@@ -462,6 +462,12 @@
     }
 
     .notizie {
+        h1 > a {
+            &:hover {
+                text-decoration: underline 3px solid;
+            }
+        }
+
         main {
             justify-self: center;
 
@@ -508,6 +514,12 @@
     }
 
     .guide {
+        h1 > a {
+            &:hover {
+                text-decoration: underline 3px solid;
+            }
+        }
+
         main {
             justify-self: center;
 
@@ -531,6 +543,40 @@
             margin-top: 3rem;
             margin-bottom: 6rem;
 
+            position: relative;
+
+            .metadata {
+                position: absolute;
+                top: -2px;
+                left: calc(100% + 2rem);
+                width: 15rem;
+
+                display: grid;
+                grid-auto-flow: row;
+                gap: 1rem;
+
+                justify-items: start;
+
+                .metadata-item {
+                    background: var(--card-base);
+
+                    display: grid;
+                    grid-template-rows: auto auto;
+                    justify-items: start;
+                    gap: 0.25rem;
+
+                    padding: 0.75rem 1rem;
+
+                    @include neo-brutalist-card($size: 3px);
+
+                    .tags {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: 0.5rem;
+                    }
+                }
+            }
+
             @media screen and (max-width: $screen-desktop-min) {
                 box-shadow: none;
                 border: none;
@@ -538,6 +584,15 @@
                 max-width: none;
 
                 margin: 0 auto;
+
+                .metadata {
+                    position: static;
+                    padding: 0;
+                    width: auto;
+                    margin: 0;
+
+                    --card-base: color-mix(in lab, var(--guide-base), #fff 30%);
+                }
             }
         }
     }
diff --git a/src/styles/typography.scss b/src/styles/typography.scss
index 5bcf26b..b357615 100644
--- a/src/styles/typography.scss
+++ b/src/styles/typography.scss
@@ -194,6 +194,11 @@
         ol,
         ul {
             margin-bottom: var(--paragraph-margin, 1rem);
+            padding-left: 1.5rem;
+
+            p {
+                --paragraph-margin: 0.5rem;
+            }
         }
 
         a,
@@ -218,6 +223,14 @@
             }
         }
 
+        hr {
+            max-width: calc(100vw - 4rem);
+            width: 40ch;
+            margin: 3rem auto 2.75rem;
+            border: none;
+            border-top: 2px solid #0003;
+        }
+
         @media screen and (max-width: $screen-desktop-min) {
             & > * {
                 margin: 0 0.75rem;