feat: enhance build process and improve layout; add navigation component and blog page

Author: saaqi

package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build --emptyOutDir",
+		"build": "prettier --write . && vite build --emptyOutDir",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"format": "prettier --write .",

src/lib/components/Navigation.svelte

@@ -0,0 +1,74 @@
+<script>
+	import { onMount } from 'svelte';
+	import logo from '$lib/assets/logo.svg';
+	onMount(async () => {
+		// Only runs in browser
+		await import('bootstrap/js/dist/dropdown.js');
+		await import('bootstrap/js/dist/collapse.js');
+		// await import('bootstrap/js/dist/scrollspy.js');
+	});
+
+	// Navigation links
+	// You can add more links here
+	const navLinks = [
+		{ name: 'Home', href: '/' },
+		{ name: 'Blog', href: '/blog' }
+	];
+</script>
+
+{#snippet navigationLinks(name, href)}
+	{#each navLinks as { name, href }}
+		{#if href && name}
+			<li class="nav-item text-uppercase fw-medium bg-body px-2 rounded">
+				<a class="nav-link" {href} aria-current="page">{name}</a>
+			</li>
+		{/if}
+	{/each}
+{/snippet}
+
+<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top shadow-sm">
+	<div class="container px-3 py-2">
+		<a class="navbar-brand me-5" href="/" aria-label="Svelte + Bootstrap by Saaqi">
+			<img src={logo} class="img-fluid navLogo" alt="Svelte + Bootstrap by Saaqi" />
+		</a>
+		<button
+			class="navbar-toggler"
+			type="button"
+			data-bs-toggle="collapse"
+			data-bs-target="#navbarNavDropdown"
+			aria-controls="navbarNavDropdown"
+			aria-expanded="false"
+			aria-label="Toggle navigation"
+		>
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarNavDropdown">
+			<ul class="navbar-nav gap-3 pt-lg-0 pt-3">
+				{@render navigationLinks(navLinks)}
+				<!-- <li class="nav-item dropdown">
+					<a
+						class="nav-link dropdown-toggle"
+						href="#home"
+						role="button"
+						data-bs-toggle="dropdown"
+						aria-expanded="false"
+					>
+						Dropdown link
+					</a>
+					<ul class="dropdown-menu">
+						<li><a class="dropdown-item" href="#home">Action</a></li>
+						<li><a class="dropdown-item" href="#home">Another action</a></li>
+						<li><a class="dropdown-item" href="#home">Something else here</a></li>
+					</ul>
+				</li> -->
+			</ul>
+		</div>
+	</div>
+</nav>
+
+<style>
+	.navLogo {
+		width: 60px;
+		height: auto;
+	}
+</style>

src/lib/components/TextInput.svelte

@@ -13,7 +13,7 @@
 		rows="3"
 	></textarea>
 </div>
-<div class="inputTextOutput bg-light text-bg-light rounded-3 border-1 border-black">
+<div class="inputTextOutput bg-light text-bg-light rounded-3 border-1 border-black mb-3">
 	{inputText}
 </div>
 

src/lib/styles/style.scss

@@ -1,5 +1,5 @@
 .svh-100 {
-	min-height: 100svh !important;
-	display: flex;
 	align-items: center;
+	display: flex;
+	min-height: calc(100svh - 80px);
 }

src/routes/+page.svelte

@@ -1,14 +1,17 @@
 <script>
+	import Navigation from '$lib/components/Navigation.svelte';
 	import Counter from '$lib/components/Counter.svelte';
 	import Logos from '$lib/components/Logos.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import TextInput from '$lib/components/TextInput.svelte';
 	import { onMount } from 'svelte';
 
-	let hrefLocation = '';
+	let hrefLocation = $state('');
 	onMount(() => {
 		hrefLocation = window.location.href;
 	});
+
+	let textBoxToggle = $state(false);
 </script>
 
 <svelte:head>
@@ -19,15 +22,16 @@
 	/>
 </svelte:head>
 
-<main class="svh-100 py-5">
-	<div class="container">
+<Navigation />
+<main class="svh-100">
+	<div id="home" class="container py-2">
 		<div class="d-flex flex-column gap-3">
-			<h1 class="">Welcome to SvelteKit + Bootstrap by Saaqi</h1>
-
-			<div class="d-flex gap-5">
+			<div class="d-flex gap-5 my-4">
 				<Logos />
 			</div>
 
+			<h1>Welcome to SvelteKit + Bootstrap by Saaqi</h1>
+
 			<div class="col-12 col-md-6">
 				<div class="row g-2">
 					<div class="col-6">
@@ -52,8 +56,17 @@
 							Google PageSpeed Report
 						</a>
 					</div>
+
 					<div class="col-12">
-						<TextInput />
+						{#if textBoxToggle}
+							<TextInput />
+						{/if}
+						<button
+							class="btn btn-{!textBoxToggle ? `secondary` : `light`}"
+							onclick={() => (textBoxToggle = !textBoxToggle)}
+						>
+							{!textBoxToggle ? 'Show' : 'Hide'} Text Input
+						</button>
 					</div>
 				</div>
 			</div>

src/routes/blog/+page.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Navigation from '$lib/components/Navigation.svelte';
+</script>
+
+<svelte:head>
+	<title>Blog - Svelte + Bootstrap by Saaqi</title>
+	<meta
+		name="description"
+		content="This template should help get you started developing with Sveltekit with bootstrap."
+	/>
+</svelte:head>
+
+<Navigation />
+<main class="mt-3">
+	<div class="container">
+		<h1>Blog</h1>
+		<p>Welcome to the blog page!</p>
+		<p>Here you can find various articles and posts.</p>
+		<p>Stay tuned for more updates!</p>
+		<slot></slot>
+		<p>End of blog content.</p>
+		<p>Thank you for visiting!</p>
+		<slot name="footer"></slot>
+	</div>
+</main>

vite.config.js

@@ -21,8 +21,8 @@ export default defineConfig({
 				// `${bootstrap}/js/dist/base-component.js`,
 				// `${bootstrap}/js/dist/button.js`,
 				// `${bootstrap}/js/dist/carousel.js`,
-				// `${bootstrap}/js/dist/collapse.js`,
-				// `${bootstrap}/js/dist/dropdown.js`,
+				`${bootstrap}/js/dist/collapse.js`,
+				`${bootstrap}/js/dist/dropdown.js`,
 				`${bootstrap}/js/dist/modal.js`
 				// `${bootstrap}/js/dist/offcanvas.js`,
 				// `${bootstrap}/js/dist/popover.js`,
@@ -65,7 +65,7 @@ export default defineConfig({
 		}
 	},
 
-	base: './',
+	// base: './',
 	server: {
 		port: 3000
 	},