cookies, analitics

scripts/dots/dots.ts

@@ -29,7 +29,6 @@ const initDots = (targetElement: HTMLElement) => {
 	const cubeSize = 3;
 	const pointSpacing = 0.08;
 	const pointsPerAxis = Math.floor(cubeSize / pointSpacing);
-	const pointCount = pointsPerAxis ** 3;
 	const pointsArray = [];
 
 	for (let x = 0; x < pointsPerAxis; x++) {
@@ -88,7 +87,6 @@ const initDots = (targetElement: HTMLElement) => {
 		points.rotation.z = minimalRotationSpeed;
 	};
 
-	console.log(pointCount);
 	animate();
 }
 

scripts/nav/nav.ts

@@ -1,6 +1,7 @@
 /// <reference lib="dom" />
 /// <reference lib="dom.iterable" />
 import { animate } from "motion";
+import * as Cookies from "es-cookie";
 
 var prevScrollPos = window.scrollY;
 var navAnimationInProgress = false;
@@ -91,3 +92,36 @@ if(mobileNavDialog && mobileNavTrigger && mobileNavDismissal) {
   mobileNavTrigger.addEventListener("click", handleOpenNav);
   mobileNavDismissal.addEventListener("click", closeMobileNav);
 }
+
+// cookies
+
+const cookieName = "teonite-accept-cookies";
+
+type TeoniteCookie = {
+  accepted: boolean;
+}
+
+const accepted = (): boolean => {
+  const content = Cookies.get(cookieName);
+  if(content) {
+    const parsed = JSON.parse(content) as TeoniteCookie;
+    return parsed.accepted;
+  }
+  return false;
+}
+
+if(!accepted()) {
+  const cookieElement = document.getElementById("cookies");
+  const acceptCookieElement = document.getElementById("accept-cookies");
+  if(cookieElement && acceptCookieElement) {
+    cookieElement.classList.add("show");
+
+    acceptCookieElement.addEventListener("click", () => {
+      const cookie: TeoniteCookie = {
+        accepted: true
+      };
+      Cookies.set(cookieName, JSON.stringify(cookie));
+      cookieElement.classList.remove("show");
+    });
+  }
+}

scripts/nav/package.json

@@ -9,6 +9,7 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "es-cookie": "^1.4.0",
     "motion": "^10.16.4"
   }
 }

scss/components/_cookies.scss

@@ -0,0 +1,51 @@
+@use "../helpers/" as *;
+
+#cookies {
+  box-sizing: border-box;
+  padding: 20px 10px;
+  background-color: #000;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: none;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  column-gap: var(--spacing-m);
+  z-index: 9;
+
+  &.show {
+    display: flex;
+  }
+
+  p,
+  a,
+  button {
+    @include typography(label);
+    color: #fff;
+  }
+
+  a {
+    text-decoration: underline;
+    text-decoration-color: #fff;
+    text-underline-offset: 5px;
+  }
+
+  button {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 5px var(--spacing-s);
+    border: 1px solid #fff;
+    outline-color: #fff;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover {
+      outline-width: 3px;
+    }
+  }
+}

scss/components/_essentials.scss

@@ -3,3 +3,4 @@
 @forward "./footer";
 @forward "./page_link";
 @forward "./book";
+@forward "./cookies";