Skip to content

Commit c7a5354

Browse files
alina-derkach-oazaalina-derkach-oaza
authored
DOCS-106 Implement Osano Cookie consent in docs.percona.com + remove scarf (#256)
modified: _resource/overrides/main.html modified: _resource/overrides/partials/copyright.html modified: mkdocs-base.yml modified: snippets/services-banner.md
1 parent 08cbe09 commit c7a5354

File tree

6 files changed

+221
-9
lines changed

6 files changed

+221
-9
lines changed

‎_resource/overrides/main.html

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{# MkDocs template for builds with Material Theme to customize docs layout by adding marketing-requested elements #}
22

33
{% extends "base.html" %}
4+
5+
{% block scripts %}
6+
<script src="https://cmp.osano.com/Azqe5vTyLOSbN3OuT/49ad85b5-0418-4794-ab81-7599dddd534c/osano.js"></script>
7+
{{ super() }}
8+
{% endblock %}
49

510
{% block extrahead %}
611
{{ super() }}

‎_resource/overrides/partials/copyright.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
<div class="md-copyright">
55
<div class="md-copyright__highlight">
66
<a href='https://percona.com' target='_blank'>Percona LLC and/or its affiliates, </a> &copy; {{ build_date_utc.strftime('%Y') }}
7-
</div>
7+
<a href="#" onclick="Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')">Cookie Preferences</a>
8+
</div>
89
{% if not config.extra.generator == false %}
910
Made with
1011
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">

‎docs/css/osano.css

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/* General styling */
2+
3+
.osano-cm-window {
4+
font-family: "Roboto", Arial, Helvetica, sans-serif;
5+
font-size: 20px;
6+
}
7+
.osano-cm-dialog--type_bar {
8+
justify-content: center;
9+
color: #000;
10+
background: #fff;
11+
box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66)
12+
}
13+
14+
.osano-cm-dialog {
15+
font-size: 0.75em;
16+
padding: 2em 1em;
17+
color: var(--md-typeset-color);
18+
background: var(--md-footer-bg-color--dark);
19+
}
20+
.osano-cm-header,
21+
.osano-cm-info-dialog-header {
22+
background: var(--md-default-bg-color);
23+
}
24+
.osano-cm-link,
25+
.osano-cm-disclosure__toggle,
26+
.osano-cm-expansion-panel__toggle {
27+
color: var(--md-typeset-a-color);
28+
}
29+
.osano-cm-link:hover,
30+
.osano-cm-link:active,
31+
.osano-cm-disclosure__toggle:hover,
32+
.osano-cm-disclosure__toggle:active,
33+
.osano-cm-disclosure__toggle:focus,
34+
.osano-cm-expansion-panel__toggle:hover,
35+
.osano-cm-expansion-panel__toggle:active,
36+
.osano-cm-expansion-panel__toggle:focus {
37+
color: var(--md-accent-fg-color);
38+
}
39+
.osano-cm-drawer-links {
40+
display: inline-block;
41+
}
42+
.osano-cm-link.osano-cm-storage-policy {
43+
margin-right: 0.5em;
44+
}
45+
.osano-cm-description {
46+
font-weight: 400;
47+
}
48+
.osano-cm-info {
49+
color: var(--md-typeset-color);
50+
background: var(--md-default-bg-color);
51+
box-shadow: unset;
52+
}
53+
.osano-cm-dialog--hidden,
54+
.osano-cm-info-dialog--hidden {
55+
transition-delay: 0ms, 0ms;
56+
}
57+
.osano-cm-disclosure {
58+
padding-top: 0;
59+
}
60+
.osano-cm-disclosure--collapse {
61+
border-color: var(--md-default-fg-color--lightest);
62+
}
63+
64+
/* Closing button */
65+
66+
.osano-cm-dialog__close,
67+
.osano-cm-dialog__close:hover,
68+
.osano-cm-dialog__close:focus,
69+
.osano-cm-dialog__close:focus:hover {
70+
color: var(--md-typeset-color);
71+
stroke: var(--md-typeset-color);
72+
border-color: transparent;
73+
outline: initial;
74+
}
75+
.osano-cm-dialog__close:focus {
76+
background-color: var(--md-default-fg-color--lightest);
77+
}
78+
.osano-cm-close {
79+
padding: 0.25em;
80+
margin: 0.5em;
81+
stroke-width: 2px;
82+
border-width: 2px;
83+
opacity: 0.4;
84+
}
85+
.osano-cm-close:focus,
86+
.osano-cm-close:hover {
87+
stroke-width: 2px;
88+
opacity: 1;
89+
}
90+
.osano-cm-info-dialog-header__close:focus {
91+
background-color: var(--md-typeset-color);
92+
}
93+
94+
/* Switch buttons */
95+
96+
.osano-cm-toggle__switch {
97+
background-color: var(--md-default-fg-color--lightest);
98+
transition: all 0.1s ease-out;
99+
}
100+
.osano-cm-toggle__input:hover + .osano-cm-toggle__switch {
101+
background-color: var(--md-default-fg-color--light);
102+
border-color: transparent;
103+
}
104+
.osano-cm-toggle__input:focus + .osano-cm-toggle__switch {
105+
background-color: var(--md-default-fg-color--lightest);
106+
border-color: transparent;
107+
}
108+
.osano-cm-toggle__input:focus + .osano-cm-toggle__switch::before {
109+
border-color: var(--md-accent-fg-color);
110+
}
111+
.osano-cm-toggle__input:focus:hover + .osano-cm-toggle__switch {
112+
background-color: var(--md-default-fg-color--light);
113+
border-color: transparent;
114+
}
115+
.osano-cm-toggle__input:checked + .osano-cm-toggle__switch,
116+
.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch {
117+
background-color: var(--md-primary-fg-color);
118+
border-color: var(--md-primary-fg-color);
119+
}
120+
.osano-cm-toggle__input:checked:hover + .osano-cm-toggle__switch,
121+
.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch {
122+
background-color: var(--md-accent-fg-color);
123+
border-color: var(--md-accent-fg-color);
124+
}
125+
.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch,
126+
.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch {
127+
background-color: var(--md-primary-fg-color);
128+
border-color: var(--md-primary-fg-color);
129+
}
130+
.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch::before {
131+
border-color: var(--md-accent-fg-color);
132+
}
133+
.osano-cm-toggle__input:checked:focus:hover + .osano-cm-toggle__switch {
134+
background-color: var(--md-accent-fg-color);
135+
border-color: var(--md-accent-fg-color);
136+
}
137+
.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch,
138+
.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch,
139+
.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch {
140+
opacity: 0.3;
141+
cursor: not-allowed;
142+
}
143+
.osano-cm-toggle__input + .osano-cm-toggle__switch::after {
144+
background-color: var(--md-default-bg-color) !important;
145+
}
146+
.osano-cm-toggle__input:checked + .osano-cm-toggle__switch::before {
147+
border-color: transparent;
148+
}
149+
.osano-cm-list {
150+
gap: 0.75em;
151+
}
152+
153+
/* CTA Buttons */
154+
155+
.osano-cm-dialog__buttons {
156+
display: flex;
157+
justify-content: flex-start;
158+
flex-wrap: wrap;
159+
gap: 0.5em 0.75em;
160+
}
161+
.osano-cm-button {
162+
font-family: var(--fHeading);
163+
flex: 1 1 20em;
164+
color: var(--md-primary-fg-color);
165+
background-color: transparent;
166+
border-width: 2px;
167+
border-color: var(--md-primary-fg-color);
168+
border-radius: 20em;
169+
}
170+
.osano-cm-button:hover {
171+
color: var(--md-accent-fg-color);
172+
background-color: transparent;
173+
border-color: var(--md-accent-fg-color);
174+
}
175+
176+
/* Widget */
177+
178+
.osano-cm-widget {
179+
display: none;
180+
opacity: 0.5;
181+
border-radius: 10em;
182+
bottom: 3em;
183+
}
184+
.osano-cm-widget:focus {
185+
outline-offset: 0.125em;
186+
outline-color: var(--md-default-fg-color--lighter);
187+
outline-width: 0.1875em;
188+
}
189+
.osano-cm-widget__outline {
190+
fill: transparent;
191+
stroke: var(--md-typeset-color);
192+
}
193+
.osano-cm-widget__dot {
194+
fill: var(--md-typeset-color);
195+
}
196+
197+
/* Media conditions */
198+
199+
@media screen and (min-width: 768px) {
200+
.osano-cm-dialog--type_bar .osano-cm-dialog__content {
201+
max-width: 50em;
202+
}
203+
.osano-cm-dialog--type_bar .osano-cm-dialog__buttons {
204+
max-width: 20em;
205+
}
206+
}

‎docs/js/consent.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var consent = __md_get("__consent")
2+
if (consent && consent.custom) {
3+
/* The user accepted the cookie */
4+
} else {
5+
/* The user rejected the cookie */
6+
}

‎mkdocs-base.yml

+2-7
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ extra_css:
6060
- css/nocopy.css
6161
- css/design.css
6262
- css/extra.css
63+
- css/osano.css
6364

6465
#Copyright
6566
copyright: >
@@ -68,6 +69,7 @@ copyright: >
6869
extra_javascript:
6970
- js/version-select.js
7071
- js/promptremover.js
72+
- js/consent.js
7173

7274
markdown_extensions:
7375
attr_list: {}
@@ -143,13 +145,6 @@ extra:
143145
provider: mike
144146
homepage:
145147
https://docs.percona.com
146-
consent:
147-
title: Cookie consent
148-
description: >-
149-
We use cookies to recognize your repeated visits and preferences, as well
150-
as to measure the effectiveness of our documentation and whether users
151-
find what they're searching for. With your consent, you're helping us to
152-
make our documentation better. Read more about <a class="reference external" href="https://www.percona.com/20180524-cookie-policy" target="_blank">Percona Cookie Policy</a>.
153148
edit_page_text: '<i class="uil uil-pen"></i> <b>Edit this page</b>'
154149
updated_text: '<i class="uil uil-refresh"></i> Page updated'
155150

‎snippets/services-banner.md

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
## Get expert help { .title }
44

55
If you need assistance, visit the community forum for comprehensive and free database knowledge, or contact our Percona Database Experts for professional support and services.
6-
<img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=d1635340-c352-40f2-8061-0d38bcb6eccf" />
76

87
<div class="actions" markdown>
98

0 commit comments

Comments
 (0)