Prepare rel 0.3.0

ChangeLog.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## [0.3.0] - 2024-03-10
+
+- When producing the HTML static site, create a file called `doc_versions.js`, containing the list of versions (name and url) specified in the `version` entry of the `html_theme_options`.
+- Change the CSS layout so that the grid centers itself, regardless of whether the toc at the right side is visible or not.
+
 ## [0.2.3] - 2024-02-20
 
 - Use a fluid layout (Bootstrap's `container-fluid`) to allow expanding the TOC

js/src/index.js

@@ -4,7 +4,7 @@ import { MenuHandler } from "./menu.js";
 import { updateRepoMetrics } from "./repometrics.js";
 import { TocObserver } from "./pagetoc.js";
 import { resizeAsides, updateScrollPaddingTop } from "./tocresize.js";
-import { updateVersion } from "./versions.js";
+import { feedVersionsMenu, updateVersion } from "./versions.js";
 
 
 function agentHas(keyword) {
@@ -56,6 +56,9 @@ window.addEventListener('DOMContentLoaded', (_) => {
   const luz_handler = new LuzHandler();
   luz_handler.registerClickEvents();
 
+  // Feed the versions dropdown element.
+  feedVersionsMenu();
+
   // The updateVersion function controls the display of the version
   // in the header, adding the CSS class "current" to display the
   // tick symbol near the version selected.

js/src/tocresize.js

@@ -30,21 +30,7 @@ export function resizeAsides() {
     nftt_toc?.setAttribute("style", height);
   }
 
-  // Compute new 'grid-template-columns' for nftt-layout.
-  const max = (window.innerWidth - nftt_content.offsetWidth);
-  const newmax = nftt_toc
-    ? Math.floor(max / 2)
-    : (
-      nftt_sidebar_content
-        ? Math.floor((max + nftt_sidebar_content.offsetWidth) / 2)
-        : undefined
-    );
-  if (newmax) {
-    const newgtcols = `minmax(300px, ${newmax}px) 5fr`;
-    nftt_layout?.setAttribute("style", `grid-template-columns: ${newgtcols}`);
-  }
-
-  return [height, newmax];
+  return height;
 }
 
 

js/src/versions.js

@@ -32,3 +32,39 @@ export function updateVersion() {
     }
   }
 }
+
+export function feedVersionsMenu() {
+  const vermenu = document.getElementById("versions-dropdown-menu");
+  if (!vermenu) {
+    console.log("Did not find the versions dropdown menu.");
+    return;
+  }
+  // Use the variable 'doc_versions', loaded as a script in layout.html.
+  // The file doc_versions.js is produced by versions.py when building
+  // the site (make html).
+  console.log("Found the versions dropdown menu!");
+  console.log("doc_versions are:");
+  console.dir(doc_versions);
+
+  for (const item of doc_versions) {
+    const li = document.createElement("li");
+    const anchor = document.createElement("a");
+    anchor.classList.add(
+      "dropdown-item", "d-flex", "align-items-center",
+      "justify-content-between"
+    );
+    anchor.setAttribute("aria-pressed", "false");
+    anchor.setAttribute("href", item.url);
+    anchor.dataset.snfttVersionUrl = item.url;
+    anchor.dataset.snfttVersion = item.name;
+    const span = document.createElement("span");
+    span.classList.add("small", "ms-2");
+    span.textContent = item.name;
+    const i = document.createElement("i");
+    i.classList.add("bi", "bi-check", "ms-auto");
+    anchor.append(span);
+    anchor.append(i);
+    li.append(anchor);
+    vermenu.append(li);
+  }
+}

js/tests/unit/tocresize.spec.js

@@ -70,8 +70,8 @@ describe('resize', () => {
       }
     );
 
-    const results = resizeAsides();
-    expect(results[0]).toEqual("height: calc(100vh - 7rem)");
+    const result = resizeAsides();
+    expect(result).toEqual("height: calc(100vh - 7rem)");
   });
 
   it('checks resizeAsides when nftt_content shorter than body', () => {
@@ -90,7 +90,7 @@ describe('resize', () => {
       }
     );
 
-    const results = resizeAsides();
-    expect(results[0]).toEqual(expected_height);
+    const result = resizeAsides();
+    expect(result).toEqual(expected_height);
   });
 });

scss/_layout.scss

@@ -23,17 +23,52 @@ body {
   padding-top: 63px;
 }
 
-.nftt-layout {
+.nftt-page {
   flex: 1 0 auto;
   margin-top: 2.5rem;
   margin-bottom: 1.5rem;
 
   @include media-breakpoint-up(xl) {
     display: grid;
-    grid-template-areas: "sidebar main";
-    grid-template-columns: minmax(300px, 1.5fr) 5fr;
+    grid-template-areas: "sidebar content toc";
+    grid-template-columns: minmax(300px, 1.5fr) minmax(570px, 760px) minmax(190px, 1.3fr);
     gap: 25px;
   }
+
+  @include media-breakpoint-down(xl) {
+    display: grid;
+    grid-template-areas: "content toc";
+    grid-template-columns: minmax(570px, 5fr) minmax(190px, 1fr);
+    gap: 25px;
+  }
+
+  @include media-breakpoint-down(lg) {
+    grid-template-areas:
+      "toc"
+      "content";
+    grid-template-rows: 1fr auto;
+    grid-template-columns: none;
+    max-width: 892px;
+    margin-inline: auto;
+  }
+}
+
+.nftt-page-wo-toc {
+  flex: 1 0 auto;
+  margin-top: 2.5rem;
+  margin-bottom: 1.5rem;
+
+  @include media-breakpoint-up(xl) {
+    display: grid;
+    grid-template-areas: "sidebar content toc";
+    grid-template-columns: minmax(300px, 1.5fr) minmax(570px, 760px) minmax(190px, 1.3fr);
+    gap: 25px;
+  }
+
+  @include media-breakpoint-down(xl) {
+    max-width: 92%;
+    margin-inline: auto;
+  }
 }
 
 .nftt-sidebar {
@@ -59,39 +94,6 @@ body {
   }
 }
 
-.nftt-main-wo-toc {
-  display: grid;
-  grid-area: main;
-  grid-template-areas: "content";
-  grid-template-columns: minmax(570px, 860px);
-  padding-right: 48px;
-
-  @include media-breakpoint-down(xl) {
-    grid-template-columns: none;
-    padding-right: 0;
-  }
-}
-
-.nftt-main {
-  display: grid;
-  grid-area: main;
-  grid-template-areas:
-    "toc"
-    "content";
-  grid-template-rows: 1fr auto;
-  gap: inherit;
-
-  @include media-breakpoint-down(xl) {
-    max-width: 1100px;
-    margin-inline: auto;
-  }
-
-  @include media-breakpoint-up(lg) {
-    grid-template-areas: "content toc";
-    grid-template-columns: minmax(570px, 760px) minmax(190px, 1.3fr);
-  }
-}
-
 .nftt-toc {
   grid-area: toc;
 
@@ -100,6 +102,12 @@ body {
     font-family: var(--#{$prefix}font-monospace);
     font-size: .7rem;
   }
+
+  @include media-breakpoint-down(lg) {
+    padding-right: 2rem;
+    padding-left: 2rem;
+  }
+
 }
 
 

scss/components/_toc.scss

@@ -203,7 +203,7 @@
   display: flex;
   align-items: center;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     justify-content: space-between;
     width: 100%;
   }

setup.py

@@ -19,7 +19,7 @@
 
 setup(
     name="sphinx-nefertiti",
-    version="0.2.3",
+    version="0.3.0",
     packages=find_packages(),
     include_package_data=True,
     license="MIT",