Clean up cookie notice implementation (#6399)

parlough · web-flow · commit 332495b6f923 · 2025-02-07T10:57:49.000-08:00
- Removes `Cookies.js` usage to match `flutter/website`, reduce external
dependencies, and reduce network waterfall on site load.
- Use a text button for "Learn more" instead of normal link.
- Clean up styles to more closely align with `flutter/website`.
diff --git a/src/_includes/cookie-notice.html b/src/_includes/cookie-notice.html
@@ -1,9 +1,10 @@
 <section id="cookie-notice">
   <div class="container">
     <p>dart.dev uses cookies from Google to deliver and
-      enhance the quality of its services and to analyze traffic.
-      <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
-    </p>
-    <button id="cookie-consent" class="filled-button">OK, got it</button>
+      enhance the quality of its services and to analyze traffic.</p>
+    <div class="button-group">
+      <a class="text-button" href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>
+      <button id="cookie-consent" class="filled-button">OK, got it</button>
+    </div>
   </div>
 </section>
diff --git a/src/_includes/head.html b/src/_includes/head.html
@@ -1,4 +1,4 @@
-{% assign cache_bust = site.time|date:'?v=%s' %}
+{% assign cache_bust = '?v=2' %}
 
 <head>
   <meta charset="utf-8">
@@ -74,11 +74,6 @@
   {% endfor -%}
   {% endif -%}
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"
-          integrity="sha512-nlp9/l96/EpjYBx7EP7pGASVXNe80hGhYAUrjeXnu/fyF5Py0/RXav4BBNs7n5Hx1WFhOEOWSAVjGeC3oKxDVQ=="
-          crossorigin="anonymous"
-          referrerpolicy="no-referrer"></script>
-
   <script src="{{ '/assets/js/os-tabs.js' | append: cache_bust }}"></script>
   <script src="{{ '/assets/js/main.js' | append: cache_bust }}"></script>
 
diff --git a/src/_sass/components/_cookie-notice.scss b/src/_sass/components/_cookie-notice.scss
@@ -1,14 +1,15 @@
 @use '../core/variables' as *;
 
 #cookie-notice {
-  background-color: white;
-  padding: 2rem;
+  display: none;
+  justify-content: center;
+  background-color: $site-color-white;
+  padding: 1.5rem;
   position: fixed;
   bottom: 0;
   width: 100%;
-  box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.25);
   opacity: 0;
-  display: none;
   z-index: 9999;
 
   @keyframes fadein {
@@ -20,53 +21,38 @@
     }
   }
 
-  button.filled-button {
-    font-size: 1rem;
-  }
-
   &.show {
-    display: block;
-    animation-duration: 500ms;
-    animation-delay: 200ms;
-    animation-name: fadein;
-    animation-iteration-count: 1;
-    animation-timing-function: ease;
-    animation-fill-mode: forwards;
+    display: flex;
+    animation: fadein 500ms ease 200ms 1 forwards;
   }
 
   .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1080px;
-    min-width: 0 !important;
+    min-width: 0;
     width: auto;
     gap: 1.5rem;
 
     p {
-      font-size: 1rem;
       line-height: 1.6;
       margin: 0;
     }
+
+    p, button, a {
+      font-size: 1rem;
+    }
   }
 }
 
 body.homepage, body.error {
   #cookie-notice {
+    --site-interaction-base-values: var(--site-interaction-base-values-inverse);
     background-color: $site-color-dark-background;
 
-    .container {
-      p {
-        color: white;
-
-        a {
-          color: $site-color-card-link;
-
-          &:hover, &:focus, &:active {
-            color: darken($site-color-card-link, 20%);
-          }
-        }
-      }
+    .container p {
+      color: $site-color-white;
     }
   }
 }
diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss
@@ -3,6 +3,7 @@
 
 :root {
   --site-interaction-base-values: 0 0 0;
+  --site-interaction-base-values-inverse: 255 255 255;
   --focus-outline-color: #1967D2;
 }
 
@@ -72,38 +73,65 @@ a, button {
     color: $brand-primary;
   }
 
-  &.filled-button {
+  &.filled-button, &.text-button {
     display: flex;
     align-items: center;
     padding: 0.5rem 1rem;
     gap: 0.5rem;
     width: fit-content;
-    background-color: $site-color-primary;
-    color: $site-color-white;
-    text-decoration: none;
-    border-radius: 0.25rem;
     cursor: pointer;
-    font-family: $site-font-family-alt;
     font-size: 1.25rem;
     white-space: nowrap;
+
+    font-family: $site-font-family-alt;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus-outline-color);
+    }
+  }
+
+  &.filled-button {
+    background-color: $site-color-primary;
+    border-radius: 0.25rem;
     outline-offset: 2px;
 
-    &:hover {
-      @include interaction-style(4%);
+    &, &:hover, &:focus, &:active {
       color: $site-color-white;
       text-decoration: none;
     }
 
-    &:focus {
-      color: $site-color-white;
-      outline: 2px solid var(--focus-outline-color);
+    &:hover {
+      @include interaction-style(4%);
     }
 
     &:active {
       @include interaction-style(8%);
-      color: $site-color-white;
     }
   }
+
+  &.text-button {
+    border-radius: 1.5rem;
+
+    &, &:hover, &:focus, &:active {
+      color: $site-color-primary;
+      background: none;
+      text-decoration: none;
+    }
+
+    &:hover {
+      @include interaction-style(4%);
+    }
+
+    &:active {
+      @include interaction-style(7%);
+    }
+  }
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 0.75rem;
 }
 
 button {
diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js
@@ -78,23 +78,33 @@ function createGallery() {
 }
 
 function initCookieNotice() {
-  const notice = document.getElementById('cookie-notice');
-  const agreeBtn = document.getElementById('cookie-consent');
-  const cookieKey = 'dart-site-cookie-consent';
-  const cookieConsentValue = 'true'
-  const activeClass = 'show';
-
-  if (Cookies.get(cookieKey) === cookieConsentValue) {
-    return;
+  const currentDate = Date.now();
+  const cookieKey = 'cookie-consent';
+
+  // Check if they have already recently agreed.
+  const existingDateString = window.localStorage.getItem(cookieKey);
+  if (existingDateString) {
+    const existingDate = parseInt(existingDateString);
+    if (Number.isInteger(existingDate)) {
+      const halfYearMs = 1000 * 60 * 60 * 24 * 180;
+      // If the last consent is less than 180 days old, don't show the notice.
+      if (currentDate - existingDate < halfYearMs) {
+        return;
+      }
+    }
   }
 
-  notice.classList.add(activeClass);
+  const activeClass = 'show';
 
-  agreeBtn.addEventListener('click', (e) => {
+  // Set up the "OK" button to update storage and hide the banner.
+  document.getElementById('cookie-consent')
+      ?.addEventListener('click', (e) => {
     e.preventDefault();
-    Cookies.set(cookieKey, cookieConsentValue, { sameSite: 'strict', expires: 30});
-    notice.classList.remove(activeClass);
-  });
+    window.localStorage.setItem(cookieKey, currentDate.toString());
+    document.getElementById('cookie-notice')?.classList.remove(activeClass);
+  }, { once: true });
+
+  document.getElementById('cookie-notice').classList.add(activeClass);
 }
 
 // A pattern to remove terminal command markers when copying code blocks.
