PS-10073 [DOCs] Implement new Edit this page button (8.0) (#536)

* PS-10073 [DOCs] Implement new colors for Edit this page and View page buttons
	deleted:    _resource/.icons/edit_page.png
	deleted:    _resource/.icons/file-document-edit-outline.svg
	deleted:    _resource/.icons/file-eye-outline.svg
	modified:   docs/css/extra.css
	modified:   mkdocs-base.yml

* Update extra.css

* Update mkdocs.yml

* Update extra.css

* Change the button location
	new file:   _resourcepdf/overrides/partials/toc.html
	modified:   docs/css/extra.css
	modified:   mkdocs-base.yml

* Changing from the button into a banner
	modified:   _resourcepdf/overrides/main.html
	new file:   _resourcepdf/overrides/partials/edit.html
	deleted:    _resourcepdf/overrides/partials/toc.html
	modified:   docs/css/extra.css

* Add more text and center it
	modified:   _resourcepdf/overrides/partials/edit.html
	modified:   docs/css/extra.css

* Change the banner location

* Change the text

* Fix the css

* Change the banners location
	modified:   _resourcepdf/overrides/main.html
	modified:   docs/css/extra.css

* Change the banner and link colours

Author: alina-derkach-oaza

_resource/.icons/edit_page.png

@@ -50,11 +50,14 @@
                 <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
                   <div class="md-sidebar__scrollwrap">
                     <div class="md-sidebar__inner">
-                      {% include "partials/toc.html" %}
+                      {% include "partials/edit.html" %}
                     </div>
                     <div class="md-sidebar__inner">
                       {% include "partials/banner.html" %}
                     </div>
+                    <div class="md-sidebar__inner">
+                      {% include "partials/toc.html" %}
+                    </div>
                   </div>
                 </div>
               {% endif %}

_resource/.icons/file-document-edit-outline.svg

@@ -1,9 +1,9 @@
 <div data-banner="data-banner">
     <p><svg style="display:block;margin:-1em 0 0.75em" width="78" height="69" viewBox="0 0 78 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M56.7281 30.7666C62.6528 26.8938 64.5914 18.9942 61.0059 12.7854C59.2094 9.67113 56.3053 7.44082 52.8311 6.50951C49.6122 5.64535 46.2502 5.99872 43.2912 7.49366L39.251 0.5L30.8648 15.0245L11.4811 48.5937H67.021L56.7281 30.7666ZM51.881 10.0674C54.4064 10.7401 56.5079 12.3616 57.8168 14.6194C60.3895 19.0701 59.053 24.7153 54.8808 27.5665L45.1362 10.6905C47.2355 9.68104 49.6034 9.46087 51.881 10.0674ZM39.251 7.87125L60.6339 44.907H48.1228L32.9927 18.7102L39.2499 7.87235L39.251 7.87125ZM17.8682 44.907L30.8637 22.4035L43.8592 44.907H17.8682Z" fill="url(#paint0_linear_2899_1968)"></path><path style="fill:var(--md-typeset-color)" d="M4.981 64.943H3.157V68.207H.756V57.323H5.217C7.822 57.323 9.397 58.861 9.397 61.086V61.116C9.397 63.635 7.433 64.94 4.984 64.94L4.981 64.943V64.943ZM6.961 61.134C6.961 60.061 6.213 59.485 5.011 59.485H3.154V62.812H5.056C6.258 62.812 6.958 62.096 6.958 61.163V61.134H6.961ZM10.738 68.208V57.323H18.973V59.455H13.124V61.664H18.27V63.796H13.124V66.082H19.051V68.214H10.738V68.208 68.208ZM27.557 68.208 25.218 64.726H23.332V68.208H20.931V57.323H25.921C28.496 57.323 30.039 58.677 30.039 60.915V60.945C30.039 62.702 29.088 63.807 27.7 64.32L30.367 68.207H27.556L27.557 68.208ZM27.605 61.041C27.605 60.016 26.887 59.485 25.719 59.485H23.333V62.61H25.767C26.936 62.61 27.605 61.987 27.605 61.071V61.042 61.041ZM36.922 68.499C33.668 68.499 31.249 65.994 31.249 62.825V62.795C31.249 59.659 33.619 57.091 37.019 57.091 39.105 57.091 40.356 57.783 41.383 58.792L39.834 60.571C38.98 59.798 38.113 59.327 37.004 59.327 35.141 59.327 33.795 60.871 33.795 62.762V62.793C33.795 64.684 35.107 66.257 37.004 66.257 38.268 66.257 39.043 65.753 39.913 64.964L41.462 66.524C40.322 67.738 39.059 68.493 36.925 68.493L36.922 68.499ZM47.885 68.499C44.47 68.499 42.021 65.962 42.021 62.825V62.795C42.021 59.659 44.503 57.091 47.915 57.091 51.327 57.091 53.779 59.628 53.779 62.765V62.795C53.779 65.931 51.297 68.499 47.885 68.499ZM51.237 62.795C51.237 60.904 49.846 59.331 47.885 59.331 45.925 59.331 44.567 60.874 44.567 62.766V62.796C44.567 64.688 45.959 66.261 47.919 66.261 49.879 66.261 51.237 64.717 51.237 62.826V62.795 62.795ZM67.001 68.217 72.374 57.091 77.746 68.218H75.052L72.374 62.681 69.705 68.218H67.001V68.217ZM66.007 57.327V68.5L57.813 61.884V68.199H55.264V57.091L63.458 63.681V57.327H66.007Z"></path><defs><linearGradient id="paint0_linear_2899_1968" x1="18.1513" y1="44.7152" x2="61.4356" y2="20.9786" gradientUnits="userSpaceOnUse"><stop stop-color="#FC3519"></stop><stop offset="1" stop-color="#F0D136"></stop></linearGradient></defs></svg></p>
-    <p>For help, click the link below to get free database assistance or contact our experts for personalized support.</p>
+    <p>Get free database assistance or contact our experts for personalized support.</p>
 
     <div class="actions">
 
-    <a href="https://docs.percona.com/percona-server/8.0/get-help.html" style="color: var(--md-typeset-a-color);">Get help from Percona</a>
+    <a href="https://docs.percona.com/percona-server/8.0/get-help.html" style="color: var(--md-typeset-a-color)">Get help from Percona</a>
     </div>
     </div>

_resource/.icons/file-eye-outline.svg

@@ -0,0 +1,11 @@
+<div data-banner="data-banner">
+  <div class="actions">
+    <a href="{{ page.edit_url }}" title="Edit this page on GitHub" class="edit-page-link">
+      <span class="edit-page-icon">
+        {% set icon = config.theme.icon.edit or "material/file-edit-outline" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
+      </span>
+      <span class="edit-page-text">Edit this page on GitHub</span>
+    </a>
+  </div>
+</div>

_resourcepdf/overrides/main.html

@@ -9,4 +9,22 @@
 .md-sidebar__inner {
     font-size: 0.65rem;   /* Font size */
     line-height: 1.6;
-}
+}
+
+.edit-page-link {
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-size: 1.2rem;
+  font-weight: normal;
+  color: var(--md-typeset-a-color);
+  text-decoration: underline;
+}
+
+.edit-page-icon svg {
+  width: 1.40em;
+  height: 1.40em;
+  fill: currentColor;
+  vertical-align: middle;
+}

_resourcepdf/overrides/partials/banner.html

@@ -17,9 +17,6 @@ theme:
   font:
     text: Roboto
     code: Roboto Mono
-  icon:
-    edit: material/file-edit-outline
-    view: material/file-eye-outline
 
   palette:
     - media: "(prefers-color-scheme)"
@@ -54,7 +51,7 @@ theme:
     - navigation.indexes
     - content.tooltips
     - content.tabs.link
-    - content.action.edit
+#    - content.action.edit
     - content.action.view
     - content.code.copy
     - content.code.annotate
@@ -79,7 +76,7 @@ markdown_extensions:
   toc:
     permalink: true
     title: On this page
-    toc_depth: 3
+    toc_depth: 2
   md_in_html: {}
   admonition: {}
   footnotes: {}

_resourcepdf/overrides/partials/edit.html

@@ -26,5 +26,5 @@ extra:
           name: This page could be improved
           data: 0
           note: >- 
-            Thanks for your feedback! Help us improve by following this <a href="https://docs.google.com/forms/d/1bkWACehjqlwA0AKf-qTJcXvYbOSYgze8iTPXjntqmNo/edit" target="_blank" rel="noopener">feedback form</a>.
+            Thanks for your feedback! Want to improve this page? Click the <strong>Improve this page</strong> button above to submit a pull request!