diff --git a/source/_static/js/main.js b/source/_static/js/main.js index f685cb6f..caeefe3b 100644 --- a/source/_static/js/main.js +++ b/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 - const tocOriginalEl = document.getElementById("table-of-contents"); - const tocTargetEl = document.getElementById("content-toc"); - const tocAsideEL = document.querySelector(".content__toc"); + // Move the TOC, External Links, etc. to the right side of the page + const extVideoLinks = document.querySelector(".extlinks-video") - if (tocOriginalEl) { - tocTargetEl.parentNode.replaceChild(tocOriginalEl, tocTargetEl); + const tocPreferredEl = document.getElementById("table-of-contents"); + 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 += "
Recommended Videos
"; + 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 diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss index 19e32f84..e3cb053a 100644 --- a/source/_static/scss/includes/_toc.scss +++ b/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); diff --git a/source/includes/common/installation.rst b/source/includes/common/installation.rst index aebf4a4e..121a0949 100644 --- a/source/includes/common/installation.rst +++ b/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