Initial commit

src/lib/components/Footer.svelte

@@ -0,0 +1,37 @@
+<!-- Footer.svelte -->
+<footer>
+	<a href="/">Home</a>
+
+	<nav>
+		<ul>
+			<li>
+				<a href="/about">About</a>
+			</li>
+			<li>
+				<a href="/contact">Contact</a>
+			</li>
+		</ul>
+	</nav>
+</footer>
+
+<style>
+	footer {
+		padding: 1rem;
+		background: lightskyblue;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	ul {
+		margin: 0;
+		list-style-type: none;
+		display: flex;
+		gap: 1rem;
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+</style>

src/lib/components/Header.svelte

@@ -0,0 +1,36 @@
+<!-- Header.svelte -->
+<header>
+	<a href="/"><img src="/favicon.png" alt="logo" width="50" height="50" /></a>
+	<nav>
+		<ul>
+			<li>
+				<a href="/about">About</a>
+			</li>
+			<li>
+				<a href="/contact">Contact</a>
+			</li>
+		</ul>
+	</nav>
+</header>
+
+<style>
+	header {
+		padding: 1rem;
+		background: lightskyblue;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	ul {
+		margin: 0;
+		list-style-type: none;
+		display: flex;
+		gap: 1rem;
+	}
+
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+</style>

src/lib/components/Navbar.svelte

@@ -0,0 +1,49 @@
+<script>
+	let data = import.meta.glob('/src/routes/**/+page.md');
+	let paths = data;
+  
+	function buildHierarchy(paths) {
+		const nestedList = {};
+		let fixedpaths = [];
+		let fixedpaths2 = [];
+		fixedpaths = Object.keys(paths);
+		fixedpaths.forEach((path) => {
+			const fixedpath = path.replace("/+page.md", "").replace("/src/routes", "");
+			fixedpaths2.push(fixedpath);
+		});
+		fixedpaths2.forEach((folder) => {
+			const parts = folder.split('/').filter(Boolean);
+			let currentNode = nestedList;
+
+			parts.forEach((part) => {
+				if (!currentNode[part]) {
+				currentNode[part] = {};
+				}
+				currentNode = currentNode[part];
+			});
+		});
+
+		return nestedList;
+	}
+
+  const nestedFolders = buildHierarchy(paths);
+
+  // Helper function to recursively render the nested list
+  function renderNestedList(node, prefix = '') {
+    return Object.keys(node).map((key) => {
+      const fullPath = `${prefix}/${key}`;
+      return `<li><a href="${fullPath}">${key}</a><ul>${renderNestedList(node[key], fullPath)}</ul></li>`;
+    }).join('');
+  }
+
+  const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
+</script>
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<h1>Pages</h1>
+			{@html renderedList}
+		</div>
+	</div>
+</div>

src/lib/styles/style.css

@@ -0,0 +1,34 @@
+/* style.css */
+body {
+	margin: 0;
+	background: #eee;
+	color: #333;
+	font-family: sans-serif;
+}
+
+main {
+	padding: 1rem;
+	margin: 2rem auto;
+	max-width: 40rem;
+}
+
+.column {
+	float: left;
+	padding: 10px;
+	height: auto;
+	display: table-cell;
+  }
+
+  .navbar {
+	border-right: black solid 1px;
+  }
+
+  .container {
+	display: table;
+  }
+  
+  .row:after {
+	content: "";
+	display: table;
+	clear: both;
+  }

src/lib/utils/index.js

@@ -0,0 +1,15 @@
+export const fetchMarkdownPages = async () => {
+	const allPageFiles = import.meta.glob('/src/routes/**/+page.md');
+	const iterablePageFiles = Object.entries(allPageFiles);
+	const allPages = await Promise.all(
+		iterablePageFiles.map(async ([path]) => {
+			const pagePath = path.slice(11, -3);
+
+			return {
+				path: pagePath
+			};
+		})
+	);
+
+	return allPages;
+};