From d1cc88397b700cda353f126b123e141f151258d0 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 29 Sep 2024 17:39:40 -0700
Subject: [PATCH] feat: Render disabled links

---
 src/lib/sitemap.ts                  |  5 ++--
 src/routes/+layout.svelte           |  5 ++--
 src/routes/+page.svelte             |  6 +---
 src/routes/Navbar.svelte            | 15 ++++------
 src/routes/page/[slug]/+page.svelte | 43 ++++++++++++++++++++++-------
 src/routes/post/[slug]/+page.svelte |  4 +--
 6 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/lib/sitemap.ts b/src/lib/sitemap.ts
index 34c2365..97f9051 100644
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -1,6 +1,7 @@
-export const routes: { route: string, name: string, inactive?: boolean }[] = [
+export const routes: { route: string, name: string, disabled?: boolean }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
-	{ route: "/art", name: "Art", inactive: true },
+	{ route: "/tag", name: "Tags", disabled: true },
+	{ route: "/gallery", name: "Gallery", disabled: true },
 	{ route: "/archives", name: "Archives" },
 ];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index fa257e3..7170bf9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -36,8 +36,9 @@
 		font-weight: 500;
 		font-family: serif;
 	}
-	:global(p.nav-link) {
+	:global(a.disabled-link) {
 		color: rgb(128,128,128);
+		pointer-events: none;
 	}
 	:global(a) {
 		color: theme('colors.eucalyptus.400');
@@ -72,7 +73,7 @@
 			}
 		}
 	}
-	:global(a.active-link) {
+	:global(a.current-link) {
 		color: theme('colors.magenta.500');
 
 		&::after {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 89861ee..f8c035e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -53,11 +53,7 @@
 				{#each routes as item}
 					{#if item.route !== "/"}
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
-						{#if item.inactive ?? false}
-							<p class="navbar-link">{item.name}</p>
-						{:else}
-							<a class="navbar-link" href={item.route}>{item.name}</a>
-						{/if}
+						<a class="navbar-link" href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
 					{/if}
 				{/each}
 			</div>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 4e29a33..a4339de 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -2,21 +2,18 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 
-	function isActiveLink(pathname, route) {
+	function isCurrentLink(pathname, route) {
 		return route != "/" && pathname.startsWith(route);
 	}
 </script>
 
 <div id="navbar" class="h-5 space-x-4">
 	{#each routes as item}
-		{#if item.inactive ?? false}
-			<p class="nav-link"
-				>{item.name}</p>
-		{:else}
-			<a class="nav-link"
-				 class:active-link={isActiveLink($page.url.pathname, item.route)}
-				 href={item.route}>{item.name}</a>
-		{/if}
+		<a
+			class="nav-link"
+			class:current-link={isCurrentLink($page.url.pathname, item.route)}
+			class:disabled-link={item.disabled}
+			href={item.route}>{item.name}</a>
 	{/each}
 </div>
 
diff --git a/src/routes/page/[slug]/+page.svelte b/src/routes/page/[slug]/+page.svelte
index 5b6b4ee..06aba2b 100644
--- a/src/routes/page/[slug]/+page.svelte
+++ b/src/routes/page/[slug]/+page.svelte
@@ -4,8 +4,11 @@
 	const { posts, pageN, maxPageN } = data;
 	import siteMetadata from '$content/metadata.json';
 
-	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight, DotsHorizontal } from 'svelte-radix';
+	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
 	import PostHeader from '$lib/components/PostHeader.svelte';
+
+	const disableLinkPrev = pageN == 1;
+	const disableLinkNext = pageN == maxPageN;
 </script>
 
 <svelte:head>
@@ -21,20 +24,40 @@
 	{/each}
 </ul>
 <hr class="separator" />
-<div id="pagenum">
-	<a class="nav-link icon" href="/page/1"><DoubleArrowLeft /></a>
-	<a class="nav-link icon" href="/page/{pageN-1}"><ChevronLeft /></a>
-	<p class="nav-link icon"><DotsHorizontal/></p>
-	<a class="nav-link icon" href="/page/{pageN+1}"><ChevronRight /></a>
-	<a class="nav-link icon" href="/page/{maxPageN}"><DoubleArrowRight /></a>
+<div id="page-navigator">
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkPrev}
+		href="/page/1"><DoubleArrowLeft /></a>
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkPrev}
+		href="/page/{pageN-1}"><ChevronLeft /></a>
+	<div id="page-map">
+		<p id="page-num">{pageN}/{maxPageN}</p>
+	</div>
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkNext}
+		href="/page/{pageN+1}"><ChevronRight /></a>
+	<a
+		class="nav-link icon"
+		class:disabled-link={disableLinkNext}
+		href="/page/{maxPageN}"><DoubleArrowRight /></a>
 </div>
 
 <style>
-	#pagenum {
+	#page-navigator {
 		display: flex;
 		flex-direction: horizontal;
 		justify-content: space-between;
-		margin-left: 6em;
-		margin-right: 6em;
+		margin: 1em 6em 1em 6em;
+		align-items: center;
+	}
+	#page-map {
+		display: inline-block;
+	}
+	#page-num {
+		color: rgb(128,128,128);
 	}
 </style>
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index 80f44ee..e25a1a1 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -3,14 +3,14 @@
 	export let data: PageData;
 	const { metadata, Content } = data;
 	import siteMetadata from '$content/metadata.json';
-	import Heading from '../Heading.svelte';
+	import PostHeader from '$lib/components/PostHeader.svelte';
 </script>
 
 <svelte:head>
 	<title>{metadata.title} | {siteMetadata.blogName}</title>
 </svelte:head>
 
-<Heading metadata={metadata}/>
+<PostHeader metadata={metadata}/>
 
 <hr />
 <article class="prose lg:prose-xl dark:prose-invert p-4">