From 25d9e559ec21a7c540ba57f68566d3f9f665bf3f Mon Sep 17 00:00:00 2001
From: TJ Raklovits <91501317+Monster0506@users.noreply.github.com>
Date: Tue, 9 Dec 2025 14:37:23 -0500
Subject: [PATCH] Update docs (#13)

* Clean up build warnings

* Clean up display of icons

* Update documents
---
 .env.example                                  |  1 -
 .gitignore                                    |  4 +-
 README.md                                     | 70 +++++++++++---
 scripts/README.md                             | 29 ++++++
 src/lib/Navbar.svelte                         | 13 +--
 .../components/lessons/CategoryCard.svelte    | 94 +++++++++----------
 src/lib/components/lessons/LessonCard.svelte  |  4 +-
 src/lib/components/lessons/SearchBar.svelte   |  8 +-
 src/lib/lessons/utils.ts                      |  2 +-
 src/lib/server/auth.ts                        |  7 --
 src/routes/admin/lesson-icons/+page.svelte    | 12 ++-
 src/routes/lessons/+page.svelte               | 42 ++++++---
 src/routes/lessons/[...path]/+page.svelte     | 38 ++++----
 src/routes/resources/hotcard/+page.svelte     |  2 +-
 svelte.config.js                              |  5 +
 15 files changed, 213 insertions(+), 118 deletions(-)
 create mode 100644 scripts/README.md

diff --git a/.env.example b/.env.example
index 707d5b8..1dc5adc 100644
--- a/.env.example
+++ b/.env.example
@@ -13,4 +13,3 @@ BODY_SIZE_LIMIT=20M # for those hi res pictures
 GITHUB_TOKEN=github_pat_X_X
 
 PUBLIC_APP_URL=http://localhost:3000
-BODY_SIZE_LIMIT=20M
diff --git a/.gitignore b/.gitignore
index 1f5c67b..5e1322e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,7 +25,7 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 
-compose.override.yml
+compose.override.yaml
 
 # Uploads
 static/uploads/
@@ -33,4 +33,4 @@ static/uploads/
 
 scripts/assets/
 scripts/dump.json
-scripts/restore.log
\ No newline at end of file
+scripts/restore.log
diff --git a/README.md b/README.md
index aace9b0..7457672 100644
--- a/README.md
+++ b/README.md
@@ -2,32 +2,76 @@
 
 Programmers.
 
+
+This is the current main website for HacKSU. It exists at hacksu.com
+
+
+## Quickstart
+
 To run this site locally, you will want Docker.
 
 You can run it without production configuration locally, but it is generally not recommended, as the deployed build environment is Docker.
 
-
 You will need a `.env` file. This file should contain all of the variables in the `.env.example` file at the root of the project correctly filled out.
 
-## Environment Variables
+The below might not be maintained, use the `.env.example` for correct information
+```env
+DATABASE_URL=postgresql://hacksu:hacksu@db:5432/hacksu
 
-Required environment variables:
-- `GITHUB_TOKEN` - GitHub personal access token for accessing the GitHub API
-- `DATABASE_URL` - PostgreSQL connection string (automatically set in Docker Compose)
-- `REDIS_URL` - Redis connection string (defaults to `redis://localhost:6379`, automatically set in Docker Compose)
-- `GITHUB_ORG` - GitHub organization name (defaults to `hacksu`, optional)
+SESSION_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+SENDGRID_TOKEN=SG.X.X
 
-The `REDIS_URL` is automatically configured in Docker Compose to connect to the Redis service. For local development outside Docker, you may need to set it manually.
+DISCORD_ROLES=X Y Z
+DISCORD_CLIENT_ID=XXXXX
+DISCORD_GUILD_ID=XXXXX
+DISCORD_CLIENT_SECRET=XXXXX
 
+BODY_SIZE_LIMIT=20M
 
-To make changes on the admin side, go to the `/admin` route, and login with discord. If you have acceptable roles, this will authenticate you.
+GITHUB_TOKEN=github_pat_X_X
 
+PUBLIC_APP_URL=http://localhost:3000
+```
 
-Run the containers with `docker compose up -d --build`
-This should setup persistent postgres and redis volumes and expose `localhost:3002` with the site.
+The `REDIS_URL` is automatically configured in Docker Compose to connect to the Redis service. For local development outside Docker, you may need to set it manually.
+
+I am configuring a couple of the variables in the compose file because they are unimportant and don't require security: `REDIS_URL`, `GITHUB_ORG` which is modifiable, but defaults to `hacksu`, `DATABASE_URL` but I also configured that on the server in case we ever need to expose it, and `NODE_ENV`, which we are not really using.
+
+To make changes on the admin side, go to the `/admin` route, and login with Discord. If you have acceptable roles, (organizer, core, leader) this will authenticate you.
+
+This should setup persistent postgres and redis volumes and expose `localhost:3000` with the site.
 
 The setup includes:
-- **PostgreSQL** - Main database (port 5434)
+- **PostgreSQL** - Main database (port 5432)
 - **Redis** - Cache for lesson repositories (port 6379)
 - **Lessons Service** - Python service that fetches and caches GitHub lesson repos
-- **SvelteKit App** - Main web application (port 3002)
+- **SvelteKit App** - Main web application (port 3000)
+
+For local testing you will also want a `compose.override.yaml`
+
+```yaml
+services:
+  app:
+    ports:
+      - 3000:3000
+```
+
+The ports are important. This will allow you to access the port internal to the container externally. Take care not to push this file to a deployment, as it will conflict and tie up an actual port from the HacKSU server.(It is in the `.gitignore`, so it would take some effort)
+
+
+## Running:
+
+Run the containers with `docker compose up -d --build`
+
+
+
+## Development
+
+If you make changes to the schema, be sure to run `bun db:generate` to generate migrations in the drizzle folder, that will be automatically performed on start.
+
+
+The schema for our database lies within `./src/lib/server/db/schema.ts`. This is a pretty neat way to define a schema with SQL-like TS.
+
+If you add to the schema, if necessary, update the dump and restore routes, following the established pattern so we can restore in the event of a volume failure.
+
+I have written some helper scripts for running these dump and restore commands fully, and getting consistent output. See the `scripts` folder README for more information on that.
diff --git a/scripts/README.md b/scripts/README.md
new file mode 100644
index 0000000..bbdf725
--- /dev/null
+++ b/scripts/README.md
@@ -0,0 +1,29 @@
+# Helper Scripts
+
+
+## Dump and Restore
+
+These guys are here to create a json dump of our existing database before performing major structural changes (like switching out databases or volumes)
+
+I really really really recommend running these with `uv` as it makes life so much easier.
+
+### `dump.py`
+`uv run scripts/dump.py [ACTIVE_ADMIN_SESSION_COOKIE] [LOCATION_OF_ENDPOINT_BASE_URL|https://localhost:3000]`
+
+This will:
+- Call /admin/api/dump/json and save the result as dump.json
+- Call /admin/api/dump/assets and download all listed files
+    into an ./assets directory, mirroring their /uploads paths.
+
+
+### `restore.py`
+`uv run scripts/restore.py [ACTIVE_ADMIN_SESSION_COOKIE] [LOCATION_OF_ENDPOINT_BASE_URL|https://localhost:3000]`
+
+This expects that you have previously run `dump.py` so that:
+- `scripts/dump.json` exists (full JSON dump)
+- `scripts/assets/` exists with files mirroring `/uploads/**` paths
+
+It will:
+- POST dump.json to /admin/api/dump/json to restore DB contents
+- Walk `assets/` and POST each file to /admin/api/dump/assets
+
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index d64de3d..0c37ecc 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -25,12 +25,13 @@
     }
     
     const routes: Route[] = [
-        {href:'/', img:hacksuLogo, alt:"Hacksu", pos:"center"},
-        {href:'/',text:"Home",pos:"left"},
-        {href:'/leadership',text:"Leadership",pos:"left"},
-        {href:'/meetings',text:"Meetings",pos:"left"},
-        {href:'/info',text:"Resources",pos:"right"},
-        {href:'/contact',text:"Contact",pos:"right"},
+        {href:'/',           img:hacksuLogo, alt:"Hacksu", pos:"center"},
+        {href:'/',           text:"Home",                  pos:"left"},
+        {href:'/leadership', text:"Leadership",            pos:"left"},
+        {href:'/lessons',    text:"Lessons",               pos:"right"},
+        {href:'/meetings',   text:"Meetings",              pos:"left"},
+        {href:'/info',       text:"Resources",             pos:"right"},
+        {href:'/contact',    text:"Contact",               pos:"right"},
     ]
 
     // Get all non-center routes for mobile menu
diff --git a/src/lib/components/lessons/CategoryCard.svelte b/src/lib/components/lessons/CategoryCard.svelte
index 11507a0..866c67b 100644
--- a/src/lib/components/lessons/CategoryCard.svelte
+++ b/src/lib/components/lessons/CategoryCard.svelte
@@ -1,47 +1,47 @@
-<script lang="ts">
-	import { getTechnologyIconUrlAsync } from '../../lessons/iconify';
-	import { onMount } from 'svelte';
-
-	let { category, lessonCount }: { category: string; lessonCount: number } = $props();
-
-	const displayCategory = $derived(category.charAt(0).toUpperCase() + category.slice(1));
-
-	let iconUrl = $state<string | null>(null);
-
-	onMount(async () => {
-		iconUrl = await getTechnologyIconUrlAsync(category);
-	});
-
-	const initials = $derived.by(() => {
-		if (iconUrl) return null;
-		const words = category.split(/[\s-]/);
-		if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
-		return category.substring(0, 2).toUpperCase();
-	});
-</script>
-
-<div
-	class="bg-white rounded-2xl flex flex-col items-center justify-start relative min-h-[220px] shadow-md overflow-hidden text-center transition-all duration-300 ease-in-out cursor-pointer hover:-translate-y-1.5 hover:shadow-lg active:-translate-y-0.5"
-	role="button"
-	tabindex="0"
->
-	<div class="flex flex-col items-center w-full h-full p-7 gap-4 overflow-hidden box-border">
-		<div class="w-20 h-20 rounded-2xl bg-gray-100 border border-gray-200 flex items-center justify-center overflow-hidden">
-			{#if iconUrl}
-				<img src={iconUrl} alt={category} class="w-full h-full object-contain" />
-			{:else if initials}
-				<span class="text-2xl font-semibold tracking-wide text-gray-700">{initials}</span>
-			{:else}
-				<span class="text-4xl">📁</span>
-			{/if}
-		</div>
-
-		<h2 class="text-xl m-0 font-semibold tracking-tight text-gray-900 w-full overflow-hidden text-ellipsis whitespace-nowrap">
-			{displayCategory}
-		</h2>
-
-		<div class="mt-auto text-sm text-gray-500">
-			{lessonCount} lesson{lessonCount !== 1 ? 's' : ''}
-		</div>
-	</div>
-</div>
+<script lang="ts">
+	import { getTechnologyIconUrlAsync } from '$lib/lessons/iconify';
+	import { onMount } from 'svelte';
+
+	let { category, lessonCount }: { category: string; lessonCount: number } = $props();
+
+	const displayCategory = $derived(category.charAt(0).toUpperCase() + category.slice(1));
+
+	let iconUrl = $state<string | null>(null);
+
+	onMount(async () => {
+		iconUrl = await getTechnologyIconUrlAsync(category);
+	});
+
+	const initials = $derived.by(() => {
+		if (iconUrl) return null;
+		const words = category.split(/[\s-]/);
+		if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+		return category.substring(0, 2).toUpperCase();
+	});
+</script>
+
+<div
+	class="bg-white rounded-2xl flex flex-col items-center justify-start relative min-h-[220px] shadow-md overflow-hidden text-center transition-all duration-300 ease-in-out cursor-pointer hover:-translate-y-1.5 hover:shadow-lg active:-translate-y-0.5"
+	role="button"
+	tabindex="0"
+>
+	<div class="flex flex-col items-center w-full h-full p-9 gap-4 overflow-hidden box-border">
+		<div class="w-20 h-20 rounded-2xl bg-gray-100 border border-gray-200 flex items-center justify-center overflow-hidden px-2">
+			{#if iconUrl}
+				<img src={iconUrl} alt={category} class="w-full h-full object-contain" />
+			{:else if initials}
+				<span class="text-2xl font-semibold tracking-wide text-gray-700">{initials}</span>
+			{:else}
+				<span class="text-4xl">📁</span>
+			{/if}
+		</div>
+
+		<h2 class="text-xl m-0 font-semibold tracking-tight text-gray-900 w-full overflow-hidden text-ellipsis whitespace-nowrap">
+			{displayCategory}
+		</h2>
+
+		<div class="mt-auto text-sm text-gray-500">
+			{lessonCount} lesson{lessonCount !== 1 ? 's' : ''}
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/lessons/LessonCard.svelte b/src/lib/components/lessons/LessonCard.svelte
index 25dd1d5..bf6f4e5 100644
--- a/src/lib/components/lessons/LessonCard.svelte
+++ b/src/lib/components/lessons/LessonCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { LessonRepo } from '../../../routes/api/lessons/repos/+server';
-import { getTechnologyIconUrl } from '../../lessons/iconify';
+import type { LessonRepo } from '@routes/api/lessons/repos/+server';
+import { getTechnologyIconUrl } from '$lib/lessons/iconify';
 
 let { lesson }: { lesson: LessonRepo } = $props();
 
diff --git a/src/lib/components/lessons/SearchBar.svelte b/src/lib/components/lessons/SearchBar.svelte
index b4198fb..ac02352 100644
--- a/src/lib/components/lessons/SearchBar.svelte
+++ b/src/lib/components/lessons/SearchBar.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	let { value, onInput }: { value: string; onInput: (value: string) => void } = $props();
 
-	let searchValue = $state(value || '');
+let searchValue = $state('');
+
+$effect(() => {
+	searchValue = value || '';
+});
 
 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
@@ -27,7 +31,7 @@
 		type="text"
 		class="w-full py-4 pl-12 pr-4 bg-white/10 border border-white/20 rounded-full text-white text-base outline-none transition-all duration-300 backdrop-blur-md placeholder:text-white/50 focus:bg-white/15 focus:border-white/40 focus:shadow-lg focus:shadow-black/20"
 		placeholder="Search lessons by title or tags..."
-		value={searchValue}
+		bind:value={searchValue}
 		oninput={handleInput}
 	/>
 </div>
diff --git a/src/lib/lessons/utils.ts b/src/lib/lessons/utils.ts
index ba839f9..6f8de26 100644
--- a/src/lib/lessons/utils.ts
+++ b/src/lib/lessons/utils.ts
@@ -1,4 +1,4 @@
-import type { LessonRepo } from '../../routes/api/lessons/repos/+server';
+import type { LessonRepo } from '@routes/api/lessons/repos/+server';
 
 export interface ParsedTopic {
 	name: string;
diff --git a/src/lib/server/auth.ts b/src/lib/server/auth.ts
index 128cd1e..fd8af51 100644
--- a/src/lib/server/auth.ts
+++ b/src/lib/server/auth.ts
@@ -10,13 +10,6 @@ const appUrl = PUBLIC_APP_URL;
 
 if (!appUrl) throw new Error('PUBLIC_APP_URL is not set');
 
-console.log('[auth.ts] Initializing Discord OAuth client', {
-	appUrl,
-	redirectURI: `${appUrl}/auth/discord/callback`,
-	clientIdPrefix: env.DISCORD_CLIENT_ID?.slice(0, 5) ?? 'none',
-	clientSecretSet: Boolean(env.DISCORD_CLIENT_SECRET)
-});
-
 export const discord = new Discord(
 	env.DISCORD_CLIENT_ID,
 	env.DISCORD_CLIENT_SECRET,
diff --git a/src/routes/admin/lesson-icons/+page.svelte b/src/routes/admin/lesson-icons/+page.svelte
index 7fa1376..3581f99 100644
--- a/src/routes/admin/lesson-icons/+page.svelte
+++ b/src/routes/admin/lesson-icons/+page.svelte
@@ -53,9 +53,10 @@
 
 			<div class="p-6 flex flex-col gap-4 flex-1">
 				<div class="flex flex-col gap-2">
-					<label class="text-gray-700 font-medium text-sm">Category Name</label>
+					<label class="text-gray-700 font-medium text-sm" for="new-category-name">Category Name</label>
 					<input
 						type="text"
+						id="new-category-name"
 						bind:value={newCategoryName}
 						class="px-3 py-2 border border-gray-300 rounded-lg text-base transition-colors focus:border-hacksu-blue focus:outline-none placeholder:text-gray-400"
 						placeholder="e.g., react, python, docker"
@@ -63,9 +64,10 @@
 				</div>
 
 				<div class="flex flex-col gap-2">
-					<label class="text-gray-700 font-medium text-sm">Iconify ID</label>
+					<label class="text-gray-700 font-medium text-sm" for="new-iconify-id">Iconify ID</label>
 					<input
 						type="text"
+						id="new-iconify-id"
 						bind:value={newIconifyId}
 						class="px-3 py-2 border border-gray-300 rounded-lg text-base transition-colors focus:border-hacksu-blue focus:outline-none placeholder:text-gray-400"
 						placeholder="e.g., logos:react, logos:python"
@@ -142,9 +144,10 @@
 
 				<div class="p-6 flex flex-col gap-4 flex-1">
 					<div class="flex flex-col gap-2">
-						<label class="text-gray-700 font-medium text-sm">Category Name</label>
+						<label class="text-gray-700 font-medium text-sm" for={`category-${icon.categoryName}`}>Category Name</label>
 						<input
 							type="text"
+							id={`category-${icon.categoryName}`}
 							value={icon.categoryName}
 							disabled
 							class="px-3 py-2 border border-gray-300 rounded-lg text-base bg-gray-50 cursor-not-allowed"
@@ -152,9 +155,10 @@
 					</div>
 
 					<div class="flex flex-col gap-2">
-						<label class="text-gray-700 font-medium text-sm">Iconify ID</label>
+						<label class="text-gray-700 font-medium text-sm" for={`iconify-${icon.categoryName}`}>Iconify ID</label>
 						<input
 							type="text"
+							id={`iconify-${icon.categoryName}`}
 							bind:value={editingIcons[icon.categoryName]}
 							class="px-3 py-2 border border-gray-300 rounded-lg text-base transition-colors focus:border-hacksu-blue focus:outline-none"
 							placeholder="e.g., logos:react, logos:python"
diff --git a/src/routes/lessons/+page.svelte b/src/routes/lessons/+page.svelte
index 85a9332..e5b0a50 100644
--- a/src/routes/lessons/+page.svelte
+++ b/src/routes/lessons/+page.svelte
@@ -3,7 +3,7 @@
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import type { LessonRepo } from '../api/lessons/repos/+server';
+	import type { LessonRepo } from '@routes/api/lessons/repos/+server';
 	import {
 		buildCategoryTree,
 		getItemsAtPath,
@@ -165,9 +165,9 @@
 					{:else}
 						<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8">
 							{#each filteredLessons as lesson}
-								<div onclick={() => navigateToLesson(lesson)}>
+								<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 									<LessonCard {lesson} />
-								</div>
+								</button>
 							{/each}
 						</div>
 					{/if}
@@ -188,18 +188,22 @@
 										{@const subTreePath = [...currentPath, sectionName, category]}
 										{@const subTree = getSubTreeAtPath(categoryTree, subTreePath)}
 										{@const count = subTree ? countLessonsInCategory(subTree) : 0}
-										<div onclick={() => navigateToCategoryInSection(category, sectionName)}>
+										<button
+											type="button"
+											class="w-full text-left"
+											onclick={() => navigateToCategoryInSection(category, sectionName)}
+										>
 											<CategoryCard category={category} lessonCount={count} />
-										</div>
+										</button>
 									{/each}
 								</div>
 							{/if}
 							{#if sectionItems.lessons.length > 0}
 								<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8">
 									{#each sectionItems.lessons as lesson}
-										<div onclick={() => navigateToLesson(lesson)}>
+										<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 											<LessonCard {lesson} />
-										</div>
+										</button>
 									{/each}
 								</div>
 							{/if}
@@ -217,9 +221,13 @@
 									{@const subTreePath = [...currentPath, category]}
 									{@const subTree = getSubTreeAtPath(categoryTree, subTreePath)}
 									{@const count = subTree ? countLessonsInCategory(subTree) : 0}
-									<div class="w-full sm:w-auto sm:flex-1 sm:max-w-[280px]" onclick={() => navigateToCategory(category)}>
+									<button
+										type="button"
+										class="w-full sm:w-auto sm:flex-1 sm:max-w-[280px] text-left"
+										onclick={() => navigateToCategory(category)}
+									>
 										<CategoryCard {category} lessonCount={count} />
-									</div>
+									</button>
 								{/each}
 							</div>
 							<!-- Bottom row: 2 cards, centered -->
@@ -228,9 +236,13 @@
 									{@const subTreePath = [...currentPath, category]}
 									{@const subTree = getSubTreeAtPath(categoryTree, subTreePath)}
 									{@const count = subTree ? countLessonsInCategory(subTree) : 0}
-									<div class="w-full sm:w-auto sm:flex-1 sm:max-w-[280px]" onclick={() => navigateToCategory(category)}>
+									<button
+										type="button"
+										class="w-full sm:w-auto sm:flex-1 sm:max-w-[280px] text-left"
+										onclick={() => navigateToCategory(category)}
+									>
 										<CategoryCard {category} lessonCount={count} />
-									</div>
+									</button>
 								{/each}
 							</div>
 						</div>
@@ -241,18 +253,18 @@
 								{@const subTreePath = [...currentPath, category]}
 								{@const subTree = getSubTreeAtPath(categoryTree, subTreePath)}
 								{@const count = subTree ? countLessonsInCategory(subTree) : 0}
-								<div onclick={() => navigateToCategory(category)}>
+								<button type="button" class="w-full text-left" onclick={() => navigateToCategory(category)}>
 									<CategoryCard {category} lessonCount={count} />
-								</div>
+								</button>
 							{/each}
 						</div>
 					{/if}
 				{:else}
 					<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] md:grid-cols-1 gap-6 mt-8">
 						{#each groupedItems.lessons as lesson}
-							<div onclick={() => navigateToLesson(lesson)}>
+							<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 								<LessonCard {lesson} />
-							</div>
+							</button>
 						{/each}
 					</div>
 				{/if}
diff --git a/src/routes/lessons/[...path]/+page.svelte b/src/routes/lessons/[...path]/+page.svelte
index ccda973..05b3259 100644
--- a/src/routes/lessons/[...path]/+page.svelte
+++ b/src/routes/lessons/[...path]/+page.svelte
@@ -3,7 +3,7 @@
 	import { page } from '$app/state';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import type { LessonRepo } from '../../api/lessons/repos/+server';
+	import type { LessonRepo } from '@routes/api/lessons/repos/+server';
 	import {
 		buildCategoryTree,
 		getItemsAtPath,
@@ -169,9 +169,9 @@
 					{:else}
 						<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8 max-w-[1200px]">
 							{#each filteredLessons as lesson}
-								<div onclick={() => navigateToLesson(lesson)}>
+								<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 									<LessonCard {lesson} />
-								</div>
+								</button>
 							{/each}
 						</div>
 					{/if}
@@ -192,18 +192,22 @@
 										{@const subTreePath = [...currentPath, sectionName, category]}
 										{@const subTree = getSubTreeAtPath(categoryTree, subTreePath)}
 										{@const count = subTree ? countLessonsInCategory(subTree) : 0}
-										<div onclick={() => navigateToCategoryInSection(category, sectionName)}>
+										<button
+											type="button"
+											class="w-full text-left"
+											onclick={() => navigateToCategoryInSection(category, sectionName)}
+										>
 											<CategoryCard category={category} lessonCount={count} />
-										</div>
+										</button>
 									{/each}
 								</div>
 							{/if}
 							{#if sectionItems.lessons.length > 0}
 								<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8 max-w-[1200px]">
 									{#each sectionItems.lessons as lesson}
-										<div onclick={() => navigateToLesson(lesson)}>
+										<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 											<LessonCard {lesson} />
-										</div>
+										</button>
 									{/each}
 								</div>
 							{/if}
@@ -216,9 +220,9 @@
 					{#if lessonsBySubcategory.directLessons.length > 0}
 						<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8 max-w-[1200px]">
 							{#each lessonsBySubcategory.directLessons as lesson}
-								<div onclick={() => navigateToLesson(lesson)}>
+								<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 									<LessonCard {lesson} />
-								</div>
+								</button>
 							{/each}
 						</div>
 					{/if}
@@ -229,11 +233,11 @@
 								{group.name.charAt(0).toUpperCase() + group.name.slice(1)}
 							</h2>
 							<div class="h-px bg-white/30 mb-6"></div>
-							<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] md:grid-cols-1 gap-6 max-w-[1200px]">
+							<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 max-w-[1200px]">
 								{#each group.lessons as lesson}
-									<div onclick={() => navigateToLesson(lesson)}>
+									<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 										<LessonCard {lesson} />
-									</div>
+									</button>
 								{/each}
 							</div>
 						</div>
@@ -245,18 +249,18 @@
 							{@const subTreePath = [...currentPath, category]}
 							{@const subTree = getSubTreeAtPath(categoryTree, subTreePath)}
 							{@const count = subTree ? countLessonsInCategory(subTree) : 0}
-							<div onclick={() => navigateToCategory(category)}>
+							<button type="button" class="w-full text-left" onclick={() => navigateToCategory(category)}>
 								<CategoryCard {category} lessonCount={count} />
-							</div>
+							</button>
 						{/each}
 					</div>
 				{:else}
 					<!-- Show lessons directly if no categories -->
-					<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] md:grid-cols-1 gap-6 mt-8 max-w-[1200px]">
+					<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8 max-w-[1200px]">
 						{#each groupedItems.lessons as lesson}
-							<div onclick={() => navigateToLesson(lesson)}>
+							<button type="button" class="w-full text-left" onclick={() => navigateToLesson(lesson)}>
 								<LessonCard {lesson} />
-							</div>
+							</button>
 						{/each}
 					</div>
 				{/if}
diff --git a/src/routes/resources/hotcard/+page.svelte b/src/routes/resources/hotcard/+page.svelte
index e828856..0528568 100644
--- a/src/routes/resources/hotcard/+page.svelte
+++ b/src/routes/resources/hotcard/+page.svelte
@@ -305,7 +305,7 @@
 
 	/* Print: only show the hotcard and position for printing */
 	@media print {
-		body * {
+		:global(body *) {
 			visibility: hidden;
 		}
 
diff --git a/svelte.config.js b/svelte.config.js
index ca24d1f..32104b8 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,6 +8,11 @@ const config = {
 	preprocess: vitePreprocess(),
 	kit: {
 		adapter: adapter(),
+		alias: {
+			'@': 'src',
+			'@lib': 'src/lib',
+			'@routes': 'src/routes'
+		},
 		csrf: {
 			trustedOrigins: ['*'] // Allow all origins - useful when running behind a proxy or in Docker (eventaually I need to make this correct with hacksu.com and dev.hacksu.com)
 		},