# 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 `` 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).