feat: Render disabled links

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" },
 ];

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 {

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>

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)}
+		<a
+			class="nav-link"
+			class:current-link={isCurrentLink($page.url.pathname, item.route)}
+			class:disabled-link={item.disabled}
 			href={item.route}>{item.name}</a>
-		{/if}
 	{/each}
 </div>
 

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>

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">