tags and such

src/components/BlogHeader.astro

@@ -7,23 +7,25 @@ interface Props {
 	date: String
 }
 
-const { title, date } = Astro.props
+const { title, date, slug } = Astro.props
 ---
 
 <div class="blog-header">
-	<h2>{title}</h2>
-	<h3>
-		<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
-		<Calendar />
-		<FormattedDate date={date} />
-	</h3>
-</div>
+	<h2>
+		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
+		<h3>
+			<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
+			<Calendar />
+			<FormattedDate date={date} />
+		</h3>
+	</h2>
 
-<style>
-	h3 {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 1.1rem;
-	}
-</style>
+	<style>
+		h3 {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			font-size: 1.1rem;
+		}
+	</style>
+</div>

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
 import UserIcon from './icons/UserIcon.astro'
-import Website from './icons/Website.astro'
+import WebsiteIcon from './icons/Website.astro'
 
 const { pathname } = Astro.url
 
@@ -24,9 +24,9 @@ const navLinks = [
 							{() => {
 								switch (link.label) {
 									case 'Blog':
-										return <Website />
+										return <WebsiteIcon class="icon" />
 									case 'About':
-										return <UserIcon />
+										return <UserIcon class="icon" />
 								}
 							}}
 							<span>{link.label}</span>
@@ -37,3 +37,62 @@ const navLinks = [
 		</ul>
 	</nav>
 </header>
+
+<style>
+	header {
+		margin: 0;
+		padding: 0.5rem 1rem;
+		max-width: 800px;
+		display: flex;
+		flex-direction: column;
+		margin: auto;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	header h1 {
+		text-align: center;
+	}
+
+	nav ul {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1.5rem;
+		padding: 0;
+		margin: 0;
+	}
+
+	nav ul li {
+		height: 40px;
+		align-items: center;
+	}
+
+	nav ul li a {
+		position: relative;
+		font-size: 1.2rem;
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+	}
+
+	svg {
+		position: absolute;
+		left: -100;
+		top: 0;
+	}
+
+	.active-nav::before {
+		content: '';
+		position: absolute;
+		left: -10px;
+		width: 6px;
+		height: 6px;
+		border-radius: 10px;
+		background-color: var(--blue);
+	}
+
+	nav ul li::before {
+		content: '';
+	}
+</style>

src/components/PostPreview.astro

@@ -1,5 +1,6 @@
 ---
 import BlogHeader from '@components/BlogHeader.astro'
+import Tags from '@components/Tags.astro'
 
 interface Props {
 	post: Object
@@ -11,7 +12,7 @@ const { data, slug } = post
 
 <article class="post-preview">
 	<div>
-		<BlogHeader title={post.data.title} date={post.data.pubDate} />
-		<a href={`/posts/${slug}`}>Read Post</a>
+		<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
+		<Tags tags={data.tags} />
 	</div>
 </article>

src/components/Tags.astro

@@ -0,0 +1,31 @@
+---
+const { tags } = Astro.props
+---
+
+<div class="tag-container">
+	{
+		tags.sort().map((tag: string) => (
+			<a class="tag" href={`/archive/${tag}`}>
+				{tag}
+			</a>
+		))
+	}
+</div>
+
+<style>
+	.tag-container {
+		margin: 10px 0;
+	}
+
+	.tag {
+		font-size: 0.8rem;
+		color: var(--text);
+		padding: 4px 8px;
+		border-radius: 25px;
+		background: var(--blue);
+	}
+
+	.tag:not(:last-child) {
+		margin-right: 6px;
+	}
+</style>