Implement OAuth authentication and admin panel

- Introduced OAuth-based login flow with session management and CSRF protection.
- Added admin panel for managing events and gallery content with real-time editing functionality.
- Integrated Gitea API for saving files and updating repository content.
- Updated `.env.example` to include OAuth and Gitea-related configurations.
- Added example event and gallery JSON files for demonstration.

.env.example

@@ -0,0 +1,31 @@
+# Copy this file to .env.local for local development
+# Then run: npm run dev:local
+
+# Public base URL for your local dev server
+PUBLIC_BASE_URL=http://localhost:4321
+
+# OAuth (Gitea) settings for local development
+# Create an OAuth2 Application in your Gitea with Redirect URI:
+#   http://localhost:4321/api/auth/callback
+# Then paste the resulting Client ID/Secret below
+OAUTH_PROVIDER=gitea
+OAUTH_CLIENT_ID=
+OAUTH_CLIENT_SECRET=
+OAUTH_AUTHORIZE_URL=https://git.bookageek.ch/login/oauth/authorize
+OAUTH_TOKEN_URL=https://git.bookageek.ch/login/oauth/access_token
+OAUTH_USERINFO_URL=https://git.bookageek.ch/api/v1/user
+
+# Optional access control
+# OAUTH_ALLOWED_USERS=user1,user2
+# OAUTH_ALLOWED_ORG=your-org
+
+# Gitea API for committing content changes (service account PAT)
+GITEA_BASE=https://git.bookageek.ch
+GITEA_OWNER=
+GITEA_REPO=
+GITEA_TOKEN=
+GIT_BRANCH=main
+
+# Session and CSRF secrets (use random long strings in .env.local)
+SESSION_SECRET=
+CSRF_SECRET=

.gitignore

@@ -16,6 +16,7 @@ pnpm-debug.log*
 # environment variables
 .env
 .env.production
+.env.local
 
 # macOS-specific files
 .DS_Store

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

.idea/Gallus_Pub.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/Gallus_Pub.iml" filepath="$PROJECT_DIR$/.idea/Gallus_Pub.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

Dockerfile

@@ -1,22 +1,29 @@
 FROM node:20-alpine AS build
 
 WORKDIR /app
+
 COPY package*.json ./
-RUN npm ci
+RUN npm install
+
 COPY . .
-# Ensure CSS variables are present
+
-RUN mkdir -p public/styles
-RUN cp -r styles/* public/styles/ || true
 RUN npm run build
 
 FROM node:20-alpine AS production
 
+ENV NODE_ENV=production
 WORKDIR /app
-RUN npm install -g serve
+
-COPY --from=build /app/dist ./dist
+# Copy built app and minimal runtime files
+COPY --from=build /app/dist /app/dist
+COPY --from=build /app/package*.json /app/
+
+RUN npm pkg delete devDependencies || true
 
 EXPOSE 3000
-CMD ["serve", "-s", "dist", "-l", "3000"]
+
+# Run Astro server entry (node adapter standalone)
+CMD ["node", "dist/server/entry.mjs"]
 
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget -qO- http://localhost:3000/ || exit 1

README.md

@@ -1,47 +1,55 @@
-# Astro Starter Kit: Minimal
+# Gallus Pub Website
+
+This is the Gallus Pub website built with Astro. It includes an admin area at `/admin` for editing content (events, gallery, texts). Changes are committed back to the Git repository via the Gitea API which triggers your Woodpecker + Fly.io deployment pipeline.
+
+## Local development
+
+To run the site locally with OAuth login (Gitea):
+
+1. Copy the example env file and fill values:
+   ```bash
+   cp .env.example .env.local
+   ```
+   - Create a Gitea OAuth application with Redirect URI: `http://localhost:4321/api/auth/callback`.
+   - Set `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` from Gitea.
+   - Set `GITEA_OWNER`, `GITEA_REPO`, and a `GITEA_TOKEN` (PAT) with write access to the repo.
+   - Generate random secrets for sessions/CSRF (e.g. `openssl rand -hex 32`).
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Start dev server using your local env file:
+   ```bash
+   npm run dev:local
+   ```
+   The site runs at http://localhost:4321. Visit http://localhost:4321/admin to log in via Gitea OAuth.
+
+Notes:
+- If OAuth variables are missing or malformed, the auth endpoints return a clear 500 with guidance instead of crashing.
+- Production secrets are configured on Fly.io; `.env.local` is ignored by Git.
+
+## Project structure
 
-```sh
-npm create astro@latest -- --template minimal
 ```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```text
 /
-├── public/
+├── public/              # static assets
 ├── src/
-│   └── pages/
+│   ├── content/         # editable JSON content (events, gallery)
-│       └── index.astro
+│   ├── pages/           # Astro pages, includes /admin and API routes
+│   ├── components/      # UI components
+│   └── utils/           # session helpers
+├── .env.example         # template for local env
+├── fly.toml             # Fly.io config
+├── Dockerfile
 └── package.json
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+## Commands
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+- `npm install` – install deps
-
+- `npm run dev` – dev server without loading .env.local (expects env to be present in the shell)
-Any static assets, like images, can be placed in the `public/` directory.
+- `npm run dev:local` – dev server loading `.env.local` via dotenv-cli
-
+- `npm run build` – production build (SSR via @astrojs/node)
-## 🧞 Commands
+- `npm run preview` – preview the production build
-
-All commands are run from the root of the project, from a terminal:
-
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -1,5 +1,9 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import node from '@astrojs/node';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  output: 'server',
+  adapter: node({ mode: 'standalone' })
+});

package.json

@@ -1,14 +1,19 @@
 {
-  "name": "",
+  "name": "gallus-pub",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
+    "dev:local": "dotenv -e .env.local -- astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.12.0"
+    "astro": "^5.12.8",
+    "@astrojs/node": "^9.0.0"
+  },
+  "devDependencies": {
+    "dotenv-cli": "^7.4.1"
   }
 }

src/components/Contact.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../components/Layout.astro";
-import "../../styles/components/ContactForm.css";
+import "../styles/components/ContactForm.css";
 ---
 
 <Layout>

src/components/Drinks.astro

@@ -1,35 +1,44 @@
 ---
-import "../../styles/components/Drinks.css"
+import "../styles/components/Drinks.css"
 
 const { id } = Astro.props;
 ---
 <section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
-    <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
+    <p class="note">
+        Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
+        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!
+    </p>
+
+    <a href="/pdf/Getraenke_Gallus_2025.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
 
     <h3 class="monats-hit">Monats Hit</h3>
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
-            <span class="circle-label">Mate Vodka</span>
+            <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
+    <p class="note">
+        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
+    </p>
+
     <div class="circle-row">
-        <div class="circle" title="Bier">
+        <div class="circle whiskey-circle" title="Whiskey 1">
-            <span class="circle-label">Bier</span>
+            <img src="/images/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Wein">
+        <div class="circle whiskey-circle" title="Whiskey 2">
-            <span class="circle-label">Wein</span>
+            <img src="/images/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Cocktails">
+        <div class="circle whiskey-circle" title="Whiskey 3">
-            <span class="circle-label">Cocktails</span>
+            <img src="/images/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
     </div>
-
-    <p class="note">
-        Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
-    </p>
 </section>

src/components/EventsGrid.astro

@@ -13,7 +13,7 @@ const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
 	events?: Event[];
 	id?: string;
 };
-import "../../styles/components/EventsGrid.css";
+import "../styles/components/EventsGrid.css";
 ---
 
 <h2 class="section-title">Events</h2>

src/components/Footer.astro

@@ -6,10 +6,6 @@ const currentYear = new Date().getFullYear();
 
 <footer class="footer">
 	<div class="footer-content">
-		<div class="copyright">
-			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
-		</div>
-
 		<div class="footer-sections">
 			<div class="footer-section">
 				<h3>Öffnungszeiten</h3>
@@ -24,20 +20,22 @@ const currentYear = new Date().getFullYear();
 				<p>Gallus Pub</p>
 				<p>Metzgergasse 13</p>
 				<p>9000 St. Gallen</p>
-				<p>Reservierungen via Whatsapp</p>
+				<p>Email:</p>
-				<p><a href="tel:0772322770">077 232 27 70</a></p>
+				<p><a href="mailto:info@gallus-pub.ch">info@gallus-pub.ch</a></p>
 			</div>
 
 			<div class="footer-section">
 				<h3>Raumreservationen</h3>
 				<p>Du planst einen Event?</p>
 				<p>Der "St.Gallerruum" im 2.OG</p>
-				<p>kann gemietet werden.</p>
+				<p>Kann gemietet werden.</p>
-				<br/>
+				<p>Reservierungen via Whatsapp</p>
-				<p>Gerne öffnen wir auf Anfrage</p>
+				<p><a href="tel:0772322770">077 232 27 70</a></p>
-				<p>auch ausserhalb unserer</p>
-				<p>Betriebszeiten.</p>
 			</div>
+
+		</div>
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
 		</div>
 	</div>
 </footer>

src/components/Header.astro

@@ -1,28 +1,81 @@
 ---
 // src/components/Header.astro
 const { url } = Astro;
-import "../../styles/components/Header.css";
+import "../styles/components/Header.css";
 ---
 
 <header class="header">
-	<div class="logo-container">
+	<!-- Desktop Layout -->
-		<a href="/">
+	<div class="desktop-layout">
-			<img src="/images/Logo.png" alt="Logo" class="logo" />
+		<div class="logo-container">
-		</a>
+			<a href="/">
+				<img src="/images/Logo.png" alt="Logo" class="logo" />
+			</a>
+		</div>
+
+		<nav class="nav-main">
+			<div class="desktop-menu">
+				<a href="/#hero">Home</a>
+				<a href="/#events">Events</a>
+				<a href="/#gallery">Galerie</a>
+				<a href="/#drinks">Drinks</a>
+				<a href="/#footer">Contact</a>
+				<!--<a href="/#about">About</a>
+				<a href="/#contact">Contact</a>-->
+			</div>
+		</nav>
 	</div>
 
-	<!-- Hauptnavigation: immer Home, About, Contact -->
+	<!-- Mobile Layout -->
-	<nav class="nav-main">
+	<div class="mobile-layout">
-		<div>
+		<!-- Centered Logo -->
+		<div class="mobile-logo-container">
+			<a href="/">
+				<img src="/images/Logo.png" alt="Logo" class="logo" />
+			</a>
+		</div>
+
+		<!-- Burger Menu Below Logo -->
+		<div class="burger-menu">
+			<div class="burger-icon">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
+
+		<!-- Mobile Navigation Menu (Dropdown) -->
+		<div class="mobile-menu">
 			<a href="/#hero">Home</a>
 			<a href="/#events">Events</a>
 			<a href="/#gallery">Galerie</a>
 			<a href="/#drinks">Drinks</a>
-			<a href="/#openings">Openings</a>
+			<a href="/#footer">Contact</a>
-			<!--<a href="/#about">About</a>
-			<a href="/#contact">Contact</a>-->
 		</div>
-	</nav>
+	</div>
 </header>
 
 <div class="header-spacer"></div>
+
+<script>
+	// Toggle mobile menu when burger icon is clicked
+	document.addEventListener('DOMContentLoaded', () => {
+		const burgerIcon = document.querySelector('.burger-icon');
+		const mobileMenu = document.querySelector('.mobile-menu');
+		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
+		
+		// Toggle menu when burger icon is clicked
+		burgerIcon.addEventListener('click', () => {
+			burgerIcon.classList.toggle('active');
+			mobileMenu.classList.toggle('active');
+		});
+		
+		// Close menu when a navigation link is clicked
+		mobileMenuLinks.forEach(link => {
+			link.addEventListener('click', () => {
+				burgerIcon.classList.remove('active');
+				mobileMenu.classList.remove('active');
+			});
+		});
+	});
+</script>

src/components/Hero.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Hero.astro
-import "../../styles/components/Hero.css"
+import "../styles/components/Hero.css"
 
 const { id } = Astro.props;
 ---

src/components/HoverCard.astro

@@ -1,7 +1,6 @@
 ---
-// src/components/HoverCard.astro
+import "../styles/components/HoverCard.css";
-import "../../styles/components/HoverCard.css";
+const {title, description, image = "", date} = Astro.props;
-const { title, description, image = "", date } = Astro.props;
 ---
 
 <article class="hover-card">
@@ -9,10 +8,41 @@ const { title, description, image = "", date } = Astro.props;
 		<img class="card-image" src={image} alt={title} />
 	</div>
 
-	<h3 class="card-title" set:html={title} />
-	<h4 class="card_date">{date}</h4>
-
 	<div class="hover-text">
-		<p set:html={description} />
+		<div>
+			<p set:html={description} />
+		</div>
 	</div>
 </article>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const hoverCards = document.querySelectorAll('.hover-card');
+		
+		hoverCards.forEach(card => {
+			card.addEventListener('click', (e) => {
+				// Only toggle on mobile devices
+				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
+					card.classList.toggle('active');
+				}
+			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+					card.classList.remove('active');
+				}
+			});
+		});
+	});
+</script>

src/components/ImageCarousel.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/ImageCarousel.astro
-import "../../styles/components/ImageCarousel.css";
+import "../styles/components/ImageCarousel.css";
 
 interface Image {
   src: string;

src/components/Layout.astro

@@ -2,9 +2,9 @@
 // src/components/Layout.astro
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
-import "../../styles/components/Layout.css"
+import "../styles/components/Layout.css"
-import "../../styles/variables.css"
+import "../styles/variables.css"
-import "../../styles/index.css"
+import "../styles/index.css"
 ---
 
 <!doctype html>

src/components/Welcome.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Welcome.astro
-import "../../styles/components/Welcome.css"
+import "../styles/components/Welcome.css"
 
 const { id } = Astro.props;
 ---
@@ -9,7 +9,8 @@ const { id } = Astro.props;
 
 	<div class="welcome-text">
 
-		<h2>Herzlich willkommen im Gallus Pub!</h2>
+		<h2>Herzlich willkommen im</h2>
+		<h2>Gallus Pub!</h2>
 
 		<p>
 			Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
@@ -51,7 +52,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome backgrount image" />
+		<img src="/images/Welcome.png" alt="Welcome background image" />
 	</div>
 
 </section>

src/content/events.json

@@ -0,0 +1,26 @@
+[
+  {
+    "image": "/images/karaoke.jpg",
+    "title": "Karaoke",
+    "date": "Mittwoch - Samstag",
+    "description": "Bei uns gibt es Karaoke Mi-Sa!! <br>\nSeid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>\nReserviere am besten gleich per Whatsapp <a href=\"tel:+41772322770\">077 232 27 70</a>"
+  },
+  {
+    "image": "/images/pub_quiz.jpg",
+    "title": "Pub Quiz",
+    "date": "Jeden Freitag",
+    "description": "Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>\nJede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>\nAuch Einzelpersonen sind herzlich willkommen! <br>\n*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF"
+  },
+  {
+    "image": "/images/crepes_sucette.jpg",
+    "title": "Crepes Sucette <br /> Live Music im Gallus Pub!",
+    "date": "Do, 04. September 2025",
+    "description": "<b>20:00 Uhr</b> <br>\n<a href=\"Metzgergasse 13, 9000 St. Gallen\">Metzgergasse 13, 9000 St. Gallen</a> <br>\nErlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>\nJetzt reservieren: <a href=\"tel:+41772322770\">077 232 27 70</a>"
+  },
+  {
+    "image": "/images/kevin_mcflannigan.jpeg",
+    "title": "Kevin McFlannigan <br> Live Music im Gallus Pub!",
+    "date": "Sa, 27. September 2025",
+    "description": "<b>ab 20:00 Uhr</b> <br>\nSinger & Songwriter Kevin McFlannigan <br>\nEintritt ist Frei / Hutkollekte <br>"
+  }
+]

src/content/gallery.json

@@ -0,0 +1,12 @@
+[
+  { "src": "/images/Logo.png", "alt": "Erstes Bild" },
+  { "src": "/images/Logo.png", "alt": "Zweites Bild" },
+  { "src": "/images/Logo.png", "alt": "Drittes Bild" },
+  { "src": "/images/Logo.png", "alt": "Viertes Bild" },
+  { "src": "/images/Logo.png", "alt": "Fünftes Bild" },
+  { "src": "/images/Logo.png", "alt": "Sechstes Bild" },
+  { "src": "/images/Logo.png", "alt": "Siebtes Bild" },
+  { "src": "/images/Logo.png", "alt": "Achtes Bild" },
+  { "src": "/images/Logo.png", "alt": "Neuntes Bild" },
+  { "src": "/images/Logo.png", "alt": "Zehntes Bild" }
+]

src/pages/admin/index.astro

@@ -0,0 +1,94 @@
+---
+import Layout from "../../components/Layout.astro";
+import eventsData from "../../content/events.json";
+import imagesData from "../../content/gallery.json";
+import { getSessionFromRequest } from "../../utils/session";
+
+const session = getSessionFromRequest(Astro.request);
+if (!session?.user) {
+  // Not logged in: redirect to OAuth login
+  return Astro.redirect("/api/auth/login");
+}
+const csrf = session.csrf;
+const events = eventsData;
+const images = imagesData;
+---
+
+<Layout>
+  <section>
+    <h1>Admin</h1>
+    <p>Eingeloggt als {session.user.login}</p>
+    <form id="editor">
+      <h2>Events (JSON)</h2>
+      <textarea id="events" name="events" rows="16" style="width:100%;font-family:monospace;">{JSON.stringify(events, null, 2)}</textarea>
+
+      <h2>Galerie (JSON)</h2>
+      <textarea id="images" name="images" rows="10" style="width:100%;font-family:monospace;">{JSON.stringify(images, null, 2)}</textarea>
+
+      <h2>Bilder hochladen</h2>
+      <input type="file" id="fileInput" multiple accept="image/*" />
+
+      <div style="margin-top:1rem;display:flex;gap:.5rem;">
+        <button id="saveBtn" type="button">Speichern</button>
+        <button id="logoutBtn" type="button">Logout</button>
+      </div>
+    </form>
+  </section>
+
+  <meta name="csrf" content={csrf} />
+  <script type="module">
+    const csrf = document.querySelector('meta[name="csrf"]').content;
+
+    async function uploadFiles(files){
+      const uploads = [];
+      for (const file of files){
+        const arrayBuffer = await file.arrayBuffer();
+        const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+        uploads.push({ path: `public/images/${file.name}`, content: base64 });
+      }
+      return uploads;
+    }
+
+    async function save(){
+      let events, images;
+      try{
+        events = JSON.parse(document.getElementById('events').value);
+        images = JSON.parse(document.getElementById('images').value);
+      }catch(e){
+        alert('JSON fehlerhaft: ' + e.message);
+        return;
+      }
+
+      const files = [
+        { path: 'src/content/events.json', content: JSON.stringify(events, null, 2) },
+        { path: 'src/content/gallery.json', content: JSON.stringify(images, null, 2) },
+      ];
+
+      const input = document.getElementById('fileInput');
+      if (input.files && input.files.length){
+        const imageFiles = await uploadFiles(input.files);
+        files.push(...imageFiles);
+      }
+
+      const res = await fetch('/api/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF': csrf },
+        body: JSON.stringify({ files, message: 'Admin-Inhalte aktualisiert' })
+      });
+      if (!res.ok){
+        const t = await res.text();
+        alert('Fehler beim Speichern: ' + t);
+        return;
+      }
+      alert('Gespeichert! Build wird gestartet.');
+      // optional: Seite neu laden
+      location.reload();
+    }
+
+    document.getElementById('saveBtn').addEventListener('click', save);
+    document.getElementById('logoutBtn').addEventListener('click', async () => {
+      await fetch('/api/auth/logout', { method: 'POST' });
+      location.href = '/';
+    });
+  </script>
+</Layout>

src/pages/api/auth/callback.ts

@@ -0,0 +1,116 @@
+import type { APIRoute } from "astro";
+import { createSessionCookie, sessionCookieHeader, randomToken } from "../../../utils/session";
+
+export const GET: APIRoute = async ({ request }) => {
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+  const cookie = request.headers.get("cookie") || "";
+  const stateCookie = cookie.match(/(?:^|; )oauth_state=([^;]+)/)?.[1];
+
+  if (!code || !state || !stateCookie || stateCookie !== state) {
+    return new Response("Invalid OAuth state", { status: 400 });
+  }
+
+  const clientId = process.env.OAUTH_CLIENT_ID;
+  const clientSecret = process.env.OAUTH_CLIENT_SECRET;
+  const tokenUrlRaw = process.env.OAUTH_TOKEN_URL;
+  const userinfoUrl = process.env.OAUTH_USERINFO_URL;
+  if (!clientId || !clientSecret || !tokenUrlRaw || !userinfoUrl) {
+    return new Response("OAuth not fully configured. Please set OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_TOKEN_URL, OAUTH_USERINFO_URL.", { status: 500 });
+  }
+
+  // Compute redirect_uri consistent with login, robust against invalid PUBLIC_BASE_URL
+  let redirectUri: string;
+  try {
+    if (process.env.PUBLIC_BASE_URL) {
+      const base = new URL(process.env.PUBLIC_BASE_URL);
+      redirectUri = new URL("/api/auth/callback", base).toString();
+    } else {
+      const reqUrl = new URL(request.url);
+      redirectUri = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+    }
+  } catch {
+    const reqUrl = new URL(request.url);
+    redirectUri = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+  }
+
+  // Validate token URL
+  let tokenUrl: URL;
+  try {
+    tokenUrl = new URL(tokenUrlRaw);
+  } catch {
+    return new Response("Invalid OAUTH_TOKEN_URL", { status: 500 });
+  }
+
+  // Exchange code for token
+  const params = new URLSearchParams();
+  params.set("client_id", clientId);
+  params.set("client_secret", clientSecret);
+  params.set("code", code);
+  params.set("grant_type", "authorization_code");
+  params.set("redirect_uri", redirectUri);
+
+  const tokenRes = await fetch(tokenUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: params.toString(),
+  });
+
+  if (!tokenRes.ok) {
+    const t = await tokenRes.text();
+    return new Response(`OAuth token error: ${tokenRes.status} ${t}`, { status: 500 });
+  }
+
+  const tokenData = await tokenRes.json().catch(async () => {
+    // Some Gitea versions return application/x-www-form-urlencoded
+    const text = await tokenRes.text();
+    const usp = new URLSearchParams(text);
+    return Object.fromEntries(usp.entries());
+  });
+  const accessToken = tokenData.access_token || tokenData["access_token"];
+  if (!accessToken) {
+    return new Response("No access token", { status: 500 });
+  }
+
+  const userRes = await fetch(userinfoUrl, {
+    headers: { Authorization: `token ${accessToken}` },
+  });
+  if (!userRes.ok) {
+    const t = await userRes.text();
+    return new Response(`Userinfo error: ${userRes.status} ${t}`, { status: 500 });
+  }
+  const user = await userRes.json();
+
+  // Optional allowlist
+  const allowedUsers = (process.env.OAUTH_ALLOWED_USERS || "").split(/[\,\s]+/).filter(Boolean);
+  const allowedOrg = process.env.OAUTH_ALLOWED_ORG;
+  if (allowedUsers.length && !allowedUsers.includes(user.login)) {
+    return new Response("Forbidden", { status: 403 });
+  }
+  if (allowedOrg) {
+    // Best-effort org check
+    try {
+      const orgsRes = await fetch(process.env.GITEA_BASE + "/api/v1/user/orgs", {
+        headers: { Authorization: `token ${accessToken}` },
+      });
+      if (orgsRes.ok) {
+        const orgs = await orgsRes.json();
+        const inOrg = Array.isArray(orgs) && orgs.some((o: any) => o.username === allowedOrg || o.login === allowedOrg || o.name === allowedOrg);
+        if (!inOrg) return new Response("Forbidden (org)", { status: 403 });
+      }
+    } catch {}
+  }
+
+  const csrf = randomToken(16);
+  const sessionValue = createSessionCookie({
+    user: { id: user.id, login: user.login, name: user.full_name || user.username || user.login, email: user.email },
+    csrf,
+  });
+
+  const headers = new Headers();
+  headers.set("Set-Cookie", sessionCookieHeader(sessionValue));
+  headers.append("Set-Cookie", "oauth_state=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0");
+  headers.set("Location", "/admin");
+  return new Response(null, { status: 302, headers });
+};

src/pages/api/auth/login.ts

@@ -0,0 +1,53 @@
+import type { APIRoute } from "astro";
+import { randomToken, setTempCookie } from "../../../utils/session";
+
+export const GET: APIRoute = async ({ request }) => {
+  const clientId = process.env.OAUTH_CLIENT_ID;
+  const authorizeUrlRaw = process.env.OAUTH_AUTHORIZE_URL;
+  if (!clientId || !authorizeUrlRaw) {
+    return new Response(
+      "OAuth not configured. Please set OAUTH_CLIENT_ID and OAUTH_AUTHORIZE_URL (and related secrets) for local dev.",
+      { status: 500 }
+    );
+  }
+
+  // Determine callback URL
+  let finalRedirect: string;
+  try {
+    if (process.env.PUBLIC_BASE_URL) {
+      // Ensure PUBLIC_BASE_URL is an absolute URL
+      const base = new URL(process.env.PUBLIC_BASE_URL);
+      finalRedirect = new URL("/api/auth/callback", base).toString();
+    } else {
+      // Fallback to current request origin
+      const reqUrl = new URL(request.url);
+      finalRedirect = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+    }
+  } catch {
+    // As a last resort, use request URL
+    const reqUrl = new URL(request.url);
+    finalRedirect = new URL("/api/auth/callback", `${reqUrl.protocol}//${reqUrl.host}`).toString();
+  }
+
+  // Validate authorize URL
+  let authorizeUrl: URL;
+  try {
+    authorizeUrl = new URL(authorizeUrlRaw);
+  } catch {
+    return new Response("Invalid OAUTH_AUTHORIZE_URL", { status: 500 });
+  }
+
+  const state = randomToken(16);
+  authorizeUrl.searchParams.set("client_id", clientId);
+  authorizeUrl.searchParams.set("redirect_uri", finalRedirect);
+  authorizeUrl.searchParams.set("response_type", "code");
+  authorizeUrl.searchParams.set("state", state);
+
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: authorizeUrl.toString(),
+      "Set-Cookie": setTempCookie("oauth_state", state),
+    },
+  });
+};

src/pages/api/auth/logout.ts

@@ -0,0 +1,11 @@
+import type { APIRoute } from "astro";
+import { clearCookieHeader } from "../../../utils/session";
+
+export const POST: APIRoute = async () => {
+  return new Response(null, {
+    status: 204,
+    headers: {
+      "Set-Cookie": clearCookieHeader(),
+    },
+  });
+};

src/pages/api/save.ts

@@ -0,0 +1,97 @@
+import type { APIRoute } from "astro";
+import { getSessionFromRequest } from "../../utils/session";
+
+const GITEA_BASE = process.env.GITEA_BASE!;
+const GITEA_OWNER = process.env.GITEA_OWNER!;
+const GITEA_REPO = process.env.GITEA_REPO!;
+const GITEA_TOKEN = process.env.GITEA_TOKEN!;
+const DEFAULT_BRANCH = process.env.GIT_BRANCH || "main";
+
+function isAllowedPath(path: string) {
+  if (path === "src/content/events.json") return true;
+  if (path === "src/content/gallery.json") return true;
+  if (path.startsWith("public/images/")) {
+    return /\.(png|jpg|jpeg|gif|webp|svg)$/i.test(path);
+  }
+  return false;
+}
+
+async function getShaIfExists(path: string): Promise<string | undefined> {
+  const url = `${GITEA_BASE}/api/v1/repos/${encodeURIComponent(GITEA_OWNER)}/${encodeURIComponent(GITEA_REPO)}/contents/${encodeURIComponent(path)}?ref=${encodeURIComponent(DEFAULT_BRANCH)}`;
+  const res = await fetch(url, {
+    headers: { Authorization: `token ${GITEA_TOKEN}` },
+  });
+  if (res.status === 404) return undefined;
+  if (!res.ok) throw new Error(`Gitea get sha error ${res.status}`);
+  const data = await res.json();
+  return data.sha;
+}
+
+export const POST: APIRoute = async ({ request }) => {
+  const session = getSessionFromRequest(request);
+  if (!session?.user) return new Response(JSON.stringify({ error: "unauthorized" }), { status: 401 });
+
+  // CSRF header required
+  const csrfHeader = request.headers.get("x-csrf") || request.headers.get("X-CSRF");
+  if (!csrfHeader || csrfHeader !== session.csrf) {
+    return new Response(JSON.stringify({ error: "invalid csrf" }), { status: 403 });
+  }
+
+  let payload: any;
+  try {
+    payload = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: "invalid json" }), { status: 400 });
+  }
+  if (!payload || !Array.isArray(payload.files)) {
+    return new Response(JSON.stringify({ error: "missing files" }), { status: 400 });
+  }
+
+  const results: any[] = [];
+  for (const file of payload.files) {
+    const path = String(file.path || "");
+    if (!isAllowedPath(path)) {
+      return new Response(JSON.stringify({ error: `path not allowed: ${path}` }), { status: 400 });
+    }
+    let contentBase64: string;
+    if (path.startsWith("public/images/")) {
+      // Expect already base64 string of binary
+      contentBase64 = String(file.content || "");
+      // Remove possible data URL prefix
+      const match = contentBase64.match(/^data:[^;]+;base64,(.*)$/);
+      if (match) contentBase64 = match[1];
+    } else {
+      // Text file
+      contentBase64 = Buffer.from(String(file.content ?? ""), "utf-8").toString("base64");
+    }
+
+    const sha = await getShaIfExists(path).catch(() => undefined);
+    const url = `${GITEA_BASE}/api/v1/repos/${encodeURIComponent(GITEA_OWNER)}/${encodeURIComponent(GITEA_REPO)}/contents/${encodeURIComponent(path)}`;
+    const body: any = {
+      content: contentBase64,
+      message: payload.message || `Update ${path}`,
+      branch: DEFAULT_BRANCH,
+    };
+    if (sha) body.sha = sha;
+    if (session.user) {
+      body.author = { name: session.user.name || session.user.login, email: session.user.email || `${session.user.login}@users.noreply` };
+      body.committer = { name: session.user.name || session.user.login, email: session.user.email || `${session.user.login}@users.noreply` };
+    }
+
+    const res = await fetch(url, {
+      method: "PUT",
+      headers: {
+        Authorization: `token ${GITEA_TOKEN}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const t = await res.text();
+      return new Response(JSON.stringify({ error: `Gitea error for ${path}: ${res.status} ${t}` }), { status: 500 });
+    }
+    results.push(await res.json());
+  }
+
+  return new Response(JSON.stringify({ ok: true, results }), { status: 200, headers: { "Content-Type": "application/json" } });
+};

src/pages/index.astro

@@ -9,62 +9,9 @@ import ImageCarousel from "../components/ImageCarousel.astro";
 import Contact from "../components/Contact.astro";
 import About from "../components/About.astro";
 
-const events = [
+// Inhalte aus Dateien laden (editierbar über Admin)
-	{
+import events from "../content/events.json";
-		image: "/images/karaoke.jpg",
+import images from "../content/gallery.json";
-		title: "Karaoke",
-		date: "Mittwoch - Samstag",
-		description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
-			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
-			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
-		`,
-	},
-	{
-		image: "/images/pub_quiz.jpg",
-		title: "Pub Quiz",
-		date: "Jeden Freitag",
-		description: `
-			Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
-			Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
-			Auch Einzelpersonen sind herzlich willkommen! <br>
-			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
-		`,
-	},
-	{
-		image: "/images/crepes_sucette.jpg",
-		title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
-		date: "Do, 04. September 2025",
-		description: `
-			<b>20:00 Uhr</b> <br>
-			<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
-			Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
-			Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
-	},
-	{
-		image: "/images/kevin_mcflannigan.jpeg",
-		title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
-		date: "Sa, 27. September 2025",
-		description: `
-			<b>ab 20:00 Uhr</b> <br>
-			Singer & Songwriter Kevin McFlannigan <br>
-			Eintritt ist Frei / Hutkollekte <br>
-		`,
-	},
-];
-
-const images = [
-	{ src: "/images/Logo.png", alt: "Erstes Bild" },
-	{ src: "/images/Logo.png", alt: "Zweites Bild" },
-	{ src: "/images/Logo.png", alt: "Drittes Bild" },
-	{ src: "/images/Logo.png", alt: "Viertes Bild" },
-	{ src: "/images/Logo.png", alt: "Fünftes Bild" },
-	{ src: "/images/Logo.png", alt: "Sechstes Bild" },
-	{ src: "/images/Logo.png", alt: "Siebtes Bild" },
-	{ src: "/images/Logo.png", alt: "Achtes Bild" },
-	{ src: "/images/Logo.png", alt: "Neuntes Bild" },
-	{ src: "/images/Logo.png", alt: "Zehntes Bild" },
-];
 ---
 
 <Layout>

src/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/styles/components/ContactForm.css

@@ -1,5 +1,3 @@
-/* styles/components/ContactForm.css */
-
 .contact-container {
   max-width: 800px;
   margin: 2rem auto;

src/styles/components/Drinks.css

@@ -1,5 +1,5 @@
 .Drinks {
-  font-family: var(--font-family-primary);
+  font-family: var(--font-family-primary), serif;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 6em;
+  height: 9em;
-  width: 6em;
+  width: 9em;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;

src/styles/components/Footer.css

@@ -13,9 +13,9 @@
 
 .copyright {
     text-align: center;
-    margin-bottom: 2rem;
+    margin-top: 2rem;
-    padding-bottom: 1rem;
+    padding-top: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .footer-sections {

src/styles/components/Header.css

@@ -0,0 +1,190 @@
+.header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #0e0c0c;
+	z-index: 1000;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(5px);
+	width: 100%;
+	border-bottom: 1px solid #444;
+}
+
+.header-spacer {
+	height: 70px;
+	/* Should match the header height */
+}
+
+/* Desktop Layout */
+.desktop-layout {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 2rem;
+	height: 70px;
+}
+
+.logo-container {
+	display: flex;
+	align-items: center;
+}
+
+.logo {
+	margin-left: 2em;
+	height: 4em;
+	width: auto;
+	transition: transform 0.3s ease;
+}
+
+.logo:hover {
+	transform: scale(1.05);
+}
+
+.nav-main {
+	display: flex;
+	align-items: center;
+}
+
+.nav-main a {
+	margin: 0 1rem;
+	color: white;
+	text-decoration: none;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+.nav-main a:hover {
+	color: #ffa500;
+}
+
+/* Mobile Layout */
+.mobile-layout {
+	display: none;
+	flex-direction: column;
+	align-items: center;
+	padding: 1rem;
+}
+
+.mobile-logo-container {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 0.5rem;
+}
+
+.mobile-logo-container .logo {
+	margin: 0;
+	height: 3.5em;
+}
+
+/* Burger Menu Styles */
+.burger-menu {
+	display: flex;
+	justify-content: center;
+	cursor: pointer;
+	margin: 0.5rem 0;
+}
+
+.burger-icon {
+	width: 30px;
+	height: 24px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.burger-icon span {
+	display: block;
+	height: 3px;
+	width: 100%;
+	background-color: white;
+	border-radius: 3px;
+	transition: all 0.3s ease;
+}
+
+.burger-icon.active span:nth-child(1) {
+	transform: translateY(10.5px) rotate(45deg);
+}
+
+.burger-icon.active span:nth-child(2) {
+	opacity: 0;
+}
+
+.burger-icon.active span:nth-child(3) {
+	transform: translateY(-10.5px) rotate(-45deg);
+}
+
+/* Mobile Menu Styles */
+.mobile-menu {
+	display: none;
+	width: 100%;
+	background-color: #0e0c0c;
+	flex-direction: column;
+	align-items: center;
+	padding: 0;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	z-index: 999;
+}
+
+.mobile-menu.active {
+	max-height: 300px; /* Adjust based on content */
+	padding: 0.5rem 0;
+}
+
+.mobile-menu a {
+	margin: 0.5rem 0;
+	color: white;
+	text-decoration: none;
+	font-size: 1.2rem;
+	text-align: center;
+	width: 100%;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid #333;
+}
+
+.mobile-menu a:last-child {
+	border-bottom: none;
+}
+
+.mobile-menu a:hover {
+	color: #ffa500;
+}
+
+@media (max-width: 768px) {
+	.header-spacer {
+		height: 120px; /* Adjusted for the taller mobile header */
+	}
+
+	/* Hide desktop layout, show mobile layout */
+	.desktop-layout {
+		display: none;
+	}
+
+	.mobile-layout {
+		display: flex;
+	}
+
+	/* Show mobile menu when active */
+	.mobile-menu.active {
+		display: flex;
+	}
+}
+
+@media (max-width: 480px) {
+	.header-spacer {
+		height: 110px; /* Slightly smaller for very small screens */
+	}
+
+	.mobile-logo-container .logo {
+		height: 3em;
+	}
+
+	.burger-icon {
+		width: 25px;
+		height: 20px;
+	}
+}

src/styles/components/Hero.css

@@ -1,4 +1,3 @@
-/* === Hero === */
 .hero-overlay {
 	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
 	background-size: cover;

src/styles/components/HoverCard.css

@@ -1,6 +1,6 @@
 .hover-card {
 	position: relative;
-	width: 350px;
+	width: 400px;
 	height: 400px;
 	border-radius: var(--border-radius);
 	background-color: var(--color-accent-green);
@@ -16,15 +16,6 @@
 	transform: translateY(-5px);
 }
 
-.card-title {
-	padding: 15px 15px 5px 15px;
-	margin: 0;
-	color: var(--color-accent-beige);
-	font-size: var(--font-size-medium);
-	text-align: center;
-	order: -2;
-}
-
 .card_date {
 	padding: 0 15px 15px 15px;
 	margin: 0;

src/utils/session.ts

@@ -0,0 +1,74 @@
+import crypto from "node:crypto";
+
+export type SessionData = {
+  user?: {
+    id: number;
+    login: string;
+    name?: string;
+    email?: string;
+  };
+  csrf?: string;
+};
+
+const COOKIE_NAME = "gp_session";
+
+function b64url(input: Buffer | string) {
+  return Buffer.from(input)
+    .toString("base64")
+    .replace(/=/g, "")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_");
+}
+
+function sign(payload: string, secret: string) {
+  return crypto.createHmac("sha256", secret).update(payload).digest("base64url");
+}
+
+export function createSessionCookie(data: SessionData, secret = process.env.SESSION_SECRET || "") {
+  const payload = b64url(JSON.stringify(data));
+  const sig = sign(payload, secret);
+  return `${payload}.${sig}`;
+}
+
+export function parseSessionCookie(cookieValue: string | undefined, secret = process.env.SESSION_SECRET || ""): SessionData | undefined {
+  if (!cookieValue) return undefined;
+  const [payload, sig] = cookieValue.split(".");
+  if (!payload || !sig) return undefined;
+  const expected = sign(payload, secret);
+  if (!crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected))) return undefined;
+  try {
+    const json = Buffer.from(payload.replace(/-/g, "+").replace(/_/g, "/"), "base64").toString("utf-8");
+    return JSON.parse(json);
+  } catch {
+    return undefined;
+  }
+}
+
+export function clearCookieHeader(name = COOKIE_NAME) {
+  return `${name}=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0`;
+}
+
+export function sessionCookieHeader(value: string, name = COOKIE_NAME) {
+  // 7 days
+  const maxAge = 60 * 60 * 24 * 7;
+  return `${name}=${value}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+}
+
+export function getSessionFromRequest(req: Request, secret = process.env.SESSION_SECRET || ""): SessionData | undefined {
+  const cookie = req.headers.get("cookie") || "";
+  const match = cookie.match(/(?:^|; )gp_session=([^;]+)/);
+  if (!match) return undefined;
+  return parseSessionCookie(match[1], secret);
+}
+
+export function randomToken(bytes = 32) {
+  return crypto.randomBytes(bytes).toString("hex");
+}
+
+export const COOKIE_NAME_STATE = "oauth_state";
+
+export function setTempCookie(name: string, value: string) {
+  // short lived: 10 minutes
+  const maxAge = 60 * 10;
+  return `${name}=${value}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=${maxAge}`;
+}

styles/components/Header.css

@@ -1,92 +0,0 @@
-.header {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	background-color: #0e0c0c;
-	z-index: 1000;
-	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-	backdrop-filter: blur(5px);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 1rem 2rem;
-	height: 70px;
-	width: 100%;
-	border-bottom: 1px solid #444;
-}
-
-.header-spacer {
-	height: 70px;
-	/* Should match the header height */
-}
-
-
-.logo-container {
-	display: flex;
-	align-items: center;
-}
-
-.logo {
-	margin-left: 2em;
-	height: 4em;
-	width: auto;
-	transition: transform 0.3s ease;
-}
-
-.logo:hover {
-	transform: scale(1.05);
-}
-
-.nav-main {
-	display: flex;
-	align-items: center;
-}
-
-.nav-main a {
-	margin: 0 1rem;
-	color: white;
-	text-decoration: none;
-	font-size: 1rem;
-	cursor: pointer;
-}
-
-.nav-main a:hover {
-	color: #ffa500;
-}
-
-@media (max-width: 768px) {
-	.header {
-		height: 65px;
-	}
-
-	.logo {
-		margin-left: 1em;
-		height: 3em;
-	}
-
-	.header-spacer {
-		height: 65px;
-	}
-}
-
-@media (max-width: 480px) {
-	.header {
-		padding: 0.5rem;
-		height: 60px;
-	}
-
-	.logo {
-		margin-left: 0.5em;
-		height: 2.5em;
-	}
-
-	.nav-main a {
-		margin: 0 0.5rem;
-		font-size: 0.9rem;
-	}
-
-	.header-spacer {
-		height: 60px;
-	}
-}