feat: Vertical navbar and blog layout

src/app.css

@@ -81,5 +81,6 @@
 }
 html {
   scroll-behavior: smooth;
+  overscroll-behavior: none;
 }
 

src/content/post/placeholder1.md

@@ -12,6 +12,8 @@ Here is some placeholder text
 ### 3rd level heading
 #### 4th level heading
 
+Markdown `inline code`
+
 > This is a quote
 
 ```python

src/lib/sitemap.ts

@@ -0,0 +1,6 @@
+export const routes: { route: string, name: string, inactive?: boolean }[] = [
+	{ route: "/", name: "Home" },
+	{ route: "/post", name: "Blog" },
+	{ route: "/art", name: "Art", inactive: true },
+	{ route: "/archives", name: "Archives" },
+];

src/routes/+layout.svelte

@@ -1,30 +1,33 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/stores';
-	import { Separator } from "$lib/components/ui/separator/index.js";
 	import Footer from "./Footer.svelte";
-	import { routes } from "./sitemap.ts"
+	import Navbar from "./Navbar.svelte";
 </script>
 
 <!-- Homepage has its own navbar with animations -->
 {#if $page.url.pathname != "/"}
-	<div id="navbar">
+	<div id="layout">
-		<div class="flex h-5 items-center space-x-4 text-sm">
+		<div id="navbar">
-			{#each routes as item, i}
+			<Navbar />
-				{#if i > 0}
+		</div>
-					<Separator orientation="vertical" />
+		<div id="content">
-				{/if}
+			<slot />
-				<a class="navbar-link" class:active-link={item.route === $page.url.pathname} href={item.route}>{item.name}</a>
-			{/each}
 		</div>
 	</div>
+{:else}
+	<slot />
 {/if}
-<slot />
 <Footer />
 
 <style>
 	:global(.navbar-link) {
 		@apply text-lg;
+		font-weight: 500;
+		font-family: serif;
+	}
+	:global(p.navbar-link) {
+		color: rgb(128,128,128);
 	}
 	:global(a) {
 		color: theme('colors.eucalyptus.400');
@@ -34,10 +37,8 @@
 		}
 	}
 	:global(a):not(.icon) {
-		font-weight: 500;
-		text-decoration: inherit;
-		font-family: serif;
 		position: relative;
+		text-decoration: inherit;
 
 		&::after {
 			content: "";
@@ -61,9 +62,29 @@
 			}
 		}
 	}
-	#navbar {
+	#layout {
+		max-width: max(80vw, 100vh);
 		margin-left: auto;
 		margin-right: auto;
+		margin-top: 50px;
+		gap: 20px;
+		display: flex;
+		justify-content: center;
+		/*
+		display: grid;
+		grid-template-columns: 1fr 3fr;
+		grid-template-areas:
+			"nav content"
+			;
+		*/
+	}
+	#content {
+		width: max(50vw, 100vh);
+		grid-area: content;
+	}
+	#navbar {
+		align-self: right;
 		padding-left: 10px;
+		grid-area: nav;
 	}
 </style>

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { routes } from "./sitemap.ts"
+	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
 	let scrollPosition: number = .5;
 	let scrollHeight: number = 1;
@@ -17,11 +17,15 @@
 
 	import metadata from '$content/metadata.json';
 	const iconMap: Map<string, string> = {
+		"bitbucket": "fa-brands fa-bitbucket",
+		"discord": "fa-brands fa-discord",
+		"email": "fa-solid fa-envelope",
 		"github": "fa-brands fa-github",
+		"gitlab": "fa-brands fa-gitlab",
+		"google-scholar": "fa-brands fa-google-scholar",
+		"instagram": "fa-brands fa-instagram",
 		"open-source": "fa-brands fa-osi",
 		"orcid": "fa-brands fa-orcid",
-		"instagram": "fa-brands fa-instagram",
-		"email": "fa-solid fa-envelope",
 	};
 	const iconLinks: [string, string][] = Object.entries(metadata.links).map(
 		([key, link]) => [iconMap[key], link]);
@@ -39,7 +43,7 @@
 
 <div id="front">
 	<div id="floater">
-		<p class="text-lg floater-elem" style="color: #888">{metadata.frontDescription}</p>
+		<p class="text-2xl floater-elem" style="color: #888">{metadata.frontDescription}</p>
 		<div
 			class="floater-elem"
 				 style="padding-bottom: {(1 - progress) * 50}vh"
@@ -49,7 +53,11 @@
 				{#each routes as item}
 					{#if item.route !== "/"}
 						<Separator orientation="vertical" />
-						<a class="navbar-link" href={item.route}>{item.name}</a>
+						{#if item.inactive ?? false}
+							<p class="navbar-link">{item.name}</p>
+						{:else}
+							<a class="navbar-link" href={item.route}>{item.name}</a>
+						{/if}
 					{/if}
 				{/each}
 			</div>
@@ -127,7 +135,7 @@
 		padding-right: 10px;
 		min-height: 100vh;
 	}
- 	#bio-name {
+	#bio-name {
 		font-family: serif;
 		font-size: 10vh;
 		line-height: 10vh;

src/routes/Navbar.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { routes } from "$lib/sitemap.ts"
+</script>
+
+<div id="navbar" class="h-5 space-x-4 justify-between">
+	{#each routes as item}
+		{#if item.inactive ?? false}
+			<p class="navbar-link"
+				class:active-link={item.route === $page.url.pathname}
+				>{item.name}</p>
+		{:else}
+			<a class="navbar-link"
+				 class:active-link={item.route === $page.url.pathname}
+				 href={item.route}>{item.name}</a>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	#navbar {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+	}
+</style>

src/routes/post/+page.svelte

@@ -9,7 +9,7 @@
 	<title>{metadata.blogName}</title>
 </svelte:head>
 
-<ul id="catalog">
+<ul id="catalog" class="content">
 	{#each allPosts as post}
 		<li id="post-item">
 			<h2>
@@ -19,7 +19,11 @@
 				<p class="text-gray-500">{post.meta.description}</p>
 			</div>
 			<div class="flex flex-row justify-between">
-				<p>tags?</p>
+				<p>
+					{#each (post.meta.tags ?? []) as tag}
+						<a href="/">{tag}</a>
+					{/each}
+				</p>
 				<p class="text-l text-gray-500">{post.meta.date}</p>
 			</div>
 		</li>
@@ -33,9 +37,4 @@
 	#post-title {
 		@apply text-3xl;
 	}
-	#catalog {
-		max-width: max(50vw, 100vh);
-		margin-left: auto;
-		margin-right: auto;
-	}
 </style>

src/routes/sitemap.ts

@@ -1,6 +0,0 @@
-export const routes: { route: string, name: string }[] = [
-	{ route: "/", name: "Home" },
-	{ route: "/post", name: "Blog" },
-	{ route: "/art", name: "Art" },
-	{ route: "/archives", name: "Archives" },
-];