Skip to content

Commit

Permalink
feat: add Microsoft Clarity integration and update site layout (#23)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtracey93
jtracey93 authored Jan 9, 2025
1 parent 78cbf84 commit 5e6a4af
Show file tree
Hide file tree
Showing 5 changed files with 299 additions and 0 deletions.
5 changes: 5 additions & 0 deletions docs/data/consent.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
items:
- title: Microsoft Clarity
description: This code gives us insight into the number of people that visit our website, where they are from and what they are clicking on. For more information see https://learn.microsoft.com/clarity/setup-and-installation/cookie-list
is_functional: false
script_file: clarity.js
68 changes: 68 additions & 0 deletions docs/layouts/_default/baseof.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html
lang="{{ .Site.Language.Lang }}"
class="color-toggle-hidden"
{{ if default false .Site.Params.geekdocDarkModeCode }}code-theme="dark"{{ end }}
>
<head>
{{ partial "head/meta" . }}
<title>
{{- if eq .Kind "home" -}}
{{ .Site.Title }}
{{- else -}}
{{ printf "%s | %s" (partial "utils/title" .) .Site.Title }}
{{- end -}}
</title>

{{ partial "head/favicons" . }}
{{ partial "head/rel-me" . }}
{{ partial "head/microformats" . }}
{{ partial "head/others" . }}
{{ partial "head/custom" . }}
</head>

<body itemscope itemtype="https://schema.org/WebPage">
{{ partial "svg-icon-symbols" . }}


<div
class="wrapper {{ if default false .Site.Params.geekdocDarkModeDim }}dark-mode-dim{{ end }}"
>
<input type="checkbox" class="hidden" id="menu-control" />
<input type="checkbox" class="hidden" id="menu-header-control" />
{{ $navEnabled := default true .Page.Params.geekdocNav }}
{{ partial "site-header" (dict "Root" . "MenuEnabled" $navEnabled) }}


<main class="container flex flex-even">
{{ if $navEnabled }}
<aside class="gdoc-nav">
{{ partial "menu" . }}
</aside>
{{ end }}


<div class="gdoc-page">
{{ template "main" . }}


{{ $showPrevNext := (default true .Site.Params.geekdocNextPrev) }}
{{ if $showPrevNext }}
<div class="gdoc-page__footer flex flex-wrap justify-between">
{{ if .Site.Params.geekdocMenuBundle }}
{{ partial "menu-bundle-np" . }}
{{ else }}
{{ partial "menu-filetree-np" . }}
{{ end }}
</div>
{{ end }}
</div>
</main>

{{ partial "site-footer" . }}
</div>

{{ partial "foot" . }}
{{ partial "consent.html" . }}
</body>
</html>
166 changes: 166 additions & 0 deletions docs/layouts/partials/consent.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<style>
#consent-notice {padding: 1rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: rgb(17, 43, 60); color: rgba(255,255,255,0.8);}
#consent-notice span {margin-right: 1rem;}
#consent-notice button {cursor: pointer; display: inline-block; width: auto;}
#consent-notice span a {color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5);}
#consent-notice button.btn {margin-left: 0.5rem;}
#consent-notice button.btn.manage-consent {background: rgb(17, 43, 60); font-weight: normal;}

#consent-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: none; background: rgba(0,0,0,0.75); z-index: 999999; overflow: auto; cursor: pointer;}
#consent-overlay.active {display: flex;}
#consent-overlay > div {background: rgb(17, 43, 60); width: 100%; max-width: 30rem; padding: 1.75rem; margin: auto; cursor: initial;}
#consent-overlay > div > div {display: flex; align-items: flex-start; margin-bottom: 1rem;}
#consent-overlay > div > div:last-child {margin: 0;}
#consent-overlay h3 {padding-top: 0;}
#consent-overlay input {margin-top: 0.3rem;}
#consent-overlay label {display: block;}
#consent-overlay .btn {margin-right: 0.5rem;}
#consent-overlay button.btn.save-consent {background: rgba(0,0,0,0.6); font-weight: normal;}

@media (max-width: 767px) {
#consent-overlay > div {padding: 1.75rem 1rem;}
#consent-notice span {display: block; padding-top: 3px; margin-bottom: 1.5rem;}
#consent-notice button.btn {position: relative; bottom: 4px;}
}
</style>
<div id="consent-notice"><span>We would like to use <a class="manage-consent" href="#manage-consent">third party code</a> to improve the functionality of this website.</span><button class="btn manage-consent">Manage preferences</button><button class="btn deny-consent">Deny</button><button class="btn approve-consent">Allow</button></div>
<div id="consent-overlay">
<div>
{{ range $index, $item := .Site.Data.consent.items }}
<div>
<input type="checkbox" id="item{{ $index }}" value="1" name="item{{ $index }}" {{ if $item.is_functional }}checked disabled{{ end }} />
<label for="item{{ $index }}">
<h3>{{ $item.title }}</h3>
<p>{{ $item.description }}</p>
</label>
</div>
{{ end }}
<div>
<button id="save-consent" class="btn save-consent" data-consentvalue="{{ range $index, $item := .Site.Data.consent.items }}{{ if $item.is_functional}}{{ else }}0{{ end }}{{ end }}">Save preferences</button>
<button class="btn approve-consent">Allow all</button>
</div>
</div>
</div>
<script>

const scripts = [];{{ range $index, $item := (where .Site.Data.consent.items "is_functional" false) }}
scripts[{{ $index }}] = "/Azure-Landing-Zones/js/{{ $item.script_file }}";{{ end }}

function createCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
function denyAllConsentScripts() {
var consentValue = "";
scripts.forEach(function(){
consentValue = consentValue + "0";
});
acceptSomeConsentScripts(consentValue);
}
function acceptAllConsentScripts() {
var consentValue = "";
scripts.forEach(function(){
consentValue = consentValue + "1";
});
acceptSomeConsentScripts(consentValue);
}
function acceptSomeConsentScripts(consentValue) {
setConsentInputs(consentValue);
createCookie('consent-settings',consentValue,31);
document.getElementById('consent-notice').style.display = 'none';
document.getElementById('consent-overlay').classList.remove('active');
loadConsentScripts(consentValue);
}
function loadConsentScripts(consentValue) {
scripts.forEach(function(value,key){
//console.log('script'+key+' is set to ' +consentValue[key]+' and is file '+value);
if(consentValue[key]=="1") {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = value;
document.body.appendChild(s);
}
});
}
function setConsentInputs(consentValue) {
var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
elements.forEach(function(el,index) {
if(consentValue[index]=="1") el.checked = true;
else el.checked = false;
});
}
function setConsentValue() {
var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
var consentValue = "";
elements.forEach(function(el) {
if(el.checked) consentValue = consentValue + "1";
else consentValue = consentValue + "0";
});
document.getElementById("save-consent").dataset.consentvalue = consentValue;
}

var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
elements.forEach(function(el) {
el.checked = false;
});

if(readCookie('consent-settings')) {
var consentValue = readCookie('consent-settings').toString();
//console.log(consentValue);
setConsentInputs(consentValue);
loadConsentScripts(consentValue);
} else {
document.getElementById('consent-notice').style.display = 'block';
}
var elements = document.querySelectorAll('.manage-consent');
elements.forEach(function(el) {
el.addEventListener("click",function() {
document.getElementById('consent-overlay').classList.toggle('active');
});
});
var elements = document.querySelectorAll('.deny-consent');
elements.forEach(function(el) {
el.addEventListener("click",function() {
denyAllConsentScripts();
});
});
var elements = document.querySelectorAll('.approve-consent');
elements.forEach(function(el) {
el.addEventListener("click",function() {
acceptAllConsentScripts();
});
});
document.getElementById("save-consent").addEventListener("click",function() {
setConsentValue();
acceptSomeConsentScripts(this.dataset.consentvalue);
});
document.getElementById("consent-overlay").addEventListener("click",function(e) {
if (!document.querySelector("#consent-overlay > div").contains(e.target)){
this.classList.toggle('active');
}
});
</script>

{{ range $index, $item := .Site.Data.consent.items }}
{{ if $item.is_functional }}
<script type="text/javascript" src="/Azure-Landing-Zones/js/{{ $item.script_file }}"></script>
{{ end }}
{{ end }}
55 changes: 55 additions & 0 deletions docs/layouts/partials/site-footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<footer class="gdoc-footer">
<nav class="container flex">
<div>
<section class="flex flex-wrap align-center">
<span class="gdoc-footer__item gdoc-footer__item--row">
{{ i18n "footer_build_with" | safeHTML }}
</span>
{{ with .Site.Params.geekdocLegalNotice }}
<span class="gdoc-footer__item gdoc-footer__item--row">
<a href="{{ . | relURL }}" class="gdoc-footer__link">
{{ i18n "footer_legal_notice" }}
</a>
</span>
{{ end }}
{{ with .Site.Params.geekdocPrivacyPolicy }}
<span class="gdoc-footer__item gdoc-footer__item--row">
<a href="{{ . | relURL }}" class="gdoc-footer__link">
{{ i18n "footer_privacy_policy" }}
</a>
</span>
{{ end }}
<span class="gdoc-footer__item gdoc-footer__item--row">
<a href="#manage-consent" class="gdoc-footer__link manage-consent">
Manage Cookie Consent
</a>
</span>
<span class="gdoc-footer__item gdoc-footer__item--row">
<a href="#" onclick="eraseCookie('consent-settings'); location.reload();" class="gdoc-footer__link manage-consent">
Reset Cookie Consent
</a>
</span>
</section>
{{ with .Site.Params.geekdocContentLicense }}
<section class="flex flex-wrap align-center">
<span class="gdoc-footer__item">
{{ i18n "footer_content_license_prefix" }}
<a href="{{ .link }}" class="gdoc-footer__link no-wrap">{{ .name }}</a>
</span>
</section>
{{ end }}
</div>
{{ if (default true .Site.Params.geekdocBackToTop) }}
<div class="flex flex-25 justify-end">
<span class="gdoc-footer__item text-right">
<a class="gdoc-footer__link fake-link" href="#" aria-label="{{ i18n "nav_top" }}">
<svg class="gdoc-icon gdoc_keyboard_arrow_up">
<use xlink:href="#gdoc_keyboard_arrow_up"></use>
</svg>
<span class="hidden-mobile">{{ i18n "nav_top" }}</span>
</a>
</span>
</div>
{{ end }}
</nav>
</footer>
5 changes: 5 additions & 0 deletions docs/static/js/clarity.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "pr5921moq3");

0 comments on commit 5e6a4af

Please sign in to comment.