Add Husky for commit hooks

.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+bunx commitlint --config commitlint.config.cjs --edit "${1}"
+

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# bun test

commitlint.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+	extends: ["@commitlint/config-conventional"],
+	parserPreset: "conventional-changelog-conventionalcommits",
+	helpUrl: "",
+	rules: {},
+	prompt: {}
+};

package.json

@@ -2,22 +2,36 @@
 	"name": "karman-web",
 	"version": "0.0.1",
 	"private": true,
+	"config": {
+		"commitizen": {
+			"path": "@commitlint/cz-commitlint"
+		}
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"lint": "prettier --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss --check . && eslint .",
-		"format": "prettier --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss --write ."
+		"format": "prettier --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss --write .",
+		"prepare": "husky install",
+		"commit": "cz"
 	},
 	"devDependencies": {
+		"@commitlint/cli": "^17.7.1",
+		"@commitlint/config-conventional": "^17.7.0",
+		"@commitlint/cz-commitlint": "^17.7.1",
 		"@sveltejs/kit": "^1.24.1",
 		"@types/node": "^20.6.0",
 		"autoprefixer": "^10.4.15",
+		"commitizen": "^4.3.0",
+		"cz-conventional-changelog": "^3.3.0",
 		"eslint": "^8.49.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte": "^2.33.0",
+		"husky": "^8.0.0",
+		"inquirer": "8",
 		"postcss": "^8.4.29",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^3.0.3",

src/routes/+layout.svelte

@@ -9,9 +9,12 @@
 	onMount(initFlowbite);
 </script>
 
-<Header />
+<div class="bg-gray-50 dark:bg-gray-900">
+	<Header />
 
-<Sidebar />
-<main class="h-auto min-h-screen p-4 pt-20 md:ml-64">
-	<slot />
-</main>
+	<Sidebar />
+
+	<main class="h-auto min-h-screen p-4 pt-20 md:ml-64">
+		<slot />
+	</main>
+</div>

src/routes/milestones/+page.js

@@ -0,0 +1,55 @@
+/**
+ * @typedef {{
+ *     url: string;
+ *     html_url: string;
+ *     labels_url: string;
+ *     id: number;
+ *     node_id: string;
+ *     number: number;
+ *     title: string;
+ *     description: string;
+ *     creator: {
+ *         login: string;
+ *         id: number;
+ *         node_id: string;
+ *         avatar_url: string;
+ *         gravatar_id: string;
+ *         url: string;
+ *         html_url: string;
+ *         followers_url: string;
+ *         following_url: string;
+ *         gists_url: string;
+ *         starred_url: string;
+ *         subscriptions_url: string;
+ *         organizations_url: string;
+ *         repos_url: string;
+ *         events_url: string;
+ *         received_events_url: string;
+ *         type: string;
+ *         site_admin: boolean;
+ *     };
+ *     open_issues: number;
+ *     closed_issues: number;
+ *     state: string;
+ *     created_at: string;
+ *     updated_at: string;
+ *     due_on: string;
+ *     closed_at: string;
+ * }} Milestone
+ * */
+
+/**
+ * @type {import("./$types").PageLoad}
+ * @return {Promise<{ milestones: Milestone[] }>}
+ */
+export async function load({ fetch }) {
+	return {
+		milestones: (
+			await fetch("https://api.github.com/repos/Karaoke-Manager/karman/milestones", {
+				headers: { Accept: "application/vnd.github+json" }
+			}).then((value) => value.json())
+		)
+			.sort((/**@type Milestone */ a, /**@type Milestone */ b) => Date.parse(a.updated_at) - Date.parse(b.updated_at))
+			.reverse()
+	};
+}

src/routes/milestones/+page.svelte

@@ -0,0 +1,99 @@
+<script>
+	import Icon from "$lib/components/Icon.svelte";
+
+	/** @type  {import("./$types").PageData} */
+	export let data;
+
+	function toDateString(/** @type {string} */ a) {
+		return new Date(a).toDateString().split(" ").slice(1).join(" ");
+	}
+</script>
+
+<div class="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6 lg:py-24">
+	<div class="mx-auto max-w-2xl text-center">
+		<h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+			Milestones
+		</h2>
+		<p class="mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl"></p>
+	</div>
+
+	<div class="m-auto flex flex-col items-center justify-center gap-10 sm:w-full lg:w-4/5">
+		{#each data.milestones as m}
+			{@const percent = Math.floor((m.closed_issues / (m.closed_issues + m.open_issues)) * 100)}
+			<div class="relative w-full space-y-4 rounded-lg p-6 shadow dark:border-gray-700 dark:bg-gray-800">
+				<a
+					href="https://github.com/Karaoke-Manager/karman/milestone/{m.number}"
+					class="absolute right-2 top-2 md:hidden"
+					role="button"
+				>
+					<Icon name="link" class="h-5 w-5 text-gray-500 dark:text-gray-400" />
+				</a>
+
+				<span
+					class="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-300"
+				>
+					{m.due_on ? toDateString(m.due_on) : "No due date"}
+				</span>
+				{#if m.updated_at}
+					<span
+						class="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-300"
+					>
+						<b>Updated:&nbsp;</b>{toDateString(m.updated_at)}
+					</span>
+				{/if}
+				{#if m.created_at}
+					<span
+						class="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-300"
+					>
+						<b>Created:&nbsp;</b>{toDateString(m.created_at)}
+					</span>
+				{/if}
+				{#if m.closed_at}
+					<span
+						class="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-300"
+					>
+						<b>Closed:&nbsp;</b>{toDateString(m.closed_at)}
+					</span>
+				{/if}
+				{#if m.creator && m.creator.login}
+					<span
+						class="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-900 dark:bg-gray-700 dark:text-gray-300"
+					>
+						{m.creator.login}
+					</span>
+				{/if}
+
+				<h3 class="text-2xl font-bold leading-tight text-gray-900 dark:text-white">
+					{m.title}
+				</h3>
+				<div class="flex flex-col gap-10 xl:flex-row xl:gap-28">
+					<p class="basis-2/5 text-lg font-normal text-gray-500 dark:text-gray-400">
+						{m.description}
+					</p>
+					<div class="basis-3/5">
+						<div class="w-full rounded-full bg-gray-200 dark:bg-gray-700">
+							<div class="h-4 rounded-full bg-primary-700 dark:bg-primary-600" style="width: {percent}%"></div>
+						</div>
+						<span class="mr-6 text-lg font-normal text-gray-500 dark:text-gray-400">
+							{percent}% completed
+						</span>
+						<span class="mr-6 text-lg font-normal text-green-400 dark:text-green-800">
+							{m.closed_issues} closed
+						</span>
+						<span class="text-lg font-normal text-red-400 dark:text-red-900">
+							{m.open_issues} open
+						</span>
+					</div>
+				</div>
+				<a
+					href="https://github.com/Karaoke-Manager/karman/milestone/{m.number}"
+					class=" hidden items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 md:inline-flex"
+					role="button"
+				>
+					View Milestone
+					<Icon name="arrow-right" class="-mr-1 ml-2 h-5 w-5" />
+				</a>
+			</div>
+		{/each}
+	</div>
+</div>