# 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:

   ```bash
   hugo mod init <identifier>
   ```

   Where `<identifier>` may be the path to the site's Git repository or anything
   else; see [Hugo's docs][mod-doc].

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

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

3. Add configuration keys (see [below](#configuration)).

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:

   ```html
     {{ 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:

   ```scss
   @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.

   ```md
   {{< 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.

```yaml
# 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][css-vars], 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`):

```css
: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            |

[anthropic claude]: https://claude.ai
[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[gdpr]: https://en.wikipedia.org/wiki/GDPR
[matomo]: https://matomo.org
[mod-doc]: https://gohugo.io/hugo-modules/use-modules/#import
[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0