✨ Mastodon post on homepage

src/components/BlogHeader.astro

@@ -13,9 +13,7 @@ const { title, date, slug } = Astro.props;
 ---
 
 <div class="blog-header">
-	<h2>
-		{slug ? <a href={`/blog/${slug}`}>{title}</a> : title}
-	</h2>
+	{slug ? <a href={`/blog/${slug}`}>{title}</a> : <h1>{title}</h1>}
 	<div>
 		<CalendarIcon class="calendar-icon" width={24} height={24} />
 		<strong>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</strong>
@@ -23,11 +21,15 @@ const { title, date, slug } = Astro.props;
 </div>
 
 <style>
+	a {
+		font-size: 1.3rem;
+	}
+
 	.calendar-icon {
 		transform: translateY(0.3rem);
 	}
 
 	strong {
-		font-weight: bold;
+		font-weight: bolder;
 	}
 </style>

src/components/Header/Header.astro

@@ -5,7 +5,7 @@ import Drawer from './Drawer.astro';
 
 <header>
 	<div class="container">
-		<h1><a href="/">ghall.space</a></h1>
+		<a href="/">ghall.space</a>
 		<Nav />
 		<Drawer />
 	</div>
@@ -21,6 +21,7 @@ import Drawer from './Drawer.astro';
 		top: 0;
 		position: fixed;
 		z-index: 1;
+		border-bottom: var(--border);
 	}
 
 	.container {
@@ -34,8 +35,15 @@ import Drawer from './Drawer.astro';
 		height: 100%;
 	}
 
-	h1 > a {
+	a {
 		font-size: 1.6rem;
 		color: var(--text);
+		font-weight: bold;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		header {
+			background-color: rgba(30, 30, 46, 90%);
+		}
 	}
 </style>

src/components/Header/Nav.astro

@@ -26,6 +26,7 @@ const pathComponents = pathname.split('/').slice(1);
 		list-style: none;
 		gap: 20px;
 		font-size: 1.15rem;
+		font-weight: 600;
 	}
 
 	a:hover {
@@ -33,7 +34,6 @@ const pathComponents = pathname.split('/').slice(1);
 	}
 
 	.selected {
-		font-weight: bold;
 	}
 
 	.underline {

src/components/LatestPost.astro

@@ -13,7 +13,6 @@
         this.latestPost = {
           link: item.querySelector('link').textContent,
           body: item.querySelector('description').textContent,
-          
         };
       })
       .catch((error) => {

src/content.config.ts

@@ -1,6 +1,8 @@
 import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
 
 const blogCollection = defineCollection({
+	loader: glob({ pattern: '**\/*.md', base: './src/content/blog' }),
 	schema: z.object({
 		title: z.string(),
 		pubDate: z.string().transform((str: string) => new Date(str)),

src/global.css

@@ -19,7 +19,7 @@
 	--background: #fcfcfc;
 	--radius: 5px;
 	--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-	--border: 1px solid #8c8fa1;
+	--border: 1px solid #ced3f1;
 	--max-page-width: 800px;
 }
 
@@ -31,7 +31,7 @@
 		--orange: #fab387;
 		--text: #cdd6f4;
 		--background: #1e1e2e;
-		--border: 1px solid rgb(131, 139, 167);
+		--border: 1px solid #505160;
 	}
 }
 

src/pages/index.astro

@@ -5,6 +5,7 @@ import { getCollection } from 'astro:content';
 
 import Layout from '@layouts/Layout.astro';
 import Avatar from '@components/Avatar.astro';
+import LatestPost from '@components/LatestPost.astro';
 
 import MastodonIcon from '../assets/svg/mastodon.svg';
 import BlueskyIcon from '../assets/svg/bluesky.svg';
@@ -19,6 +20,7 @@ const latestPost = posts.sort(
 ---
 
 <Layout title="Welcome">
+	<Avatar size={200} />
 	<p>
 		My name is <strong>Graham</strong> (he/him), a full-stack web developer, and
 		tech enthusiast.
@@ -61,10 +63,11 @@ const latestPost = posts.sort(
 			target="_blank">Natalia Vazquez</a
 		>.
 	</p>
+	<LatestPost />
 </Layout>
 
 <style>
 	a > svg {
-		transform: translateY(0.18rem);
+		transform: translateY(0.1rem);
 	}
 </style>