[QOL] Extend keyboard shortcuts to copy current address (#733)

This patch also removes the obsolete fix-docs.js. That
file depends of jQuery and we no longer use that. That file was also
the cause of the console errors on current docs site.

After this patch, users will be able to press C or Y(ank) to copy
current address along with anchors to the clipboard. This feature is just
an extension of multiple exisiting shortcuts like F/P/N.

Another patch is in the works which would update current address so that
current anchor is in the addressbar. That would make this patch more useful as
you will be able to copy the adress of the location that you are currently reading
in the doc and resume later or maybe share to someone. Cool, right?

Signed-off-by: black-dragon74 <niryadav@redhat.com>

docs/js/custom-features.js

@@ -0,0 +1,40 @@
+// Add ability to copy the current URL using vim like shortcuts
+// There already exists navigation related shortcuts like
+// F/S -- For Searching
+// P/N -- For navigating to previous/next pages
+// This patch just extends those features
+
+// Expose the internal notification API of mkdocs
+// This API isn't exposed publically, IDK why
+// They use it internally to show notifications when user copies a code block
+// I reverse engineered it for ease of use, takes a string arg `msg`
+const notifyDOM = (msg) => {
+  if (typeof alert$ === "undefined") {
+    console.error("Clipboard notification API not available");
+    return;
+  }
+
+  alert$.next(msg);
+};
+
+// Extend the keyboard shortcut features
+keyboard$.subscribe((key) => {
+  // We want to allow the user to be able to type our modifiders in search
+  // Disallowing that would be hilarious
+  if (key.mode === "search") {
+    return;
+  }
+
+  const keyPressed = key.type.toLowerCase();
+
+  // Y is added to honor vim enthusiasts (yank)
+  if (keyPressed === "c" || keyPressed === "y") {
+    const currLocation = window.location.href;
+    if (currLocation) {
+      navigator.clipboard
+        .writeText(currLocation)
+        .then(() => notifyDOM("Address copied to clipboard"))
+        .catch((e) => console.error(e));
+    }
+  }
+});

docs/js/fix-docs.js

@@ -1,74 +0,0 @@
-(function () {
-  'use strict';
-
-  $(document).ready(function () {
-    fixSearchResults();
-    fixSearch();
-    warnDomain();
-  });
-
-  /**
-   * Adds a TOC-style table to each page in the 'Modules' section.
-   */
-  function fixSearchResults() {
-    $('#mkdocs-search-results').text('Searching...');
-  }
-
-  /**
-   * Warn if the domain is gluster.readthedocs.io
-   *
-   */
-  function warnDomain() {
-    var domain = window.location.hostname;
-    if (domain.indexOf('readthedocs.io') != -1) {
-      $('div.section').prepend('<div class="warning"><p>You are viewing outdated content. We have moved to <a href="http://docs.gluster.org' + window.location.pathname + '">docs.gluster.org.</a></p></div>');
-    }
-  }
-
-  /*
-   * RTD messes up MkDocs' search feature by tinkering with the search box defined in the theme, see
-   * https://github.com/rtfd/readthedocs.org/issues/1088. This function sets up a DOM4 MutationObserver
-   * to react to changes to the search form (triggered by RTD on doc ready). It then reverts everything
-   * the RTD JS code modified.
-   */
-  function fixSearch() {
-    var target = document.getElementById('mkdocs-search-form');
-    var config = {attributes: true, childList: true};
-
-    var observer = new MutationObserver(function(mutations) {
-      // if it isn't disconnected it'll loop infinitely because the observed element is modified
-      observer.disconnect();
-      var form = $('#mkdocs-search-form');
-      form.empty();
-      form.attr('action', 'https://' + window.location.hostname + '/en/' + determineSelectedBranch() + '/search.html');
-      $('<input>').attr({
-        type: "text",
-        name: "q",
-        placeholder: "Search docs"
-      }).appendTo(form);
-    });
-
-    if (window.location.origin.indexOf('readthedocs') > -1 || window.location.origin.indexOf('docs.gluster.org') > -1) {
-      observer.observe(target, config);
-    }
-  }
-
-
-  /**
-   * Analyzes the URL of the current page to find out what the selected GitHub branch is. It's usually
-   * part of the location path. The code needs to distinguish between running MkDocs standalone
-   * and docs served from RTD. If no valid branch could be determined 'dev' returned.
-   *
-   * @returns GitHub branch name
-   */
-  function determineSelectedBranch() {
-    var branch = 'latest', path = window.location.pathname;
-    if (window.location.origin.indexOf('readthedocs') > -1) {
-      // path is like /en/<branch>/<lang>/build/ -> extract 'lang'
-      // split[0] is an '' because the path starts with the separator
-      branch = path.split('/')[2];
-    }
-    return branch;
-  }
-
-}());

mkdocs.yml

@@ -275,7 +275,7 @@ nav:
   - Google Site Verification: ./google64817fdc11b2f6b6.html
 
 extra_javascript:
-  - js/fix-docs.js
+  - js/custom-features.js
 
 extra_css:
   - css/custom.css