src/content/archives.md

@@ -1,3 +0,0 @@
-# Archives
-
-Archives live here

src/content/extra/archives.md

@@ -0,0 +1,6 @@
+---
+title: Archives Custom Title
+---
+# Archives
+
+Archives live here

src/content/metadata.json

@@ -9,5 +9,8 @@
 		"github": "https://github.com",
 		"email": "email:cirno@gensokyo.jp",
 		"orcid": "https://orcid.org/cirno"
-	}
+	},
+	"extra": [
+		{ "route": "/archives", "name": "Archives" }
+	]
 }

src/lib/sitemap.ts

@@ -1,7 +1,8 @@
+import siteMetadata from '$content/metadata.json';
+
 export const routes: { route: string, name: string, disabled?: boolean }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
 	{ route: "/tag", name: "Tags" },
 	{ route: "/gallery", name: "Gallery", disabled: true },
-	{ route: "/archives", name: "Archives" },
+].concat(siteMetadata?.extra || []);
-];

src/routes/+layout.svelte

@@ -103,6 +103,7 @@
 	@media (max-width: 700px) {
 		#layout {
 			flex-direction: column;
+			margin-top: 10px;
 			gap: 20px;
 		}
 	}

src/routes/+page.svelte

@@ -49,13 +49,12 @@
 			class="floater-elem"
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
-			<div class="flex h-5 items-center space-x-4 text-sm">
+			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
-				<a class="navbar-link" href="#bio">Bio</a>
+				<a href="#bio">Bio</a>
-				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a class="navbar-link" href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
 					{/if}
 				{/each}
 				<a class="icon" href="/rss.xml"><Rss /></a>
@@ -101,8 +100,8 @@
 		background-position: center center;
 		z-index: -10;
 		position: fixed;
-		min-width: 100vw;
+		min-width: 100%;
-		min-height: 100vh;
+		min-height: 100%;
 		overscroll-behaviour: none;
 	}
 	#front {
@@ -119,6 +118,10 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
+	#navbar {
+		display: flex;
+		flex-wrap: wrap;
+	}
 	.floater-elem {
 		margin-left: auto;
 		margin-right: auto;

src/routes/Navbar.svelte

@@ -37,8 +37,11 @@
 	}
 	@media (max-width: 700px) {
 		#navbar {
-			flex-direction: row;
+			display: inline-block;
-			justify-content: start;
+			white-space: pre-wrap;
+		}
+		#navbar .nav-link {
+			display: inline-block;
 		}
 	}
 </style>

src/routes/[slug]/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	const { Content } = data;
+	const { slug, metadata, Content } = data;
 	import siteMetadata from '$content/metadata.json';
+
+	const title = metadata?.title || (slug[0].toUpperCase() + slug.slice(1));
 </script>
 
 <svelte:head>
-	<title>Archives | {siteMetadata.blogName}</title>
+	<title>{title} | {siteMetadata.blogName}</title>
 </svelte:head>
 
 <hr />

src/routes/[slug]/+page.ts

@@ -0,0 +1,12 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const post = await import(`$content/extra/${params.slug}.md`);
+	const Content = post.default;
+
+	return {
+		slug: params.slug,
+		metadata: post.metadata,
+		Content,
+	};
+}

src/routes/archives/+page.ts

@@ -1,11 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async (_) => {
-	const post = await import("$content/archives.md");
-	const Content = post.default;
-
-	return {
-		metadata: post.metadata,
-		Content,
-	};
-}