Switch from CookieYes to our own cookie banner.

app.vue

@@ -200,5 +200,21 @@ if (process.client) {
   })
 }
 
+const {
+  cookiesEnabledIds,
+} = useCookieControl()
+
+// We ripple the cookie consent through to the store.
+watch(
+    () => cookiesEnabledIds.value,
+    (current, previous) => {
+      miscStore.optionalConsent = current?.includes('optional')
+    },
+    {
+      deep: true,
+      immediate: true
+    },
+)
+
 ready = true
 </script>

components/ExternalDa.vue

@@ -3,7 +3,7 @@
   If you don't like ads, then you can use an ad blocker.  Plus you could donate to us
   at https://www.ilovefreegle.org/donate - if we got enough donations we would be delighted not to show ads.
    -->
-  <div v-observe-visibility="visibilityChanged">
+  <div v-observe-visibility="visibilityChanged" v-if="allowed">
     <div v-if="isVisible" class="d-flex w-100 justify-content-around">
       <div
         :id="divId"
@@ -48,6 +48,11 @@ const breakpoint = computed(() => {
   return miscStore.breakpoint
 })
 
+const allowed = computed(() => {
+  const miscStore = useMiscStore()
+  return miscStore.optionalConsent
+})
+
 const uniqueid = ref(props.adUnitPath)
 
 const p = new Promise((resolve, reject) => {

components/LayoutCommon.vue

@@ -34,6 +34,16 @@
       <BreakpointFettler />
       <div id="here" />
       <SomethingWentWrong />
+      <CookieControl>
+        <template #bar>
+          <h3>Cookies and Privacy</h3>
+          <p>
+            Some cookies are strictly necessary to make our website work.  Others help us make it better,
+            fix problems, or raise funds to keep us going.  Please choose what you'd like - you're in control.
+          </p>
+          <nuxt-link to="/privacy">Read our privacy policy</nuxt-link>
+        </template>
+      </CookieControl>
     </client-only>
   </div>
 </template>

nuxt.config.ts

@@ -156,7 +156,49 @@ export default defineNuxtConfig({
     extractCSS: true,
   },
 
-  modules: ['@pinia/nuxt'],
+  modules: [
+      '@pinia/nuxt',
+      '@dargmuesli/nuxt-cookie-control'
+  ],
+
+  cookieControl: {
+    cookieNameIsConsentGiven: 'cookieConsent_c',
+    cookieNameCookiesEnabledIds: 'cookieConsent_e',
+    isAcceptNecessaryButtonEnabled: false,
+    isControlButtonEnabled: false,
+    colors: {
+      barBackground: 'white',
+      barTextColor: 'black',
+      barButtonBackground: 'black',
+      barButtonColor: 'white',
+      barButtonHoverBackground: 'grey',
+      barButtonHoverColor: 'white',
+    },
+    localeTexts: {
+      en: {
+        accept: 'Accept all cookies',
+        manageCookies: 'Manage settings'
+      }
+    },
+    cookies: {
+      necessary: [
+        {
+          name: 'Necessary',
+          description: 'These cookies are strictly necessary for the site to work - for logging in, ' +
+              'replying to posts, remembering your cookie ' +
+              'preferences, and offering the social signin buttons from Facebook and Google.'
+        },
+      ],
+      optional: [
+        {
+          name: 'Optional',
+          description: 'These cookies help us make the site better by understanding how people are using it or ' +
+              'when they have problems.  We also use them to offer advertisements which help keep Freegle going.  You ' +
+              'can turn these off.'
+        },
+      ],
+    },
+  },
 
   buildModules: [
     [
@@ -213,11 +255,6 @@ export default defineNuxtConfig({
   app: {
     head: {
       title: "Freegle - Don't throw it away, give it away!",
-      script: [
-        {
-          src: 'https://cdn-cookieyes.com/client_data/fd4582b38fa7a9f269114304/script.js'
-        }
-      ],
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },