feat: add GDPR cookie consent banner (#1216)

* feat: add GDPR cookie consent banner

Add a GDPR-compliant cookie consent banner that gates analytics (Google
Analytics) and functional cookies (comments) until user consent is given.

Features:
- Theme-consistent styling using CSS variables (light/dark mode)
- Settings panel with category toggles (necessary, analytics, functional)
- Consent stored in cookie for 365 days
- Google Analytics only loads after analytics consent
- Comments only load after functional consent
- Translations for all 32 supported languages
- Accessible with proper ARIA attributes and focus management

Configuration in hugo.yaml:
  params:
    cookies:
      enabled: true
      categories:
        analytics: true
        functional: true

When cookies.enabled is false, scripts load normally without consent gating.

Closes #412

* refactor: move consent-gated GA to cookies/analytics.html

Move Google Analytics consent logic to avoid shadowing Hugo's internal
`_internal/google_analytics.html` template.

Changes:
- Rename google_analytics.html → cookies/analytics.html
- Update head.html to conditionally load:
  - cookies.enabled=true: cookies/analytics.html (consent-gated)
  - cookies.enabled=false: Hugo's _internal/google_analytics.html
- Align cookies/analytics.html with Hugo's internal template:
  - Support Privacy.GoogleAnalytics.Disable setting
  - Support Privacy.GoogleAnalytics.RespectDoNotTrack setting
  - Add UA- prefix deprecation warning

Note: Custom JS is required for consent-gated GA because Hugo templates
render at build time, but consent happens at runtime. We cannot call
Hugo's internal template after the user grants consent - we must
dynamically inject the GA script via JavaScript.

* style: indent cookies/analytics.html

* refactor: don't use default, put default configurations in params.toml

* fix: don't use `description` as translation key because it's reserved and will throw error

* fix: remove footer/components/custom-font.html call

* fix: banner showSettings key

* style: indent comments/include

* Add missing article.alert translation back

* style: format i18n toml files

* style: indent head/head.html

* style adjustment

* style: add missing -

* style: format demo/config/params.toml

* style: remove redundant comments from cookies.scss

* style: update box-shadow for cookie banner content

---------

Co-authored-by: delize <4028612+delize@users.noreply.github.com>
Co-authored-by: Jimmy Cai <jimmy@cai.im>

layouts/_partials/cookies/analytics.html

@@ -0,0 +1,50 @@
+{{- if not site.Config.Privacy.GoogleAnalytics.Disable -}}
+    {{- with site.Config.Services.GoogleAnalytics.ID -}}
+        {{- if strings.HasPrefix (lower .) "ua-" -}}
+            {{- warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." -}}
+        {{- else -}}
+            {{/* Consent-gated Google Analytics - only loads after analytics consent */}}
+            <script>
+            (function() {
+                var gaId = {{ . }};
+                var loaded = false;
+                var respectDNT = {{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }};
+
+                function loadGA() {
+                    if (loaded) return;
+
+                    // Respect Do Not Track browser setting if configured
+                    if (respectDNT) {
+                        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+                        if (dnt == "1" || dnt == "yes") {
+                            return;
+                        }
+                    }
+
+                    loaded = true;
+
+                    var script = document.createElement('script');
+                    script.async = true;
+                    script.src = 'https://www.googletagmanager.com/gtag/js?id=' + gaId;
+                    document.head.appendChild(script);
+
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){dataLayer.push(arguments);}
+                    gtag('js', new Date());
+                    gtag('config', gaId);
+                }
+
+                window.addEventListener('onCookieConsentChange', function(e) {
+                    if (e.detail && e.detail.analytics) {
+                        loadGA();
+                    }
+                });
+
+                if (window.cookieConsent && window.cookieConsent.hasConsent('analytics')) {
+                    loadGA();
+                }
+            })();
+            </script>
+        {{- end -}}
+    {{- end -}}
+{{- end -}}

layouts/_partials/cookies/banner.html

@@ -0,0 +1,68 @@
+{{- $cfg := .Site.Params.cookies -}}
+{{- $categories := $cfg.categories -}}
+
+<div id="cookie-consent-banner" class="cookie-banner" aria-hidden="true" role="dialog" aria-labelledby="cookie-banner-title">
+    <div class="cookie-banner__content">
+        <div class="cookie-banner__text">
+            <strong id="cookie-banner-title">{{ T "cookies.title" }}</strong>
+            <p>{{ T "cookies.text" }}</p>
+        </div>
+
+        <div class="cookie-banner__actions">
+            <button class="cookie-btn cookie-btn--secondary" data-cookie-action="deny">
+                {{ T "cookies.deny" }}
+            </button>
+            <button class="cookie-btn cookie-btn--primary" data-cookie-action="accept">
+                {{ T "cookies.acceptAll" }}
+            </button>
+        </div>
+
+        {{- if $cfg.showSettings }}
+        <button class="cookie-banner__settings-link" data-cookie-action="settings">
+            {{ T "cookies.managePreferences" }}
+        </button>
+        {{- end }}
+
+        {{/* Settings panel */}}
+        <div id="cookie-settings-panel" class="cookie-settings" aria-hidden="true">
+            <h3>{{ T "cookies.settingsTitle" }}</h3>
+
+            <div class="cookie-category">
+                <label>
+                    <input type="checkbox" name="necessary" checked disabled />
+                    <strong>{{ T "cookies.necessary.title" }}</strong>
+                </label>
+                <p>{{ T "cookies.necessary.text" }}</p>
+            </div>
+
+            {{- if $categories.analytics -}}
+            <div class="cookie-category">
+                <label>
+                    <input type="checkbox" name="analytics" data-cookie-category="analytics" />
+                    <strong>{{ T "cookies.analytics.title" }}</strong>
+                </label>
+                <p>{{ T "cookies.analytics.text" }}</p>
+            </div>
+            {{- end -}}
+
+            {{- if $categories.functional -}}
+            <div class="cookie-category">
+                <label>
+                    <input type="checkbox" name="functional" data-cookie-category="functional" />
+                    <strong>{{ T "cookies.functional.title" }}</strong>
+                </label>
+                <p>{{ T "cookies.functional.text" }}</p>
+            </div>
+            {{- end -}}
+
+            <div class="cookie-settings__actions">
+                <button class="cookie-btn cookie-btn--secondary" data-cookie-action="cancel">
+                    {{ T "cookies.cancel" }}
+                </button>
+                <button class="cookie-btn cookie-btn--primary" data-cookie-action="save">
+                    {{ T "cookies.savePreferences" }}
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

layouts/_partials/cookies/include.html

@@ -0,0 +1,9 @@
+{{- if .Site.Params.cookies.enabled -}}
+    {{/* Render the banner HTML */}}
+    {{ partial "cookies/banner.html" . }}
+
+    {{/* Load the consent manager script */}}
+    {{- $opts := dict "minify" hugo.IsProduction -}}
+    {{- $script := resources.Get "ts/cookies.ts" | js.Build $opts | fingerprint -}}
+    <script type="text/javascript" src="{{ $script.RelPermalink }}" defer></script>
+{{- end -}}