diff --git a/script.js b/script.js
index 4f0a63ff..9b6efc63 100644
--- a/script.js
+++ b/script.js
@@ -73,44 +73,57 @@ function initializePosthog() {
});
posthog.opt_in_capturing();
}
-const checkGeolocation = () => {
- return fetch("https://upstash.com/api/geolocation")
- .then((response) => {
- return response.json();
- })
- .then((data) => {
- if (!data.isEuropean) {
- localStorage.setItem("cookieConsent", "true");
- initializePosthog();
- return true; // indicates we've handled non-European user
- }
- return false; // indicates we should show the banner
- })
- .catch((error) => {
- return false;
- });
-};
+
+function getCookieConsent() {
+ const value = localStorage.getItem("cookieConsent");
+ // Backwards compatibility: convert old "true" to "granted"
+ if (value === "true") {
+ localStorage.setItem("cookieConsent", "granted");
+ return "granted";
+ }
+ return value;
+}
+
+function setCookieConsent(value) {
+ localStorage.setItem("cookieConsent", value);
+}
+
+async function checkGeolocation() {
+ try {
+ const response = await fetch("https://upstash.com/api/geolocation");
+ const data = await response.json();
+
+ if (data.isEuropean) {
+ setCookieConsent("pending-eu");
+ createCookieConsentBanner();
+ } else {
+ setCookieConsent("granted");
+ initializePosthog();
+ }
+ } catch (error) {
+ console.error("Error checking geolocation:", error);
+ }
+}
function initialize() {
- if (localStorage.getItem("cookieConsent") === "true") {
+ const cookieConsent = getCookieConsent();
+
+ if (cookieConsent === "granted") {
initializePosthog();
- } else {
+ } else if (cookieConsent === "pending-eu") {
createCookieConsentBanner();
+ } else {
+ checkGeolocation();
}
}
initialize();
+
function createCookieConsentBanner() {
- if (
- document.getElementById("cookie-consent-banner") ||
- localStorage.getItem("cookieConsent")
- )
- return;
-
- return checkGeolocation().then((isHandled) => {
- if (!isHandled) {
- const style = document.createElement("style");
- style.textContent = `
+ if (document.getElementById("cookie-consent-banner")) return;
+
+ const style = document.createElement("style");
+ style.textContent = `
#cookie-consent-banner {
position: fixed;
bottom: 0;
@@ -139,27 +152,27 @@ function createCookieConsentBanner() {
}
}
`;
- document.head.appendChild(style);
+ document.head.appendChild(style);
- const banner = document.createElement("div");
- banner.id = "cookie-consent-banner";
+ const banner = document.createElement("div");
+ banner.id = "cookie-consent-banner";
- const message = document.createElement("span");
- message.innerHTML =
- 'We use cookies to improve your experience. Read our privacy policy.';
+ const message = document.createElement("span");
+ message.innerHTML =
+ 'We use cookies to improve your experience. Read our privacy policy.';
- const buttonContainer = document.createElement("div");
- buttonContainer.style.cssText = `
+ const buttonContainer = document.createElement("div");
+ buttonContainer.style.cssText = `
display: flex;
align-items: center;
gap: 10px;
`;
- const acceptButton = document.createElement("button");
- const acceptText = document.createElement("p");
- acceptText.textContent = "Accept";
- acceptButton.appendChild(acceptText);
- acceptButton.style.cssText = `
+ const acceptButton = document.createElement("button");
+ const acceptText = document.createElement("p");
+ acceptText.textContent = "Accept";
+ acceptButton.appendChild(acceptText);
+ acceptButton.style.cssText = `
display: flex;
align-items: center;
background-color: white;
@@ -171,9 +184,9 @@ function createCookieConsentBanner() {
transition: background-color 0.2s;
`;
- const closeButton = document.createElement("button");
- closeButton.textContent = "x";
- closeButton.style.cssText = `
+ const closeButton = document.createElement("button");
+ closeButton.textContent = "x";
+ closeButton.style.cssText = `
display: flex;
height: 24px;
width: 24px;
@@ -187,36 +200,34 @@ function createCookieConsentBanner() {
transition: background-color 0.2s;
`;
- acceptButton.addEventListener(
- "mouseover",
- () => (acceptButton.style.backgroundColor = "#f3f4f6")
- );
- acceptButton.addEventListener(
- "mouseout",
- () => (acceptButton.style.backgroundColor = "white")
- );
- closeButton.addEventListener(
- "mouseover",
- () => (closeButton.style.backgroundColor = "rgb(16, 185, 129)")
- );
- closeButton.addEventListener(
- "mouseout",
- () => (closeButton.style.backgroundColor = "transparent")
- );
-
- acceptButton.addEventListener("click", () => {
- localStorage.setItem("cookieConsent", "true");
- banner.remove();
- initializePosthog();
- });
-
- closeButton.addEventListener("click", () => banner.remove());
-
- buttonContainer.appendChild(acceptButton);
- buttonContainer.appendChild(closeButton);
- banner.appendChild(message);
- banner.appendChild(buttonContainer);
- document.body.appendChild(banner);
- }
+ acceptButton.addEventListener(
+ "mouseover",
+ () => (acceptButton.style.backgroundColor = "#f3f4f6")
+ );
+ acceptButton.addEventListener(
+ "mouseout",
+ () => (acceptButton.style.backgroundColor = "white")
+ );
+ closeButton.addEventListener(
+ "mouseover",
+ () => (closeButton.style.backgroundColor = "rgb(16, 185, 129)")
+ );
+ closeButton.addEventListener(
+ "mouseout",
+ () => (closeButton.style.backgroundColor = "transparent")
+ );
+
+ acceptButton.addEventListener("click", () => {
+ setCookieConsent("granted");
+ banner.remove();
+ initializePosthog();
});
+
+ closeButton.addEventListener("click", () => banner.remove());
+
+ buttonContainer.appendChild(acceptButton);
+ buttonContainer.appendChild(closeButton);
+ banner.appendChild(message);
+ banner.appendChild(buttonContainer);
+ document.body.appendChild(banner);
}