audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-06-13 03:38:11 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Add custom cookie popup

Browse Source
This commit is contained in:
Dilson's Pickles
2023-09-25 16:02:52 +10:00
parent 000d17cdc4
commit cbe93c46cc
5 changed files with 82 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/assets/js/cookieConsent.js Normal file
View File

@@ -0,0 +1,40 @@
const cookieStorage = {
getItem: (key) => {
const cookies = document.cookie
.split(";")
.map((cookie) => cookie.split("="))
.reduce(
(acc, [key, value]) => ({ ...acc, [key.trim()]: value }), {}
);
return cookies[key];
},
setItem: (key, value) => {
document.cookie = `${key}=${value}`;
},
};
const storageType = cookieStorage;
const consentPropertyName = "Audacity_consent";
const showShowPopup = () => !storageType.getItem(consentPropertyName);
const saveToStorage = () =>
storageType.setItem(consentPropertyName, true);
window.onload = () => {
const consentPopup = document.getElementById('consent-popup');
const acceptBtn = document.getElementById('accept');
const acceptFn = event => {
saveToStorage(storageType);
consentPopup.classList.add('hide');
}
acceptBtn.addEventListener('click', acceptFn);
if (showShowPopup(storageType)) {
setTimeout(() => {
consentPopup.classList.remove('hide')
}, 2000);
}
};

18
src/components/banner/CookieConsent.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
function CookieConsent() {
return (
<div id="consent-popup" className="flex flex-col p-8 sticky bottom-0 w-full bg-white border border-top-1 hide">
<h4>We value your piracy</h4>
<div className="mt-2 flex justify-between">
<p>
We use a privacy preserving first-party analytics service if you consent. Otherwise, only necessary cookies are used. <a href="/cookie-policy" class="hyperlink">Read cookie policy</a></p>
<a id="accept" class="flex h-12 items-center border px-3 rounded-md bg-blue-700 text-white" href="#">Accept</a>
</div>
</div>
)
}
export default CookieConsent

15
src/layouts/BaseLayout.astro
View File

@@ -1,8 +1,9 @@
---
import Footer from "../components/footer/Footer.astro";
import NavigationReact from "../components/navigation/NavigationReact";
import CookieConsent from '../components/banner/CookieConsent'
import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react";
import '../styles/input.css'
import "../styles/input.css";
import { ViewTransitions } from "astro:transitions";
export interface Props {
@@ -14,16 +15,15 @@ const instance = createInstance({
urlBase: "test",
siteId: 1,
});
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<link href="/output.css" rel="stylesheet"/>
<link href="/output.css" rel="stylesheet" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<ViewTransitions />
@@ -32,9 +32,10 @@ const instance = createInstance({
<MatomoProvider value={instance}>
<NavigationReact client:load />
<div class="mt-14 flex-1"><slot /></div>
<Footer/>
<Footer />
<!-- <CookieConsent/> -->
</MatomoProvider>
<script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/46bd7746cd70214163af67a3/script.js"></script>
<!-- <script src="../assets/js/cookieConsent.js"/> -->
</body>
</html>
</html>

7
src/pages/index.astro
View File

@@ -19,9 +19,4 @@ import RecordAnything from "../components/homepage/RecordAnything.astro";
<BlogPosts />
<DownloadBanner />
<FAQ />
</BaseLayout>
<script>
const allCookies = document.cookie;
console.log("Cookies", allCookies);
</script>
</BaseLayout>

15
src/styles/input.css
View File

@@ -55,5 +55,20 @@
.sub-heading {
@apply text-xl
}
#consent-popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
background-color: #fff;
opacity: 1;
transition: opacity .8s ease;
&.hide{
opacity: 0;
}
}
}