From 5e5bb8c90bb57409687b788867d0c01fb2d7e858 Mon Sep 17 00:00:00 2001
From: Alina Derkach <alina.derkach@percona.com>
Date: Tue, 7 May 2024 18:11:31 +0300
Subject: [PATCH] Revert "Test new version selector (#153)" (#154)

This reverts commit e80aed14fc996cd1eb95f4750c6a92f35307d188.
---
 docs/css/design.css       |  93 ++++++++++++------------
 docs/css/extra.css        |  12 ++--
 docs/css/percona.css      | 148 ++++++++++++++++++++++++++++++++++++++
 docs/js/version-select.js | 100 +++++++++++++++-----------
 4 files changed, 257 insertions(+), 96 deletions(-)
 create mode 100644 docs/css/percona.css

diff --git a/docs/css/design.css b/docs/css/design.css
index 8e489f26..520e13a1 100644
--- a/docs/css/design.css
+++ b/docs/css/design.css
@@ -80,7 +80,7 @@
     --md-primary-fg-color: var(--sky700);
 
     /* Type */
-    --md-typeset-color: var(--stone900);
+    --md-typeset-color: #2C323E;
     --md-typeset-a-color: var(--sky700);
 
     /* Defaults */
@@ -93,9 +93,9 @@
     --md-accent-fg-color: var(--sky500);
     
     /* Footer */
-    --md-footer-fg-color: var(--stone900);
-    --md-footer-fg-color--light: rgba(44,50,62,0.72);
-    --md-footer-fg-color--lighter: rgba(44,50,62,0.40);
+    --md-footer-fg-color: var(--md-typeset-color);
+    --md-footer-fg-color--light: var(--md-default-fg-color--light);
+    --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
     --md-footer-bg-color: var(--stone50);
     --md-footer-bg-color--dark: var(--stone50);
 
@@ -124,10 +124,9 @@
     --md-accent-bg-color: var(--stone900);
 
     /* Footer */
-    --md-footer-fg-color: #FBFBFB;
-    --md-footer-fg-color--light: rgba(251,251,251,0.72);
-    --md-footer-fg-color--lighter: rgba(251,251,251,0.4);
-    --md-footer-bg-color: var(--stone800);
+    --md-footer-fg-color: var(--md-typeset-color);
+    --md-footer-fg-color--light: var(--md-default-fg-color--light);
+    --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
     --md-footer-bg-color--dark: var(--stone800);
 
     /* Code */
@@ -209,6 +208,8 @@
     margin-top: 0.55rem;
 }
 .md-header__topic {
+    -webkit-transition: opacity .25s;
+    -o-transition: opacity .25s;
     transition: opacity .25s;
 }
 .md-header__topic:hover {
@@ -233,15 +234,19 @@
     font-weight: bold;
     padding: 0.4167em 1.6em;
     border-radius: 10rem;
+    -webkit-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
 }
 .md-typeset .md-button--primary {
     color: var(--md-accent-bg-color);
-    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
 }
 .md-typeset .md-button--primary:focus,
 .md-typeset .md-button--primary: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);
+    -webkit-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);
+            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);
 }
 .md-typeset .md-button:not(.md-button--primary):focus,
 .md-typeset .md-button:not(.md-button--primary):hover {
@@ -258,11 +263,13 @@
 .md-button code,
 [data-md-color-scheme="percona-dark"] .md-button:not(.md-button--primary) code {
     background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
+    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
 }
 .md-button:not(.md-button--primary) code {
     background-color: rgba(0, 0, 0, 0.05);
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
+    -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
+            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
 }
 .md-content .md-button {
     margin: 0 0.25em 0.5em 0;
@@ -301,7 +308,8 @@
     border-color: var(--md-default-fg-color--lightest)
 }
 .md-typeset .tabbed-labels {
-    box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
+    -webkit-box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
+            box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
 }
 .md-typeset .tabbed-labels > label:hover {
     color: var(--md-accent-fg-color);
@@ -340,7 +348,8 @@
     --md-admonition-bg-color: var(--md-default-bg-color);
     --md-admonition-fg-color: var(--md-typeset-color);
     border-width: 0.1125rem;
-    box-shadow: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
 }
 .md-tabs__link {
     font-size: 0.67rem;
@@ -362,10 +371,13 @@
     border: 0.05rem solid var(--md-default-fg-color--lightest);
     border-radius: 0.2rem;
     /* box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); */
+    -webkit-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
 }
 [data-banner]: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);
+    -webkit-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);
+            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);
 }
 [data-banner] .title {
     font-weight: bold;
@@ -408,14 +420,24 @@
     font-size: 4em;
 }
 [data-grid] {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
     margin-right: -1rem;
 }
 [data-grid] [data-banner] {
-    flex: 1 1 320px;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 320px;
+            flex: 1 1 320px;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
     margin: 0 1rem 1rem 0;
 }
 [data-grid] .title {
@@ -426,7 +448,9 @@
     margin-top: 0;
 }
 [data-grid] [data-banner] > p:nth-last-child(2) {
-    flex-grow: 2;
+    -webkit-box-flex: 2;
+        -ms-flex-positive: 2;
+            flex-grow: 2;
 }
 [data-grid] + [data-banner] {
     margin-top: 0;
@@ -622,35 +646,6 @@ i[warning] [class*="moji"] {
     vertical-align: -0.3125em;
 }
 
-/* Version Select */
-
-.version-select::after {
-    content: "\25BE";
-    display: inline-block;
-    margin-left: -1em;
-    transform: translate(-0.625em, -0.0625em);
-    pointer-events: none;
-}
-#versionSelect {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    align-self: center;
-    font-family: var(--fHeading);
-    font-size: 0.9rem;
-    line-height: 1;
-    font-weight: 700;
-    padding: 0.5em 1.375em 0.5em 0.5em;
-    margin: 0 0.25em;
-    background-color: rgba(0,0,0,0.2);
-    color: inherit;
-    border: none;
-    border-radius: 0.1rem;
-}
-#versionSelect::-ms-expand {
-    display: none;
-}
-
 /* Media queries */
 
 @media screen and (max-width: 76.1875em) {
@@ -668,4 +663,4 @@ i[warning] [class*="moji"] {
         padding: 1em;
     }
 }
-/**/
+/**/
\ No newline at end of file
diff --git a/docs/css/extra.css b/docs/css/extra.css
index a1b4dff6..30f5a627 100644
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@@ -1,7 +1,7 @@
 @media print {
-  /* Adjusts positioning of admonition icon */
-  .md-typeset :is(.admonition-title,summary):before {
-    top: 0.6rem;
-    left: 0.6rem;
-  }
-}
\ No newline at end of file
+    /* Adjusts positioning of admonition icon */
+    .md-typeset :is(.admonition-title,summary):before {
+      top: 0.6rem;
+      left: 0.6rem;
+    }
+  }
\ No newline at end of file
diff --git a/docs/css/percona.css b/docs/css/percona.css
new file mode 100644
index 00000000..cf78948f
--- /dev/null
+++ b/docs/css/percona.css
@@ -0,0 +1,148 @@
+[data-md-color-scheme="percona-light"] {
+  --md-primary-fg-color:        #0d184c;
+  --md-primary-fg-color--light: #3e4875;
+  --md-default-fg-color--lightest: #9096b0;
+  --md-primary-fg-color--dark:  #080e2e;
+  --md-typeset-a-color: #2cbea2;
+}
+[data-md-color-scheme="slate"] {
+    --md-primary-fg-color:        #0d184c;
+    /*
+    --md-primary-fg-color--light: #3e4875;
+    --md-primary-fg-color--dark:  #080e2e;
+    */
+    --md-typeset-a-color: #2cbea2;
+    --md-hue: 210; /* [0, 360] */
+  }
+ul li p {
+	margin: 0;
+}
+
+.md-clipboard {
+  color: #2cbea2;
+}
+
+.md-typeset {
+  font-size: .7rem;
+  line-height: 1.5;
+}
+
+.md-typeset h1 {
+color: var(--md-default-fg-color--light);
+font-size: 2em;
+font-weight: 400;
+line-height: 1.3;
+margin: 0 0 0.9em;
+}
+
+.md-typeset h2 {
+font-size: 1.5625em;
+line-height: 1.4;
+margin: 1em 0 .54em;
+}
+
+article table {
+  page-break-before: auto !important;
+  page-break-inside: auto !important;
+}
+
+article ol {
+  page-break-before: auto !important;
+  page-break-inside: auto !important;
+}
+
+.md-typeset .md-button {
+    border: .1rem solid;
+    border-radius: 50px;
+    color: var(--md-typeset-a-color);
+    cursor: pointer;
+    display: inline-block;
+    font-weight: 700;
+    padding: .625em 2em;
+    transition:color 125ms, background-color 125ms, border-color 125ms
+}
+
+.md-typeset .md-button--primary {
+    background-color: var(--md-typeset-a-color);
+    border-color: var(--md-typeset-a-color);
+    color:var(--md-primary-bg-color)
+}
+
+.md-typeset .md-button:focus, .md-typeset .md-button:hover {
+    background-color: var(--md-accent-fg-color);
+    border-color: var(--md-accent-fg-color);
+    color:var(--md-accent-bg-color)
+}
+
+section {
+  page-break-before: auto !important;
+  page-break-inside: auto !important;
+}
+
+/* Custom Banner */
+[data-banner] {
+    padding: 1.5em;
+    margin: 2em 0;
+    border: 0.05rem solid var(--md-default-fg-color--lighter);
+    /* border: 0.05rem solid var(--md-typeset-table-color); */
+    border-radius: 0.2rem;
+}
+[data-banner] .title {
+    font-weight: normal;
+    margin: 0;
+}
+[data-banner] > :last-child {
+    margin-bottom: 0;
+}
+[data-banner] a:link {
+    font-weight: bold;
+}
+[data-banner] .actions > p {
+    margin: 0;
+}
+[data-banner] .actions a {
+    display: inline-block;
+    margin: 0.5em 1.5em 0 0;
+}
+[data-banner] > :only-child,
+[data-banner] .actions a:first-of-type {
+    margin-top: 0;
+}
+[data-banner] a [class*="moji"] {
+    height: 1.3333em;
+    vertical-align: -0.3333em;
+}
+[data-banner] a [class*="moji"] svg {
+    width: 1.3333em;
+}
+[data-grid] {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -1rem;
+}
+[data-grid] [data-banner] {
+    flex: 1 1 320px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 1rem 1rem 0;
+}
+[data-grid] .title {
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+[data-grid] [data-banner] > p:last-child {
+    margin-top: 0;
+}
+[data-grid] [data-banner] > p:nth-last-child(2) {
+    flex-grow: 2;
+}
+[data-grid] + [data-banner] {
+    margin-top: 0;
+}
+[data-grid] .md-button {
+    margin: 0.5em 0.25em 0 0;
+}
+
+/*.git-revision-date-localized-plugin:before {
+  content: url('https://api.iconify.design/mdi/clock-edit-outline.svg');
+}*/
\ No newline at end of file
diff --git a/docs/js/version-select.js b/docs/js/version-select.js
index 36b4ba05..1bf17f74 100644
--- a/docs/js/version-select.js
+++ b/docs/js/version-select.js
@@ -1,44 +1,62 @@
-const selectBox = document.getElementById('versionSelect');
-
-if (selectBox) {
-    // Populate the select box with options based on the versionMap
-    const versionMap = { 
-        '8.3 (LATEST)': '/innovation-release/',
-        '8.0': '/8.0/',
-        // Add new versions here as needed
-    };
-
-    function getCurrentVersionFromUrl() {
-        for (const path of Object.values(versionMap)) {
-            if (window.location.pathname.includes(path)) {
-                return path;  // Return the matching path as soon as one is found
-            }
-        }
-        return null;  // Return null if no match is found
-    }
-
-    Object.keys(versionMap).forEach(version => {
-        const option = document.createElement('option');
-        option.value = versionMap[version];
-        option.textContent = version;
-        selectBox.appendChild(option);
+/*
+ * Custom version of same taken from mike code for injecting version switcher into percona.com
+*/
+
+window.addEventListener("DOMContentLoaded", function() {
+  // This is a bit hacky. Figure out the base URL from a known CSS file the
+  // template refers to...
+  var ex = new RegExp("/?css/version-select.css$");
+  var sheet = document.querySelector('link[href$="version-select.css"]');
+
+  var ABS_BASE_URL = sheet.href.replace(ex, "");
+  var CURRENT_VERSION = ABS_BASE_URL.split("/").pop();
+
+  function makeSelect(options, selected) {
+    var select = document.createElement("select");
+//    select.classList.add("form-control");
+    select.classList.add("btn");
+    select.classList.add("btn-primary");
+
+    options.forEach(function(i) {
+      var option = new Option(i.text, i.value, undefined,
+                              i.value === selected);
+      select.add(option);
     });
 
-    // Set initial selection based on URL
-    const currentSegment = getCurrentVersionFromUrl();
-    if (currentSegment) {
-        selectBox.value = currentSegment;
-    }
-
-    // Add event listener for changing URL based on selection
-    selectBox.addEventListener('change', function() {
-        const selectedVersion = this.value;
-        const currentSegment = getCurrentVersionFromUrl();
-        if (selectedVersion !== currentSegment) { // Only redirect if the selected version is different
-            const newUrl = window.location.href.replace(currentSegment, selectedVersion);
-            window.location.href = newUrl;
-        }
+    return select;
+  }
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", ABS_BASE_URL + "/../versions.json");
+  xhr.onload = function() {
+    var versions = JSON.parse(this.responseText);
+
+    var realVersion = versions.find(function(i) {
+      return i.version === CURRENT_VERSION ||
+             i.aliases.includes(CURRENT_VERSION);
+    }).version;
+
+    var select = makeSelect(versions.map(function(i) {
+      return {text: i.title, value: i.version};
+    }), realVersion);
+    select.addEventListener("change", function(event) {
+      window.location.href = ABS_BASE_URL + "/../" + this.value;
     });
-} else {
-    console.log("No version selector available on this website.");
-}
+
+    var container = document.createElement("div");
+    container.id = "custom_select";
+    container.classList.add("side-column-block");
+
+    // Label
+//    var label = document.createElement("span");
+//    label.textContent = "PMM version: ";
+//    container.appendChild(label);
+
+    // Add menu
+    container.appendChild(select);
+
+    var sidebar = document.querySelector("#version-select-wrapper"); // Inject menu into element with this ID
+    sidebar.appendChild(container);
+  };
+  xhr.send();
+});