# Developer Documentation: Haumdaucher Website

Welcome to the technical documentation for the "Haumdaucher" website. This guide provides an overview of the architecture, file structure, and how to extend the project.

## 🏗 Project Architecture

The website is a modern **Vue 3** application built with **Vite** and **TypeScript**. It's designed as a high-performance, themed one-pager.

### Tech Stack
- **Framework**: [Vue.js 3](https://vuejs.org/) (Composition API)
- **Build Tool**: [Vite](https://vitejs.dev/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: Vanilla CSS with CSS Variables for theming.
- **Deployment**: Docker & Kubernetes.

---

## 📁 Project Structure

```text
haumdaucher_de/
├── src/
│   ├── assets/
│   │   ├── images/          # Themed logos and other graphic assets
│   │   └── styles/
│   │       └── global.css   # Core CSS variables and design tokens
│   ├── components/
│   │   ├── layout/          # Global layout components (Header, Footer)
│   │   └── sections/        # Main content sections (Hero, About, etc.)
│   ├── locales/
│   │   └── i18n.ts          # Translation files (DE and BAR)
│   ├── App.vue              # Root component & state management
│   └── main.ts              # Entry point
├── Dockerfile               # Containerization configuration
├── k8s-manifests.yaml       # Kubernetes resources
├── deploy.sh                # Deployment automation script
└── DEVELOPMENT.md           # This documentation
```

---

## 🛠 How to Modify

### 1. Adding/Changing Styles (Themes)
Theming is handled via `[data-theme]` attributes on the `<html>` element. All colors and transition speeds are defined as CSS variables in [src/assets/styles/global.css](file:///Users/moritz/src/haumdaucher_de/src/assets/styles/global.css).

- **To add a new theme**: Define a new `[data-theme='your-theme']` block in `global.css` with the required variables.
- **To update existing themes**: Modify the variables within the respective blocks (`:root`, `[data-theme='unicorn']`, `[data-theme='luxury']`).

### 2. Updating Content (i18n)
All text content is externalized in [src/locales/i18n.ts](file:///Users/moritz/src/haumdaucher_de/src/locales/i18n.ts).

- **To change text**: Locate the key in the `messages` object for both `de` (German) and `bar` (Bavarian) and update the string.
- **To add a new language**: Add a new top-level key to the `messages` object and implement all required fields.

### 3. Modifying Sections
Each section of the one-pager is a standalone Vue component in `src/components/sections/`.
- [Hero.vue](file:///Users/moritz/src/haumdaucher_de/src/components/sections/Hero.vue): Handles the dynamic logo and splash screen.
- [About.vue](file:///Users/moritz/src/haumdaucher_de/src/components/sections/About.vue): "Wer mir san" section.
- [History.vue](file:///Users/moritz/src/haumdaucher_de/src/components/sections/History.vue): Origin of the name.
- [Beer.vue](file:///Users/moritz/src/haumdaucher_de/src/components/sections/Beer.vue): The beer and culture section.

---

## 🚀 Local Development

To run the project locally for development or testing:

1.  **Check Node Version**:
    This project is optimized for **Node.js 16.11.1+** (using Vite 4 for compatibility). If you have a newer Node version (20+), it will also work perfectly.

2.  **Install Dependencies**:
    ```bash
    npm install
    ```

2.  **Start Dev Server**:
    ```bash
    npm run dev
    ```
    The site will be available at [http://localhost:5173/](http://localhost:5173/).

3.  **Build for Production**:
    ```bash
    npm run build
    ```
    The optimized assets will be generated in the `dist/` directory.

---

## 🎡 Kubernetes Deployment

For information on deploying to a Kubernetes cluster, refer to the [deploy.sh](file:///Users/moritz/src/haumdaucher_de/deploy.sh) script and [k8s-manifests.yaml](file:///Users/moritz/src/haumdaucher_de/k8s-manifests.yaml).
