Skip to content

Commit bbbd330

Browse files
dwildingdwilding
authored
docs: add Google Analyics integration and cookie consent banner (#181)
Now that the Jubilant docs are under documentation.ubuntu.com, we need to enable Google Analytics and the cookie consent banner. This PR matches canonical/pebble#652. See that Pebble PR for additional context.
1 parent e004030 commit bbbd330

File tree

5 files changed

+182
-2
lines changed

5 files changed

+182
-2
lines changed

‎docs/_static/analytics-bundle.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/_static/cookie-banner.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Cookie policy styling WILL BE REMOVED when implementation of new theme with vanilla is implemented */
2+
.cookie-policy {
3+
overflow: auto;
4+
top: 35%;
5+
z-index: 50;
6+
position: fixed;
7+
}
8+
9+
dialog.cookie-policy {
10+
background-color: var(--color-code-background);
11+
color: var(--color-code-foreground);
12+
height: auto;
13+
max-height: 60vh;
14+
max-width: 40rem;
15+
padding: 0 1rem 0 1rem;
16+
width: auto;
17+
}
18+
19+
header.p-modal__header {
20+
margin-bottom: .5rem;
21+
}
22+
23+
header.p-modal__header::after {
24+
background-color: #d9d9d9;
25+
content: "";
26+
height: 1px;
27+
left: 0;
28+
margin-left: 1rem;
29+
margin-right: 1rem;
30+
position: absolute;
31+
right: 0;
32+
}
33+
34+
h2#cookie-policy-title.p-modal__title {
35+
align-self: flex-end;
36+
font-size: 1.5rem;
37+
font-style: normal;
38+
font-weight: 275;
39+
line-height: 2rem;
40+
margin: 0 0 1.05rem 0;
41+
padding: 0.45rem 0 0 0;
42+
}
43+
44+
.cookie-policy p {
45+
font-size: 1rem;
46+
line-height: 1.5rem;
47+
margin-top: 0;
48+
padding-top: .4rem;
49+
}
50+
51+
.cookie-policy p a {
52+
text-decoration: none;
53+
color: var(--color-link);
54+
}
55+
.cookie-policy button {
56+
border-style: solid;
57+
border-width: 1.5px;
58+
cursor: pointer;
59+
display: inline-block;
60+
font-size: 1rem;
61+
font-weight: 400;
62+
justify-content: center;
63+
line-height: 1.5rem;
64+
padding: calc(.4rem - 1px) 1rem;
65+
text-align: center;
66+
text-decoration: none;
67+
transition-duration: .1s;
68+
transition-property: background-color,border-color;
69+
transition-timing-function: cubic-bezier(0.55,0.055,0.675,0.19);
70+
}
71+
72+
.cookie-policy button {
73+
background-color: #fff;
74+
border-color: rgba(0,0,0,0.56);
75+
color: #000;
76+
}
77+
78+
.cookie-policy .p-button--positive {
79+
background-color: #0e8420;
80+
border-color: #0e8420;
81+
color: #fff;
82+
}

‎docs/_templates/footer.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="bottom-of-page">
2+
<div class="left-details">
3+
{%- if show_copyright %}
4+
<div class="copyright">
5+
{% trans copyright=copyright|e -%}
6+
Copyright &#169; {{ copyright }}
7+
{%- endtrans %}
8+
</div>
9+
{%- endif %}
10+
11+
{%- if last_updated -%}
12+
<div class="last-updated">
13+
{% trans last_updated=last_updated|e -%}
14+
Last updated on {{ last_updated }}
15+
{%- endtrans -%}
16+
</div>
17+
{%- endif %}
18+
19+
</div>
20+
<div class="right-details"><a href="" class="js-revoke-cookie-manager muted-link">Manage your tracker settings</a></div>
21+
</div>

‎docs/_templates/header.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<header id="header" class="p-navigation">
2+
3+
<!-- Google Tag Manager -->
4+
<script>
5+
(function(w, d, s, l, i) {
6+
w[l] = w[l] || [];
7+
w[l].push({
8+
'gtm.start': new Date().getTime(),
9+
event: 'gtm.js'
10+
});
11+
var f = d.getElementsByTagName(s)[0];
12+
var j = d.createElement(s);
13+
var dl = '';
14+
if (l != 'dataLayer') {
15+
dl = '&l=' + l;
16+
}
17+
j.async = true;
18+
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
19+
f.parentNode.insertBefore(j, f);
20+
})(window, document, 'script', 'dataLayer', 'GTM-KNX3CJC');
21+
</script>
22+
23+
<div class="p-navigation__nav" role="menubar">
24+
25+
<ul class="p-navigation__links" role="menu">
26+
27+
<li>
28+
<a class="p-logo" href="https://{{ product_page }}" aria-current="page">
29+
<img src="{{ pathto(product_tag,1) }}" alt="Logo" class="p-logo-image">
30+
<div class="p-logo-text p-heading--4">{{ project }}
31+
</div>
32+
</a>
33+
</li>
34+
35+
<li class="nav-ubuntu-com">
36+
<a href="https://{{ product_page }}" class="p-navigation__link">{{ product_page }}</a>
37+
</li>
38+
39+
<li>
40+
<a href="#" class="p-navigation__link nav-more-links">More resources</a>
41+
<ul class="more-links-dropdown">
42+
43+
{% if discourse %}
44+
<li>
45+
<a href="{{ discourse }}" class="p-navigation__sub-link p-dropdown__link">Discourse</a>
46+
</li>
47+
{% endif %}
48+
49+
{% if mattermost %}
50+
<li>
51+
<a href="{{ mattermost }}" class="p-navigation__sub-link p-dropdown__link">Mattermost</a>
52+
</li>
53+
{% endif %}
54+
55+
{% if matrix %}
56+
<li>
57+
<a href="{{ matrix }}" class="p-navigation__sub-link p-dropdown__link">Matrix</a>
58+
</li>
59+
{% endif %}
60+
61+
{% if github_url %}
62+
<li>
63+
<a href="{{ github_url }}" class="p-navigation__sub-link p-dropdown__link">GitHub</a>
64+
</li>
65+
{% endif %}
66+
67+
</ul>
68+
</li>
69+
70+
</ul>
71+
</div>
72+
</header>

0 commit comments

Comments
 (0)