From d79a838f8a845032d1948a5c6fdcfeffae104114 Mon Sep 17 00:00:00 2001 From: Niraj Kumar Yadav Date: Mon, 20 Jun 2022 11:46:45 +0530 Subject: [PATCH] [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 --- docs/js/custom-features.js | 40 +++++++++++++++++++++ docs/js/fix-docs.js | 74 -------------------------------------- mkdocs.yml | 2 +- 3 files changed, 41 insertions(+), 75 deletions(-) create mode 100644 docs/js/custom-features.js delete mode 100644 docs/js/fix-docs.js diff --git a/docs/js/custom-features.js b/docs/js/custom-features.js new file mode 100644 index 0000000..a76a722 --- /dev/null +++ b/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)); + } + } +}); diff --git a/docs/js/fix-docs.js b/docs/js/fix-docs.js deleted file mode 100644 index f5a0070..0000000 --- a/docs/js/fix-docs.js +++ /dev/null @@ -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('

You are viewing outdated content. We have moved to docs.gluster.org.

'); - } - } - - /* - * 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'); - $('').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///build/ -> extract 'lang' - // split[0] is an '' because the path starts with the separator - branch = path.split('/')[2]; - } - return branch; - } - -}()); diff --git a/mkdocs.yml b/mkdocs.yml index 332042b..752122b 100644 --- a/mkdocs.yml +++ b/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