diff --git a/daprdocs/layouts/_partials/cookie-banner.html b/daprdocs/layouts/_partials/cookie-banner.html new file mode 100644 index 00000000000..cc3b20d9a45 --- /dev/null +++ b/daprdocs/layouts/_partials/cookie-banner.html @@ -0,0 +1,11 @@ + diff --git a/daprdocs/layouts/_partials/hooks/body-end.html b/daprdocs/layouts/_partials/hooks/body-end.html index 9111dbbefbc..3419173235f 100644 --- a/daprdocs/layouts/_partials/hooks/body-end.html +++ b/daprdocs/layouts/_partials/hooks/body-end.html @@ -18,4 +18,7 @@ import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); -{{ end }} \ No newline at end of file +{{ end }} + +{{ partial "cookie-banner.html" . }} + diff --git a/daprdocs/layouts/_partials/hooks/head-end.html b/daprdocs/layouts/_partials/hooks/head-end.html index 26e604a4cfc..114973871dd 100644 --- a/daprdocs/layouts/_partials/hooks/head-end.html +++ b/daprdocs/layouts/_partials/hooks/head-end.html @@ -1,3 +1,40 @@ + + + + + {{ with .Site.Params.search.algolia }} -{{ end }} \ No newline at end of file +{{ end }} diff --git a/daprdocs/static/css/cookie-banner.css b/daprdocs/static/css/cookie-banner.css new file mode 100644 index 00000000000..6f49a1d9457 --- /dev/null +++ b/daprdocs/static/css/cookie-banner.css @@ -0,0 +1,89 @@ +.cookie-banner { + box-sizing: border-box; + position: fixed; + left: 0; + right: 0; + bottom: 0; + width: 100%; + z-index: 1000; + background-color: #ffffff; + border-top: 1px solid #dee2e6; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); + font-family: inherit; + color: #212529; + padding-bottom: env(safe-area-inset-bottom, 0); +} + +.cookie-banner[hidden] { + display: none; +} + +.cookie-banner__inner { + box-sizing: border-box; + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 24px 16px; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px; +} + +.cookie-banner__text { + flex: 1 1 320px; + min-width: 0; + margin: 0; + font-size: 0.95rem; + line-height: 1.4; +} + +.cookie-banner__actions { + flex: 0 0 auto; + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} + +.cookie-banner__btn { + width: auto; + min-width: 88px; + height: auto; + padding: 8px 18px; + font-size: 0.9rem; + cursor: pointer; +} + +#cookie-banner-reject.cookie-banner__btn { + background-color: #ffffff; + border-color: #dee2e6; + color: #212529; +} + +#cookie-banner-reject.cookie-banner__btn:hover { + background-color: #f8f9fa; + border-color: #ced4da; + color: #212529; +} + +.cookie-banner__btn:focus-visible { + outline: 2px solid #0d2192; + outline-offset: 2px; +} + +@media (max-width: 640px) { + .cookie-banner__inner { + padding: 20px 14px; + } + + .cookie-banner__text { + flex-basis: 100%; + text-align: center; + } + + .cookie-banner__actions { + flex-basis: 100%; + } +} diff --git a/daprdocs/static/js/cookie-banner.js b/daprdocs/static/js/cookie-banner.js new file mode 100644 index 00000000000..655f46fff45 --- /dev/null +++ b/daprdocs/static/js/cookie-banner.js @@ -0,0 +1,72 @@ +(function () { + var COOKIE_NAME = "dapr_cookie_consent"; + var COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 12 months in seconds + + function readConsent() { + var prefix = COOKIE_NAME + "="; + var parts = document.cookie ? document.cookie.split("; ") : []; + for (var i = 0; i < parts.length; i++) { + if (parts[i].indexOf(prefix) === 0) { + return parts[i].substring(prefix.length); + } + } + return null; + } + + function writeConsent(value) { + var secure = location.protocol === "https:" ? "; Secure" : ""; + document.cookie = + COOKIE_NAME + "=" + value + + "; Max-Age=" + COOKIE_MAX_AGE + + "; Path=/; SameSite=Lax" + secure; + } + + function hideBanner() { + var el = document.getElementById("cookie-banner"); + if (el) { + el.setAttribute("hidden", ""); + } + } + + function showBanner() { + var el = document.getElementById("cookie-banner"); + if (el) { + el.removeAttribute("hidden"); + } + } + + function onReady(fn) { + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", fn); + } else { + fn(); + } + } + + onReady(function () { + var consent = readConsent(); + if (consent === null) { + showBanner(); + } + + var acceptBtn = document.getElementById("cookie-banner-accept"); + var rejectBtn = document.getElementById("cookie-banner-reject"); + + if (acceptBtn) { + acceptBtn.addEventListener("click", function () { + writeConsent("accepted"); + hideBanner(); + if (typeof window.daprInjectReo === "function") { + window.daprInjectReo(); + } + }); + } + + if (rejectBtn) { + rejectBtn.addEventListener("click", function () { + writeConsent("rejected"); + hideBanner(); + }); + } + }); +})();