# Hugo Theme Architecture Instructions - danix.xyz

You are the lead software architect for https://danix.xyz. Your code must follow a "Slackware-style" philosophy: clean, essential, and free of bloat.

## 🌍 Multilingual Support (IT/EN)
The site is bilingual (Italian and English). You must:
- **i18n Framework**: Use Hugo’s translation folders (`i18n/it.yaml`, `i18n/en.yaml`) for all UI strings (e.g., "Read more", "Contact me", "Menu").
- **Language Switcher**: Implement a clean language toggle within the hamburger overlay.
- **Logic**: Ensure all templates (Home, Lists, Singles) correctly handle multilingual variables and menus defined in `hugo.toml`.

## 🛠 Tech Stack
- **Hugo (Extended)**: Use Hugo Pipes for asset processing and minification.
- **Tailwind CSS**: Utility-first styling (use `@apply` for semantic components).
- **Alpine.js**: Logic for the overlay menu, language switching, and asynchronous form handling.
- **Vanilla JS**: For minimal optimizations and scripts where Alpine is not required.

## 🧩 Shortcode System (Consensual)
DO NOT write code for shortcodes without consulting the user first. Implement:
1. **Contact Form**: `{{< contact_form >}}` with AJAX handling via Alpine.js targeting `contact.php`. Must support translated labels for fields and error messages.
2. **Gravatar**: Profile image retrieval via email hash.
3. **Images & Galleries**: Responsive, lazy-loading, and caption support.
4. **Video Embeds**: Privacy-friendly YouTube/Vimeo.

**Documentation**: Update `SHORTCODES.md` with usage examples for every tool.

## 🎨 Design & UX
- **Identity**: Maintain the font stack and palettes from `danix.me`.
- **Accent**: Primary Purple. Modern aesthetic with an open-source/hacker soul.
- **Hero**: Full-screen, dynamic text, bio, and profile photo (multilingual bio).
- **Navigation**: Top hamburger menu -> Full-screen overlay (Articles + Pages + Language Toggle - dark/light theme toggle).
- **A11y**: Target WCAG 2.1 AA.

## 📝 Work Protocol
1. **Pianification**: Propose the `i18n` structure and partials layout before writing.
2. **Consultation**: Always ask before implementing complex logic or shortcodes.
3. **KISS**: Keep It Simple, Stupid.

## 🔧 Git Workflow

**Two repos, one site:**
- Content repo: `~/Programming/GIT/danix.xyz-hacker-theme/` → `danix_git:danix.xyz-2`
- Theme repo: `~/Programming/GIT/danix2-hugo-theme/` → `danix_git:danix2-hugo-theme`
- Theme lives as submodule at `themes/danix-xyz-hacker/` in content repo

**Three branches, defined roles:**
- `master`: staging/dev branch. All feature branches merge here. Safe for WIP commits and testing.
- `production`: live branch. Merges only from master when ready to ship. Post-receive hook fires on production pushes only.
- Feature branches: work branches for features, content, or experiments. Merge to master when done.

**Theme work:**
1. Edit in theme repo OR submodule (always `git checkout master` first if using submodule)
2. Commit and push to `danix2-hugo-theme`
3. Bump submodule pointer in content repo: `git add themes/danix-xyz-hacker && git commit -m "chore: bump theme submodule" && git push origin master`

**CSS rebuild (after template changes with new Tailwind classes):**
1. From content repo root: `npm run build`
2. Commit compiled CSS in theme: `cd themes/danix-xyz-hacker && git add assets/css/main.min.css && git commit -m "build: recompile CSS" && git push origin master`
3. Bump submodule: `cd .. && git add themes/danix-xyz-hacker && git commit -m "chore: bump theme submodule (CSS rebuild)" && git push origin master`

**Deployment to production:**
1. When master is ready to ship: `git checkout production && git merge master && git push origin production`
2. Post-receive hook clones latest `danix2-hugo-theme` master tip and builds the site
3. Theme changes deploy automatically on next production push (no submodule bump required for deployment, only for local tracking)

## 🎨 Styling & Build Pipeline
- **Tailwind CSS**: Uses npm build pipeline with `tailwind.config.js`
- **CSS Compilation**: Run `npm run build` to compile `main.css` → `main.min.css`
- **Watch Mode**: Run `npm run watch` during development to auto-rebuild CSS when templates change
- **Required Before Commits**: Always rebuild CSS if you modify templates with new Tailwind classes (`npm run build`)