From f796e5494aec0f29bba649fab5174a574b09a1ba Mon Sep 17 00:00:00 2001 From: Pankaj Kumar Bind Date: Wed, 17 Dec 2025 18:01:47 +0530 Subject: [PATCH 1/3] fix(footer): prevent newsletter form reload, add validation, and stop input expanding on focus Signed-off-by: Pankaj Kumar Bind --- assets/scss/_footer_project.scss | 10 ++---- layouts/partials/footer.html | 59 ++++++++++++++++++++++++++++++-- 2 files changed, 58 insertions(+), 11 deletions(-) diff --git a/assets/scss/_footer_project.scss b/assets/scss/_footer_project.scss index aaf79395e..6a1d3ec38 100644 --- a/assets/scss/_footer_project.scss +++ b/assets/scss/_footer_project.scss @@ -263,17 +263,11 @@ border-radius: 0.5rem; outline: none; color: $white; + transition: border-color 0.2s ease; &:focus { - padding: 1rem; - margin-right: 0.25rem; - width: 24rem; - height: 3.5rem; - border: 0.5px solid $white; - background: transparent; - border-radius: 0.5rem; + border: 1px solid $white; outline-width: 0; - color: $white; } } diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 846d54da1..8ffb9f668 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -62,17 +62,70 @@
{{ .name }}
+
From 8003d2a84cc943a65d49478f2acfdc7821ffa290 Mon Sep 17 00:00:00 2001 From: Pankaj Kumar Bind Date: Wed, 17 Dec 2025 18:06:58 +0530 Subject: [PATCH 2/3] removed comments Signed-off-by: Pankaj Kumar Bind --- layouts/partials/footer.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8ffb9f668..8d9a3ab32 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -101,14 +101,12 @@
{{ .name }}
const email = emailInput.value.trim(); - // Validate email is not empty if (!email) { showMessage('Please enter your email address', true); emailInput.focus(); return false; } - // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { showMessage('Please enter a valid email address', true); @@ -116,8 +114,6 @@
{{ .name }}
return false; } - // Here you can add your newsletter subscription logic - // For now, just show a success message showMessage('Thank you for subscribing!', false); emailInput.value = ''; From bcb623a161aea9c4a62f167150e95d0b7f18fa33 Mon Sep 17 00:00:00 2001 From: Pankaj Kumar Bind Date: Wed, 17 Dec 2025 18:24:28 +0530 Subject: [PATCH 3/3] refactor(footer): improve code quality and accessibility - Extract inline JavaScript to external file (newsletter.js) - Replace inline styles with CSS classes for better maintainability - Add proper ARIA labels and semantic HTML for accessibility - Add JSDoc comments for better code documentation - Add visually-hidden class for accessible form labels - Use Hugo asset pipeline for JavaScript loading with defer attribute Signed-off-by: Pankaj Kumar Bind --- assets/js/newsletter.js | 69 ++++++++++++++++++++++++++++++++ assets/scss/_footer_project.scss | 29 ++++++++++++++ layouts/partials/footer.html | 65 ++++++++---------------------- 3 files changed, 114 insertions(+), 49 deletions(-) create mode 100644 assets/js/newsletter.js diff --git a/assets/js/newsletter.js b/assets/js/newsletter.js new file mode 100644 index 000000000..dbbb36046 --- /dev/null +++ b/assets/js/newsletter.js @@ -0,0 +1,69 @@ +// Newsletter subscription form handler +document.addEventListener('DOMContentLoaded', function() { + const form = document.getElementById('newsletter-form'); + const emailInput = document.getElementById('newsletter-email'); + const messageDiv = document.getElementById('newsletter-message'); + + if (!form || !emailInput || !messageDiv) return; + + /** + * Display a message to the user + * @param {string} text - Message text to display + * @param {boolean} isError - Whether this is an error message + */ + function showMessage(text, isError) { + messageDiv.textContent = text; + messageDiv.style.color = isError ? '#ff6b6b' : '#00d3a9'; + messageDiv.setAttribute('role', isError ? 'alert' : 'status'); + messageDiv.setAttribute('aria-live', 'polite'); + } + + /** + * Clear the message display + */ + function clearMessage() { + messageDiv.textContent = ''; + messageDiv.removeAttribute('role'); + messageDiv.removeAttribute('aria-live'); + } + + /** + * Validate email format + * @param {string} email - Email address to validate + * @returns {boolean} Whether the email is valid + */ + function isValidEmail(email) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + } + + // Clear message when user starts typing + emailInput.addEventListener('input', clearMessage); + + // Handle form submission + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const email = emailInput.value.trim(); + + // Check if email is empty + if (!email) { + showMessage('Please enter your email address', true); + emailInput.focus(); + return false; + } + + // Validate email format + if (!isValidEmail(email)) { + showMessage('Please enter a valid email address', true); + emailInput.focus(); + return false; + } + + // Success message + showMessage('Thank you for subscribing!', false); + emailInput.value = ''; + + return false; + }); +}); diff --git a/assets/scss/_footer_project.scss b/assets/scss/_footer_project.scss index 6a1d3ec38..ef6b07354 100644 --- a/assets/scss/_footer_project.scss +++ b/assets/scss/_footer_project.scss @@ -280,6 +280,35 @@ border: none; } + .newsletter-container { + display: flex; + align-items: flex-start; + flex-direction: column; + } + + .newsletter-input-row { + display: flex; + align-items: center; + } + + .newsletter-message { + margin-top: 0.5rem; + font-size: 0.9rem; + min-height: 1.5rem; + } + + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } + .footer-hr { width: 100%; color: $white; diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8d9a3ab32..605dfe624 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -62,66 +62,33 @@
{{ .name }}