diff --git a/docs/_images/percona-logomark-one-color-dark.png b/docs/_images/percona-logomark-one-color-dark.png new file mode 100644 index 00000000..28fbf02e Binary files /dev/null and b/docs/_images/percona-logomark-one-color-dark.png differ diff --git a/docs/css/kapa.css b/docs/css/kapa.css new file mode 100644 index 00000000..d2964b52 --- /dev/null +++ b/docs/css/kapa.css @@ -0,0 +1,64 @@ +button#ask-percona-ai { + display: inline-flex; + align-items: center; + justify-content: center; + + gap: 0.45rem; + + /* Match MkDocs Material search field */ + height: 1.8rem; + padding: 0 0.9rem; + margin-left: 0.5rem; + + border: none; + border-radius: 0.1rem; + + background: #AB4213; + color: #E7C8BB; + + box-shadow: var(--md-shadow-z1); + + cursor: pointer; + + font-family: inherit; + font-size: 0.8rem; + font-weight: 400; + line-height: 1; + + white-space: nowrap; + + transition: + background-color 0.25s ease, + box-shadow 0.25s ease; +} + +button#ask-percona-ai:hover { + background: #EB6F3B; +} + +button#ask-percona-ai:focus-visible { + outline: none; + box-shadow: + 0 0 0 0.1rem rgba(235, 111, 59, 0.35), + var(--md-shadow-z2); +} + +button#ask-percona-ai .percona-star, +button#ask-percona-ai .percona-text { + color: inherit; +} + +button#ask-percona-ai .percona-star { + font-size: 0.85rem; + line-height: 1; +} + +@media screen and (max-width: 768px) { + button#ask-percona-ai { + padding: 0 0.75rem; + } + + button#ask-percona-ai .percona-text { + display: none; + } +} \ No newline at end of file diff --git a/docs/css/landing.css b/docs/css/landing.css deleted file mode 100644 index df69386e..00000000 --- a/docs/css/landing.css +++ /dev/null @@ -1,301 +0,0 @@ - -/* Type */ - -.landing h1, -.landing h2 { - font-size: calc(1.5em + 1vw); - line-height: 1.125; - text-transform: uppercase; - letter-spacing: 0; - margin: 0.5em 0; -} - -/* Layout adjustments */ - -.md-header, .md-tabs { - background-color: var(--stone800); -} -.landing > :not(:last-child) { - margin-bottom: 2em; -} -/* .md-content__inner { - display: flex; - flex-direction: column; -} -.md-content__inner > :not(.landing) { - width: 100%; - max-width: calc(34.3rem); - max-width: calc(34.3rem + 1.2rem + 12.1rem); - align-self: center; -} */ -[data-grid] [data-banner] { - flex: 0 1 calc(50% - 1rem); -} - -/* Splash Box */ - -.splash { - display: flex; - position: relative; - justify-content: space-between; - line-height: 1.25; - padding: calc(0.5em + 3%); - border: 1px solid var(--md-default-fg-color--lightest); - border-radius: calc(0.5rem + 0.75vw); - background: linear-gradient(110deg, var(--md-default-bg-color) 33%, var(--md-footer-bg-color--dark) 95%); - overflow: hidden; - background-repeat: no-repeat; -} -.splash.dark { - color: var(--white); - --md-primary-fg-color: var(--stone50); - --md-accent-fg-color: var(--white); -} -.splash.highlight { - background: - linear-gradient( - 110deg, - rgba(44,50,62,0.9) 10%, - rgba(44,50,62,0.1) 90% - ), - url(../assets/highlight.jpg) center / cover var(--stone800); - border: none; - background-repeat: no-repeat; -} -.splash.mysql { - background: - linear-gradient( - 110deg, - rgba(0,0,0,0.2) 33%, - rgba(0,0,0,0.1) 95% - ), - linear-gradient( - 110deg, - rgb(14,95,181) 33%, - rgb(48,209,178) 95% - ); -} -.splash.postgresql { - background: - linear-gradient( - 110deg, - rgba(0,0,0,0.4) 33%, - rgba(0,0,0,0.1) 95% - ), - linear-gradient( - 110deg, - rgb(78,91,150) 33%, - rgb(67,158,255) 95% - ); -} -.splash.mongodb { - background: - linear-gradient( - 110deg, - rgba(0,0,0,0.4) 33%, - rgba(0,0,0,0.1) 95% - ), - linear-gradient( - 110deg, - rgb(24,109,73) 33%, - rgb(48,209,190) 95% - ); -} -.splash.operators { - background: - linear-gradient( - 110deg, - transparent 33%, - rgba(0,0,0,0.1) 95% - ), - linear-gradient( - 110deg, - rgb(11,39,140) 33%, - rgb(20,142,255) 95% - ); -} -.splash.header { - flex-direction: column; - align-items: flex-start; - border: none; - background-repeat: no-repeat; -} - -/* Splash Contents */ - -.splash > * { - flex: 0 1 45%; -} -.splash h1, -.splash h2 { - margin-top: 0; - margin-bottom: -0.125em; -} -.splash > :last-child { - margin-bottom: 0; -} -.splash-intro { - margin: 0.5rem 0.75rem; -} -.splash-links > :not(:last-child) { - margin-bottom: 1em; -} -.splash.dark .md-button { - border-color: rgba(255, 255, 255, 0.4) -} -.splash.dark .md-button:hover { - border-color: var(--white) -} -.splash.dark .md-button--primary, -.splash.dark .md-button--primary:hover { - color: var(--stone700); -} -.splash.dark .md-button--primary:hover { - color: var(--stone900); -} -.splash.header > * { - max-width: 30rem; - z-index: 1; -} -.splash.header > :first-child { - margin: 0; -} -.splash.header img { - display: block; - position: absolute; - top: 50%; - right: 1rem; - width: 12rem; - height: 12rem; - margin: 0; - transform: translateY(-50%); - z-index: 0; -} - -/* Splash Card */ - -a.splash-card { - display: flex; - flex-direction: column; - justify-content: center; - min-height: 6.75em; - padding: 0.75rem 0.375rem 0.5rem 4.75rem; - border: 1px solid var(--md-default-fg-color--lightest); - border-radius: calc(0.25rem + 0.375vw); - cursor: pointer; - text-decoration: none !important; - color: var(--md-typeset-color); - position: relative; - background-color: var(--md-default-bg-color); - transition: all 0.2s ease-out; -} -.splash.highlight a.splash-card { - color: var(--white); - background-color: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(0.75rem); - border-color: rgba(255,255,255,0.1); -} -a.splash-card:hover { - box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20); - color: var(--md-typeset-color); -} -.splash.highlight a.splash-card:hover { - background-color: rgba(255, 255, 255, 0.4); - border-color: rgba(255,255,255,0.2); - backdrop-filter: blur(1.5rem); -} -a.splash-card img { - display: block; - position: absolute; - top: 0.75rem; - left: 0.75rem; - width: 3.5rem; - height: 3.5rem; - border-radius: 0.25rem; - float: left; -} -.splash-card > * { - margin: 0 0.25rem 0.25rem 0 !important; -} -.splash-card > h3 { - font-size: 0.875rem; - margin-bottom: 0.0625rem !important; -} - -/* News elements */ - -[data-news] { - display: flex; - flex-wrap: wrap; - margin-right: -1rem; -} -[data-news] [data-article] { - flex: 0 1 calc(50% - 1rem); - display: flex; - flex-direction: column; - margin: 0 1rem 1rem 0; - padding: 0 1rem 1rem 0; - border-bottom: 1px solid var(--md-default-fg-color--lightest); -} -[data-article] > * { - margin: 0.25rem 0; -} -[data-article] > :first-child { - font-family: var(--fHeading); - font-size: 0.8rem; - /* flex-grow: 1; */ -} -[data-article] > :nth-child(2):not(:last-child) { - font-size: 0.875em; - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - max-height: 2.8em; - position: relative; -} -[data-article] > :nth-child(2):not(:last-child)::after { - content: ""; - position: absolute; - display: block; - right: 0; - bottom: 0; - width: 4rem; - height: 1.4em; - background: linear-gradient(to right, transparent 0%, var(--md-default-bg-color) 50%); -} -[data-article] > :last-child > * { - margin-right: 1em; -} -[data-article] a:link { - font-family: var(--fHeading); - font-size: 0.6818rem; - font-weight: bold; - text-decoration: none; -} - -/* Conditionals */ - -@media screen and (max-width: 76.1875em) { - .md-nav--primary .md-nav__title[for=__drawer], - .md-nav--primary .md-nav__title { - background-color: var(--stone800); - } -} -@media screen and (max-width: 55em) { - .splash.header img { - right: -2rem; - opacity: 0.2; - } -} -@media screen and (max-width: 45em) { - .splash { - flex-direction: column; - } - [data-grid] [data-banner], - [data-news] [data-article] { - flex: 1 1 100%; - } -} \ No newline at end of file diff --git a/docs/js/kapa.js b/docs/js/kapa.js new file mode 100644 index 00000000..c95839c6 --- /dev/null +++ b/docs/js/kapa.js @@ -0,0 +1,98 @@ +(function () { + function createAIButton() { + if (document.getElementById("ask-percona-ai")) { + return; + } + + const search = document.querySelector(".md-search"); + + if (!search || !search.parentNode) { + return; + } + + const button = document.createElement("button"); + + button.id = "ask-percona-ai"; + button.type = "button"; + + button.innerHTML = ` + + Ask Percona AI + `; + + // Place button AFTER search component + search.parentNode.insertBefore(button, search.nextSibling); + } + + function loadKapa() { + // Prevent duplicate loading + if (document.getElementById("kapa-widget-script")) { + return; + } + + const script = document.createElement("script"); + + script.id = "kapa-widget-script"; + + script.src = "https://widget.kapa.ai/kapa-widget.bundle.js"; + + script.async = true; + + // REQUIRED CONFIG + script.setAttribute( + "data-website-id", + "0e0d55cf-6370-4a6d-a987-96670a7fe935" + ); + + script.setAttribute( + "data-modal-override-open-selector", + "#ask-percona-ai" + ); + + script.setAttribute( + "data-button-hide", + "true" + ); + + script.setAttribute( + "data-project-name", + "Percona" + ); + + script.setAttribute( + "data-modal-title", + "Percona AI Assistant" + ); + + script.setAttribute( + "font-size", + "0.875rem" + ); + + // MODAL CONTENT + script.setAttribute( + "data-modal-disclaimer", + "The **Percona AI Assistant** helps you find simple, clear answers to your Percona questions using [official documentation](https://docs.percona.com/), resolved [forum posts](https://forums.percona.com/) and [blog posts](https://www.percona.com/blog/). Note, do not enter personal or confidential information. Before using Percona AI assistant, read the [Legal Notice](https://docs.percona.com/percona-distribution-for-mysql/8.4/legal-notice.html)." + ); + + script.setAttribute( + "data-modal-example-questions", + "How do I select a deployment variant?, How do I install Percona Distribution for MySQL?, How do I achive high availability?, How do I use the Percona Distribution for MySQL components?" + ); + + script.setAttribute( + "data-project-logo", + "https://docs.percona.com/percona-distribution-for-mysql/8.4/_images/percona-logomark-one-color-dark.png" + ); + + document.head.appendChild(script); + } + + createAIButton(); + loadKapa(); + + document.addEventListener("navigation.instant", () => { + createAIButton(); + loadKapa(); + }); +})(); \ No newline at end of file diff --git a/docs/legal-notice.md b/docs/legal-notice.md new file mode 100644 index 00000000..624be3ff --- /dev/null +++ b/docs/legal-notice.md @@ -0,0 +1,3 @@ +# Legal Notice + +You are interacting with an AI-powered chatbot that provides automated responses for general information about our IT services and software. Responses may be inaccurate or incomplete and do not constitute professional or contractual advice. Do not submit personal data, confidential information, credentials, or other sensitive information through this chat. Conversations may be logged and processed to improve our services in accordance with our [Privacy Policy](https://www.percona.com/privacy-policy#h.c033wws8ytgb) and applicable laws, including the GDPR. If you require assistance, please contact a [human representative](https://www.percona.com/about/contact). \ No newline at end of file diff --git a/mkdocs-base.yml b/mkdocs-base.yml index 7c3b2d84..7fc397bd 100644 --- a/mkdocs-base.yml +++ b/mkdocs-base.yml @@ -72,12 +72,14 @@ extra_css: - css/nocopy.css - css/mysql.css - css/rating.css + - css/kapa.css extra_javascript: - js/version-select.js - js/promptremover.js - js/consent.js - js/rating.js + - js/kapa/js markdown_extensions: attr_list: {}