Proof of Concept on right-nav video links via RST + JS (#682)

source/_static/js/main.js

@@ -157,19 +157,61 @@ window.addEventListener("DOMContentLoaded", (event) => {
 
 
   // --------------------------------------------------
-  // TOC
+  // TOC, External Links
   // --------------------------------------------------
   (function () {
-    // Move the TOC to the right side of the page
+    // Move the TOC, External Links, etc. to the right side of the page
-    const tocOriginalEl = document.getElementById("table-of-contents");
+    const extVideoLinks = document.querySelector(".extlinks-video")
-    const tocTargetEl = document.getElementById("content-toc");
-    const tocAsideEL = document.querySelector(".content__toc");
 
-    if (tocOriginalEl) {
+    const tocPreferredEl = document.getElementById("table-of-contents");
-      tocTargetEl.parentNode.replaceChild(tocOriginalEl, tocTargetEl);
+    const tocLegacyEl = document.getElementById("content-toc");
+
+    // This is the target element for the "aside" or right nav bar
+    const tocAsideEl = document.querySelector(".content__toc");
+
+    // Don't need this element so remove it
+    tocLegacyEl.remove();
+
+    // Build an array of elements to add, in order
+    // Then iterate the array and append it, one by one, to the aside
+    const asideElements = new Array();
+
+    if (tocPreferredEl) {
+      asideElements.push(tocPreferredEl);
+    }
+    if (extVideoLinks) {
+      // Minor cleanups to the CSS classes
+      extVideoLinks.classList.remove("docutils", "container")
+      extVideoLinks.classList.add("topic")
+
+      // Inject the header text
+
+      const extVideoLinkHeader = document.createElement("div");
+      extVideoLinkHeader.classList.add("extVideoLink-header");
+      extVideoLinkHeader.innerHTML += "<p>Recommended Videos</p>";
+      extVideoLinks.prepend(extVideoLinkHeader);
+
+
+      asideElements.push(extVideoLinks)
+
+      // Need to force-add extlinks, they don't seem to get added as-is for some reason
+
+      const extVideoItems = document.querySelectorAll(".extlinks-video a");
+      extVideoItems.forEach(item => {
+         item.setAttribute("target","_blank");
+         item.setAttribute("rel", "noopener");
+         item.setAttribute("rel", "noreferrer");
+      });
+    }
+
+    // Sets the empty CSS class if nothing on the page goes in the sidebar
+    if (asideElements.length == 0) {
+      tocAsideEl.classList.add("content__toc--empty");
     }
     else {
-      tocAsideEL.classList.add("content__toc--empty");
+      for (i = 0; i < asideElements.length; i++) {
+         tocAsideEl.appendChild(asideElements[i]);
+       }
     }
     
     // Treat the TOC as a dropdown in mobile

source/_static/scss/includes/_toc.scss

@@ -28,6 +28,37 @@ div.topic {
         z-index: $z-index-header - 2;
     }
 
+    @include breakpoint-max(breakpoints(sm)) {
+      .extlinks-video {
+         display: none;
+      }
+    }
+
+    .extlinks-video {
+        ul {
+           padding: 0;
+           margin: .25rem 0 0 1rem;
+           font-size: $font-size-sm;
+           color: var(--text-muted-color);
+  
+           ul {
+                 margin-left: 0.75rem;
+           }
+        }
+      border-bottom: 1px $dark-500 solid;
+      padding: .5rem 0 .5rem 0;
+    }
+
+    .extVideoLink-header {
+      & > p {
+         color: var(--headings-color);
+         margin: 0;
+         line-height: 1;
+         font-size: $font-size-md;
+         font-weight: bold;
+      }
+    }
+
     .icon {
         height: 2.5rem;
         width: 2.5rem;
@@ -66,6 +97,8 @@ div.topic {
 #table-of-contents {
     flex: 1;
     position: relative;
+    border-bottom: 1px $dark-500 solid;
+    padding: .5rem 0 .5rem 0;
 
     .topic-title {
         color: var(--headings-color);

source/includes/common/installation.rst

@@ -10,6 +10,14 @@ Install and Deploy MinIO
    :local:
    :depth: 1
 
+.. container:: extlinks-video
+
+   - `Installing and Running MinIO on Linux <https://www.youtube.com/watch?v=74usXkZpNt8&list=PLFOIsHSSYIK1BnzVY66pCL-iJ30Ht9t1o>`__
+
+   - `Object Storage Essentials <https://www.youtube.com/playlist?list=PLFOIsHSSYIK3WitnqhqfpeZ6fRFKHxIr7>`__
+   
+   - `How to Connect to MinIO with JavaScript <https://www.youtube.com/watch?v=yUR4Fvx0D3E&list=PLFOIsHSSYIK3Dd3Y_x7itJT1NUKT5SxDh&index=5>`__
+
 MinIO is a software-defined high performance distributed object storage server.
 You can run MinIO on consumer or enterprise-grade hardware and a variety
 of operating systems and architectures.

source/index.rst

@@ -8,6 +8,14 @@ MinIO High Performance Object Storage
    :local:
    :depth: 2
 
+.. container:: extlinks-video
+
+   - `Installing and Running MinIO on Linux <https://www.youtube.com/watch?v=74usXkZpNt8&list=PLFOIsHSSYIK1BnzVY66pCL-iJ30Ht9t1o>`__
+
+   - `Object Storage Essentials <https://www.youtube.com/playlist?list=PLFOIsHSSYIK3WitnqhqfpeZ6fRFKHxIr7>`__
+   
+   - `How to Connect to MinIO with JavaScript <https://www.youtube.com/watch?v=yUR4Fvx0D3E&list=PLFOIsHSSYIK3Dd3Y_x7itJT1NUKT5SxDh&index=5>`__
+
 MinIO is a high performance object storage solution that provides an Amazon Web Services S3-compatible API and supports all core S3 features.
 
 MinIO is built to deploy anywhere - public or private cloud, baremetal infrastructure, orchestrated environments, and edge infrastructure.