Merge pull request #2865 from canonical/data-nosnippet

feat: added data-nosnippet tags

Author: Skazitron

static/js/cookie-policy-with-callback.js

@@ -4,6 +4,28 @@
 */
 import { v4 as uuidv4 } from "uuid";
 
+// The cookie banner markup comes from the @canonical/cookie-policy package,
+// so it can't be tagged in our templates. Watch for it being inserted (and
+// re-inserted, since it's recreated each time it's opened) and mark it
+// nosnippet so it isn't pulled into search/AI page summaries.
+function watchCookieBanner() {
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType === 1 && node.matches(".cookie-policy")) {
+          node.setAttribute("data-nosnippet", "");
+        }
+      }
+    }
+  }).observe(document.body, { childList: true });
+}
+
+if (document.body) {
+  watchCookieBanner();
+} else {
+  document.addEventListener("DOMContentLoaded", watchCookieBanner);
+}
+
 const getCookie = (targetCookie) =>
   document.cookie.match(new RegExp("(^| )" + targetCookie + "=([^;]+)"));
 let cookieAcceptanceValue = getCookie("_cookies_accepted");

templates/docs/shared/_footer.html

@@ -1,5 +1,5 @@
 <div class="p-strip is-dark l-footer--sticky">
-  <footer class="row">
+  <footer class="row" data-nosnippet>
     <div class="col-3">
       <p>
         Copyright &copy; {{ now("%Y") }}

templates/navigation/navigation.html

@@ -1,6 +1,7 @@
 {% set page_bubble = get_current_page_bubble(request.path).page_bubble %}
 
 <header id="navigation"
+        data-nosnippet
         class="p-navigation{% if page_bubble %}--reduced{% else %}--sliding{% endif %} is-dark">
   <div class="p-navigation__row--25-75">
     <div class="p-navigation__banner">

templates/navigation/secondary-navigation.html

@@ -1,5 +1,6 @@
 <div id="secondary-navigation"
-     class="p-navigation is-sticky is-secondary is-dark">
+     class="p-navigation is-sticky is-secondary is-dark"
+     data-nosnippet>
   <div class="p-navigation__row--25-75">
     <div class="p-navigation__banner">
       <div class="p-navigation__tagged-logo">

templates/partial/_footer.html

@@ -1,4 +1,4 @@
-<footer class="p-footer l-footer--sticky is-dark">
+<footer class="p-footer l-footer--sticky is-dark" data-nosnippet>
   <div class="row">
     <div class="col-4 col-small-4 u-hide--large">
       <ul class="p-inline-list-icons u-no-padding--left u-no-margin--left">