feat: create language switcher with persistence

5 files changed, 45 insertions, 1 deletions

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 467f827..bc11668 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,7 +1,10 @@
 {
   "permissions": {
     "allow": [
-      "Bash(/home/danix/.claude/plugins/cache/superpowers-marketplace/superpowers/5.0.6/skills/brainstorming/scripts/start-server.sh *)"
+      "Bash(/home/danix/.claude/plugins/cache/superpowers-marketplace/superpowers/5.0.6/skills/brainstorming/scripts/start-server.sh *)",
+      "Bash(git add *)",
+      "Bash(git commit *)",
+      "Bash(ls -la *.toml)"
     ]
   }
 }
diff --git a/HANDOFF.md b/HANDOFF.md
new file mode 100644
index 0000000..02a8023
--- /dev/null
+++ b/HANDOFF.md
@@ -0,0 +1,16 @@
+Who this is for:
+  You are Danilo (danix), building a Hugo theme for your portfolio/blog site at danix.xyz. You're working with Claude Code to design and implement a bilingual (Italian/English), configuration-driven theme with a hacker/open-source asthetic, drawing visual inspiration from your existing danix.me site.
+
+What we covered:
+  We completed a comprehensive design phase using visual brainstorming, creating detailed mockups and specifications for a Hugo theme. The design covers a landing page with hero and CTAs, bilingual navigation with hamburger overlay menu, 5 article types (Life, Photo, Link, Quote, Tech) with distinct color badges, dark/light theme toggle, responsive sidebar (sticky on desktop, bottom on mobile), Feather Icons system, and 4 shortcodes (gravatar, image, gallery, contact-form). We then created a 32-task implementation plan organized into 8 phases, with comprehensive documentation. You chose subagent-driven development to execute the plan. Phase 1 (Tasks 1-3) scaffolded the theme directory structure, theme.toml metadata, and hugo.toml site configuration. Phase 2 (Tasks 4-7) created all base templates: baseof.html with theme persistence, responsive header.html with logo, hamburger-menu.html with Alpine.js state management, and footer.html with dynamic links.
+
+What was confirmed:
+  The design spec is saved at docs/superpowers/specs/2026-04-15-hugo-theme-design.md and covers all requirements: bilingual i18n, 5 article types with color mappings, responsive layouts with sticky sidebar, Feather Icons, dark/light theme toggle with localStorage, WCAG 2.1 AA
+  accessibility target, and configuration-driven structure in hugo.toml. The implementation plan is saved at docs/superpowers/plans/2026-04-15-hugo-theme-implementation.md with all 32 tasks fully specified with code, commands, and expected outputs. SHORTCODES.md and AGENTS.md
+  documentation have been created and committed. Phase 1 and Phase 2 are fully complete with 6 commits (theme structure, theme.toml, hugo.toml, baseof.html, header.html, hamburger-menu.html, footer.html).
+
+Still in progress:
+  Phase 3 (Tasks 8-12) on styling and JavaScript has not yet been started. This phase includes creating main.css with Tailwind directives and CSS custom properties, chroma-custom.css for syntax highlighting, and three JavaScript files for theme toggle, menu toggle, and language switcher persistence. Phases 4-8 remain to be executed: i18n files, page templates, article type templates, shortcodes, and documentation updates.
+
+Next steps:
+  Continue with Phase 3 (Tasks 8-12) by dispatching a subagent to create the CSS files (main.css and chroma-custom.css) and JavaScript files (theme-toggle.js, menu.js, language-switcher.js) with full commits. After Phase 3, proceed through Phases 4-8 in order using the same subagent-driven approach: Phase 4 creates i18n files, Phase 5 creates page templates (landing, articles list, single article, sidebar), Phase 6 creates article type-specific templates, Phase 7 creates the four shortcodes, and Phase 8 finalizes documentation. After all 32 tasks are complete, use superpowers:finishing-a-development-branch to finalize and prepare for merge.
diff --git a/themes/danix-xyz-hacker/assets/js/language-switcher.js b/themes/danix-xyz-hacker/assets/js/language-switcher.js
new file mode 100644
index 0000000..3d8ffac
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/js/language-switcher.js
@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Get all language switcher elements
+  const langSwitchers = document.querySelectorAll('[data-lang-switch]');
+
+  if (!langSwitchers || langSwitchers.length === 0) {
+    return;
+  }
+
+  // Add click event listener to each language switcher
+  langSwitchers.forEach(function(switcher) {
+    switcher.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      // Get the language code from the data attribute
+      const langCode = this.getAttribute('data-lang-switch');
+
+      // Store the language preference in localStorage
+      localStorage.setItem('preferred-language', langCode);
+
+      // Navigate to the language-specific URL
+      window.location.href = this.href;
+    });
+  });
+});
diff --git a/themes/danix-xyz-hacker/hugo.toml b/themes/danix-xyz-hacker/hugo.toml
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/danix-xyz-hacker/hugo.toml
diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index 5b84fdd..00d99e3 100644
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -42,6 +42,7 @@
         {{ range .Site.Languages }}
           {{ $current := eq . $.Page.Language }}
           <a
+            data-lang-switch="{{ .Lang }}"
             href="{{ .LanguagePrefix }}"
             class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
           >