From bf7ebfa81791703959015c9b1b8ddbc4edae5ee3 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Mon, 5 Feb 2024 21:16:42 -0500
Subject: Tags in blog post

---
 src/components/GuestbookForm.jsx |  4 ++--
 src/layouts/BlogPost.astro       | 19 ++++++++++++++-----
 src/pages/blog/[...slug].astro   |  2 +-
 src/pages/blog/tags/[tag].astro  |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
index 56f3930..48e043b 100644
--- a/src/components/GuestbookForm.jsx
+++ b/src/components/GuestbookForm.jsx
@@ -64,11 +64,11 @@ class GuestbookForm extends Component {
             <div className="card">
                 <form onSubmit={this.handleSubmit}>
                     <h2>Submit Message</h2>
-                    <label htmlFor="name">Name</label>
+                    <label htmlFor="name">Name *</label>
                     <input type="text" name="name" placeholder="John Doe" required value={this.state.name} onChange={this.handleChange} disabled={this.state.isMessageSent}/>
                     <label htmlFor="website">Your Website (Optional)</label>
                     <input type="url" name="website" placeholder="https://example.com" value={this.state.website} onChange={this.handleChange} disabled={this.state.isMessageSent}/>
-                    <label htmlFor="message">Message (Supports <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown</a>)</label>
+                    <label htmlFor="message">Message * (Supports <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown</a>)</label>
                     <textarea name="message" placeholder="Enter your message here." required value={this.state.message}
                               onChange={this.handleChange} disabled={this.state.isMessageSent}></textarea>
                     <button type="submit" disabled={this.state.isMessageSent}>Send</button>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index a97dadf..628215f 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,14 +1,17 @@
 ---
 import Layout from './Default.astro';
-const { title, description, pubDate } = Astro.props;
-import { getCollection } from "astro:content";
-const postTags = (await getCollection('blog'));
+const { title, description, pubDate, tags } = Astro.props;
 ---
 
 <Layout title=`${title} - Andrew Lee` description={description}>
     <header>
         <h1 class="header-text">{title}</h1>
-        <small>{pubDate}</small>
+        <span>{pubDate}</span>
+        <div class="tags">
+            {tags.map(tag => (
+                    <span class="tag"><a href={`/blog/tags/${tag}`}>{tag}</a></span>
+            ))}
+        </div>
     </header>
     <div class="container">
         <main>
@@ -42,11 +45,17 @@ const postTags = (await getCollection('blog'));
         font-size: 1.5em;
         font-weight: 300;
     }
-
     .container {
         margin: 1em 10em 1em 10em;
     }
 
+    .tags {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: 1em;
+    }
+
     @media (max-width: 992px) {
         .container {
             margin: 10px 20px 10px 20px;
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index e0b07e9..86690c6 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -16,7 +16,7 @@ if(entry === undefined) {
 
 const { Content } = await entry.render();
 ---
-<Page title={entry.data.title} description={entry.data.description} pubDate={formatDate(entry.data.pubDate)}>
+<Page title={entry.data.title} description={entry.data.description} pubDate={formatDate(entry.data.pubDate)} tags={entry.data.tags}>
     <main>
         <a href="/blog" class="back-link">← All articles</a>
         <article>
diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro
index 31d9b94..6e32622 100644
--- a/src/pages/blog/tags/[tag].astro
+++ b/src/pages/blog/tags/[tag].astro
@@ -28,7 +28,7 @@ const { posts } = Astro.props;
         <div class="grid">
             {posts && posts.map((post) => {
                 return (
-                        <article class="card">>
+                        <article class="card">
                             <h1><a href=`/blog/${post.frontmatter.slug}`>{post.frontmatter.title}</a></h1>
                             <small>{formatDate(post.frontmatter.pubDate)}</small>
                             <p>{post.frontmatter.description}</p>
-- 
cgit v1.2.3