🏗 Restructure project, change font to Maple Mono

src/components/Avatar.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 
-import portrait from '../img/portrait.jpg';
+import portrait from '../assets/portrait.jpg';
 
 interface Props {
 	size: number;

src/components/BlogHeader.astro

@@ -1,7 +1,7 @@
 ---
 import { format, add } from 'date-fns';
 
-import CalendarIcon from '../img/svg/calendar.svg';
+import CalendarIcon from '../assets/svg/calendar.svg';
 
 interface Props {
 	title: string;
@@ -17,7 +17,7 @@ const { title, date, slug } = Astro.props;
 		{slug ? <a href={`/blog/${slug}`}>{title}</a> : title}
 	</h2>
 	<div>
-		<CalendarIcon class="calendar-icon" size={24} />
+		<CalendarIcon class="calendar-icon" width={24} height={24} />
 		{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}
 	</div>
 </div>

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import RssIcon from '../img/svg/rss.svg';
+import RssIcon from '../assets/svg/rss.svg';
 const year = new Date().getFullYear();
 ---
 
@@ -13,12 +13,17 @@ const year = new Date().getFullYear();
 
 	<p>
 		<a href="/rss.xml"
-			><RssIcon class="rss-icon" size={20} /> Subscribe with RSS</a
+			><RssIcon class="rss-icon" width={20} height={20} /> Subscribe with RSS</a
 		>
 	</p>
 </footer>
 
 <style>
+	footer {
+		margin: 4rem 0;
+		text-align: center;
+	}
+
 	.rss-icon {
 		transform: translateY(0.18rem);
 	}

src/components/Header.astro

@@ -20,15 +20,10 @@ const pathComponents = pathname.split('/').slice(1);
 ---
 
 <header>
-	<div>
-		{
-			pathComponents[0] !== '' ? (
-				<a href="/" transition:name="my-avatar">
-					<Avatar size={60} />
-				</a>
-			) : null
-		}
-	</div>
+	<a href="/">
+		<Avatar size={60} />
+	</a>
+
 	<nav>
 		{
 			navLinks.map((link) => (
@@ -36,9 +31,7 @@ const pathComponents = pathname.split('/').slice(1);
 					<a href={`/${link.path}`}>
 						<span>{link.label}</span>
 					</a>
-					{pathComponents[0] === link.path ? (
-						<div class="underline" transition:name="menu-selection-indicator" />
-					) : null}
+					{pathComponents[0] === link.path ? <div class="underline" /> : null}
 				</li>
 			))
 		}
@@ -46,6 +39,35 @@ const pathComponents = pathname.split('/').slice(1);
 </header>
 
 <style>
+	header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20px;
+		height: 120px;
+	}
+
+	header > h1 > a {
+		color: var(--text);
+	}
+
+	header > nav {
+		display: flex;
+		flex-direction: row;
+		list-style: none;
+		gap: 20px;
+		font-size: 1.15rem;
+	}
+
+	header > nav > li > a:hover {
+		text-decoration: none;
+	}
+
+	header > nav > li > .selected {
+		font-weight: bold;
+	}
+
 	.underline {
 		height: 2px;
 		width: 100%;

src/components/PostPreview.astro

@@ -19,7 +19,7 @@ const { post } = Astro.props;
 const { data, slug } = post;
 ---
 
-<article transition:name={slug}>
+<article>
 	<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
 	<Tags tags={data.tags} />
 </article>

src/components/Tags.astro

@@ -9,9 +9,12 @@ const { tags } = Astro.props;
 <span>
 	{
 		tags.sort().map((tag: string, index: number) => (
-			<a class="tag" href={`/blog/archive/${tag}`}>
-				{`${tag}${index < tags.length - 1 ? ', ' : ''}`}
-			</a>
+			<>
+				<a class="tag" href={`/blog/archive/${tag}`}>
+					{tag}
+				</a>
+				{index < tags.length - 1 ? ' | ' : ''}
+			</>
 		))
 	}
 </span>