feat: update project assets and components with new images and improve image handling

Reviewed-on: #3

.env.example

@@ -1,31 +0,0 @@
-# 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,7 +16,6 @@ pnpm-debug.log*
 # environment variables
 .env
 .env.production
-.env.local
 
 # macOS-specific files
 .DS_Store

Dockerfile

@@ -1,29 +1,22 @@
 FROM node:20-alpine AS build
 
 WORKDIR /app
-
 COPY package*.json ./
-RUN npm install
+RUN npm ci
-
 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 built app and minimal runtime files
+COPY --from=build /app/dist ./dist
-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,55 +1,47 @@
-# Gallus Pub Website
+# Astro Starter Kit: Minimal
-
-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/              # static assets
+├── public/
 ├── src/
-│   ├── content/         # editable JSON content (events, gallery)
+│   └── pages/
-│   ├── pages/           # Astro pages, includes /admin and API routes
+│       └── index.astro
-│   ├── components/      # UI components
-│   └── utils/           # session helpers
-├── .env.example         # template for local env
-├── fly.toml             # Fly.io config
-├── Dockerfile
 └── package.json
 ```
 
-## Commands
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
 
-- `npm install` – install deps
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-- `npm run dev` – dev server without loading .env.local (expects env to be present in the shell)
+
-- `npm run dev:local` – dev server loading `.env.local` via dotenv-cli
+Any static assets, like images, can be placed in the `public/` directory.
-- `npm run build` – production build (SSR via @astrojs/node)
+
-- `npm run preview` – preview the production build
+## 🧞 Commands
+
+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,9 +1,5 @@
 // @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,19 +1,14 @@
 {
-  "name": "gallus-pub",
+  "name": "Gallus Pub Site",
   "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.8",
+    "astro": "^5.12.0"
-    "@astrojs/node": "^9.0.0"
-  },
-  "devDependencies": {
-    "dotenv-cli": "^7.4.1"
   }
-}
+}

src/components/Drinks.astro

@@ -1,5 +1,10 @@
 ---
+import { Image } from "astro:assets";
 import "../styles/components/Drinks.css"
+import MonthlyHit from "../assets/images/MonthlyHit.png";
+import Whiskey1 from "../assets/images/whiskey/Whiskey1.png";
+import Whiskey2 from "../assets/images/whiskey/Whiskey2.png";
+import Whiskey3 from "../assets/images/whiskey/Whiskey3.png";
 
 const { id } = Astro.props;
 ---
@@ -17,7 +22,7 @@ const { id } = Astro.props;
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
-            <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
+            <Image src={MonthlyHit} alt="Monats Hit" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
@@ -29,15 +34,15 @@ const { id } = Astro.props;
 
     <div class="circle-row">
         <div class="circle whiskey-circle" title="Whiskey 1">
-            <img src="/images/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <Image src={Whiskey1} alt="Whiskey 1" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div class="circle whiskey-circle" title="Whiskey 2">
-            <img src="/images/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
+            <Image src={Whiskey2} alt="Whiskey 2" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div class="circle whiskey-circle" title="Whiskey 3">
-            <img src="/images/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
+            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
             <span class="circle-label"></span>
         </div>
     </div>

src/components/EventsGrid.astro

@@ -2,9 +2,10 @@
 // src/components/EventsGrid.astro
 
 import HoverCard from "./HoverCard.astro";
+import type { ImageMetadata } from "astro";
 
 interface Event {
-	image: string;
+	image: ImageMetadata;
 	title: string;
 	date: string;
 	description: string;

src/components/Footer.astro

@@ -1,11 +1,13 @@
 ---
 // src/components/Footer.astro
-import "/styles/components/Footer.css"
+import "../styles/components/Footer.css"
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="footer">
+<footer class="footer" id="footer">
 	<div class="footer-content">
+
+
 		<div class="footer-sections">
 			<div class="footer-section">
 				<h3>Öffnungszeiten</h3>
@@ -20,7 +22,7 @@ const currentYear = new Date().getFullYear();
 				<p>Gallus Pub</p>
 				<p>Metzgergasse 13</p>
 				<p>9000 St. Gallen</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>
 
@@ -28,11 +30,9 @@ const currentYear = new Date().getFullYear();
 				<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>
 				<p>Reservierungen via Whatsapp</p>
-				<p><a href="tel:0772322770">077 232 27 70</a></p>
 			</div>
-
 		</div>
 		<div class="copyright">
 			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.

src/components/Header.astro

@@ -1,5 +1,7 @@
 ---
 // src/components/Header.astro
+import { Image } from "astro:assets";
+import Logo from "../assets/images/Logo.png";
 const { url } = Astro;
 import "../styles/components/Header.css";
 ---
@@ -9,7 +11,7 @@ import "../styles/components/Header.css";
 	<div class="desktop-layout">
 		<div class="logo-container">
 			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo" />
+				<Image src={Logo} alt="Logo" class="logo" />
 			</a>
 		</div>
 
@@ -31,7 +33,7 @@ import "../styles/components/Header.css";
 		<!-- Centered Logo -->
 		<div class="mobile-logo-container">
 			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo" />
+				<Image src={Logo} alt="Logo" class="logo" />
 			</a>
 		</div>
 
@@ -65,16 +67,16 @@ import "../styles/components/Header.css";
 		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
 		
 		// Toggle menu when burger icon is clicked
-		burgerIcon.addEventListener('click', () => {
+		burgerIcon?.addEventListener('click', () => {
 			burgerIcon.classList.toggle('active');
-			mobileMenu.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');
+				burgerIcon?.classList.remove('active');
-				mobileMenu.classList.remove('active');
+				mobileMenu?.classList.remove('active');
 			});
 		});
 	});

src/components/Hero.astro

@@ -15,7 +15,7 @@ const { id } = Astro.props;
 
 			<p>Im Herzen von St.Gallen</p>
 
-			<a href="#" class="button">Aktuelles ↓</a>
+			<a href="#welcome" class="button">Aktuelles ↓</a>
 		</div>
 
 	</div>

src/components/HoverCard.astro

@@ -1,11 +1,18 @@
 ---
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import "../styles/components/HoverCard.css";
-const {title, description, image = "", date} = Astro.props;
+const {title, description, image, date} = Astro.props as {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	date: string;
+};
 ---
 
 <article class="hover-card">
 	<div class="image-container">
-		<img class="card-image" src={image} alt={title} />
+		<Image class="card-image" src={image} alt={title} />
 	</div>
 
 	<div class="hover-text">
@@ -39,7 +46,7 @@ const {title, description, image = "", date} = Astro.props;
 
 			// Close card when clicking outside (mobile only)
 			document.addEventListener('click', (e) => {
-				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+				if (window.innerWidth <= 768 && !card.contains(e.target as Node)) {
 					card.classList.remove('active');
 				}
 			});

src/components/ImageCarousel.astro

@@ -1,13 +1,15 @@
 ---
 // src/components/ImageCarousel.astro
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import "../styles/components/ImageCarousel.css";
 
-interface Image {
+interface ImageData {
-  src: string;
+  src: ImageMetadata;
   alt: string;
 }
 
-const { images = [], id } = Astro.props as { images: Image[], id?: string };
+const { images = [], id } = Astro.props as { images: ImageData[], id?: string };
 ---
 
 <section id={id} class="image-carousel-container">
@@ -21,7 +23,7 @@ const { images = [], id } = Astro.props as { images: Image[], id?: string };
       <div class="carousel-track">
         {images.map((image, index) => (
           <div class="carousel-slide" data-index={index}>
-            <img src={image.src} alt={image.alt} class="carousel-image" />
+            <Image src={image.src} alt={image.alt} class="carousel-image" />
           </div>
         ))}
       </div>

src/components/Welcome.astro

@@ -1,6 +1,8 @@
 ---
 // src/components/Welcome.astro
+import { Image } from "astro:assets";
 import "../styles/components/Welcome.css"
+import WelcomeImg from "../assets/images/Welcome.png";
 
 const { id } = Astro.props;
 ---
@@ -52,7 +54,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome background image" />
+		<Image src={WelcomeImg} alt="Welcome background image" />
 	</div>
 
 </section>

src/content/events.json

@@ -1,26 +0,0 @@
-[
-  {
-    "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

@@ -1,12 +0,0 @@
-[
-  { "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

@@ -1,94 +0,0 @@
----
-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

@@ -1,116 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,17 +1,98 @@
 ---
-// src/pages/index.astro
 import Layout from "../components/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
 import EventsGrid from "../components/EventsGrid.astro";
 import Drinks from "../components/Drinks.astro";
 import ImageCarousel from "../components/ImageCarousel.astro";
-import Contact from "../components/Contact.astro";
-import About from "../components/About.astro";
 
-// Inhalte aus Dateien laden (editierbar über Admin)
+// Import event images
-import events from "../content/events.json";
+import eventKaraoke from "../assets/images/events/event_karaoke.jpg";
-import images from "../content/gallery.json";
+import eventPubQuiz from "../assets/images/events/event_pub-quiz.jpg";
+import eventSchlager from "../assets/images/events/event_schlager-karaoke.jpeg";
+import eventAdvent from "../assets/images/events/event_advents-kalender.jpeg";
+import eventFerien from "../assets/images/events/event_ferien.jpeg";
+import eventNeujahr from "../assets/images/events/event_neujahrs-apero.jpeg";
+
+// Import gallery images
+import Gallery1 from "../assets/images/gallery/Gallery1.png";
+import Gallery2 from "../assets/images/gallery/Gallery2.png";
+import Gallery3 from "../assets/images/gallery/Gallery3.png";
+import Gallery4 from "../assets/images/gallery/Gallery4.png";
+import Gallery5 from "../assets/images/gallery/Gallery5.png";
+import Gallery6 from "../assets/images/gallery/Gallery6.png";
+import Gallery7 from "../assets/images/gallery/Gallery7.png";
+import Gallery8 from "../assets/images/gallery/Gallery8.png";
+import Gallery9 from "../assets/images/gallery/Gallery9.png";
+
+const events = [
+		{
+		image: eventKaraoke,
+		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: eventPubQuiz,
+		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: eventSchlager,
+		title: "Schlager Hüttenzauber Karaoke",
+		date: "27. November - 19:00 Uhr",
+		description: `
+			Ab 19:00 Uhr Eintritt ist Frei! Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
+		`,
+	},
+			{
+		image: eventAdvent,
+		title: "Adventskalender",
+		date: "03. Dezember - 20. Dezember 2025",
+		description: `
+			Jeden Tag neue Überraschungen! Check unsere Social Media Stories!
+		`,
+	},
+	{
+		image: eventFerien,
+		title: "Weihnachtsferien",
+		date: "21. Dezember 2025 - 01. Januar 2026",
+		description: `
+			Wir sind ab 02.01.2026 wieder wie gewohnt für euch da! 🍀. <br> Für Anfragen WA <a href="tel:+41772322770">077 232 27 70</a> Antwort innerhalb 48h
+		`,
+	},
+	{
+		image: eventNeujahr,
+		title: "Neujahrs-Apero",
+		date: "02. Januar 2026 - 18:00-20:00 Uhr",
+		description: `
+			
+		`,
+	},
+
+];
+
+const images = [
+	{ src: Gallery7, alt: "Siebtes Bild" },
+	{ src: Gallery8, alt: "Achtes Bild" },
+	{ src: Gallery9, alt: "Neuntes Bild" },
+	{ src: Gallery6, alt: "Sechstes Bild" },
+	{ src: Gallery1, alt: "Erstes Bild" },
+	{ src: Gallery2, alt: "Zweites Bild" },
+	{ src: Gallery3, alt: "Drittes Bild" },
+	{ src: Gallery4, alt: "Viertes Bild" },
+	{ src: Gallery5, alt: "Fünftes Bild" },
+];
 ---
 
 <Layout>

src/styles/components/Drinks.css

@@ -1,5 +1,5 @@
 .Drinks {
-  font-family: var(--font-family-primary), serif;
+  font-family: var(--font-family-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -15,7 +15,7 @@
 
 .title {
   font-size: var(--font-size-large);
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
   font-weight: bold;
   color: var(--color-text);
   text-transform: uppercase;
@@ -25,6 +25,7 @@
 .card-link {
   border: 2px solid var(--color-accent-beige);
   padding: 0.75rem 1.5rem;
+  margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   color: var(--color-text);
   background-color: var(--color-background);
@@ -68,7 +69,6 @@
   align-items: center;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.2);
   border-radius: var(--border-radius);
   width: 80%;
   max-width: 300px;
@@ -81,8 +81,8 @@
 }
 
 .circle {
-  height: 9em;
+  height: 35vh;
-  width: 9em;
+  width: 35vh;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,6 +94,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .circle:hover {
@@ -109,12 +110,25 @@
   text-align: center;
   transition: opacity var(--transition-standard);
   position: absolute;
+  z-index: 2;
 }
 
 .circle:hover .circle-label {
   opacity: 1;
 }
 
+.circle-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+  z-index: 1;
+}
+
 .circle-row {
   display: flex;
   justify-content: center;
@@ -149,10 +163,6 @@
     width: 90%;
   }
 
-  .circle {
-    height: 5em;
-    width: 5em;
-  }
 
   .circle-label {
     font-size: 0.7rem;

src/styles/components/HoverCard.css

@@ -1,7 +1,7 @@
 .hover-card {
 	position: relative;
-	width: 400px;
+	width: 25rem;
-	height: 400px;
+	height: 25rem;
 	border-radius: var(--border-radius);
 	background-color: var(--color-accent-green);
 	box-shadow: var(--box-shadow);
@@ -12,8 +12,28 @@
 	flex-direction: column;
 }
 
-.hover-card:hover {
+/* Hover effects only for devices that support hover */
-	transform: translateY(-5px);
+@media (hover: hover) and (pointer: fine) {
+	.hover-card:hover {
+		transform: translateY(-5px);
+	}
+
+	.hover-card:hover .hover-text {
+		opacity: 1;
+	}
+
+	.hover-card:hover .card-image {
+		opacity: 0.1;
+	}
+}
+
+.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 {
@@ -84,11 +104,12 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
+/* Active state for mobile tap functionality */
+.hover-card.active .hover-text {
 	opacity: 1;
 }
 
-.hover-card:hover .card-image {
+.hover-card.active .card-image {
 	opacity: 0.1;
 }
 
@@ -101,5 +122,34 @@
 	.hover-card {
 		width: 100%;
 		max-width: 350px;
+		/* Maintain square aspect ratio */
+		aspect-ratio: 1 / 1;
+		height: auto;
+		/* Add cursor pointer to indicate it's clickable */
+		cursor: pointer;
+	}
+
+	/* Add visual feedback for tap */
+	.hover-card:active {
+		transform: scale(0.98);
+	}
+
+	.hover-card::after {
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: var(--color-accent-beige);
+		font-size: 0.7rem;
+		padding: 4px 8px;
+		border-radius: 12px;
+		opacity: 0.8;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	/* Hide the hint when card is active */
+	.hover-card.active::after {
+		display: none;
 	}
 }

src/utils/session.ts

@@ -1,74 +0,0 @@
-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}`;
-}