danielandClaude Sonnet 5
1ea70c6d26
Sites had to copy the entire stylesheet to change colors or sizing.
Every value is now backed by a --cookie-* custom property with the
original value as fallback, so sites can override just what they need
from their own CSS. Also fixes the README's @import path, which had
gone stale since the stylesheet was renamed and moved in 5597e11.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
136 lines
6.0 KiB
Markdown
136 lines
6.0 KiB
Markdown
# 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
|