refactor: distinctive re-use of site header and navbar rename

src/lib/components/site/index.ts

@@ -1,5 +1,6 @@
 export { default as Metadata } from './metadata.svelte';
 export { default as SiteFooter } from './site-footer.svelte';
+export { default as SiteNavBar } from './site-navbar.svelte';
 export { default as SiteHeader } from './site-header.svelte';
 export { default as TailwindIndicator } from './tailwind-indicator.svelte';
 export { default as ModeToggle } from './mode-toggle.svelte';

src/lib/components/site/site-header.svelte

@@ -1,52 +1,12 @@
 <script lang="ts">
-	import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
-	import { siteConfig } from '$lib/config/site';
-	import { cn } from '$lib/utils';
-	import { buttonVariants } from '../ui/button';
+	import * as PageHeader from './page-header';
+	export let title: string, subTitle: string;
 </script>
 
-<header
-	class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
->
-	<div class="container flex h-14 items-center">
-		<a href="/" class="mr-6 flex items-center space-x-2">
-			<span class="sr-only">Logo (return home)</span>
-			<Icons.logo />
-		</a>
-		<MainNav />
-		<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
-			<nav class="flex">
-				<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
-					<div
-						class={cn(
-							buttonVariants({
-								size: 'sm',
-								variant: 'ghost'
-							}),
-							'h-9 w-9 px-0'
-						)}
-					>
-						<Icons.gitHub class="h-4 w-4" />
-						<span class="sr-only">GitHub</span>
-					</div>
-				</a>
-				<a href={siteConfig.links.linkedIn} target="_blank" rel="noreferrer">
-					<div
-						class={cn(
-							buttonVariants({
-								size: 'sm',
-								variant: 'ghost'
-							}),
-							'h-9 w-9 px-0'
-						)}
-					>
-						<Icons.linkedIn class="h-4 w-4" />
-						<span class="sr-only">LinkedIn</span>
-					</div>
-				</a>
-				<ModeToggle />
-			</nav>
-		</div>
-		<MobileNav />
-	</div>
-</header>
+<PageHeader.Root class="pb-8">
+	<PageHeader.Heading>{title}</PageHeader.Heading>
+	<PageHeader.Description>
+		{subTitle}
+	</PageHeader.Description>
+	<slot />
+</PageHeader.Root>

src/lib/components/site/site-navbar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
+	import { siteConfig } from '$lib/config/site';
+	import { cn } from '$lib/utils';
+	import { buttonVariants } from '../ui/button';
+</script>
+
+<header
+	class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div class="container flex h-14 items-center">
+		<a href="/" class="mr-6 flex items-center space-x-2">
+			<span class="sr-only">Logo (return home)</span>
+			<Icons.logo />
+		</a>
+		<MainNav />
+		<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
+			<nav class="flex">
+				<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
+					<div
+						class={cn(
+							buttonVariants({
+								size: 'sm',
+								variant: 'ghost'
+							}),
+							'h-9 w-9 px-0'
+						)}
+					>
+						<Icons.gitHub class="h-4 w-4" />
+						<span class="sr-only">GitHub</span>
+					</div>
+				</a>
+				<a href={siteConfig.links.linkedIn} target="_blank" rel="noreferrer">
+					<div
+						class={cn(
+							buttonVariants({
+								size: 'sm',
+								variant: 'ghost'
+							}),
+							'h-9 w-9 px-0'
+						)}
+					>
+						<Icons.linkedIn class="h-4 w-4" />
+						<span class="sr-only">LinkedIn</span>
+					</div>
+				</a>
+				<ModeToggle />
+			</nav>
+		</div>
+		<MobileNav />
+	</div>
+</header>

src/routes/+error.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import * as PageHeader from '$lib/components/site/page-header';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 	import johnTravoltaGif from '$lib/assets/john-travolta.gif';
+	import { page } from '$app/stores';
+	import { SiteHeader } from '$lib/components/site';
 </script>
 
-<div class="container relative max-w-[980px] pb-10">
-	<PageHeader.Root>
-		<PageHeader.Heading>{$page.error?.message}</PageHeader.Heading>
-		<PageHeader.Description>This page is not available.</PageHeader.Description>
+<SiteHeader
+	title={`${$page.error?.message}`}
+	subTitle={`This page is currently unavailable. Please try again later.`}
+>
 	<p class="text-sm text-orange-700 dark:text-orange-400">
 		You can try going back to the home page.
 	</p>
 	<div class="flex w-full items-center justify-center space-x-4 py-4">
 		<a href="/" class={cn(buttonVariants())}> Return Home </a>
 	</div>
-	</PageHeader.Root>
+</SiteHeader>
+
 <section class="flex">
 	<img src={johnTravoltaGif} alt="John travolta unable to find your page" class="mx-auto w-1/2" />
 </section>
-</div>

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { dev } from '$app/environment';
-	import { Metadata, SiteFooter, SiteHeader, TailwindIndicator } from '$lib/components/site';
+	import { Metadata, SiteFooter, SiteNavBar, TailwindIndicator } from '$lib/components/site';
 	import '../styles/globals.css';
 	import { ModeWatcher } from 'mode-watcher';
 	import { fly } from 'svelte/transition';
@@ -17,8 +17,8 @@
 <Metadata />
 
 <div class="relative flex min-h-screen flex-col" id="page">
-	<SiteHeader />
-	<main class="mb-4 flex-1">
+	<SiteNavBar />
+	<main class="container relative mb-4 max-w-[980px] flex-1">
 		{#key data.url}
 			<div in:fly={{ x: -200, duration: 200, delay: 200 }} out:fly={{ x: 200, duration: 200 }}>
 				<slot />

src/routes/+page.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
-	import * as PageHeader from '$lib/components/site/page-header';
-	import { ImageFade } from '$lib/components/site';
-	import { Icons } from '$lib/components/site/icons';
+	import { page } from '$app/stores';
+	import { Icons, ImageFade } from '$lib/components/site';
+	import { SiteHeader } from '$lib/components/site';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import { siteConfig } from '$lib/config/site';
 	import { cn } from '$lib/utils';
+
+	$: title = $page.data.title;
+	$: subTitle = $page.data.subTitle;
 </script>
 
-<div class="container relative max-w-[980px] pb-10">
-	<PageHeader.Root class="pb-8">
-		<PageHeader.Heading>I made this for you</PageHeader.Heading>
-		<PageHeader.Description>
-			Featuring current work and studies in a SvelteKit-based portfolio.
-		</PageHeader.Description>
+<SiteHeader {title} {subTitle}>
 	<p class="text-center text-sm text-green-700 dark:text-green-400">
 		Inspired by others, I share my open-source derived work with the community.
 	</p>
@@ -28,9 +26,9 @@
 			GitHub
 		</a>
 	</div>
-	</PageHeader.Root>
+</SiteHeader>
 <section class="flex">
-		<div class="border-grey/15 relative border-y pb-16 pt-10 dark:border-white/20">
+	<div class="border-grey/15 relative border-t pb-16 pt-10 dark:border-white/20">
 		<div
 			class="pointer-events-none absolute left-[00%] top-0 h-40 w-[100%] select-none overflow-hidden"
 		>
@@ -45,10 +43,10 @@
 		<div class="text-md mt-12 flex flex-col gap-8 md:flex-row">
 			<div class="flex-1 empty:hidden">
 				<p>
-						I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started
-						my journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning
-						and adopting Python, Javascript and Linux. These days, I'm also working alot with
-						Terraform, Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
+					I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started my
+					journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning and
+					adopting Python, Javascript and Linux. These days, I'm also working alot with Terraform,
+					Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
 				</p>
 				<p class="mt-2">
 					Over at <a
@@ -56,19 +54,19 @@
 						rel="noreferrer"
 						class="font-medium underline underline-offset-4"
 						href="https://www.wearetriple.com">Triple</a
-						>, my role involves providing services to clients including HEINEKEN, BAM, and citizenM.
-						I utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain
-						robust, scalable cloud infrastructures. For operational purposes, I employ technologies
-						like SaltStack, PRTG, and LogicMonitor.
+					>, my role involves providing services to clients including HEINEKEN, BAM, and citizenM. I
+					utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain robust,
+					scalable cloud infrastructures. For operational purposes, I employ technologies like
+					SaltStack, PRTG, and LogicMonitor.
 				</p>
 				<p class="mt-2">
-						I love to work on personal projects or playing games with friends. Beyond the screens,
-						you can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
+					I love to work on personal projects or playing games with friends. Beyond the screens, you
+					can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
 				</p>
 				<p class="mt-2">
-						When the dust settles, my life is all about sharing laughs with my oversized cat and
-						with my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or
-						down to help.
+					When the dust settles, my life is all about sharing laughs with my oversized cat and with
+					my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or down
+					to help.
 				</p>
 			</div>
 
@@ -78,4 +76,3 @@
 		</div>
 	</div>
 </section>
-</div>

src/routes/+page.ts

@@ -1,6 +1,8 @@
 /** @type {import('./$types').PageLoad} */
 export function load() {
 	return {
-		title: `Home`
+		name: `Home`,
+		title: `I made this for you`,
+		subTitle: `Featuring current work and studies in a SvelteKit-based portfolio.`
 	};
 }

src/routes/projects/+page.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import * as PageHeader from '$lib/components/site/page-header';
 	import { Projects } from '$lib/components/site/projects';
+	import { page } from '$app/stores';
+	import { SiteHeader } from '$lib/components/site';
+
+	$: title = $page.data.title;
+	$: subTitle = $page.data.subTitle;
 </script>
 
-<div class="container relative max-w-[980px]">
-	<PageHeader.Root class="pb-8">
-		<PageHeader.Heading>Projects I've realized</PageHeader.Heading>
-		<PageHeader.Description>
-			Explore some of the projects I worked on in the past.
-		</PageHeader.Description>
-	</PageHeader.Root>
+<SiteHeader {title} {subTitle} />
 
 <section class="flex justify-center">
 	<Projects />
 </section>
-</div>

src/routes/projects/+page.ts

@@ -1,6 +1,8 @@
 /** @type {import('./$types').PageLoad} */
 export function load() {
 	return {
-		title: `Projects`
+		name: `Projects`,
+		title: `Projects Ive realized`,
+		subTitle: `Explore some of the projects I worked on in the past.`
 	};
 }

src/routes/timeline/+page.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import * as PageHeader from '$lib/components/site/page-header';
 	import { Timeline } from '$lib/components/site/timeline';
+	import { page } from '$app/stores';
+	import { SiteHeader } from '$lib/components/site';
+
+	$: title = $page.data.title;
+	$: subTitle = $page.data.subTitle;
 </script>
 
-<div class="container relative max-w-[980px]">
-	<PageHeader.Root class="pb-8">
-		<PageHeader.Heading>Experiences through time</PageHeader.Heading>
-		<PageHeader.Description>
-			Achievements in my education, career and personal life.
-		</PageHeader.Description>
-	</PageHeader.Root>
+<SiteHeader {title} {subTitle} />
 
 <section>
 	<Timeline />
 </section>
-</div>

src/routes/timeline/+page.ts

@@ -1,6 +1,8 @@
 /** @type {import('./$types').PageLoad} */
 export function load() {
 	return {
-		title: `Timeline`
+		name: `Timeline`,
+		title: `Experiences through time`,
+		subTitle: `Achievements in my education, career and personal life.`
 	};
 }

src/routes/tools/+page.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import * as PageHeader from '$lib/components/site/page-header';
 	import { Tools } from '$lib/components/site/tools';
+	import { page } from '$app/stores';
+	import { SiteHeader } from '$lib/components/site';
+
+	$: title = $page.data.title;
+	$: subTitle = $page.data.subTitle;
 </script>
 
-<div class="container relative max-w-[980px]">
-	<PageHeader.Root class="pb-8">
-		<PageHeader.Heading>Inside my toolbox</PageHeader.Heading>
-		<PageHeader.Description>
-			Tools, applications, and software that fuels my development and operations work.
-		</PageHeader.Description>
-	</PageHeader.Root>
+<SiteHeader {title} {subTitle} />
 
 <section class="flex justify-center">
 	<Tools />
 </section>
-</div>

src/routes/tools/+page.ts

@@ -1,6 +1,8 @@
 /** @type {import('./$types').PageLoad} */
 export function load() {
 	return {
-		title: `Tools`
+		name: `Tools`,
+		title: `Inside my toolbox`,
+		subTitle: `Tools, applications, and software that fuels my development and operations work.`
 	};
 }