Skip to content

feat: implement new cookie banner (via silktide CMP) #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
traefiker merged 2 commits into from
Mar 11, 2026
Merged

feat: implement new cookie banner (via silktide CMP) #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8b48d8
Improve docs website operations
arpban Mar 3, 2026
45c02f2
Remove local consent manager CSS and reference shared stylesheet
harshad-tahiliani Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions material/assets/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.08c56446.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.1866c2a5.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.1866c2a5.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.a7287fca.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.a7287fca.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.ec643c8d.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.ec643c8d.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.f82dab86.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.f82dab86.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.bd9ced1d.min.css",
Expand Down
1 change: 0 additions & 1 deletion material/assets/stylesheets/main.a7287fca.min.css.map
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions .../assets/stylesheets/main.a7287fca.min.css → .../assets/stylesheets/main.ec643c8d.min.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions material/assets/stylesheets/main.ec643c8d.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 46 additions & 1 deletion material/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.a7287fca.min.css' | url }}">
<link rel="stylesheet" href="https://traefik.io/silktide-consent-manager/styles.css">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.ec643c8d.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.bd9ced1d.min.css' | url }}">
Expand Down Expand Up @@ -81,10 +82,54 @@
<link rel="stylesheet" href="{{ path | url }}">
{% endfor %}
{% block analytics %}
<script id="silktide-consent-manager">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'security_storage': 'denied',
'wait_for_update': 500
});
function getCookie(key) {
const match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'))
return match ? decodeURIComponent(match[1]) : null
}
if (getCookie('silktideCookieBanner_InitialChoice')) {
try {
const analyticsGranted = getCookie('silktideCookieChoice_analytics') === "true"
const advertisingGranted = getCookie('silktideCookieChoice_advertising') === "true"
gtag('consent', 'update', {
ad_storage: advertisingGranted ? "granted" : "denied",
ad_user_data: advertisingGranted ? "granted" : "denied",
ad_personalization: advertisingGranted ? "granted" : "denied",
analytics_storage: analyticsGranted ? "granted" : "denied",
functionality_storage: "granted",
security_storage: "granted",
});
} catch(e) {
console.warn('Could not parse cookie consent preference:', e);
}
} else {
gtag('consent', 'default', {
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'security_storage': 'granted',
'region': ['US', 'IN']
});
}
</script>
<script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-NMWC63S",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script>
{% endblock %}
{% block extrahead %}{% endblock %}
<script src="https://traefik.github.io/traefiklabs-header-app/main-v1.js"></script>
<script defer src="https://traefik.io/silktide-consent-manager/script.js"></script>
</head>
{% set direction = config.theme.direction or lang.t('direction') %}
{% if config.theme.palette %}
Expand Down
1 change: 1 addition & 0 deletions material/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
{{ config.copyright }}
</div>
{% endif %}
<button class="md-footer-cookie-preferences__button" data-silktide-preferences-link style="display:none">Cookie preferences • </button>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
Expand Down
13 changes: 13 additions & 0 deletions src/assets/stylesheets/customizations/_cookie-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.st-button {
font-family: inherit;
}

[data-silktide-preferences-link] {
display: none;
color: var(--md-footer-fg-color--light);
font-family: inherit;
transition: color 125ms;
&:hover {
color: var(--md-footer-fg-color);
}
}
1 change: 1 addition & 0 deletions src/assets/stylesheets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,5 @@
@import "customizations/content";
@import "customizations/product-switcher";
@import "customizations/atom-one-light";
@import "customizations/cookie-banner";

52 changes: 51 additions & 1 deletion src/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@

<!-- Theme-related stylesheets -->
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}" />
<link rel="stylesheet" href="https://traefik.io/silktide-consent-manager/styles.css" />
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}" />

<!-- Extra color palette -->
{% if config.theme.palette %}
Expand Down Expand Up @@ -158,6 +159,51 @@

<!-- Analytics -->
{% block analytics %}

<script id="silktide-consent-manager">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'security_storage': 'denied',
'wait_for_update': 500
});
function getCookie(key) {
const match = document.cookie.match(new RegExp('(?:^|; )' + key + '=([^;]*)'))
return match ? decodeURIComponent(match[1]) : null
}
if (getCookie('silktideCookieBanner_InitialChoice')) {
try {
const analyticsGranted = getCookie('silktideCookieChoice_analytics') === "true"
const advertisingGranted = getCookie('silktideCookieChoice_advertising') === "true"
gtag('consent', 'update', {
ad_storage: advertisingGranted ? "granted" : "denied",
ad_user_data: advertisingGranted ? "granted" : "denied",
ad_personalization: advertisingGranted ? "granted" : "denied",
analytics_storage: analyticsGranted ? "granted" : "denied",
functionality_storage: "granted",
security_storage: "granted",
});
} catch(e) {
console.warn('Could not parse cookie consent preference:', e);
}
} else {
gtag('consent', 'default', {
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'security_storage': 'granted',
'region': ['US', 'IN']
});
}
</script>

<!-- {% if config.google_analytics %}
{% include "partials/integrations/analytics.html" %}
{% endif %} -->
Expand All @@ -176,6 +222,10 @@
type="text/javascript"
src="https://traefik.github.io/traefiklabs-header-app/main-v1.js"
></script>
<script
defer
src="https://traefik.io/silktide-consent-manager/script.js"
Copy link
Copy Markdown
Member

@gndz07 gndz07 Mar 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder about the fact that the script is fetched from a CDN, but the CSS is copied locally. If the remote source (the script) is updated, and it affects the styling, without us manually updating our copy of the CSS file it potentially will break the interface. Any reason why it's done this way?
I would prefer to have both of these resources come from the same source (either CDN or local copy) to avoid version mismatch. Other possibility, at the very least, if it's a must to have them from different sources, to be able to pin the version that is fetched from remote source.

Copy link
Copy Markdown

@harshad-tahiliani harshad-tahiliani Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the local CSS copy and now loading the styles from the CDN as well, so both the script and styles come from the same source and stay version-aligned.

></script>
</head>

<!-- Text direction and color palette, if defined -->
Expand Down
1 change: 1 addition & 0 deletions src/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
{{ config.copyright }}
</div>
{% endif %}
<button class="md-footer-cookie-preferences__button" data-silktide-preferences-link style="display: none;">Cookie preferences • </button>
Made with
<a
href="https://squidfunk.github.io/mkdocs-material/"
Expand Down
2 changes: 1 addition & 1 deletion webpack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export default (_env: never, args: Configuration): Configuration[] => {
"assets/javascripts/bundle": "src/assets/javascripts",
"assets/stylesheets/main": "src/assets/stylesheets/main.scss",
"assets/stylesheets/overrides": "src/assets/stylesheets/overrides.scss",
"assets/stylesheets/palette": "src/assets/stylesheets/palette.scss"
"assets/stylesheets/palette": "src/assets/stylesheets/palette.scss",
},
output: {
path: path.resolve(__dirname, "material"),
Expand Down