Misc site rendering issues (#2219)

* Vertically align widget to pagination. * Align buttons and add footer on every page. * Separate copy button into own file.
kptdev · Jun 12, 2021 · 4f08773 · 4f08773
1 parent baa199c
commit 4f08773
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 73 deletions.
diff --git a/site/index.html b/site/index.html
@@ -30,7 +30,8 @@
   <body>
     <div id="app"></div>
     <script src="/static/js/config.js"></script>
-    <script src="/static/js/plugins.js"></script>
+    <script src="/static/js/plugins/plugins.js"></script>
+    <script src="/static/js/plugins/copy_buttons.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>

diff --git a/site/static/css/site.css b/site/static/css/site.css
@@ -122,10 +122,10 @@ pre.language-shell button.copy-button:hover {
 }
 
 .github-widget {
-  display: flex;
-  justify-content: center;
-  width: fit-content;
-  margin: auto;
+  position: absolute;
+  left: 50%;
+  margin-top: 2.5em;
+  padding-top: 8px;
 }
 
 .github-widget .material-icons-outlined {

diff --git a/site/static/js/plugins/copy_buttons.js b/site/static/js/plugins/copy_buttons.js
@@ -0,0 +1,50 @@
+function addCodeCopyButtons() {
+  const preBlocks = Array.from(document.getElementsByTagName("pre")).filter(
+    (el) =>
+      el.classList.contains("language-shell") &&
+      el.firstElementChild.textContent
+        .split("\n")
+        .find((line) => line.trimLeft().startsWith("$"))
+  );
+
+  const makeButton = () => {
+    const copyButton = document.createElement("button");
+    const buttonClassName = "copy-button";
+    copyButton.classList.add(buttonClassName);
+    copyButton.title = "Copy to clipboard";
+
+    const copyIcon = document.createElement("span");
+    copyIcon.innerText = "copy";
+    copyIcon.classList.add("material-icons-outlined");
+    copyButton.appendChild(copyIcon);
+
+    copyButton.addEventListener("click", (el) =>
+      navigator.clipboard.writeText([
+        el
+          .composedPath()
+          .find((el) => el.classList.contains(buttonClassName))
+          .previousElementSibling.textContent.split("\n")
+          .map((s) => s.trim())
+          .filter(
+            (s, ix, arr) =>
+              s.startsWith("$") || (ix > 0 && arr[ix - 1].endsWith("\\"))
+          )
+          .map((s) => s.replace(/^\$\s+/, ""))
+          .join("\n"),
+      ])
+    );
+    return copyButton;
+  };
+  preBlocks.forEach((pre) => pre.appendChild(makeButton()));
+}
+
+// Load plugins into Docsify.
+window.$docsify = window.$docsify || {};
+window.$docsify.plugins = [(hook) => hook.doneEach(addCodeCopyButtons)].concat(
+  window.$docsify.plugins || []
+);
+
+// Export functions for testing.
+if (typeof module !== "undefined") {
+  module.exports = { addCodeCopyButtons };
+}
diff --git a/site/static/js/plugins.test.js → site/static/js/plugins/copy_buttons.test.js b/site/static/js/plugins.test.js → site/static/js/plugins/copy_buttons.test.js
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-const plugins = require("./plugins");
+const plugins = require("./copy_buttons");
 
 const originalClipboard = { ...global.navigator.clipboard };
 beforeEach(() => {

diff --git a/site/static/js/plugins.js → site/static/js/plugins/plugins.js b/site/static/js/plugins.js → site/static/js/plugins/plugins.js
@@ -31,7 +31,10 @@ function addGitHubWidget(hook) {
     container.classList.add("github-widget");
     container.appendChild(createIssue);
     container.appendChild(editPage);
-    document.getElementById("main").appendChild(container);
+    document
+      .getElementsByClassName("docsify-pagination-container")
+      .item(0)
+      .append(container);
   });
 }
 
@@ -62,36 +65,30 @@ async function addVersionDropdown() {
 }
 
 function showBookPageFooters() {
-  const paginationFooters = Array.from(
-    document.getElementsByClassName("docsify-pagination-container")
-  );
   const isBookPage = document.location.pathname
     .toLowerCase()
     .startsWith("/book");
-  paginationFooters.forEach(
-    (el) => (el.style.display = isBookPage ? "flex" : "none")
-  );
 
-  // Don't show previous button on the book cover page.
+  const hideButtonsToNonBookPages = (buttons) => {
+    buttons.forEach((el) => {
+      url = new URL(el.lastElementChild.href);
+      el.style.display = isBookPage && url.pathname.toLowerCase().startsWith("/book")
+        ? "flex"
+        : "none";
+    });
+  };
+
   const previousPaginationButtons = Array.from(
     document.getElementsByClassName("pagination-item--previous")
   );
-  const isBookCover =
-    isBookPage && document.location.pathname.toLowerCase().length < 7;
-  previousPaginationButtons.forEach(
-    (el) => (el.style.display = isBookCover ? "none" : "flex")
-  );
 
-  // Don't show next button to non-book-pages.
   const nextPaginationButtons = Array.from(
     document.getElementsByClassName("pagination-item--next")
   );
-  nextPaginationButtons.forEach((el) => {
-    url = new URL(el.lastElementChild.href);
-    el.style.display = url.pathname.toLowerCase().startsWith("/book")
-      ? "flex"
-      : "none";
-  });
+
+  hideButtonsToNonBookPages(
+    previousPaginationButtons.concat(nextPaginationButtons)
+  );
 }
 
 function processBookPageTitle(content) {
@@ -151,47 +148,6 @@ function processAsciinemaTags(content) {
       `<asciinema-player src="${window.location.origin}/static/casts/${fileName}.cast" cols="160"></asciinema-player>`
   );
 }
-
-function addCodeCopyButtons() {
-  const preBlocks = Array.from(document.getElementsByTagName("pre")).filter(
-    (el) =>
-      el.classList.contains("language-shell") &&
-      el.firstElementChild.textContent
-        .split("\n")
-        .find((line) => line.trimLeft().startsWith("$"))
-  );
-
-  const makeButton = () => {
-    const copyButton = document.createElement("button");
-    const buttonClassName = "copy-button";
-    copyButton.classList.add(buttonClassName);
-    copyButton.title = "Copy to clipboard";
-
-    const copyIcon = document.createElement("span");
-    copyIcon.innerText = "copy";
-    copyIcon.classList.add("material-icons-outlined");
-    copyButton.appendChild(copyIcon);
-
-    copyButton.addEventListener("click", (el) =>
-      navigator.clipboard.writeText([
-        el
-          .composedPath()
-          .find((el) => el.classList.contains(buttonClassName))
-          .previousElementSibling.textContent.split("\n")
-          .map((s) => s.trim())
-          .filter(
-            (s, ix, arr) =>
-              s.startsWith("$") || (ix > 0 && arr[ix - 1].endsWith("\\"))
-          )
-          .map((s) => s.replace(/^\$\s+/, ""))
-          .join("\n"),
-      ])
-    );
-    return copyButton;
-  };
-  preBlocks.forEach((pre) => pre.appendChild(makeButton()));
-}
-
 // Workaround for https://github.com/docsifyjs/docsify/pull/1468
 function defaultLinkTargets() {
   const externalPageLinks = Array.from(
@@ -228,8 +184,6 @@ function localPlugins(hook, _vm) {
   // Reset all external links to their appropriate targets.
   hook.doneEach(defaultLinkTargets);
 
-  hook.doneEach(addCodeCopyButtons);
-
   addGitHubWidget(hook);
 
   // Process elements in the navigation sidebar.
@@ -245,7 +199,3 @@ function localPlugins(hook, _vm) {
 window.$docsify = window.$docsify || {};
 window.$docsify.plugins = [localPlugins].concat(window.$docsify.plugins || []);
 
-// Export functions for testing.
-if (typeof module !== "undefined") {
-  module.exports = { addCodeCopyButtons };
-}