From: Danilo M. Date: Thu, 16 Apr 2026 14:54:19 +0000 (+0200) Subject: feat: add form component templates, i18n strings, and Alpine.js utilities X-Git-Tag: release_22042026-1342~184 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=a4c5d4fa64f4e5491b1ef3195a00801ea4f21b44;p=danix.xyz-2.git feat: add form component templates, i18n strings, and Alpine.js utilities --- diff --git a/HANDOFF.md b/HANDOFF.md index 4e0522b..668d13c 100644 --- a/HANDOFF.md +++ b/HANDOFF.md @@ -1,15 +1,14 @@ Who this is for: - You are Danilo, building a bilingual (Italian/English) hacker-themed Hugo theme for danix.xyz. You've completed Weeks 1-3 of a 6-week implementation roadmap and are now fixing bugs and regressions discovered during testing. + You are Danilo, building a bilingual (Italian/English) hacker-themed Hugo theme for danix.xyz. You've completed Weeks 1-3 of a 6-week implementation roadmap (50% complete) and have just fixed a regression and prepared comprehensive documentation for Week 4. What we covered: - This session focused on debugging and fixing the breadcrumb navigation issue that was left pending from Week 3. The breadcrumb partial existed but produced zero HTML output. Investigation revealed Hugo was using layouts/\_default/single.html instead of layouts/articles/single.html. - The fix involved adding the breadcrumb partial call to the actual layout file and making it fully multilingual with language-aware links (IT uses /it/ subdir, EN uses root /). After the breadcrumb was fixed and deployed, a regression was discovered: the header logo link was hardcoded to / which broke Italian navigation. This was also fixed to respect the current language. Both fixes have been committed and pushed to master. + This session focused on concluding Week 3 and preparing Week 4. You identified a regression where the header was scrolling with the page instead of staying fixed. Investigation revealed the header was using sticky positioning, which wasn't working properly. The fix involved changing the header to fixed positioning with left-0 right-0 classes and adding mt-20 margin to the main element to prevent content overlap. Separately, you created comprehensive transition documentation: WEEK3-COMPLETION.md (audit of all Week 3 work), WEEK4-PLAN.md (detailed technical roadmap for forms and interactions), WEEK3-4-TRANSITION.md (git workflow and quick start), PROGRESS-STATUS-WEEK4.txt (cumulative progress tracking), and updated HANDOFF.md. You also confirmed that the z-10 class on main wasn't related to the sticky issue and restored it after fixing the header. All changes were committed and pushed to master. What was confirmed: - The breadcrumb issue was caused by Hugo's layout lookup preferring \_default/single.html over articles/single.html. The breadcrumb now renders correctly on all article pages. Language-aware routing works properly for both breadcrumb links and the header logo. Italian articles correctly link to /it/ paths, English articles link to / paths. All navigation elements maintain language context when clicked. + The header regression was caused by sticky positioning not working reliably. Fixed positioning with proper margin offset (mt-20) on main element resolves it completely. The z-10 class has no effect on opacity or positioning behavior. Week 3 is fully complete with 14 commits merged to master covering cards, navigation header, hamburger menu, and breadcrumb navigation. Both breadcrumb rendering and logo language-context bugs were successfully fixed in Week 3. All components tested at 320px, 768px, 1060px+ breakpoints with dark/light mode support and WCAG AA accessibility verified. Still in progress: - Nothing is left open from this session. Both the breadcrumb rendering issue and the logo link regression have been resolved and pushed to master. + Nothing from previous sessions. Week 3 is fully merged to master with all objectives achieved. Week 4 is ready to start but not yet initiated. Next steps: - Create a new week-4-* feature branch following the established branching policy. Continue with Week 4 implementation while running npm run watch during development. Test all changes at multiple breakpoints (320px, 768px, 1060px) and in both dark and light modes before merging to master at week end. \ No newline at end of file + Create the week-4-forms feature branch and begin Week 4 implementation: Forms & Interactions. This involves building form component system (inputs, textareas, selects, checkboxes, radio buttons, form groups), modal system (alert, confirm, content modals with focus trap), and interactive patterns (loading spinners, toast notifications, tooltips, validation feedback). Estimated 6-8 hours. Follow WEEK4-PLAN.md for the detailed technical roadmap. Remember to run npm run watch during development and npm run build before committing. Test at all responsive breakpoints and both dark/light modes before merging to master at week end. \ No newline at end of file diff --git a/i18n/en.yaml b/i18n/en.yaml index d543e6f..5533849 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -53,6 +53,35 @@ sending: "Sending..." success: "Message sent successfully!" error: "An error occurred. Please try again." +# Form Components +form_invalid_email: "Please enter a valid email address" +form_password_help: "Must be at least 8 characters" +form_agree_terms: "I agree to the terms and conditions" +form_select_interests: "Select your interests" +form_interest_tech: "Technology" +form_interest_design: "Design" +form_select_preference: "Select a preference" +form_option_a: "Option A" +form_option_b: "Option B" +form_first_name: "First Name" +form_last_name: "Last Name" +form_search: "Search" +form_search_btn: "Search" +form_open_alert: "Open Alert Modal" +form_open_confirm: "Open Confirm Modal" +form_open_content: "Open Content Modal" +form_alert_title: "Alert" +form_alert_message: "This is an alert modal. Click OK to dismiss." +form_ok: "OK" +form_confirm_title: "Confirm Action" +form_confirm_message: "Are you sure you want to continue?" +form_cancel: "Cancel" +form_confirm: "Confirm" +form_content_title: "Modal with Content" +form_content_message: "This modal contains detailed content. You can add forms, lists, or any HTML here." +form_close: "Close" +form_save: "Save" + # Social follow: "Follow me" contactMe: "Contact me" diff --git a/i18n/it.yaml b/i18n/it.yaml index 2f8d8e1..2d11f54 100644 --- a/i18n/it.yaml +++ b/i18n/it.yaml @@ -53,6 +53,35 @@ sending: "Invio in corso..." success: "Messaggio inviato con successo!" error: "Si è verificato un errore. Riprova." +# Form Components +form_invalid_email: "Inserire un indirizzo email valido" +form_password_help: "Deve avere almeno 8 caratteri" +form_agree_terms: "Accetto i termini e le condizioni" +form_select_interests: "Seleziona i tuoi interessi" +form_interest_tech: "Tecnologia" +form_interest_design: "Design" +form_select_preference: "Seleziona una preferenza" +form_option_a: "Opzione A" +form_option_b: "Opzione B" +form_first_name: "Nome" +form_last_name: "Cognome" +form_search: "Cerca" +form_search_btn: "Cerca" +form_open_alert: "Apri modale di avviso" +form_open_confirm: "Apri modale di conferma" +form_open_content: "Apri modale contenuto" +form_alert_title: "Avviso" +form_alert_message: "Questo è un modale di avviso. Fai clic su OK per chiudere." +form_ok: "OK" +form_confirm_title: "Conferma azione" +form_confirm_message: "Sei sicuro di voler continuare?" +form_cancel: "Annulla" +form_confirm: "Conferma" +form_content_title: "Modale con contenuto" +form_content_message: "Questo modale contiene contenuti dettagliati. Puoi aggiungere moduli, elenchi o qualsiasi HTML qui." +form_close: "Chiudi" +form_save: "Salva" + # Social follow: "Seguimi" contactMe: "Contattami" diff --git a/themes/danix-xyz-hacker/assets/js/form-components.js b/themes/danix-xyz-hacker/assets/js/form-components.js new file mode 100644 index 0000000..35a5f27 --- /dev/null +++ b/themes/danix-xyz-hacker/assets/js/form-components.js @@ -0,0 +1,91 @@ +// Form component utilities and Alpine.js data + +export function formComponentsData() { + return { + // Modal states + showAlertModal: false, + showConfirmModal: false, + showContentModal: false, + + // Toast notification state + toasts: [], + + // Handle confirm modal action + handleConfirm() { + this.showConfirmModal = false; + this.showToast('success', 'Action confirmed!'); + }, + + // Show toast notification + showToast(type = 'success', message = null) { + const messages = { + success: 'Operation completed successfully!', + error: 'An error occurred. Please try again.', + info: 'Here is some information.', + warning: 'Please be careful with this action.' + }; + + const toastMessage = message || messages[type] || messages.success; + const toastId = Date.now(); + + // Add toast to list + this.toasts.push({ + id: toastId, + type: type, + message: toastMessage + }); + + // Auto-remove after 5 seconds + setTimeout(() => { + this.toasts = this.toasts.filter(t => t.id !== toastId); + }, 5000); + }, + + // Remove toast manually + removeToast(id) { + this.toasts = this.toasts.filter(t => t.id !== id); + }, + + // Form validation utilities + validateEmail(email) { + const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return regex.test(email); + }, + + validatePassword(password) { + return password.length >= 8; + }, + + // Auto-expand textarea + autoExpandTextarea(event) { + const textarea = event.target; + textarea.style.height = 'auto'; + textarea.style.height = (textarea.scrollHeight) + 'px'; + } + }; +} + +// Toast container component for Alpine.js +export function renderToastContainer(Alpine) { + if (!Alpine) return; + + // This can be used in templates via Alpine + window.formUtils = { + formatCharCount(current, max) { + if (max) { + return `${current}/${max}`; + } + return current; + }, + + isCharCountWarning(current, max) { + if (!max) return false; + return current > (max * 0.8); + }, + + isCharCountError(current, max) { + if (!max) return false; + return current >= max; + } + }; +} diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html new file mode 100644 index 0000000..9a69d43 --- /dev/null +++ b/themes/danix-xyz-hacker/layouts/partials/form-components.html @@ -0,0 +1,219 @@ +{{ define "form-components" }} + + + +
+

Form Components

+ + +
+ + +
+ + +
+ + +
{{ i18n "form_invalid_email" }}
+
+ + +
+ + +
{{ i18n "form_password_help" | default "Must be at least 8 characters" }}
+
+ + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ +
+ + +
+

{{ i18n "form_select_interests" | default "Select your interests" }}

+ + +
+ + + +
+

{{ i18n "form_select_preference" | default "Select a preference" }}

+ + +
+ + + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + +
+ +
+ + + +
+

Modal Examples

+ + + +
+ + + +
+

Notifications

+ + + + +
+ +
+ + + +
+
+
+
+

{{ i18n "form_alert_title" | default "Alert" }}

+
+
+
+

{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}

+
+
+ +
+
+
+ + + +
+
+
+
+

{{ i18n "form_confirm_title" | default "Confirm Action" }}

+
+
+
+

{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}

+
+
+ + +
+
+
+ + + +
+
+
+
+

{{ i18n "form_content_title" | default "Modal with Content" }}

+
+
+
+

{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}

+
+
+ + +
+
+
+
+ + +
+
+
+ +{{ end }} diff --git a/themes/danix-xyz-hacker/layouts/partials/toast-container.html b/themes/danix-xyz-hacker/layouts/partials/toast-container.html new file mode 100644 index 0000000..1c5fbf2 --- /dev/null +++ b/themes/danix-xyz-hacker/layouts/partials/toast-container.html @@ -0,0 +1,13 @@ +{{ define "toast-container" }} + + +
+ +
+ +{{ end }}