1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
# 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.
4. **Weekly Git Branching**: Each week of implementation work must start on a new feature branch named `week-N` (e.g., `week-3-cards-nav`). This allows code review and safe integration back into master at the end of each week.
## 🎨 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`)
|
