Add a cookie warning notice to a Hugo powered site -

The Challenge

How to add a cookie warning notice to a Hugo powered website. But also avoid using a third party service.

Build your own. Well, find someone who built one and shared it on youtube and github.

Disclaimer: This does not constitute any form of legal advice. Use at your own risk.

Of course if anyone has a better, more complete solution. I would really like hear from you. So drop me a message through GitHub.

So many thanks to the original author: Godson Thomas. You can find the references below:

YouTube:

Code located: GitHub

I created three files under the content folder.

layouts/partials/cookie-notice.html (using the key component needed for the notice.)

view raw cookie-notice.html hosted with ❤ by GitHub

static/my_css/cookie.css (This was directly lifted from the github repo.)

	* {
	margin: 0;
	}

	body {
	font-family: "Roboto", sans-serif;
	}

	p {
	margin: 24px 0;
	line-height: 2;
	}

	.wrapper {
	padding: 32px;
	}

	.cookie-container {
	position: fixed;
	bottom: -100%;
	left: 0;
	right: 0;
	background: #2f3640;
	color: #f5f6fa;
	padding: 0 32px;
	box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);

	transition: 400ms;
	}

	.cookie-container.active {
	bottom: 0;
	}

	.cookie-container a {
	color: #f5f6fa;
	}

	.cookie-btn {
	background: #e84118;
	border: 0;
	color: #f5f6fa;
	padding: 12px 48px;
	font-size: 18px;
	margin-bottom: 16px;
	border-radius: 8px;
	cursor: pointer;
	}

view raw cookie.css hosted with ❤ by GitHub

static/my_js/cookie.js (Again lifted directly from the github repo.)

view raw cookie.js hosted with ❤ by GitHub

The next step was to get this code included in the site build.

In my case I am using the ananke theme.

This theme has a head-additions.html file with the path of: themes/ananke/layouts/partials/

So I duplicated this file into my own layouts/partials/ directory and added the following code snippet.

<link rel="stylesheet" href="/my_css/cookie.css" />

I then did the same with baseof.html located in: themes/ananke/layouts/_defaults/

I added the following code just above the closing </body> tag.

<!--- Only enable cookies for production BAS 2020-07-15 --->
{{ if hugo.IsProduction }}
{{ partial "cookie-notice.html" }}
{{ end }}

With these steps I was able to add a simple cookie notification.

	<div class="cookie-container">
	<p>
	We use cookies on this website to give you the best experience on our
	site and show you relevant ads. To find out more, read our
	<a href="/privacy/">privacy policy</a> and <a href="/cookies/">cookie policy</a>.
	</p>
	<button class="cookie-btn">
	Okay
	</button>
	</div>
	<script src="/my_js/cookie.js"></script>

	const cookieContainer = document.querySelector(".cookie-container");
	const cookieButton = document.querySelector(".cookie-btn");

	cookieButton.addEventListener("click", () => {
	cookieContainer.classList.remove("active");
	localStorage.setItem("cookieBannerDisplayed", "true");
	});

	setTimeout(() => {
	if (!localStorage.getItem("cookieBannerDisplayed")) {
	cookieContainer.classList.add("active");
	}
	}, 2000);