refactor!: restructure programmerbar page data loading

Author: omfj

programmerbar-web/src/hooks.server.ts

@@ -1,4 +1,3 @@
-import { dev } from '$app/environment';
 import { createAuth } from '$lib/auth/lucia';
 import { FeideProvider } from '$lib/auth/feide';
 import { createDatabase } from '$lib/db/drizzle';
@@ -24,17 +23,17 @@ import { PendingApplicationService } from '$lib/services/pending-application.ser
 import { csrf } from '$lib/hooks/csrf';
 
 const main: Handle = async ({ event, resolve }) => {
+	// Set up primitive services from Cloudflare environment
 	const STATUS_KV = event.platform!.env.STATUS_KV;
 	const R2_BUCKET = event.platform!.env.BUCKET;
 	const DB = event.platform!.env.DB;
 
 	const banService = new BanService(STATUS_KV);
 	event.locals.banService = banService;
 
-	const ip = event.getClientAddress();
-	const isIpBanned = await banService.isIpBanned(ip);
-
-	if (isIpBanned) {
+	// Check if IP is banned
+	const isBanned = await banService.isBanned(event);
+	if (isBanned) {
 		return new Response(null, {
 			status: 429,
 			headers: {
@@ -63,7 +62,8 @@ const main: Handle = async ({ event, resolve }) => {
 	);
 	event.locals.feideProvider = feideProvider;
 
-	// Setup status service
+	// Setup services
+
 	const statusService = new StatusService(event.platform!.env.STATUS_KV);
 	event.locals.statusService = statusService;
 
@@ -122,14 +122,14 @@ const main: Handle = async ({ event, resolve }) => {
 		event.locals.session = null;
 	}
 
+	// Clear cookie if no valid user
 	if (!event.locals.user) {
 		event.cookies.delete(auth.sessionCookieName, {
-			path: '/',
-			httpOnly: true,
-			secure: !dev
+			path: '/'
 		});
 	}
 
+	// Only board members have access to routes under /portal/admin
 	if (event.url.pathname.startsWith('/portal/admin') && event.locals.user?.role !== 'board') {
 		return new Response(null, {
 			status: 307,
@@ -139,6 +139,7 @@ const main: Handle = async ({ event, resolve }) => {
 		});
 	}
 
+	// Only authenticated users have access to routes under /portal
 	if (event.url.pathname.startsWith('/portal') && !event.locals.user) {
 		return new Response(null, {
 			status: 307,

programmerbar-web/src/lib/api/sanity/programmerbar.ts

@@ -1,7 +1,6 @@
-import { echoSanityClient } from './client';
 import groq from 'groq';
 
-const query = groq`*[_type == "studentGroup"
+export const PROGRAMMERBAR_GROUP_QUERY = groq`*[_type == "studentGroup"
     && slug.current == $slug
     && !(_id in path('drafts.**'))] {
     _id,
@@ -29,7 +28,7 @@ const query = groq`*[_type == "studentGroup"
     }
   }[0]`;
 
-type StudentGroup = {
+export type StudentGroup = {
 	_id: string;
 	_createdAt: string;
 	_updatedAt: string;
@@ -53,7 +52,3 @@ type StudentGroup = {
 		email: string;
 	}>;
 };
-
-export const getProgrammerbarGroup = async () => {
-	return await echoSanityClient.fetch<StudentGroup>(query, { slug: 'programmerbar' });
-};

programmerbar-web/src/lib/services/ban.service.ts

@@ -1,15 +1,22 @@
+import { building } from '$app/environment';
+import type { RequestEvent } from '@sveltejs/kit';
+
 export class BanService {
 	#kv: KVNamespace;
 
 	constructor(kv: KVNamespace) {
 		this.#kv = kv;
 	}
 
-	async banIp(ip: string): Promise<void> {
+	async ban(event: RequestEvent): Promise<void> {
+		const ip = event.getClientAddress();
 		await this.#kv.put(`banned:${ip}`, 'banned', { expirationTtl: 60 * 60 * 24 * 7 });
 	}
 
-	async isIpBanned(ip: string): Promise<boolean> {
+	async isBanned(event: RequestEvent): Promise<boolean> {
+		if (building) return false;
+
+		const ip = event.getClientAddress();
 		const banned = await this.#kv.get(`banned:${ip}`);
 		return banned !== null;
 	}

programmerbar-web/src/routes/(app)/common.remote.ts

@@ -21,12 +21,12 @@ const ContanctSubmissionSchema = z.object({
 export const createContactSubmissionAction = form(
 	ContanctSubmissionSchema,
 	async ({ name, email, namekjkj, emailkjkj, messagekjkj }) => {
-		const { locals, getClientAddress } = getRequestEvent();
-
+		const event = getRequestEvent();
+		const { locals, getClientAddress } = event;
 		const ip = getClientAddress();
 
 		if (name || email) {
-			await locals.banService.banIp(ip);
+			await locals.banService.ban(event);
 
 			return fail(400, { success: false });
 		}

programmerbar-web/src/routes/(app)/om-oss/+page.svelte

@@ -4,10 +4,11 @@
 	import { marked } from 'marked';
 	import Heading from '$lib/components/ui/Heading.svelte';
 	import SEO from '$lib/components/SEO.svelte';
+	import { getProgrammerbarGroup } from './data.remote';
 
-	let { data } = $props();
+	const programmerbar = await getProgrammerbarGroup();
 
-	const html = marked.parse(data.programmerbar.description);
+	const html = marked.parse(programmerbar.description);
 </script>
 
 <SEO
@@ -18,16 +19,16 @@
 	type="website"
 />
 
-<div class="bg-background mx-auto w-full max-w-screen-lg rounded-xl border-2 p-8 shadow-lg">
+<div class="bg-background mx-auto w-full max-w-5xl rounded-xl border-2 p-8 shadow-lg">
 	<Heading class="mb-4 text-4xl">Om oss</Heading>
 
 	<div class="mb-16">
 		<div
 			class="mx-auto mb-4 flex h-72 w-full items-center justify-center gap-4 rounded-xl border-2 bg-gray-100 sm:float-right sm:ml-4 md:w-96"
 		>
-			{#if data.programmerbar.image}
+			{#if programmerbar.image}
 				<img
-					src={echoUrlFor(data.programmerbar.image).url()}
+					src={echoUrlFor(programmerbar.image).url()}
 					alt="Programmerbar"
 					class="h-full w-full rounded-xl object-cover"
 				/>
@@ -39,7 +40,7 @@
 			{/if}
 		</div>
 
-		<article class="prose prose-xl text-xl break-words">
+		<article class="prose prose-xl wrap-break-words text-xl">
 			{@html html}
 		</article>
 	</div>
@@ -48,7 +49,7 @@
 		<Heading class="text-3xl" level={2}>Styremedlemmer</Heading>
 
 		<ul class="mt-4 grid grid-cols-1 gap-y-10 sm:grid-cols-2 md:grid-cols-3">
-			{#each data.programmerbar.members as member (member.profile._id)}
+			{#each programmerbar.members as member (member.profile._id)}
 				<li class="p-1 text-center">
 					<div class="mb-3 flex items-center justify-center">
 						{#if member.profile.picture}

programmerbar-web/src/routes/(app)/om-oss/+page.ts

@@ -0,0 +1,9 @@
+import { prerender } from '$app/server';
+import { echoSanityClient } from '$lib/api/sanity/client';
+import { PROGRAMMERBAR_GROUP_QUERY, type StudentGroup } from '$lib/api/sanity/programmerbar';
+
+export const getProgrammerbarGroup = prerender(async () => {
+	return await echoSanityClient.fetch<StudentGroup>(PROGRAMMERBAR_GROUP_QUERY, {
+		slug: 'programmerbar'
+	});
+});