hugo_cookie_consent/README.md

hugo_cookie_consent

Hugo module that implements a cookie-consent message and functionality to change the cookie-consent decision.

The purpose of this module is to help make a site GDPR compliant. It can optionally insert tracking code that calls a Matomo instance. This will only happen after visitors have accepted the use of a cookie -- no logging will take place before visitors have interacted with the cookie information message. Their decision is stored in the browser's Local Storage, and it is not personal data as defined by the GDPR.

This Hugo Module requires Hugo v0.146.0+ which uses the new layout directory structure with _partials and _shortcode directories with leading underscores.

Anthropic Claude helped in creating this module (paid subscription).

Installation in your Hugo site

1. Turn the Hugo site into a Hugo module:

   hugo mod init <identifier>
   

   Where <identifier> may be the path to the site's Git repository or anything else; see Hugo's docs.

2. Add the hugo-cookie-consent module by adding this module.imports.path to your site configuration file:

   # config/_default/hugo.yaml
   module:
     imports:
       - path: git.bovender.de/daniel/hugo_cookie_consent
   

3. Add configuration keys (see below).

4. If your site's language is neither English nor German, add a few terms in the desired language to the language tables.

5. Make your pages load the JavaScript code, e. g. by adding this partial to your baseof.html template:

     {{ partial "hugo_cookie_consent/scripts.html" }}
   

6. Ensure that the SCSS style sheet is being loaded, e.g. by adding this line to your main *.scss file:

   @import "hugo_cookie_consent";
   

7. Optionally, insert a hugo_cookie_consent/settings partial somewhere on your site to enable visitors to review and revise their choice. The privacy statement page might be a good place for this.

   {{< hugo_cookie_consent/settings >}}
   

Configuration

You can configure the module by defining site parameters in your site configuration. The following snippet shows the content of the default params.yaml which you may override as needed.

# config/_default/params.yaml
hugo_cookie_consent:
  privacy_policy_url:
  enable_tracking: false
  matomo_host:
  matomo_site_id:

Parameter	Description
privacy_policy_url	URL of the privacy policy page
enable_tracking	Whether to include the tracking script
matomo_host	URL of the Matomo host.
matomo_site_id	Matomo site ID to use for tracking.

Styling

The banner and its buttons are styled with a small set of CSS custom properties, each with a sensible default baked in. To adjust the look of the banner on your site, set any of these properties in your own stylesheet (no need to copy or override hugo_cookie_consent.scss):

:root {
  --cookie-banner-bg: #1e293b;
  --cookie-banner-color: #f1f5f9;
  --cookie-accept-bg: #16a34a;
  --cookie-decline-bg: #dc2626;
}

Custom property	Default	Applies to
--cookie-banner-bg	#4A5568	Banner background
--cookie-banner-color	#E2E8F0	Banner text color
--cookie-banner-border-color	#e2e2e2	Banner border
--cookie-banner-border-radius	12px	Banner corner radius
--cookie-banner-shadow	0 0 36px #111	Banner drop shadow
--cookie-banner-max-width	480px	Banner max width
--cookie-banner-top	2.5rem	Banner distance from top of viewport
--cookie-banner-padding	1rem 1.25rem	Banner inner padding
--cookie-banner-font-size	14px	Banner message text size
--cookie-banner-z-index	9999	Banner stacking order
--cookie-button-padding	.45rem 1rem	All buttons
--cookie-button-border-radius	8px	All buttons
--cookie-button-border-color	#ccc	All buttons (overridden by the three below)
--cookie-button-font-size	13px	All buttons
--cookie-accept-bg	#4A5E52	Accept button background
--cookie-accept-color	#fff	Accept button text
--cookie-accept-border-color	#1a1a1a	Accept button border
--cookie-decline-bg	#2D3748	Decline button background
--cookie-decline-color	#fff	Decline button text
--cookie-decline-border-color	#1a1a1a	Decline button border
--cookie-settings-bg	#272b2e	Settings-shortcode button background
--cookie-settings-color	#fff	Settings-shortcode button text
--cookie-settings-border-color	#1a1a1a	Settings-shortcode button border