From 977f88daffa67d2c33df81e5ae136f68bb3c424d Mon Sep 17 00:00:00 2001 From: Anastasia Alexadrova Date: Fri, 1 Mar 2024 13:48:14 +0100 Subject: [PATCH] HD-22392 Added Osano cookie consent new file: documentation/_resource/.icons/percona/logo.svg new file: documentation/_resource/overrides/main.html new file: documentation/_resource/overrides/partials/copyright.html new file: documentation/docs/css/osano.css new file: documentation/docs/js/consent.js new file: documentation/docs/js/promptremover.js modified: documentation/mkdocs.yml new file: documentation/snippets/services-banner.md --- .../_resource/.icons/percona/logo.svg | 3 + documentation/_resource/overrides/main.html | 28 +++ .../overrides/partials/copyright.html | 14 ++ documentation/docs/css/osano.css | 206 ++++++++++++++++++ documentation/docs/js/consent.js | 6 + documentation/docs/js/promptremover.js | 44 ++++ documentation/mkdocs.yml | 39 +++- documentation/snippets/services-banner.md | 14 ++ 8 files changed, 344 insertions(+), 10 deletions(-) create mode 100644 documentation/_resource/.icons/percona/logo.svg create mode 100644 documentation/_resource/overrides/main.html create mode 100644 documentation/_resource/overrides/partials/copyright.html create mode 100644 documentation/docs/css/osano.css create mode 100644 documentation/docs/js/consent.js create mode 100644 documentation/docs/js/promptremover.js create mode 100644 documentation/snippets/services-banner.md diff --git a/documentation/_resource/.icons/percona/logo.svg b/documentation/_resource/.icons/percona/logo.svg new file mode 100644 index 00000000000..6bb15edb5a4 --- /dev/null +++ b/documentation/_resource/.icons/percona/logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/documentation/_resource/overrides/main.html b/documentation/_resource/overrides/main.html new file mode 100644 index 00000000000..fdc3a995955 --- /dev/null +++ b/documentation/_resource/overrides/main.html @@ -0,0 +1,28 @@ +{#- + This file was automatically generated - do not edit +-#} +{% extends "base.html" %} + + +{% block scripts %} + +{{ super() }} +{% endblock %} + + {% block extrahead %} + {{ super() }} + {% set title = config.site_name %} + {% if page and page.meta and page.meta.title %} + {% set title = title ~ " - " ~ page.meta.title %} + {% elif page and page.title and not page.is_homepage %} + {% set title = title ~ " - " ~ page.title %} + {% endif %} + + + + + {% endblock %} + + + + diff --git a/documentation/_resource/overrides/partials/copyright.html b/documentation/_resource/overrides/partials/copyright.html new file mode 100644 index 00000000000..dd0f101fad6 --- /dev/null +++ b/documentation/_resource/overrides/partials/copyright.html @@ -0,0 +1,14 @@ +{#- + This file was automatically generated - do not edit +-#} +
+
+ Percona LLC and/or its affiliates, © {{ build_date_utc.strftime('%Y') }} — Cookie Preferences +
+ {% if not config.extra.generator == false %} + Made with + + Material for MkDocs + + {% endif %} +
\ No newline at end of file diff --git a/documentation/docs/css/osano.css b/documentation/docs/css/osano.css new file mode 100644 index 00000000000..b89fa6ac210 --- /dev/null +++ b/documentation/docs/css/osano.css @@ -0,0 +1,206 @@ +/* General styling */ + +.osano-cm-window { + font-family: "Roboto", Arial, Helvetica, sans-serif; + font-size: 20px; +} +.osano-cm-dialog--type_bar { + justify-content: center; + color: #000; + background: #fff; + box-shadow: 0 0 0 100vmax rgba(0,0,0,0.66) +} + +.osano-cm-dialog { + font-size: 0.75em; + padding: 2em 1em; + color: var(--md-typeset-color); + background: var(--md-footer-bg-color--dark); +} +.osano-cm-header, +.osano-cm-info-dialog-header { + background: var(--md-default-bg-color); +} +.osano-cm-link, +.osano-cm-disclosure__toggle, +.osano-cm-expansion-panel__toggle { + color: var(--md-typeset-a-color); +} +.osano-cm-link:hover, +.osano-cm-link:active, +.osano-cm-disclosure__toggle:hover, +.osano-cm-disclosure__toggle:active, +.osano-cm-disclosure__toggle:focus, +.osano-cm-expansion-panel__toggle:hover, +.osano-cm-expansion-panel__toggle:active, +.osano-cm-expansion-panel__toggle:focus { + color: var(--md-accent-fg-color); +} +.osano-cm-drawer-links { + display: inline-block; +} +.osano-cm-link.osano-cm-storage-policy { + margin-right: 0.5em; +} +.osano-cm-description { + font-weight: 400; +} +.osano-cm-info { + color: var(--md-typeset-color); + background: var(--md-default-bg-color); + box-shadow: unset; +} +.osano-cm-dialog--hidden, +.osano-cm-info-dialog--hidden { + transition-delay: 0ms, 0ms; +} +.osano-cm-disclosure { + padding-top: 0; +} +.osano-cm-disclosure--collapse { + border-color: var(--md-default-fg-color--lightest); +} + +/* Closing button */ + +.osano-cm-dialog__close, +.osano-cm-dialog__close:hover, +.osano-cm-dialog__close:focus, +.osano-cm-dialog__close:focus:hover { + color: var(--md-typeset-color); + stroke: var(--md-typeset-color); + border-color: transparent; + outline: initial; +} +.osano-cm-dialog__close:focus { + background-color: var(--md-default-fg-color--lightest); +} +.osano-cm-close { + padding: 0.25em; + margin: 0.5em; + stroke-width: 2px; + border-width: 2px; + opacity: 0.4; +} +.osano-cm-close:focus, +.osano-cm-close:hover { + stroke-width: 2px; + opacity: 1; +} +.osano-cm-info-dialog-header__close:focus { + background-color: var(--md-typeset-color); +} + +/* Switch buttons */ + +.osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--lightest); + transition: all 0.1s ease-out; +} +.osano-cm-toggle__input:hover + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--light); + border-color: transparent; +} +.osano-cm-toggle__input:focus + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--lightest); + border-color: transparent; +} +.osano-cm-toggle__input:focus + .osano-cm-toggle__switch::before { + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:focus:hover + .osano-cm-toggle__switch { + background-color: var(--md-default-fg-color--light); + border-color: transparent; +} +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch { + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); +} +.osano-cm-toggle__input:checked:hover + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch { + background-color: var(--md-primary-fg-color); + border-color: var(--md-primary-fg-color); +} +.osano-cm-toggle__input:checked:focus + .osano-cm-toggle__switch::before { + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:checked:focus:hover + .osano-cm-toggle__switch { + background-color: var(--md-accent-fg-color); + border-color: var(--md-accent-fg-color); +} +.osano-cm-toggle__input:disabled:checked + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:focus + .osano-cm-toggle__switch, +.osano-cm-toggle__input:disabled:checked:hover + .osano-cm-toggle__switch { + opacity: 0.3; + cursor: not-allowed; +} +.osano-cm-toggle__input + .osano-cm-toggle__switch::after { + background-color: var(--md-default-bg-color) !important; +} +.osano-cm-toggle__input:checked + .osano-cm-toggle__switch::before { + border-color: transparent; +} +.osano-cm-list { + gap: 0.75em; +} + +/* CTA Buttons */ + +.osano-cm-dialog__buttons { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: 0.5em 0.75em; +} +.osano-cm-button { + font-family: var(--fHeading); + flex: 1 1 20em; + color: var(--md-primary-fg-color); + background-color: transparent; + border-width: 2px; + border-color: var(--md-primary-fg-color); + border-radius: 20em; +} +.osano-cm-button:hover { + color: var(--md-accent-fg-color); + background-color: transparent; + border-color: var(--md-accent-fg-color); +} + +/* Widget */ + +.osano-cm-widget { + display: none; + opacity: 0.5; + border-radius: 10em; + bottom: 3em; +} +.osano-cm-widget:focus { + outline-offset: 0.125em; + outline-color: var(--md-default-fg-color--lighter); + outline-width: 0.1875em; +} +.osano-cm-widget__outline { + fill: transparent; + stroke: var(--md-typeset-color); +} +.osano-cm-widget__dot { + fill: var(--md-typeset-color); +} + +/* Media conditions */ + +@media screen and (min-width: 768px) { + .osano-cm-dialog--type_bar .osano-cm-dialog__content { + max-width: 50em; + } + .osano-cm-dialog--type_bar .osano-cm-dialog__buttons { + max-width: 20em; + } +} \ No newline at end of file diff --git a/documentation/docs/js/consent.js b/documentation/docs/js/consent.js new file mode 100644 index 00000000000..b6f8a8ac0a3 --- /dev/null +++ b/documentation/docs/js/consent.js @@ -0,0 +1,6 @@ +var consent = __md_get("__consent") +if (consent && consent.custom) { + /* The user accepted the cookie */ +} else { + /* The user rejected the cookie */ +} \ No newline at end of file diff --git a/documentation/docs/js/promptremover.js b/documentation/docs/js/promptremover.js new file mode 100644 index 00000000000..aef117323fb --- /dev/null +++ b/documentation/docs/js/promptremover.js @@ -0,0 +1,44 @@ +document.addEventListener("DOMContentLoaded", function(){ + // get collection of code blocks: + const collection = document.getElementsByClassName("highlight"); + for (let i = 0; i < collection.length; i++) { + const commandElement=collection.item(i); + let commandButtonElement = commandElement.getElementsByTagName("button"); + // read the prompt string from an attribute of the code block: + let promptString = commandElement.getAttribute("data-prompt"); + if (!promptString) continue; + let commandCodeElement = commandElement.getElementsByTagName("code"); + let commandCodeElementString = commandCodeElement.item(0).textContent; + let trueCommand = commandCodeElementString; + if (commandCodeElementString.startsWith(promptString)) { + // remove the first occurrence of the prompt: + trueCommand = commandCodeElementString.substring(promptString.length, commandCodeElementString.length).trim(); + } + // remove other occurrencies in case of a multi-line string: + trueCommand = trueCommand.replaceAll("\n"+promptString, "\n").replace(/^[^\S\r\n]+/gm, ""); + + // CHECK IF THERE IS A SECOND PROMPT: + promptString = commandElement.getAttribute("data-prompt-second"); + if (promptString) { + if (trueCommand.startsWith(promptString)) { + trueCommand = trueCommand.substring(promptString.length, trueCommand.length).trim(); + } + trueCommand = trueCommand.replaceAll("\n"+promptString, "\n").replace(/^[^\S\r\n]+/gm, ""); + } + + // CHECK IF THERE IS A THIRD PROMPT: + promptString = commandElement.getAttribute("data-prompt-third"); + if (promptString) { + if (trueCommand.startsWith(promptString)) { + trueCommand = trueCommand.substring(promptString.length, trueCommand.length).trim(); + } + trueCommand = trueCommand.replaceAll("\n"+promptString, "\n").replace(/^[^\S\r\n]+/gm, ""); + } + // attach the updated command as an attribute to the button where clipboard.js will find it: + commandButtonElement.item(0).setAttribute("data-clipboard-text", trueCommand); + } +}); + + + + diff --git a/documentation/mkdocs.yml b/documentation/mkdocs.yml index 9181c917d93..7a982ff411f 100644 --- a/documentation/mkdocs.yml +++ b/documentation/mkdocs.yml @@ -18,7 +18,7 @@ theme: name: material logo: _images/percona-logo.svg favicon: _images/percona-favicon.ico -# custom_dir: _resource/overrides + custom_dir: _resource/overrides font: text: Roboto @@ -56,16 +56,19 @@ extra_css: - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css - css/percona.css - css/design.css + - css/osano.css extra_javascript: - js/version-select.js - js/promptremover.js + - js/consent.js markdown_extensions: - attr_list - toc: permalink: True - admonition + - md_in_html - footnotes - def_list # https://michelf.ca/projects/php-markdown/extra/#def-list - meta @@ -78,13 +81,19 @@ markdown_extensions: - pymdownx.tabbed: alternate_style: true - pymdownx.tilde - - pymdownx.superfences - pymdownx.details - pymdownx.highlight: linenums: false + - pymdownx.snippets: + base_path: ["snippets"] + auto_append: + - services-banner.md - pymdownx.emoji: emoji_index: !!python/name:material.extensions.emoji.twemoji emoji_generator: !!python/name:material.extensions.emoji.to_svg + options: + custom_icons: + - _resource/.icons plugins: @@ -109,14 +118,24 @@ plugins: extra: version: provider: mike -# homepage: https://docs.percona.com -# consent: -# title: Cookie consent -# description: >- -# We use cookies to recognize your repeated visits and preferences, as well -# as to measure the effectiveness of our documentation and whether users -# find what they're searching for. With your consent, you're helping us to -# make our documentation better. Read more about Percona Cookie Policy. + analytics: + provider: google + property: G-J4J70BNH0G + feedback: + title: Was this page helpful? + ratings: + - icon: material/emoticon-happy-outline + name: This page was helpful + data: 1 + note: >- + Thanks for your feedback! + - icon: material/emoticon-sad-outline + name: This page could be improved + data: 0 + note: >- + Thank you for your feedback! Help us improve by using our + + feedback form. nav: - Home: index.md diff --git a/documentation/snippets/services-banner.md b/documentation/snippets/services-banner.md new file mode 100644 index 00000000000..d193623bb72 --- /dev/null +++ b/documentation/snippets/services-banner.md @@ -0,0 +1,14 @@ + +
+ +## Get expert help { .title } + +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. + +
+ +[:material-forum-outline: Community Forum](https://forums.percona.com/c/postgresql/25?utm_campaign=Doc%20pages) [:percona-logo: Get a Percona Expert](https://www.percona.com/about/contact) + + + +