New site, who dis?

docs/_ext/notoc.py

@@ -0,0 +1,21 @@
+from docutils.parsers.rst import Directive
+from docutils import nodes
+
+
+class NoTocDirective(Directive):
+    has_content = False
+
+    def run(self):
+        # Create a raw HTML node to add the no-right-toc class to body
+        html = '<script>document.body.classList.add("no-right-toc");</script>'
+        return [nodes.raw("", html, format="html")]
+
+
+def setup(app):
+    app.add_directive("notoc", NoTocDirective)
+
+    return {
+        "version": "0.1",
+        "parallel_read_safe": True,
+        "parallel_write_safe": True,
+    }

docs/_static/custom.css

@@ -0,0 +1,188 @@
+.grid-item-card .card-img-top {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+    background-color: slategrey;
+}
+
+/* Make all cards with this class use flexbox for vertical layout */
+.card-with-bottom-text {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+}
+
+/* Style the card content areas */
+.card-with-bottom-text .sd-card-body {
+    display: flex !important;
+    flex-direction: column !important;
+    flex-grow: 1 !important;
+}
+
+/* Make images not grow or shrink */
+.card-with-bottom-text img {
+    flex-shrink: 0 !important;
+    margin-bottom: 0.5rem !important;
+}
+
+/* Push the last paragraph to the bottom */
+.card-with-bottom-text .sd-card-body > p:last-child {
+    margin-top: auto !important;
+    padding-top: 0.5rem !important;
+    text-align: center !important;
+}
+
+.img-container img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+.right-toc {
+    position: fixed;
+    top: 90px;
+    right: 20px;
+    width: 280px;
+    font-size: 0.9em;
+    max-height: calc(100vh - 150px);
+    background-color: #f8f9fa;
+    z-index: 100;
+    border-radius: 6px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    border-left: 3px solid #2980b9;
+}
+
+.right-toc-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    border-bottom: 1px solid #e1e4e5;
+}
+
+.right-toc-title {
+    font-weight: 600;
+    font-size: 1.1em;
+    color: #2980b9;
+}
+
+.right-toc-buttons {
+    display: flex;
+    align-items: center;
+}
+
+.right-toc-toggle-btn {
+    background: none;
+    border: none;
+    color: #2980b9;
+    font-size: 16px;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    padding: 0;
+    transition: background-color 0.2s;
+}
+
+.right-toc-toggle-btn:hover {
+    background-color: rgba(41, 128, 185, 0.1);
+}
+
+.right-toc-content {
+    padding: 15px 15px 15px 20px;
+    overflow-y: auto;
+    max-height: calc(100vh - 200px);
+}
+
+.right-toc-list {
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+.right-toc-link {
+    display: block;
+    padding: 5px 0;
+    text-decoration: none;
+    color: #404040;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    margin-bottom: 3px;
+}
+
+.right-toc-link:hover {
+    background-color: rgba(41, 128, 185, 0.1);
+    padding-left: 5px;
+    color: #2980b9;
+}
+
+.right-toc-level-h1 {
+    font-weight: 600;
+    font-size: 1em;
+}
+
+.right-toc-level-h2 {
+    padding-left: 1.2em;
+    font-size: 0.95em;
+}
+
+.right-toc-level-h3 {
+    padding-left: 2.4em;
+    font-size: 0.9em;
+    color: #606060;
+}
+
+/* Active TOC item highlighting */
+.right-toc-link.active {
+    background-color: rgba(41, 128, 185, 0.15);
+    color: #2980b9;
+    font-weight: 500;
+    padding-left: 5px;
+}
+
+/* Collapsed state */
+.right-toc-collapsed {
+    width: auto;
+    border-left-width: 0;
+}
+
+.right-toc-collapsed .right-toc-header {
+    border-bottom: none;
+    padding: 8px 12px;
+}
+
+/* Scrollbar styling */
+.right-toc-content::-webkit-scrollbar {
+    width: 5px;
+}
+
+.right-toc-content::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+.right-toc-content::-webkit-scrollbar-thumb {
+    background: #cdcdcd;
+    border-radius: 10px;
+}
+
+.right-toc-content::-webkit-scrollbar-thumb:hover {
+    background: #9e9e9e;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 1200px) {
+    .right-toc {
+        width: 230px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .right-toc {
+        display: none; /* Hide on smaller screens */
+    }
+}

docs/_static/custom.js

@@ -0,0 +1,175 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Check if current page has opted out of the TOC
+  if (document.body.classList.contains("no-right-toc")) {
+    return;
+  }
+
+  const content = document.querySelector(".rst-content");
+  if (!content) return;
+
+  // Find all headers in the main content
+  const headers = Array.from(
+    content.querySelectorAll("h1:not(.document-title), h2, h3"),
+  ).filter((header) => !header.classList.contains("no-toc"));
+
+  // Only create TOC if there are headers
+  if (headers.length === 0) return;
+
+  // Create TOC container
+  const toc = document.createElement("div");
+  toc.className = "right-toc";
+  toc.innerHTML =
+    '<div class="right-toc-header">' +
+    '<div class="right-toc-title">On This Page</div>' +
+    '<div class="right-toc-buttons">' +
+    '<button class="right-toc-toggle-btn" title="Toggle TOC visibility">−</button>' +
+    "</div></div>" +
+    '<div class="right-toc-content"><ul class="right-toc-list"></ul></div>';
+
+  const tocList = toc.querySelector(".right-toc-list");
+  const tocContent = toc.querySelector(".right-toc-content");
+  const tocToggleBtn = toc.querySelector(
+    ".right-toc-toggle-btn",
+  );
+
+  // Set up the toggle button
+  tocToggleBtn.addEventListener("click", function () {
+    if (tocContent.style.display === "none") {
+      tocContent.style.display = "block";
+      tocToggleBtn.textContent = "−";
+      toc.classList.remove("right-toc-collapsed");
+      localStorage.setItem("tocVisible", "true");
+    } else {
+      tocContent.style.display = "none";
+      tocToggleBtn.textContent = "+";
+      toc.classList.add("right-toc-collapsed");
+      localStorage.setItem("tocVisible", "false");
+    }
+  });
+
+  // Check saved state
+  if (localStorage.getItem("tocVisible") === "false") {
+    tocContent.style.display = "none";
+    tocToggleBtn.textContent = "+";
+    toc.classList.add("right-toc-collapsed");
+  }
+
+  // Track used IDs to avoid duplicates
+  const usedIds = new Set();
+
+  // Get all existing IDs in the document
+  document.querySelectorAll("[id]").forEach((el) => {
+    usedIds.add(el.id);
+  });
+
+  // Generate unique IDs for headers that need them
+  headers.forEach((header, index) => {
+    // If header already has a unique ID, use that
+    if (header.id && !usedIds.has(header.id)) {
+      usedIds.add(header.id);
+      return;
+    }
+
+    // Create a slug from the header text
+    let headerText = header.textContent || "";
+
+    // Clean the text (remove icons and special characters)
+    headerText = headerText.replace(/\s*\uf0c1\s*$/, "");
+    headerText = headerText.replace(/\s*[¶§#†‡]\s*$/, "");
+    headerText = headerText.trim();
+
+    let slug = headerText
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, "")
+      .replace(/\s+/g, "-")
+      .replace(/--+/g, "-")
+      .trim();
+
+    // Make sure slug is not empty
+    if (!slug) {
+      slug = "section";
+    }
+
+    // Ensure the ID is unique
+    let uniqueId = slug;
+    let counter = 1;
+
+    while (usedIds.has(uniqueId)) {
+      uniqueId = `${slug}-${counter}`;
+      counter++;
+    }
+
+    // Set the unique ID and add to our tracking set
+    header.id = uniqueId;
+    usedIds.add(uniqueId);
+  });
+
+  // Add entries for each header
+  headers.forEach((header) => {
+    const item = document.createElement("li");
+    const link = document.createElement("a");
+
+    link.href = "#" + header.id;
+
+    // Get clean text without icons
+    let headerText = header.textContent || "";
+    headerText = headerText.replace(/\s*\uf0c1\s*$/, "");
+    headerText = headerText.replace(/\s*[¶§#†‡]\s*$/, "");
+
+    link.textContent = headerText.trim();
+    link.className =
+      "right-toc-link right-toc-level-" +
+      header.tagName.toLowerCase();
+
+    item.appendChild(link);
+    tocList.appendChild(item);
+  });
+
+  // Add TOC to page
+  document.body.appendChild(toc);
+
+  // Add active link highlighting
+  const tocLinks = document.querySelectorAll(".right-toc-link");
+  const headerElements = Array.from(headers);
+
+  if (tocLinks.length > 0 && headerElements.length > 0) {
+    // Highlight the current section on scroll
+    window.addEventListener(
+      "scroll",
+      debounce(function () {
+        let currentSection = null;
+        let smallestDistanceFromTop = Infinity;
+
+        headerElements.forEach((header) => {
+          const distance = Math.abs(
+            header.getBoundingClientRect().top,
+          );
+          if (distance < smallestDistanceFromTop) {
+            smallestDistanceFromTop = distance;
+            currentSection = header.id;
+          }
+        });
+
+        tocLinks.forEach((link) => {
+          link.classList.remove("active");
+          if (
+            link.getAttribute("href") === `#${currentSection}`
+          ) {
+            link.classList.add("active");
+          }
+        });
+      }, 100),
+    );
+  }
+});
+
+// Debounce function to limit scroll event firing
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}