From 304b253d15e105b7be3c4c1d475e642e29d41625 Mon Sep 17 00:00:00 2001
From: Steven Serrata <sserrata@paloaltonetworks.com>
Date: Tue, 21 Jul 2026 10:25:20 -0500
Subject: [PATCH 1/3] feat(analytics): gate GA4/GTM behind Google Consent Mode
 v2

Fold cookie-consent behavior into the custom docusaurus-plugin-gtm rather
than adopting a third-party plugin, so the consent signaling and the GTM
loader are emitted from a single injectHtmlTags call. This guarantees the
`consent default = denied` script runs before GTM loads by array order,
independent of plugin registration order.

- docusaurus-plugin-gtm: inject Consent Mode v2 defaults (all denied except
  security_storage), replay stored choice from localStorage, and set
  ads_data_redaction, all before the GTM loader. Prod-only, unchanged
  otherwise. Adds storageKey/waitForUpdate options.
- src/components/CookieConsent: SSR-safe bottom banner (Accept all / Reject
  optional) plus a shared consent helper that writes localStorage and fires
  gtag('consent','update') with the category -> Google signal mapping.
- src/theme/Root.js: render the banner globally.

Verified against a production build: compiled HTML emits the consent
default script before the GTM loader.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docusaurus-plugin-gtm/index.js           | 37 +++++++++++++
 src/components/CookieConsent/consent.js  | 58 ++++++++++++++++++++
 src/components/CookieConsent/index.js    | 54 +++++++++++++++++++
 src/components/CookieConsent/styles.scss | 69 ++++++++++++++++++++++++
 src/theme/Root.js                        |  9 +++-
 5 files changed, 226 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CookieConsent/consent.js
 create mode 100644 src/components/CookieConsent/index.js
 create mode 100644 src/components/CookieConsent/styles.scss

diff --git a/docusaurus-plugin-gtm/index.js b/docusaurus-plugin-gtm/index.js
index afb8de86f..0bd1b0c3b 100644
--- a/docusaurus-plugin-gtm/index.js
+++ b/docusaurus-plugin-gtm/index.js
@@ -1,13 +1,50 @@
 module.exports = function (context, options) {
   const isProd = process.env.NODE_ENV === "production";
+  const storageKey = options.storageKey || "cookie-consent-preferences";
+  const waitForUpdate = options.waitForUpdate || 500;
+
   return {
     name: "docusaurus-plugin-gtm",
     injectHtmlTags() {
       if (!isProd) {
         return {};
       }
+
+      const consentDefault = `
+(function(){
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  window.gtag = window.gtag || gtag;
+  gtag('consent','default',{
+    ad_storage:'denied',
+    ad_user_data:'denied',
+    ad_personalization:'denied',
+    analytics_storage:'denied',
+    functionality_storage:'denied',
+    personalization_storage:'denied',
+    security_storage:'granted',
+    wait_for_update:${waitForUpdate}
+  });
+  gtag('set','ads_data_redaction',true);
+  try {
+    var c = JSON.parse(localStorage.getItem(${JSON.stringify(storageKey)}));
+    if (c && c.consentGiven) {
+      gtag('consent','update',{
+        ad_storage: c.marketing?'granted':'denied',
+        ad_user_data: c.marketing?'granted':'denied',
+        ad_personalization: c.marketing?'granted':'denied',
+        analytics_storage: c.analytics?'granted':'denied',
+        functionality_storage: c.functional?'granted':'denied',
+        personalization_storage: c.functional?'granted':'denied'
+      });
+    }
+  } catch (e) {}
+})();`;
+
       return {
         headTags: [
+          // Consent Mode defaults must run before the GTM loader below.
+          { tagName: "script", innerHTML: consentDefault },
           `<!-- Google Tag Manager -->
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
diff --git a/src/components/CookieConsent/consent.js b/src/components/CookieConsent/consent.js
new file mode 100644
index 000000000..ef955902a
--- /dev/null
+++ b/src/components/CookieConsent/consent.js
@@ -0,0 +1,58 @@
+// Shared consent helpers. The storage key and category -> Google signal mapping
+// must stay in sync with docusaurus-plugin-gtm/index.js, which reads the same
+// key on page load to replay the stored choice before GTM fires.
+export const STORAGE_KEY = "cookie-consent-preferences";
+
+function ensureGtag() {
+  window.dataLayer = window.dataLayer || [];
+  if (typeof window.gtag !== "function") {
+    window.gtag = function () {
+      window.dataLayer.push(arguments);
+    };
+  }
+}
+
+export function readConsent() {
+  if (typeof window === "undefined") return null;
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY));
+  } catch (e) {
+    return null;
+  }
+}
+
+export function updateConsent({
+  analytics = false,
+  marketing = false,
+  functional = false,
+} = {}) {
+  const prefs = {
+    necessary: true,
+    analytics,
+    marketing,
+    functional,
+    consentGiven: true,
+    timestamp: Date.now(),
+  };
+
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+  } catch (e) {
+    // localStorage unavailable (private mode, etc.) — signal consent anyway.
+  }
+
+  ensureGtag();
+  window.gtag("consent", "update", {
+    ad_storage: marketing ? "granted" : "denied",
+    ad_user_data: marketing ? "granted" : "denied",
+    ad_personalization: marketing ? "granted" : "denied",
+    analytics_storage: analytics ? "granted" : "denied",
+    functionality_storage: functional ? "granted" : "denied",
+    personalization_storage: functional ? "granted" : "denied",
+  });
+
+  window.dispatchEvent(
+    new CustomEvent("cookieConsentChange", { detail: prefs })
+  );
+  return prefs;
+}
diff --git a/src/components/CookieConsent/index.js b/src/components/CookieConsent/index.js
new file mode 100644
index 000000000..84245870c
--- /dev/null
+++ b/src/components/CookieConsent/index.js
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import Link from "@docusaurus/Link";
+import { readConsent, updateConsent } from "./consent";
+import "./styles.scss";
+
+export default function CookieConsent() {
+  const [show, setShow] = useState(false);
+
+  // Runs only on the client, so the banner never renders during SSR and can't
+  // cause a hydration mismatch.
+  useEffect(() => {
+    if (!readConsent()?.consentGiven) {
+      setShow(true);
+    }
+  }, []);
+
+  if (!show) return null;
+
+  const choose = (prefs) => {
+    updateConsent(prefs);
+    setShow(false);
+  };
+
+  return (
+    <div className="cookie-consent" role="dialog" aria-label="Cookie consent">
+      <p className="cookie-consent__text">
+        We use cookies to analyze site traffic and improve your experience. See
+        our{" "}
+        <Link to="https://www.paloaltonetworks.com/legal-notices/privacy">
+          Privacy Policy
+        </Link>
+        .
+      </p>
+      <div className="cookie-consent__actions">
+        <button
+          type="button"
+          className="cookie-consent__btn cookie-consent__btn--secondary"
+          onClick={() => choose({})}
+        >
+          Reject optional
+        </button>
+        <button
+          type="button"
+          className="cookie-consent__btn cookie-consent__btn--primary"
+          onClick={() =>
+            choose({ analytics: true, marketing: true, functional: true })
+          }
+        >
+          Accept all
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CookieConsent/styles.scss b/src/components/CookieConsent/styles.scss
new file mode 100644
index 000000000..03cddd1cc
--- /dev/null
+++ b/src/components/CookieConsent/styles.scss
@@ -0,0 +1,69 @@
+.cookie-consent {
+  position: fixed;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 2rem);
+  max-width: 46em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.5rem;
+  padding: 1rem 1.25rem;
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-base);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  z-index: 1000;
+
+  &__text {
+    margin: 0;
+    flex: 1 1 20em;
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  &__btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &--primary {
+      background-color: var(--ifm-color-primary);
+      color: #ffffff;
+    }
+
+    &--secondary {
+      background-color: transparent;
+      border-color: var(--ifm-color-emphasis-400);
+      color: var(--ifm-font-color-base);
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .cookie-consent {
+    flex-direction: column;
+    align-items: stretch;
+
+    &__actions {
+      justify-content: flex-end;
+    }
+  }
+}
diff --git a/src/theme/Root.js b/src/theme/Root.js
index e4b10422c..d208419de 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -4,6 +4,8 @@ import StackdriverErrorReporter from "stackdriver-errors-js";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 
+import CookieConsent from "@site/src/components/CookieConsent";
+
 // Error Reporter
 export default function Root({ children }) {
   const {
@@ -32,5 +34,10 @@ export default function Root({ children }) {
     };
   }
 
-  return <>{children}</>;
+  return (
+    <>
+      {children}
+      <CookieConsent />
+    </>
+  );
 }

From caf6b0f982fadab3e5b91f33ace683775bb98235 Mon Sep 17 00:00:00 2001
From: Steven Serrata <sserrata@paloaltonetworks.com>
Date: Tue, 21 Jul 2026 11:59:58 -0500
Subject: [PATCH 2/3] feat(blog): localize Medium feed images at build time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BlogCard scrapes content_html for a card image and injects it via innerHTML,
so Medium-hosted images and the medium.com/_/stat tracking pixel get requested
by the browser and set third-party cookies before consent.

feed2json.js now downloads each post's hero image into static/img/blog-feed/
(gitignored, regenerated at build), points thumbnail at the local copy, and
strips all remote <img> tags (including the stat pixel) from content_html. The
client no longer requests anything off medium.com, so those cookies are never
set — independent of consent. On download failure the thumbnail is left unset
and BlogCard falls back to the local stock image.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .gitignore           |   3 +
 scripts/feed2json.js | 129 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+)

diff --git a/.gitignore b/.gitignore
index 39c38dfcd..615341701 100755
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,9 @@ products/**/*.json
 src/**/blogs.json
 src/**/feeds.json
 
+# localized Medium feed images (regenerated at build by scripts/feed2json.js)
+static/img/blog-feed/
+
 # playwright
 .playwright-storage.json
 .pw-user-data/
diff --git a/scripts/feed2json.js b/scripts/feed2json.js
index 88efadfbf..b24630d5d 100644
--- a/scripts/feed2json.js
+++ b/scripts/feed2json.js
@@ -7,6 +7,8 @@ const fs = require("fs");
 const https = require("https");
 const http = require("http");
 const zlib = require("zlib");
+const path = require("path");
+const crypto = require("crypto");
 const { URL } = require("url");
 const xml2js = require("xml2js");
 
@@ -421,10 +423,137 @@ async function parseRSS(source) {
   }
 }
 
+// ---------------- Localize feed images (build-time) ----------------
+// Medium feed content references images and a tracking pixel on medium.com
+// domains. BlogCard both scrapes content_html for a card image and injects it
+// via innerHTML, so those remote assets get requested by the browser and set
+// third-party cookies before consent. To avoid that, at build time we download
+// the hero image locally and strip all remote <img> tags (including the
+// medium.com/_/stat pixel) so the client never requests anything off-site.
+const IMG_DIR = path.join(__dirname, "..", "static", "img", "blog-feed");
+const IMG_PUBLIC_BASE = "/img/blog-feed";
+const STAT_PIXEL_RE = /medium\.com\/_\/stat/i;
+const EXT_BY_TYPE = {
+  "image/jpeg": ".jpg",
+  "image/jpg": ".jpg",
+  "image/png": ".png",
+  "image/webp": ".webp",
+  "image/gif": ".gif",
+  "image/avif": ".avif",
+};
+
+function fetchImageBuffer(fileUrl, redirectsLeft = 5) {
+  return new Promise((resolve, reject) => {
+    let url;
+    try {
+      url = new URL(fileUrl);
+    } catch (e) {
+      return reject(e);
+    }
+    const client = url.protocol === "https:" ? https : http;
+    const req = client.get(
+      fileUrl,
+      {
+        headers: {
+          "User-Agent": "Mozilla/5.0 (compatible; pan.dev-feed-image-fetch)",
+          Accept: "image/*,*/*",
+        },
+      },
+      (res) => {
+        const status = res.statusCode || 0;
+        if (status >= 300 && status < 400 && res.headers.location) {
+          res.resume();
+          if (redirectsLeft <= 0)
+            return reject(new Error("Too many redirects"));
+          const next = new URL(res.headers.location, fileUrl).toString();
+          return resolve(fetchImageBuffer(next, redirectsLeft - 1));
+        }
+        if (status !== 200) {
+          res.resume();
+          return reject(
+            new Error(`Image request failed with status ${status}`)
+          );
+        }
+        const chunks = [];
+        res.on("data", (c) => chunks.push(c));
+        res.on("end", () =>
+          resolve({
+            buffer: Buffer.concat(chunks),
+            contentType: (res.headers["content-type"] || "")
+              .split(";")[0]
+              .trim()
+              .toLowerCase(),
+          })
+        );
+        res.on("error", reject);
+      }
+    );
+    req.on("error", reject);
+    req.setTimeout(20000, () =>
+      req.destroy(new Error("Image request timed out"))
+    );
+  });
+}
+
+async function downloadImage(imageUrl) {
+  const { buffer, contentType } = await fetchImageBuffer(imageUrl);
+  const ext =
+    EXT_BY_TYPE[contentType] ||
+    path.extname(new URL(imageUrl).pathname) ||
+    ".jpg";
+  const name =
+    crypto.createHash("sha1").update(imageUrl).digest("hex").slice(0, 16) + ext;
+  fs.mkdirSync(IMG_DIR, { recursive: true });
+  fs.writeFileSync(path.join(IMG_DIR, name), buffer);
+  return `${IMG_PUBLIC_BASE}/${name}`;
+}
+
+function firstContentImage(html) {
+  const re = /<img[^>]+src="([^"]+)"/gi;
+  let m;
+  while ((m = re.exec(html))) {
+    const src = m[1];
+    if (STAT_PIXEL_RE.test(src)) continue;
+    if (/^https?:\/\//i.test(src)) return src;
+  }
+  return null;
+}
+
+function stripImages(html) {
+  return (html || "").replace(/<img[^>]*>/gi, "");
+}
+
+async function localizeFeedImages(feed) {
+  if (!feed || !Array.isArray(feed.items)) return feed;
+  for (const item of feed.items) {
+    const candidate =
+      item.thumbnail || firstContentImage(item.content_html || "");
+    if (
+      candidate &&
+      /^https?:\/\//i.test(candidate) &&
+      !STAT_PIXEL_RE.test(candidate)
+    ) {
+      try {
+        item.thumbnail = await downloadImage(candidate);
+      } catch (err) {
+        // Leave thumbnail unset so BlogCard falls back to the local stock image.
+        console.error(
+          `[feed] Failed to localize image ${candidate}: ${err.message}`
+        );
+      }
+    }
+    // Remove remote images (incl. the Medium stat pixel) so the client never
+    // requests them, regardless of consent.
+    item.content_html = stripImages(item.content_html || "");
+  }
+  return feed;
+}
+
 // ---------------- Example usage ----------------
 (async () => {
   const source = process.argv[2] || "example.xml";
   const jsonOutput = await parseRSS(source);
+  await localizeFeedImages(jsonOutput);
   console.log(JSON.stringify(jsonOutput, null, 2));
 })();
 

From 9235c08456bb275d4900ab7ecb01c9d89bd43646 Mon Sep 17 00:00:00 2001
From: Steven Serrata <sserrata@paloaltonetworks.com>
Date: Tue, 21 Jul 2026 12:23:34 -0500
Subject: [PATCH 3/3] chore(analytics): pass explicit storageKey to
 docusaurus-plugin-gtm

Make the localStorage key coupling between the GTM head script and the
CookieConsent banner explicit in one place, rather than relying on both
sides defaulting to the same string.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docusaurus.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 5e9d5ac8a..edd376cec 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -1324,6 +1324,10 @@ const config = {
       require.resolve("./docusaurus-plugin-gtm/index.js"),
       {
         gtm: "GTM-PLXD79N",
+        // Must match STORAGE_KEY in src/components/CookieConsent/consent.js —
+        // the head script reads this to replay a returning visitor's choice
+        // before GTM loads.
+        storageKey: "cookie-consent-preferences",
       },
     ],
     tailwindPlugin,