4.0 KiB

Raw Blame History

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 (Composition API)
Build Tool: Vite
Language: TypeScript
Styling: Vanilla CSS with CSS Variables for theming.
Deployment: Docker & Kubernetes.

📁 Project Structure

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.

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.

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: Handles the dynamic logo and splash screen.
About.vue: "Wer mir san" section.
History.vue: Origin of the name.
Beer.vue: The beer and culture section.

🚀 Local Development

To run the project locally for development or testing:

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.
Install Dependencies:
```
npm install
```
Start Dev Server:
```
npm run dev
```
The site will be available at http://localhost:5173/.
Build for Production:
```
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 script and k8s-manifests.yaml.

4.0 KiB Raw Blame History