PBM-908 Added the feedback form (#88)

PBM-908 Added the feedback form Changed Analytics setup, moved nav customization to main.html
percona · Sep 28, 2023 · fdbd148 · fdbd148
1 parent 7f1e455
commit fdbd148
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 127 deletions.
diff --git a/_resource/.icons/percona/logo.svg b/_resource/.icons/percona/logo.svg
diff --git a/_resource/overrides/main.html b/_resource/overrides/main.html
@@ -36,68 +36,37 @@ <h4>Contact Us </h4>
                 <body>
                 </body>
               </html>
-              {% endblock %}
-
-
-              {% block analytics %}
-              <!-- Google Tag Manager -->
-              <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-              })(window,document,'script','dataLayer','GTM-WBVF48V');</script>
-              <!-- End Google Tag Manager -->
-
-              <!-- Google Tag Manager (noscript) -->
-              <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBVF48V"
-              height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-              <!-- End Google Tag Manager (noscript) -->
-              {% endblock %}
-
-              {% block content %}
-
-                <!-- Edit and view button -->
-                {% if page.edit_url %}
-                  {% set edit = "https://github.com/percona/pbm-docs/edit/main/docs/" %}
-                  {% set view = "https://raw.githubusercontent.com/percona/pbm-docs/main/docs/" %}
-                  <a
-                    href="{{ page.edit_url }}"
-                    title="{{ lang.t('edit.link.title') }}"
-                    class="md-content__button md-icon"
-                  >
-                    {% include ".icons/material/file-edit-outline.svg" %}
-                  </a>
-                  <a
-                    href="{{ page.edit_url | replace(edit, view) }}"
-                    title="View source of this page"
-                    class="md-content__button md-icon"
-                  >
-                    {% include ".icons/material/file-eye-outline.svg" %}
-                  </a>
-                {% endif %}
-
-                <!--
-                  Hack: check whether the content contains a h1 headline. If it
-                  doesn't, the page title (or respectively site name) is used
-                  as the main headline.
-                -->
-                {% if "\x3ch1" not in page.content %}
-                  <h1>{{ page.title | d(config.site_name, true)}}</h1>
-                {% endif %}
-
-                <!-- Markdown content -->
-                {{ page.content }}
-
-                {{ relbar2() }}
-
-                <!-- Last update of source file -->
-                {% if page and page.meta %}
-                  {% if page.meta.git_revision_date_localized or
-                        page.meta.revision_date
-                  %}
-                    {% include "partials/source-file.html" %}
-                  {% endif %}
-                {% endif %}
-              {% endblock %}
-
+  {% endblock %}
 
+             {% block site_nav %}
+            {% if nav %}
+              {% if page.meta and page.meta.hide %}
+                {% set hidden = "hidden" if "navigation" in page.meta.hide %}
+              {% endif %}
+              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" {{ hidden }}>
+                <div class="md-sidebar__scrollwrap">
+                  <div class="md-sidebar__inner">
+                    {% include "partials/nav.html" %}
+                    <br>
+                    <label class="md-nav__title" for="__drawer">
+    <a href="https://learn.percona.com/download-percona-backup-for-mongodb-manual-2" onclick="_gaq.push(['b._trackEvent', 'Percona Backup for MongoDB', 'Download', 'Download Manual Backup for MongoDB']);" class="md-nav__link md-nav__link--active" style="font-size: .7rem;">
+      Download PDF
+    </a>
+  </label> 
+                  </div>
+                </div>
+              </div>
+            {% endif %}
+            {% if "toc.integrate" not in features %}
+              {% if page.meta and page.meta.hide %}
+                {% set hidden = "hidden" if "toc" in page.meta.hide %}
+              {% endif %}
+              <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" %}
+                  </div>
+                </div>
+              </div>
+            {% endif %}
+          {% endblock %}
diff --git a/_resource/overrides/partials/nav.html b/_resource/overrides/partials/nav.html
diff --git a/_resource/overrides/partials/toc-item.html b/_resource/overrides/partials/toc-item.html
diff --git a/docs/css/percona.css b/docs/css/percona.css
@@ -64,7 +64,69 @@ margin: 1em 0 .54em;
     color:var(--md-accent-bg-color)
 }
 
-
+/* 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');

diff --git a/docs/js/feedback.js b/docs/js/feedback.js
@@ -0,0 +1,11 @@
+var feedback = document.forms.feedback
+feedback.addEventListener("submit", function(ev) {
+  ev.preventDefault()
+
+  /* Retrieve page and feedback value */
+  var page = document.location.pathname
+  var data = ev.submitter.getAttribute("data-md-value")
+
+  /* Send feedback value */
+  console.log(page, data)
+})
diff --git a/mkdocs-base.yml b/mkdocs-base.yml
@@ -46,6 +46,7 @@ extra_css:
 
 extra_javascript:
   - js/promptremover.js
+  - js/feedback.js
 
 markdown_extensions:
   abbr: {}
@@ -75,10 +76,16 @@ markdown_extensions:
   pymdownx.highlight:
       linenums: false
   pymdownx.inlinehilite: {}
-  pymdownx.snippets: {}
+  pymdownx.snippets:  
+    base_path: ["snippets"]
+    auto_append:
+      - services-banner.md
   pymdownx.emoji:
       emoji_index: !!python/name:materialx.emoji.twemoji
       emoji_generator: !!python/name:materialx.emoji.to_svg
+      options:
+        custom_icons:
+          - _resource/.icons
 
 #Mkdocs plugins   
 plugins:
@@ -127,6 +134,7 @@ extra:
       find what they're searching for. With your consent, you're helping us to
       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>.
 
+
 nav:
   - Home: index.md
   - Release notes:

diff --git a/mkdocs.yml b/mkdocs.yml
@@ -13,6 +13,7 @@ theme:
 
   features:
     - search.highlight
+    - search.share
     - navigation.top
     - navigation.tracking 
     - content.tabs.link
@@ -24,10 +25,30 @@ plugins:
   section-index: {}
 
 #Google Analytics configuration 
-extra:
-  analytics:
+extra: 
+  analytics: 
     provider: google
-    property: UA-343802-3
+    property: !ENV GOOGLE_ANALYTICS_KEY
+    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 
+            <a href="https://docs.google.com/forms/d/1bkWACehjqlwA0AKf-qTJcXvYbOSYgze8iTPXjntqmNo/edit" target="_blank" rel="noopener">
+            feedback form</a>.
+            
+#          note: >- 
+#            Thanks for your feedback! Help us improve this page by
+#            using our <a href="https://github.com/percona/pbm-docs/issues/new/?title=[Feedback]+{title}+-+{url}" target="_blank" rel="noopener">feedback form</a>.
+
 
 #Feedback form widget
 #    feedback:

diff --git a/snippets/services-banner.md b/snippets/services-banner.md
@@ -0,0 +1,16 @@
+
+
+<div data-banner markdown>
+
+## 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.
+
+<div class="actions" markdown>
+
+[:material-forum-outline: Community Forum](https://forums.percona.com/c/mongodb/percona-backup-for-mongodb/22?utm_campaign=Doc%20pages) [:percona-logo: Get a Percona Expert](https://www.percona.com/about/contact)
+
+</div>
+<img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=0eb11091-81cd-456f-ba7e-d48f006d5875" />
+</div>
+