Implement navbar for all pages

marcelarie · Sep 6, 2024 · 038086c · 038086c
1 parent 32a2c92
commit 038086c
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 32 deletions.
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -0,0 +1,24 @@
+---
+
+---
+
+<nav class="flex justify-between mt-10 mb-14">
+	<a id="logo" href="/">marcelarie</a>
+	<div id="right-navbar" class="flex space-x-4 self-center">
+		<a href="/about">About</a>
+		<a href="/projects">Projects</a>
+	</div>
+</nav>
+
+<style>
+	nav #logo {
+		font-family: "Pixel Code Light";
+		font-size: 36px;
+	}
+
+	nav #right-navbar a {
+		font-family: "Noto Serif Georgia";
+		font-size: 24px;
+		weight: regular;
+	}
+</style>
diff --git a/src/pages/500.astro b/src/pages/500.astro
@@ -0,0 +1,10 @@
+---
+interface Props {
+  error: unknown;
+}
+
+const { error } = Astro.props;
+console.log(error);
+---
+
+<div>{error instanceof Error ? error.message : "Unknown error"}</div>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
+import Navbar from "../../components/Navbar.astro";
 
 // TODO: This should be a global setting that is set by the user
 const isDarkTheme = false;
@@ -24,29 +25,62 @@ const { Content } = await post.render();
 const hasImage = post.data.cover;
 ---
 
-<Layout title={post.data.title}>
-	<div class="flex flex-col items-center justify-center min-h-screen mt-8">
-		<article
-			class={`prose ${isDarkTheme ? "dark:prose-invert" : "prose-slate"}`}
+<div class="max-w-3xl mx-auto">
+	<Navbar />
+	<Layout title={post.data.title}>
+		<div
+			class="flex flex-col items-center justify-center min-h-screen mt-8"
 		>
-			{
-				hasImage && (
-					<Image
-						class="object-cover object-center !m-0 aspect-square block"
-						src={post.data.cover}
-						alt={post.data.title}
-						width={600}
-						height={600}
-					/>
-				)
-			}
-			<h1 class="md:!text-5xl md:!leading-[1.2] color-pink-500">
-				{post.data.title}
-			</h1>
-			<p class="lead">{post.data.excerpt}</p>
-			<div>
-				<Content />
-			</div>
-		</article>
-	</div>
-</Layout>
+			<article
+				class={`prose ${isDarkTheme ? "dark:prose-invert" : "prose-slate"}`}
+			>
+				{
+					hasImage && (
+						<Image
+							class="object-cover object-center !m-0 aspect-square block"
+							src={post.data.cover}
+							alt={post.data.title}
+							width={600}
+							height={600}
+						/>
+					)
+				}
+				<h1
+					id="title"
+					class="md:!text-5xl md:!leading-[1.2] color-pink-500"
+				>
+					{post.data.title}
+				</h1>
+				<p class="lead">{post.data.excerpt}</p>
+				<div>
+					<Content />
+				</div>
+			</article>
+		</div>
+	</Layout>
+</div>
+
+<style>
+	#title {
+		font-family: "Noto Serif Georgia";
+		font-size: 24px;
+		weight: regular;
+	}
+
+	#post-title {
+		font-family: "Noto Serif Georgia";
+		font-size: 24px;
+	}
+
+	#post-date {
+		font-family: "IBM Plex Mono", monospace;
+		font-size: 14px;
+		font-weight: 400;
+		color: #929292;
+	}
+
+	#post-preview {
+		font-family: "IBM Plex Mono", monospace;
+		font-size: 14px;
+	}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,19 +1,14 @@
 ---
 import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
+import Navbar from "../components/Navbar.astro";
 
 const allPosts = await getCollection("posts");
 ---
 
 <body>
   <div class="max-w-3xl mx-auto">
-    <nav class="flex justify-between mt-10 mb-14">
-      <a id="logo" href="/">marcelarie</a>
-      <div id="right-navbar" class="flex space-x-4 self-center">
-        <a href="/about">About</a>
-        <a href="/projects">Projects</a>
-      </div>
-    </nav>
+    <Navbar />
     <Layout title="marcelarie">
       <main>
         {