diff options
| -rw-r--r-- | src/components/GuestbookForm.jsx | 4 | ||||
| -rw-r--r-- | src/layouts/BlogPost.astro | 19 | ||||
| -rw-r--r-- | src/pages/blog/[...slug].astro | 2 | ||||
| -rw-r--r-- | src/pages/blog/tags/[tag].astro | 2 |
4 files changed, 18 insertions, 9 deletions
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> |