94 lines
4.0 KiB
Markdown
94 lines
4.0 KiB
Markdown
# 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).
|