added a changelog section

src/lib/nav.svelte

@@ -7,6 +7,7 @@
 	<nav class="nav">
 		<a href="/">Home</a>
 		<a href="/posts">Posts</a>
+		<a href="/changelog">Changelog</a>
 	</nav>
 {/snippet}
 

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <title>Doloro's Site (Which resides on the internet)</title>
+
 <div>
 	<h1>hi</h1>
 </div>

src/routes/changelog/+page.server.ts

@@ -0,0 +1,53 @@
+export const prerender = true;
+
+import { execSync } from 'child_process';
+
+const GITLOGCMD = `
+git log --pretty=format:"COMMIT:%h|%ad|%s|%an|%aE" --all --numstat --date=unix | awk '
+                                                  /^COMMIT:/ {
+                                                    if (commit) print commit "|" add "|" del
+                                                    commit = substr($0, 8)
+                                                    add = 0; del = 0
+                                                  }
+                                                  /^[0-9]/ { add += $1; del += $2 }
+                                                  END { if (commit) print commit "|" add "|" del }'
+
+`
+
+// Example Commit Output
+// 2c72bac|1779833088|just file, docker file and website css fixes|Doloro1978|doloroo@proton.me|39|2
+
+export type commit = {
+	hash: string,
+	date: Date,
+	title: string,
+	auther: string,
+	email: string,
+	additions: number,
+	deletions: number,
+}
+
+export async function load() {
+	const raw = execSync(GITLOGCMD).toString();
+	const lines = raw.split('\n');
+	// console.log(lines);
+	const commits: commit[] = []
+	for (var x of lines) {
+		const [hash, unix, title, auther, email, add, del] = x.split("|")
+		var date = new Date(+unix * 1000);
+		commits.push({
+			hash: hash,
+			date: date,
+			title: title,
+			auther: auther,
+			email: email,
+			additions: +add,
+			deletions: +del,
+		})
+	}
+	return {
+		data: {
+			commits: commits
+		}
+	};
+}

src/routes/changelog/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { commitCard } from "./commitCard.svelte";
+
+	let { data } = $props();
+	let commits = data.data.commits;
+	import "./card.scss";
+</script>
+
+<table class="commitContainer">
+	<caption>Git Commits of the website repo</caption>
+	<tbody>
+		{#each commits as commit}
+			{@render commitCard(commit)}
+		{/each}
+	</tbody>
+</table>

src/routes/changelog/card.scss

@@ -0,0 +1,38 @@
+.commitContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+}
+
+.commitCard {
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  padding: 3px;
+  background-color: var(--card-raised);
+  border-width: 3px;
+  border-style: outset;
+  border-color: var(--card-border);
+  width: fit-content;
+}
+
+.boxedUp {
+  border-width: 2px;
+  border-style: inset;
+  border-color: black;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.additions {
+  background-color: var(--success);
+}
+
+.deletions {
+  background-color: var(--error);
+}
+
+.field {
+  background-color: var(--card-field);
+}

src/routes/changelog/commitCard.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import { commit } from "./+page.server.ts";
+	import "./card.scss";
+	export { commitCard };
+</script>
+
+{#snippet commitCard(commit: commit)}
+	{#if commit.additions}
+		<tr class="boxedUp field">
+			<th scope="row" class="boxedUp field">
+				{commit.hash}
+			</th>
+			<th class="boxedUp field">
+				{commit.title}
+			</th>
+			<th class="boxedUp field">
+				{commit.date.getDate()}/{commit.date.getUTCMonth()}/{commit.date.getUTCFullYear()}
+				- {#if commit.date.getUTCHours() < 10}0{/if}{commit.date.getHours()}:{#if commit.date.getUTCMinutes() < 10}0{/if}{commit.date
+					.getUTCMinutes()
+					.toString()}
+			</th>
+			<th class="boxedUp additions">
+				+{commit.additions}
+			</th>
+			<th class="boxedUp deletions">
+				-{commit.deletions}
+			</th>
+		</tr>
+	{/if}
+{/snippet}