From 1bd6ae14ebc4ffeea2e4a4d61c3d0078869afce6 Mon Sep 17 00:00:00 2001
From: Elian Van Cutsem <hello@elian.codes>
Date: Wed, 15 Oct 2025 10:10:34 +0200
Subject: [PATCH] feat: add location info

---
 db/config.ts                                 |  19 +-
 db/seed.ts                                   |  13 +-
 src/actions/index.ts                         |  69 +++++++
 src/components/admin/LocationAdmin.astro     | 199 +++++++++++++++++++
 src/components/home/AboutMe.astro            |  13 +-
 src/components/home/CurrentLocation.astro    |  29 +++
 src/content/config.ts                        |   5 +
 src/content/events/23-09-13-qwik-paris.md    |   4 +
 src/content/events/23-11-03-cityjs-berlin.md |   6 +-
 src/pages/admin.astro                        |  46 +++++
 10 files changed, 390 insertions(+), 13 deletions(-)
 create mode 100644 src/actions/index.ts
 create mode 100644 src/components/admin/LocationAdmin.astro
 create mode 100644 src/components/home/CurrentLocation.astro
 create mode 100644 src/pages/admin.astro

diff --git a/db/config.ts b/db/config.ts
index 0932e2ab..f570ad5c 100644
--- a/db/config.ts
+++ b/db/config.ts
@@ -1,6 +1,21 @@
-import { defineDb } from 'astro:db';
+import { defineDb, defineTable, column } from 'astro:db';
+
+const UserLocation = defineTable({
+  columns: {
+    id: column.number({ primaryKey: true }),
+    city: column.text(),
+    country: column.text(),
+    countryFlag: column.text(),
+    isHome: column.boolean({ default: false }),
+    isTravelling: column.boolean({ default: false }),
+    currentEvent: column.text({ optional: true }),
+    updatedAt: column.date({ default: new Date() })
+  }
+});
 
 // https://astro.build/db/config
 export default defineDb({
-  tables: {}
+  tables: {
+    UserLocation
+  }
 });
diff --git a/db/seed.ts b/db/seed.ts
index fffc464b..302fb89e 100644
--- a/db/seed.ts
+++ b/db/seed.ts
@@ -1,6 +1,15 @@
-import { db } from 'astro:db';
+import { db, UserLocation } from 'astro:db';
 
 // https://astro.build/db/seed
 export default async function seed() {
-	// TODO
+	// Insert default home location
+	await db.insert(UserLocation).values({
+		id: 1,
+		city: 'Ghent',
+		country: 'Belgium',
+		countryFlag: '🇧🇪',
+		isHome: true,
+		isTravelling: false,
+		updatedAt: new Date()
+	});
 }
diff --git a/src/actions/index.ts b/src/actions/index.ts
new file mode 100644
index 00000000..d8124c96
--- /dev/null
+++ b/src/actions/index.ts
@@ -0,0 +1,69 @@
+import { defineAction, ActionError } from 'astro:actions';
+import { z } from 'astro:schema';
+import { db, UserLocation } from 'astro:db';
+
+export const server = {
+  updateLocation: defineAction({
+    accept: 'form',
+    input: z.object({
+      city: z.string().min(1, 'City is required'),
+      country: z.string().min(1, 'Country is required'),
+      countryFlag: z.string().min(1, 'Country flag is required'),
+      isTravelling: z.boolean().optional().default(false),
+      currentEvent: z.string().optional(),
+    }),
+    handler: async (input) => {
+      try {
+        // Update location (delete and insert for simplicity since we only store one location)
+        await db.delete(UserLocation);
+        await db.insert(UserLocation).values({
+          id: 1,
+          city: input.city,
+          country: input.country,
+          countryFlag: input.countryFlag,
+          isHome: !input.isTravelling,
+          isTravelling: input.isTravelling,
+          currentEvent: input.currentEvent || null,
+          updatedAt: new Date()
+        });
+
+        return {
+          success: true,
+          message: 'Location updated successfully',
+          location: {
+            city: input.city,
+            country: input.country,
+            countryFlag: input.countryFlag,
+            isTravelling: input.isTravelling,
+            currentEvent: input.currentEvent
+          }
+        };
+      } catch (error) {
+        throw new ActionError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'Failed to update location'
+        });
+      }
+    }
+  }),
+
+  getCurrentLocation: defineAction({
+    input: z.object({}),
+    handler: async () => {
+      try {
+        const locations = await db.select().from(UserLocation).limit(1);
+        const location = locations[0] || null;
+
+        return {
+          success: true,
+          location
+        };
+      } catch (error) {
+        throw new ActionError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'Failed to get current location'
+        });
+      }
+    }
+  })
+};
diff --git a/src/components/admin/LocationAdmin.astro b/src/components/admin/LocationAdmin.astro
new file mode 100644
index 00000000..9e8c05bc
--- /dev/null
+++ b/src/components/admin/LocationAdmin.astro
@@ -0,0 +1,199 @@
+---
+import { actions, isInputError } from 'astro:actions';
+
+// Handle form result (only if form was submitted)
+const result = Astro.getActionResult(actions.updateLocation);
+const inputErrors = isInputError(result?.error) ? result.error.fields : {};
+
+// Show success message if location was updated
+const showSuccess = result && !result.error;
+
+// Default location for form (will be loaded client-side)
+const defaultLocation = {
+	city: 'Ghent',
+	country: 'Belgium',
+	countryFlag: '🇧🇪',
+	isHome: true,
+	isTravelling: false,
+	currentEvent: '',
+};
+---
+
+<div
+	class='location-admin max-w-md mx-auto p-6 border border-gray-300 rounded-lg bg-white shadow-sm'
+>
+	<h3 class='text-lg font-semibold mb-4'>Update Location</h3>
+
+	{
+		showSuccess && (
+			<div class='mb-4 p-3 bg-green-100 border border-green-300 text-green-800 rounded'>
+				Location updated successfully! ✅
+			</div>
+		)
+	}
+
+	{
+		result?.error && !isInputError(result.error) && (
+			<div class='mb-4 p-3 bg-red-100 border border-red-300 text-red-800 rounded'>
+				Error: {result.error.message}
+			</div>
+		)
+	}
+
+	<form method='POST' action={actions.updateLocation} class='space-y-4'>
+		<div>
+			<label for='city' class='block text-sm font-medium text-gray-700 mb-1'>
+				City
+			</label>
+			<input
+				type='text'
+				id='city'
+				name='city'
+				value={defaultLocation.city}
+				required
+				class='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
+			/>
+			{
+				inputErrors.city && (
+					<p class='mt-1 text-sm text-red-600'>{inputErrors.city.join(', ')}</p>
+				)
+			}
+		</div>
+
+		<div>
+			<label for='country' class='block text-sm font-medium text-gray-700 mb-1'>
+				Country
+			</label>
+			<input
+				type='text'
+				id='country'
+				name='country'
+				value={defaultLocation.country}
+				required
+				class='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
+			/>
+			{
+				inputErrors.country && (
+					<p class='mt-1 text-sm text-red-600'>
+						{inputErrors.country.join(', ')}
+					</p>
+				)
+			}
+		</div>
+
+		<div>
+			<label
+				for='countryFlag'
+				class='block text-sm font-medium text-gray-700 mb-1'
+			>
+				Country Flag (emoji)
+			</label>
+			<input
+				type='text'
+				id='countryFlag'
+				name='countryFlag'
+				value={defaultLocation.countryFlag}
+				required
+				placeholder='🇧🇪'
+				class='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
+			/>
+			{
+				inputErrors.countryFlag && (
+					<p class='mt-1 text-sm text-red-600'>
+						{inputErrors.countryFlag.join(', ')}
+					</p>
+				)
+			}
+		</div>
+
+		<div class='flex items-center'>
+			<input
+				type='checkbox'
+				id='isTravelling'
+				name='isTravelling'
+				checked={defaultLocation.isTravelling}
+				class='h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded'
+			/>
+			<label for='isTravelling' class='ml-2 block text-sm text-gray-900'>
+				Currently travelling
+			</label>
+		</div>
+
+		<div>
+			<label
+				for='currentEvent'
+				class='block text-sm font-medium text-gray-700 mb-1'
+			>
+				Current Event (optional)
+			</label>
+			<input
+				type='text'
+				id='currentEvent'
+				name='currentEvent'
+				value={defaultLocation.currentEvent || ''}
+				placeholder='e.g., React Brussels Conference'
+				class='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'
+			/>
+			{
+				inputErrors.currentEvent && (
+					<p class='mt-1 text-sm text-red-600'>
+						{inputErrors.currentEvent.join(', ')}
+					</p>
+				)
+			}
+		</div>
+
+		<button
+			type='submit'
+			class='w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors'
+		>
+			Update Location
+		</button>
+	</form>
+</div>
+
+<script>
+	import { actions } from 'astro:actions';
+
+	// Load current location when page loads
+	document.addEventListener('DOMContentLoaded', async () => {
+		try {
+			const { data, error } = await actions.getCurrentLocation({});
+			if (!error && data?.location) {
+				const location = data.location;
+
+				// Update form fields with current location
+				const cityInput = document.getElementById('city') as HTMLInputElement;
+				const countryInput = document.getElementById(
+					'country'
+				) as HTMLInputElement;
+				const flagInput = document.getElementById(
+					'countryFlag'
+				) as HTMLInputElement;
+				const travellingInput = document.getElementById(
+					'isTravelling'
+				) as HTMLInputElement;
+				const eventInput = document.getElementById(
+					'currentEvent'
+				) as HTMLInputElement;
+
+				if (cityInput) cityInput.value = location.city;
+				if (countryInput) countryInput.value = location.country;
+				if (flagInput) flagInput.value = location.countryFlag;
+				if (travellingInput) travellingInput.checked = location.isTravelling;
+				if (eventInput) eventInput.value = location.currentEvent || '';
+			}
+		} catch (error) {
+			console.warn('Could not load current location:', error);
+		}
+	});
+</script>
+
+<style>
+	.location-admin {
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+</style>
diff --git a/src/components/home/AboutMe.astro b/src/components/home/AboutMe.astro
index 68b30616..7728f34f 100644
--- a/src/components/home/AboutMe.astro
+++ b/src/components/home/AboutMe.astro
@@ -1,8 +1,9 @@
 ---
-import { Image } from "astro:assets";
-import { Button, Card } from "@eliancodes/brutal-ui";
+import { Image } from 'astro:assets';
+import { Button, Card } from '@eliancodes/brutal-ui';
+import CurrentLocation from './CurrentLocation.astro';
 
-import headshot from "../../assets/elian.jpg";
+import headshot from '../../assets/elian.jpg';
 ---
 
 <section id='about' class='grid md:grid-cols-8 gap-8 mt-4'>
@@ -44,11 +45,7 @@ import headshot from "../../assets/elian.jpg";
 					href='https://www.devs.gent/'>devs.gent</a
 				> meetup organizer
 			</p>
-			<p class='sanchez mt-4 mb-8 text-lg md:text-xl lg:text-3xl'>
-				Located in Ghent, 🇧🇪 <small class='text-sm'
-					>(or somewhere travelling)</small
-				>
-			</p>
+			<CurrentLocation server:defer />
 			<div class='flex gap-3 flex-wrap'>
 				<Button href='/events/'>See what I do &rarr;</Button>
 				<Button href='https://eliancodes.com' target='_blank'
diff --git a/src/components/home/CurrentLocation.astro b/src/components/home/CurrentLocation.astro
new file mode 100644
index 00000000..c5b80397
--- /dev/null
+++ b/src/components/home/CurrentLocation.astro
@@ -0,0 +1,29 @@
+---
+import { db, UserLocation } from 'astro:db';
+
+let location = null;
+try {
+	const locations = await db.select().from(UserLocation).limit(1);
+	location = locations[0];
+} catch (error) {
+	console.warn('Could not connect to database during static generation');
+}
+
+// Default fallback if no location in DB
+const defaultLocation = {
+	city: 'Ghent',
+	country: 'Belgium',
+	countryFlag: '🇧🇪',
+	isHome: true,
+	isTravelling: false,
+	currentEvent: null,
+};
+
+const loc = location || defaultLocation;
+---
+
+<p class='sanchez mt-4 mb-8 text-lg md:text-xl lg:text-3xl'>
+	Located in {loc.city}, {loc.countryFlag}
+	{loc.isTravelling && <small class='text-sm'>(currently travelling)</small>}
+	{loc.currentEvent && <small class='text-sm'>at {loc.currentEvent}</small>}
+</p>
diff --git a/src/content/config.ts b/src/content/config.ts
index 950007e4..6fe6a7d2 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -22,6 +22,11 @@ const eventCollection = defineCollection({
 			link: z.string(),
 			name: z.string(),
 			img: image(),
+			location: z.object({
+				city: z.string(),
+				country: z.string(),
+				countryFlag: z.string(),
+			}).optional(),
 		}),
 });
 
diff --git a/src/content/events/23-09-13-qwik-paris.md b/src/content/events/23-09-13-qwik-paris.md
index 94110f86..52053856 100644
--- a/src/content/events/23-09-13-qwik-paris.md
+++ b/src/content/events/23-09-13-qwik-paris.md
@@ -5,4 +5,8 @@ link: "https://www.meetup.com/qwik-paris/events/295786958/"
 date: 2023-09-13
 name: "Qwik Paris"
 img: "../../assets/events/qwikparis.jpeg"
+location:
+  city: "Paris"
+  country: "France"
+  countryFlag: "🇫🇷"
 ---
diff --git a/src/content/events/23-11-03-cityjs-berlin.md b/src/content/events/23-11-03-cityjs-berlin.md
index 991f151b..ca674303 100644
--- a/src/content/events/23-11-03-cityjs-berlin.md
+++ b/src/content/events/23-11-03-cityjs-berlin.md
@@ -1,8 +1,12 @@
 ---
 title: "All things Astro"
-abstract: "Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the new released features in Astro 3, do some live coding and have some fun. Maybe we also take a look at what’s coming next in Astro 4."
+abstract: "Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we'll take a look at some of the new released features in Astro 3, do some live coding and have some fun. Maybe we also take a look at what's coming next in Astro 4."
 link: "https://youtu.be/jOZonLbLfsE?t=28359"
 date: 2023-11-03
 name: "CityJS Berlin"
 img: "../../assets/events/cityjs-berlin.jpeg"
+location:
+  city: "Berlin"
+  country: "Germany"
+  countryFlag: "🇩🇪"
 ---
diff --git a/src/pages/admin.astro b/src/pages/admin.astro
new file mode 100644
index 00000000..5c11ffc5
--- /dev/null
+++ b/src/pages/admin.astro
@@ -0,0 +1,46 @@
+---
+export const prerender = false; // Ensure this page is server-rendered
+
+import Layout from '@layouts/Default.astro';
+import LocationAdmin from '@components/admin/LocationAdmin.astro';
+
+// You can add authentication checks here, e.g.:
+// if (!Astro.locals.user?.isAdmin) {
+//   return Astro.redirect('/login');
+// }
+
+// Or check for a simple password in development:
+const adminPassword = import.meta.env.ADMIN_PASSWORD;
+const providedPassword = Astro.url.searchParams.get('password');
+
+if (adminPassword && providedPassword !== adminPassword) {
+	return new Response('Unauthorized', { status: 401 });
+}
+---
+
+<Layout
+	title='Admin - Location Management'
+	description='Secure admin interface for updating current location'
+>
+	<main class='min-h-screen bg-gray-50 py-12 px-4'>
+		<div class='max-w-2xl mx-auto'>
+			<div class='text-center mb-8'>
+				<h1 class='text-3xl font-bold text-gray-900'>Location Management</h1>
+				<p class='mt-2 text-gray-600'>
+					Update your current location to display on the homepage
+				</p>
+			</div>
+
+			<LocationAdmin />
+
+			<div class='mt-8 text-center'>
+				<a
+					href='/'
+					class='inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+				>
+					← Back to Homepage
+				</a>
+			</div>
+		</div>
+	</main>
+</Layout>