diff --git a/static/css/cookie-consent.css b/static/css/cookie-consent.css new file mode 100644 index 0000000000..b650545625 --- /dev/null +++ b/static/css/cookie-consent.css @@ -0,0 +1,165 @@ +/** Import balena design tokens **/ +@import url("https://unpkg.com/@balena/design-tokens@latest/build/css/tokens.css"); + +html { + -moz-osx-font-smoothing: grayscale; +} + +body { + --wp--style--root--padding-bottom: 0; +} + +.taxonomy-category a { + text-decoration: none; +} + +.taxonomy-category a:hover { + text-decoration: underline; +} + +/** fix a bug in header search form **/ +.wp-block-search-is-layout-flow > * { + margin-block-start: 0; +} + +:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input { + padding-left: 1rem !important; +} + +.wp-block-search__inside-wrapper { + background-color: var(--wp--preset--color--tertiary); + border: none; +} + +.wp-block-search__input, +.wp-block-search__button { + background: transparent; +} + +.wp-block-search__input { + color: var(--wp--preset--color--secondary); +} + +.wp-block-search__button:hover, +.wp-block-search__button:active, +.wp-block-search__button:focus { + background: var(--wp--preset--color--secondary); + color: white !important; +} + +.wp-block-post-content img { + width: 100%; + height: auto; +} + +.page-footer { + margin-top: 0; +} + +.wp-block-social-link-anchor { + font-size: 90% !important; +} + + +/** Tag cloud **/ +.wp-block-tag-cloud.is-style-outline { + & .tag-cloud-link { + border-radius: 100px; + border: none; + background: var(--color-bg-accent); + color: var(--color-text-accent); + padding: 8px 16px; + text-transform: capitalize; + font-size: 14px !important; + + &:hover, + &:active { + background: var(--color-bg-accent-strong); + color: var(--color-text-inverse); + } + } +} + + + +.wp-block-navigation .item-highlighted a { + border: solid 1px var(--color-border-accent-strong); + border-radius: 100px; + padding: 8px 32px; + font-size: 14px; + transition: all 150ms ease-out; + + &:hover, + &:active, + &:focus { + background-color: var(--color-bg-accent-strong); + color: var(--color-text-inverse); + text-decoration: none; + } +} + + +footer a { + color: var(--color-text-accent); +} + + +body .wp-block-separator { + border-bottom: none; + border-color: var(--color-border-subtle); +} + + + +body .is-layout-constrained > .wp-block-image:where(:not(.alignleft):not(.alignright):not(.alignfull)) { + max-width: 850px; +} + +.wp-block-wp-discourse-comments-is-layout-constrained { + font-size: 16px; + margin-block: 5rem !important; + + & .comment:not(:last-child) { + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: solid var(--color-border-subtle) 1px; + } + + & .comment-reply-title, + & .discourse-participants { + font-size: 1.5rem; + } +} + +.wp-block-quote { + border-left: solid 2px var(--color-border-accent) !important; +} + +.wp-block-quote p { + font-size: 1.25rem; + font-style: italic; +} + +.wp-block-quote cite { + font-size: .9rem; +} + + + +.MathJax { + display: inline-block !important; +} + +@media screen and (max-width: 500px) { + .wp-block-query h2 { + font-size: 1.25rem !important; + } + + .wp-block-search__inside-wrapper { + width: 150px !important; + } + + header nav.wp-block-navigation { + display: none; + } +} \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index aec1c4c726..0fd9ed7a28 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,4 +1,5 @@ @import "tooltips.css"; +@import "cookie-consent.css"; body { margin-top: 61px; diff --git a/static/scripts/main.js b/static/scripts/main.js index 1b9cb55e67..8d9f914a6b 100644 --- a/static/scripts/main.js +++ b/static/scripts/main.js @@ -24,6 +24,7 @@ require('../css/main.css') require('../css/menu-top.css') require('../css/search.css') require('../css/tooltips.css') +require('../css/cookie-consent.css') hljs.highlightAll() diff --git a/templates/_cookie-consent.html b/templates/_cookie-consent.html new file mode 100644 index 0000000000..019e8a4c3d --- /dev/null +++ b/templates/_cookie-consent.html @@ -0,0 +1,127 @@ +<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@klaxit/cookie-consent@0.3.4/dist/cookie-consent.js"></script> +<script type="stylesheet" src="https://unpkg.com/@balena/design-tokens@latest/build/css/tokens.css"></script> + +<script> + const PROJECT_NAME = 'balena-main'; + const COMPONENT_NAME = 'Docs'; + const COMPONENT_VERSION = 'Docs'; + const TRACKER_NAME = 'Docs'; + const ENDPOINT = 'data.balena-cloud.com'; + const GTM_TAG = 'GTM-598RSSPM'; + + window.dataLayer = window.dataLayer || []; + function gtag() { dataLayer.push(arguments); } + + gtag('consent', 'default', { + 'analytics_storage': 'denied' + }); + + function addAnalyticsClient() { + const el = document.createElement('script'); + el.type = 'text/javascript'; + el.crossOrigin = 'anonymous'; + el.async = true; + el.src = + 'https://cdn.jsdelivr.net/npm/analytics-client@latest/dist/bundle.js'; + + el.onload = function (_) { + const ac = window.analyticsClient; + + const urlParams = new ac.AnalyticsUrlParams(); + const newQuery = urlParams.consumeUrlParameters(window.location.search); + if (newQuery != null) { + const newUrl = window.location.pathname + ('?' + newQuery); + window.history.replaceState(null, '', newUrl); + } + const client = urlParams.isOptOutRequested() + ? ac.createNoopClient() + : ac.createMarketingClient({ + projectName: PROJECT_NAME, + componentName: COMPONENT_NAME, + componentVersion: COMPONENT_VERSION, + endpoint: ENDPOINT, + deviceId: urlParams.getPassedDeviceId(), + }); + + urlParams.setClient(client); + const tracker = ac.createWebTracker(client, TRACKER_NAME); + tracker.trackPageView(); + + const a = document.getElementsByTagName('a'); + for (let idx = 0; idx < a.length; ++idx) { + a[idx].addEventListener('click', async e => { + const href = e.currentTarget.href; + const origin = new URL(window.location.href); + const qs = urlParams.getQueryString(href, origin); + + let hrefWithAnalyticsParams = href; + if (new URL(href).hostname !== origin.hostname) { + if (href.includes('?')) { + hrefWithAnalyticsParams = href + '&' + qs; + } else if (href.includes('#')) { + const urlParts = href.split('#'); + hrefWithAnalyticsParams = + urlParts[0] + '?' + qs + '#' + urlParts[1]; + } else { + hrefWithAnalyticsParams = href + '?' + qs; + } + } + e.currentTarget.href = hrefWithAnalyticsParams; + await tracker.trackNavigationClick(href); + }); + } + }; + + const firstElement = document.getElementsByTagName('script')[0]; + firstElement.parentNode.insertBefore(el, firstElement); + } + + function addGTM() { + (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], + j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; + j.async = true; + j.src = + 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; + f.parentNode.insertBefore(j, f); + })(window, document, 'script', 'dataLayer', GTM_TAG); + } + + if (window.CookieConsent) { + const cc = new window.CookieConsent({ + title: 'We use cookies 🍪', + description: 'We use cookies to enhance your browsing experience and analyze our traffic. By clicking "Accept All" you consent to our use of cookies. Read more about our <a href="https://www.balena.io/privacy-policy" target="_blank">privacy policy</a>.', + buttons: { + acceptAll: 'Accept all', + acceptSelected: 'Save selection', + reject: 'Reject all', + showSettings: 'Customize', + hideSettings: 'Back', + }, + cookie: { + secure: false, + }, + }) + + cc.on('accept', () => { + addAnalyticsClient(); + gtag('consent', 'update', { + 'analytics_storage': 'granted' + }); + }); + } + + if (window.CookieConsent?.acceptedCategories?.includes('analytics')) { + gtag('consent', 'update', { + 'analytics_storage': 'granted' + }); + addAnalyticsClient(); + } + + addGTM() +</script> \ No newline at end of file diff --git a/templates/default.html b/templates/default.html index 83782544dd..3e44b5dacc 100644 --- a/templates/default.html +++ b/templates/default.html @@ -81,6 +81,7 @@ </div> <script src="/dist/main.js"></script> {% include "_track.html" %} + {% include "_cookie-consent.html" %} {% include "_algolia.html" %} {% include "_copy_code_block.html" %} {% if extras == "devices-js" %}