al_folio_core 1.0.3 → 1.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a15b5c9e5bcd706d7d8fe4905dc6808ff410a61e75ab5e9f56005d55701a09eb
-  data.tar.gz: d85d3073a73190a3de3d848f344a963de62a6ddc9820e8d5ef3a7d59a5892721
+  metadata.gz: 566d64497199ae021c6b80241c4bf25791fb6447a7e22ee0232fb74e2cd915bb
+  data.tar.gz: 149241d6a27b9e51737e6b437c339c270f64abc379e0c2664976c200af94fb37
 SHA512:
-  metadata.gz: 682d3c7b5226138717d8519612f8a619a72935dd901ec957375e0497edb1f8558e7ea54bb048d781d8c706e55b58241416488d2f22fa66943d9469db38a8f864
-  data.tar.gz: 8112481419f442d856e68349c4e58279fc53c37dd9a03460280b86a7389ce67c8ff2be1a40ff9364866030fe7f4987fb5976f60ce732c0527909e447f1f07dcc
+  metadata.gz: 2eba8f9aeebd03783e40e1833ceba8990bae51bb068065603c8f9bba6d24c8286c11f14d5366021a7295cbb3e8dd5a565bbc65a752868e8dbe758d1f34a284b1
+  data.tar.gz: 6dccbdc6e0ab582dcf00a5fe0dc64ecb8418bc97f9d6051dbb214ca6a1a28f217429ca8c5d51ec0cbf472007ba4c2da1041da61d212e10c10f70bedc2723a4b4

data/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.0.5 - 2026-02-18
+
+- Restored right-aligned desktop navbar menu layout with explicit core-owned alignment classes.
+- Matched inline code typography more closely to legacy sizing/weight while preserving code-block styling.
+- Normalized related-post recommendation links to regular font weight.
+- Fixed Tocbot sidebar visual clashes by removing competing custom rails and scoping active/hover indicators cleanly.
+
+## 1.0.4 - 2026-02-17
+
+- Fixed related-posts HTML structure to render valid list markup.
+- Restored sidebar TOC behavior and styling via Tocbot runtime integration.
+- Added Tailwind-first vanilla table engine for `pretty_table` pages when Bootstrap compatibility is disabled.
+- Replaced remaining jQuery-dependent runtime scripts (masonry, jupyter link handling) with vanilla JS.
+- Improved project hover lift, teaching calendar toggle UX, and schedule/table styling parity.
+
 ## 1.0.3 - 2026-02-17
 
 - Restricted gem packaging to tracked runtime files to prevent accidental inclusion of local/untracked artifacts.

data/_includes/calendar.liquid

@@ -3,9 +3,11 @@
     <h2 class="mb-3"><i class="fas fa-calendar-alt"></i> Upcoming Events</h2>
 
     <button
-      class="btn btn-sm btn-outline-primary mb-3"
+      class="btn btn-sm btn-outline-primary mb-3 calendar-toggle-btn"
+      type="button"
       onclick="toggleCalendar()"
       id="calendar-toggle-btn"
+      aria-pressed="false"
     >
       Show Calendar
     </button>

data/_includes/head.liquid

@@ -33,6 +33,17 @@
   >
 {% endif %}
 
+{% if page.toc and page.toc.sidebar %}
+  <!-- Tocbot -->
+  <link
+    defer
+    rel="stylesheet"
+    href="{{ site.third_party_libraries.tocbot.url.css }}"
+    integrity="{{ site.third_party_libraries.tocbot.integrity.css }}"
+    crossorigin="anonymous"
+  >
+{% endif %}
+
 <!-- Icons -->
 {% if site.plugins contains 'al_icons' %}
   {% include plugins/al_icons_styles.liquid %}

data/_includes/header.liquid

@@ -26,7 +26,7 @@
       {% endif %}
       <!-- Navbar Toggle -->
       <button
-        class="navbar-toggler collapsed ml-auto"
+        class="navbar-toggler collapsed navbar-toggler-main"
         type="button"
         data-nav-toggle="navbarNav"
         aria-controls="navbarNav"
@@ -39,8 +39,8 @@
         <span class="icon-bar bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse text-right" id="navbarNav">
-        <ul class="navbar-nav ml-auto flex-nowrap">
+      <div class="collapse navbar-collapse navbar-collapse-main" id="navbarNav">
+        <ul class="navbar-nav navbar-menu-list flex-nowrap">
           {% for page in site.pages %}
             {% if page.permalink == '/' %} {% assign about_title = page.title %} {% endif %}
           {% endfor %}
@@ -119,7 +119,7 @@
           {% if site.search_enabled %}
             <!-- Search -->
             <li class="nav-item">
-              <button id="search-toggle" title="Search" onclick="openSearchModal()">
+              <button id="search-toggle" type="button" title="Search" aria-label="Open search">
                 <span class="nav-link">ctrl k <i class="fa-solid fa-magnifying-glass"></i></span>
               </button>
             </li>
@@ -127,7 +127,7 @@
           {% if site.enable_darkmode %}
             <!-- Toogle theme mode -->
             <li class="toggle-container">
-              <button id="light-toggle" title="Change theme">
+              <button id="light-toggle" type="button" title="Change theme" aria-label="Change color theme">
                 <i class="fa-half-sun-moon" id="light-toggle-system"></i>
                 <i class="fa-solid fa-moon" id="light-toggle-dark"></i>
                 <i class="fa-solid fa-sun" id="light-toggle-light"></i>

data/_includes/related_posts.liquid

@@ -1,35 +1,42 @@
-{% assign have_related_posts = false %}
-{% for post in site.related_posts | limit: site.related_blog_posts.max_related %}
-  {% unless have_related_posts %}
-    {% assign have_related_posts = true %}
-    {% if page.layout == 'post' %}
-      <br>
-      <hr>
-      <br>
-      <ul class="list-disc pl-8"></ul>
-
-      <!-- Adds related posts to the end of an article -->
-      <h2 class="text-3xl font-semibold mb-4 mt-12">Enjoy Reading This Article?</h2>
-    {% else %}
-      <h2 class="text-3xl font-semibold mb-4 mt-12">Enjoy Reading This Article?</h2>
-    {% endif %}
+{% assign related_posts = site.related_posts | limit: site.related_blog_posts.max_related %}
+{% if related_posts != empty %}
+  {% if page.layout == 'post' %}
+    <br>
+    <hr>
+    <br>
+  {% endif %}
 
-    <p class="mb-2">Here are some more articles you might like to read next:</p>
-  {% endunless %}
+  <h2 class="text-3xl font-semibold mb-4 mt-12">Enjoy Reading This Article?</h2>
+  <p class="mb-2">Here are some more articles you might like to read next:</p>
 
-  <li class="my-2">
-    {% if post.redirect == blank %}
-      <a class="text-pink-700 underline font-semibold hover:text-pink-800" href="{{ post.url | relative_url }}">{{ post.title }}</a>
-    {% elsif post.redirect contains '://' %}
-      <a class="text-pink-700 underline font-semibold hover:text-pink-800" href="{{ post.redirect }}" target="_blank">{{ post.title }}</a>
-      <svg width="1rem" height="1rem" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
-        <path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#999" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
-      </svg>
-    {% else %}
-      <a class="text-pink-700 underline font-semibold hover:text-pink-800" href="{{ post.redirect | relative_url }}">{{ post.title }}</a>
-    {% endif %}
-  </li>
-{% endfor %}
+  <ul class="list-disc pl-7 my-3 space-y-2 marker:text-[var(--global-theme-color)]">
+    {% for post in related_posts %}
+      <li class="leading-relaxed">
+        {% if post.redirect == blank %}
+          <a class="underline decoration-1 hover:text-[var(--global-hover-color)]" href="{{ post.url | relative_url }}">
+            {{- post.title -}}
+          </a>
+        {% elsif post.redirect contains '://' %}
+          <a
+            class="underline decoration-1 hover:text-[var(--global-hover-color)]"
+            href="{{ post.redirect }}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{- post.title -}}
+          </a>
+          <svg width="1rem" height="1rem" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#999" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        {% else %}
+          <a class="underline decoration-1 hover:text-[var(--global-hover-color)]" href="{{ post.redirect | relative_url }}">
+            {{- post.title -}}
+          </a>
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
 {% if site.newsletter.enabled and site.footer_fixed %}
   <p class="mb-2" style="margin-top: 1.5rem !important">Subscribe to be notified of future articles:</p>
   {% if site.plugins contains 'al_newsletter' %}

data/_includes/scripts.liquid

@@ -60,6 +60,19 @@
     crossorigin="anonymous"
   ></script>
 {% endif %}
+{% if page.pretty_table and site.al_folio.compat.bootstrap.enabled != true %}
+  <script defer src="{{ '/assets/js/table-engine.js' | relative_url | bust_file_cache }}" type="text/javascript"></script>
+{% endif %}
+
+{% if page.toc and page.toc.sidebar %}
+  <!-- Tocbot -->
+  <script
+    defer
+    src="{{ site.third_party_libraries.tocbot.url.js }}"
+    integrity="{{ site.third_party_libraries.tocbot.integrity.js }}"
+    crossorigin="anonymous"
+  ></script>
+{% endif %}
 
 <!-- Load Common JS -->
 <script src="{{ '/assets/js/no_defer.js' | relative_url | bust_file_cache }}"></script>

data/_layouts/default.liquid

@@ -29,14 +29,14 @@
             <div class="col-sm-9">{{ content }}</div>
             <!-- sidebar, which will move to the top on a small screen -->
             <div class="col-sm-3">
-              <nav id="toc-sidebar" class="sticky-top"></nav>
+              <nav id="toc-sidebar" class="sticky-top toc toc-sidebar" aria-label="Table of contents"></nav>
             </div>
           </div>
         {% else %}
           <div class="row">
             <!-- sidebar, which will move to the top on a small screen -->
             <div class="col-sm-3">
-              <nav id="toc-sidebar" class="sticky-top"></nav>
+              <nav id="toc-sidebar" class="sticky-top toc toc-sidebar" aria-label="Table of contents"></nav>
             </div>
             <!-- main content area -->
             <div class="col-sm-9">{{ content }}</div>

data/_sass/_components.scss

@@ -53,6 +53,29 @@ ul.task-list input[type="checkbox"] {
   }
 }
 
+.hoverable {
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease;
+}
+
+.hoverable:hover {
+  transform: translateY(-4px);
+  box-shadow:
+    0 10px 22px rgba(0, 0, 0, 0.12),
+    0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hoverable {
+    transition: none;
+  }
+
+  .hoverable:hover {
+    transform: none;
+  }
+}
+
 // Profile
 
 .profile {

data/_sass/_navbar.scss

@@ -9,6 +9,34 @@
   border-bottom: 1px solid var(--global-divider-color);
   background-color: var(--global-bg-color);
   opacity: 0.95;
+
+  .navbar-collapse-main {
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  .navbar-menu-list {
+    margin-left: auto;
+    align-items: center;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .navbar {
+    .navbar-toggler-main {
+      margin-left: auto;
+    }
+
+    .navbar-collapse-main {
+      text-align: left;
+    }
+
+    .navbar-menu-list {
+      margin-left: 0;
+      align-items: flex-start;
+      width: 100%;
+    }
+  }
 }
 
 .navbar .dropdown-menu,
@@ -160,6 +188,7 @@
   border: 0;
   background-color: inherit;
   color: var(--global-text-color);
+  cursor: pointer;
   /* Fix footprint to prevent navbar shifting when icon changes */
   width: 2rem;
   height: 2rem;
@@ -183,6 +212,7 @@
   border: 0;
   background-color: inherit;
   color: var(--global-text-color);
+  cursor: pointer;
 
   &:hover {
     color: var(--global-hover-color);

data/_sass/_teachings.scss

@@ -63,6 +63,24 @@
 
 .course-schedule {
   margin-bottom: 30px;
+
+  table.table {
+    margin-top: 0.75rem;
+  }
+
+  table.table thead th {
+    background-color: color-mix(in srgb, var(--global-theme-color) 12%, transparent);
+    border-top: 0;
+    border-bottom: 1px solid var(--global-divider-color);
+    color: var(--global-text-color);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    padding: 0.7rem 1rem;
+  }
+
+  table.table tbody td {
+    padding: 0.72rem 1rem;
+  }
 }
 
 .schedule-description {

data/_sass/_typography.scss

@@ -23,15 +23,16 @@ hr {
   border-top: 1px solid var(--global-divider-color);
 }
 
-table {
+table:not(.table) {
   td,
   th {
     font-size: 1rem;
-    padding: 1px 1rem 1px 0;
+    padding: 0.45rem 1rem 0.45rem 0;
+    border-top: 1px solid var(--global-divider-color);
   }
 
   th {
-    font-weight: bold;
+    font-weight: 600;
   }
 }
 

data/_sass/_utilities.scss

@@ -55,6 +55,12 @@ code {
   word-wrap: break-word;
 }
 
+:not(pre) > code {
+  font-size: 0.82em;
+  font-weight: 400;
+  padding: 2px 4px;
+}
+
 // Progress bars
 
 progress {
@@ -177,33 +183,176 @@ html.transition *:after {
   }
 }
 
+// Tailwind table engine
+
+.af-table-shell {
+  margin: 1.1rem 0 1.4rem;
+}
+
+.af-table-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.7rem;
+  margin-bottom: 0.6rem;
+}
+
+.af-table-search {
+  min-width: min(300px, 100%);
+  max-width: 100%;
+  border: 1px solid var(--global-divider-color);
+  border-radius: 0.4rem;
+  background-color: var(--global-bg-color);
+  color: var(--global-text-color);
+  font-size: 0.94rem;
+  line-height: 1.4;
+  padding: 0.42rem 0.72rem;
+}
+
+.af-table-search:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--global-theme-color) 35%, transparent);
+  outline-offset: 1px;
+}
+
+.af-table-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.af-table-page-info {
+  color: var(--global-text-color);
+  font-size: 0.85rem;
+  font-weight: 500;
+  margin-right: 0.3rem;
+}
+
+.af-table-pagination button {
+  border: 1px solid var(--global-divider-color);
+  background-color: transparent;
+  border-radius: 0.35rem;
+  color: var(--global-text-color);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 500;
+  line-height: 1;
+  min-width: 2rem;
+  padding: 0.38rem 0.56rem;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.af-table-pagination button:hover:not(:disabled) {
+  background-color: var(--global-theme-color);
+  border-color: var(--global-theme-color);
+  color: var(--global-hover-text-color);
+}
+
+.af-table-pagination button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+table[data-toggle="table"].af-table-enhanced {
+  margin-bottom: 0;
+}
+
+table[data-toggle="table"].af-table-enhanced thead th {
+  background-color: color-mix(in srgb, var(--global-theme-color) 12%, transparent);
+  border-bottom: 1px solid var(--global-divider-color);
+  color: var(--global-text-color);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+table[data-toggle="table"].af-table-enhanced th.af-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+table[data-toggle="table"].af-table-enhanced th.af-sortable:hover {
+  color: var(--global-hover-color);
+}
+
+table[data-toggle="table"].af-table-enhanced tbody tr.af-row-selected {
+  background-color: color-mix(in srgb, var(--global-theme-color) 12%, transparent);
+}
+
 // Table of Contents
 
-nav[data-toggle="toc"] {
+#toc-sidebar {
+  z-index: 1;
   top: 5rem;
 
-  .nav .nav > li > a {
-    font-size: 0.75rem;
+  &.toc > .toc-list {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .toc-list {
+    list-style: none;
+    margin: 0;
+    padding-left: 0.9rem;
+  }
+
+  .toc-list .toc-list {
+    margin-top: 0.15rem;
+    margin-left: 0.55rem;
+    padding-left: 0.8rem;
   }
 
-  .nav > li > a {
+  .toc-link {
     color: var(--global-text-color);
-    font-size: 0.75rem;
+    display: block;
+    position: relative;
+    font-size: 0.78rem;
+    line-height: 1.4;
+    margin: 0.12rem 0;
+    padding: 0.14rem 0.35rem 0.14rem 0.55rem;
+    border-left: 0;
+    transition:
+      color 0.2s ease,
+      font-weight 0.2s ease;
+    transform: none;
+
+    &::before {
+      background-color: color-mix(in srgb, var(--global-divider-color) 85%, transparent);
+      bottom: 0;
+      left: 0;
+      margin-top: 0;
+      top: 0;
+      width: 2px;
+    }
 
     &:hover {
       color: var(--global-hover-color);
-      border-left-color: var(--global-hover-color);
+      text-decoration: none;
+      transform: none;
+
+      &::before {
+        background-color: var(--global-hover-color);
+      }
     }
   }
 
-  .nav-link.active {
+  .toc-link.is-active-link {
     color: var(--global-theme-color);
-    border-left-color: var(--global-theme-color);
-    font-size: 0.75rem;
+    font-weight: 600;
+    transform: none;
+
+    &::before {
+      background-color: var(--global-theme-color);
+    }
 
     &:hover {
       color: var(--global-hover-color);
-      border-left-color: var(--global-hover-color);
+
+      &::before {
+        background-color: var(--global-hover-color);
+      }
     }
   }
 }
@@ -211,7 +360,7 @@ nav[data-toggle="toc"] {
 /* small screens */
 @media (max-width: 576px) {
   /* override stickyness so that the navigation does not follow scrolling */
-  nav[data-toggle="toc"] {
+  #toc-sidebar {
     visibility: hidden;
     height: 0;
     top: 0;
@@ -233,7 +382,7 @@ nav[data-toggle="toc"] {
     }
   }
 
-  code {
+  :not(pre) > code {
     font-size: 0.875rem;
     padding: 2px 4px;
   }
@@ -253,7 +402,7 @@ nav[data-toggle="toc"] {
     }
   }
 
-  code {
+  :not(pre) > code {
     font-size: 0.8rem;
     padding: 1px 3px;
   }
@@ -446,10 +595,6 @@ nav[data-toggle="toc"] {
   z-index: 999;
 }
 
-#toc-sidebar {
-  z-index: 1;
-}
-
 .echarts {
   height: 400px;
   width: 100%;
@@ -574,18 +719,58 @@ figure.cover {
 // Calendar
 
 .calendar-toggle-btn {
-  background-color: #007acc;
-  color: white;
-  padding: 0.5em 1em;
-  border: none;
-  border-radius: 6px;
-  font-size: 1em;
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid var(--global-theme-color);
+  border-radius: 999px;
+  color: var(--global-theme-color);
   cursor: pointer;
-  transition: background-color 0.3s;
+  display: inline-flex;
+  font-size: 0.92rem;
+  font-weight: 600;
+  gap: 0.25rem;
+  padding: 0.45rem 0.95rem;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.16s ease;
+}
+
+.calendar-toggle-btn:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--global-theme-color) 45%, transparent);
+  outline-offset: 2px;
 }
 
 .calendar-toggle-btn:hover {
-  background-color: #005fa3;
+  background-color: color-mix(in srgb, var(--global-theme-color) 14%, transparent);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09);
+  color: var(--global-theme-color);
+  transform: translateY(-1px);
+}
+
+.calendar-toggle-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.calendar-toggle-btn[aria-pressed="true"],
+.calendar-toggle-btn.is-open {
+  background-color: var(--global-theme-color);
+  color: var(--global-hover-text-color);
+  border-color: var(--global-theme-color);
+}
+
+.calendar-toggle-btn[aria-pressed="true"]:hover,
+.calendar-toggle-btn.is-open:hover {
+  background-color: var(--global-hover-color);
+  border-color: var(--global-hover-color);
+  color: var(--global-hover-text-color);
+}
+
+.calendar-toggle-btn.btn-sm {
+  cursor: pointer;
+  font-size: 0.88rem;
 }
 
 .google-calendar-embed {

data/assets/js/calendar-setup.js

@@ -2,9 +2,15 @@
 function toggleCalendar() {
   const el = document.getElementById("calendar-container");
   const btn = document.getElementById("calendar-toggle-btn");
+  if (!el || !btn) {
+    return;
+  }
+
   const isHidden = el.style.display === "none";
   el.style.display = isHidden ? "block" : "none";
   btn.innerText = isHidden ? "Hide Calendar" : "Show Calendar";
+  btn.setAttribute("aria-pressed", isHidden ? "true" : "false");
+  btn.classList.toggle("is-open", isHidden);
 
   // Update calendar URL when toggling to ensure correct theme
   if (isHidden) {

data/assets/js/common.js

@@ -45,8 +45,8 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   const tocSidebar = document.querySelector("#toc-sidebar");
+  const contentRoot = document.querySelector('[role="main"]') || document.querySelector("main") || document.body;
   const buildSidebarToc = (tocRoot) => {
-    const contentRoot = document.querySelector("main") || document.body;
     const headings = Array.from(contentRoot.querySelectorAll("h2, h3")).filter((heading) => {
       return !heading.hasAttribute("data-toc-skip");
     });
@@ -56,7 +56,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     const list = document.createElement("ul");
-    list.className = "nav";
+    list.className = "toc-list";
 
     headings.forEach((heading) => {
       if (!heading.id) {
@@ -68,12 +68,13 @@ document.addEventListener("DOMContentLoaded", () => {
       }
 
       const item = document.createElement("li");
+      item.className = "toc-list-item";
       const link = document.createElement("a");
-      link.className = "nav-link";
+      link.className = "toc-link";
       link.href = `#${heading.id}`;
-      link.textContent = heading.textContent.trim();
+      link.textContent = heading.dataset.tocText || heading.textContent.trim();
       if (heading.tagName.toLowerCase() === "h3") {
-        link.classList.add("ml-4");
+        item.classList.add("is-collapsible");
       }
 
       item.appendChild(link);
@@ -88,8 +89,51 @@ document.addEventListener("DOMContentLoaded", () => {
       heading.setAttribute("data-toc-skip", "");
     });
 
-    if (window.Toc && typeof window.Toc.init === "function") {
-      window.Toc.init(tocSidebar);
+    const headings = Array.from(contentRoot.querySelectorAll("h2, h3")).filter((heading) => !heading.hasAttribute("data-toc-skip"));
+    headings.forEach((heading) => {
+      if (!heading.id) {
+        heading.id = heading.textContent
+          .trim()
+          .toLowerCase()
+          .replace(/[^a-z0-9]+/g, "-")
+          .replace(/^-+|-+$/g, "");
+      }
+    });
+
+    const applyCustomTocLabels = () => {
+      tocSidebar.querySelectorAll(".toc-link").forEach((link) => {
+        const anchor = link.getAttribute("href") || "";
+        const headingId = decodeURIComponent(anchor.replace(/^#/, ""));
+        if (!headingId) {
+          return;
+        }
+        const heading = document.getElementById(headingId);
+        const customText = heading?.dataset?.tocText;
+        if (customText) {
+          link.textContent = customText;
+        }
+      });
+    };
+
+    if (window.tocbot && typeof window.tocbot.init === "function" && headings.length > 0) {
+      if (typeof window.tocbot.destroy === "function") {
+        window.tocbot.destroy();
+      }
+
+      window.tocbot.init({
+        tocSelector: "#toc-sidebar",
+        contentSelector: '[role="main"]',
+        headingSelector: "h2, h3",
+        ignoreSelector: "[data-toc-skip]",
+        hasInnerContainers: true,
+        collapseDepth: 6,
+        orderedList: false,
+        activeLinkClass: "is-active-link",
+        scrollSmooth: true,
+        scrollSmoothOffset: -80,
+        headingsOffset: 80,
+      });
+      applyCustomTocLabels();
     } else {
       buildSidebarToc(tocSidebar);
     }

data/assets/js/jupyter_new_tab.js

@@ -1,18 +1,35 @@
-$(document).ready(function () {
-  // Let external links in jupyter notebooks open in new tab
-  let jupyterNotebooks = $(".jupyter-notebook-iframe-container");
-  jupyterNotebooks.each(function () {
-    let iframeBody = $(this).find("iframe").get(0).contentWindow.document.body;
-    // Get all <a> elements in the bodyElement
-    let links = $(iframeBody).find("a");
+document.addEventListener("DOMContentLoaded", () => {
+  const notebookIframes = document.querySelectorAll(".jupyter-notebook-iframe-container iframe");
 
-    // Loop through each <a> element
-    links.each(function () {
-      // Check if the <a> element has an 'href' attribute
-      if ($(this).attr("href")) {
-        // Set the 'target' attribute to '_blank' to open the link in a new tab/window
-        $(this).attr("target", "_blank");
+  const updateNotebookLinks = (iframe) => {
+    try {
+      const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDocument || !iframeDocument.body) {
+        return;
       }
-    });
+
+      iframeDocument.querySelectorAll("a[href]").forEach((link) => {
+        link.setAttribute("target", "_blank");
+        const currentRel = link.getAttribute("rel") || "";
+        const relParts = currentRel.split(/\s+/).filter(Boolean);
+        if (!relParts.includes("noopener")) {
+          relParts.push("noopener");
+        }
+        if (!relParts.includes("noreferrer")) {
+          relParts.push("noreferrer");
+        }
+        link.setAttribute("rel", relParts.join(" "));
+      });
+    } catch (_error) {
+      // Cross-origin iframe access is blocked by design.
+    }
+  };
+
+  notebookIframes.forEach((iframe) => {
+    if (iframe.contentDocument?.readyState === "complete") {
+      updateNotebookLinks(iframe);
+    }
+
+    iframe.addEventListener("load", () => updateNotebookLinks(iframe));
   });
 });

data/assets/js/masonry.js

@@ -1,12 +1,22 @@
-$(document).ready(function () {
-  // Init Masonry
-  var $grid = $(".grid").masonry({
+document.addEventListener("DOMContentLoaded", () => {
+  const grid = document.querySelector(".grid");
+  if (!grid || typeof window.Masonry !== "function") {
+    return;
+  }
+
+  const masonry = new window.Masonry(grid, {
     gutter: 10,
     horizontalOrder: true,
     itemSelector: ".grid-item",
   });
-  // Layout Masonry after each image loads
-  $grid.imagesLoaded().progress(function () {
-    $grid.masonry("layout");
-  });
+
+  if (typeof window.imagesLoaded === "function") {
+    const tracker = window.imagesLoaded(grid);
+    if (tracker && typeof tracker.on === "function") {
+      tracker.on("progress", () => masonry.layout());
+      return;
+    }
+  }
+
+  masonry.layout();
 });

data/assets/js/table-engine.js

@@ -0,0 +1,328 @@
+document.addEventListener("DOMContentLoaded", () => {
+  if (window.alFolio?.compatBootstrap) {
+    return;
+  }
+
+  const asBool = (value) => String(value || "").toLowerCase() === "true";
+
+  const parseSortValue = (value) => {
+    if (typeof value === "number") {
+      return { type: "number", value };
+    }
+
+    const text = String(value ?? "").trim();
+    const numeric = Number(text.replace(/[$,%\s,]/g, ""));
+    if (text !== "" && Number.isFinite(numeric) && /^[-+]?[$]?\d/.test(text)) {
+      return { type: "number", value: numeric };
+    }
+
+    return { type: "string", value: text.toLowerCase() };
+  };
+
+  class AfTableEngine {
+    constructor(table) {
+      this.table = table;
+      this.columns = Array.from(table.querySelectorAll("thead th")).map((th, index) => ({
+        element: th,
+        index,
+        field: th.dataset.field || `__col_${index}`,
+        checkbox: asBool(th.dataset.checkbox),
+        sortable: asBool(th.dataset.sortable),
+        align: th.dataset.align || "",
+        halign: th.dataset.halign || th.dataset.align || "",
+      }));
+      this.state = {
+        allRows: [],
+        filteredRows: [],
+        search: "",
+        page: 1,
+        pageSize: Number.parseInt(table.dataset.pageSize || "10", 10) || 10,
+        sortField: null,
+        sortDirection: "asc",
+      };
+      this.options = {
+        search: asBool(table.dataset.search),
+        pagination: asBool(table.dataset.pagination),
+        clickToSelect: asBool(table.dataset.clickToSelect),
+        dataUrl: table.dataset.url || "",
+      };
+      this.tbody = table.querySelector("tbody") || table.createTBody();
+    }
+
+    async init() {
+      this.table.classList.add("table", "table-hover", "af-table-enhanced");
+      this.buildShell();
+      this.bindHeaderSort();
+      this.state.allRows = await this.loadRows();
+      this.applyFiltersAndSort();
+      this.render();
+    }
+
+    buildShell() {
+      const shell = document.createElement("div");
+      shell.className = "af-table-shell";
+
+      this.table.parentNode.insertBefore(shell, this.table);
+      shell.appendChild(this.table);
+
+      const toolbar = document.createElement("div");
+      toolbar.className = "af-table-toolbar";
+      shell.insertBefore(toolbar, this.table);
+      this.toolbar = toolbar;
+
+      if (this.options.search) {
+        const searchInput = document.createElement("input");
+        searchInput.className = "af-table-search";
+        searchInput.type = "search";
+        searchInput.placeholder = "Search table...";
+        searchInput.setAttribute("aria-label", "Search table rows");
+        searchInput.addEventListener("input", () => {
+          this.state.search = searchInput.value.trim().toLowerCase();
+          this.state.page = 1;
+          this.applyFiltersAndSort();
+          this.render();
+        });
+        toolbar.appendChild(searchInput);
+      }
+
+      if (this.options.pagination) {
+        const pagination = document.createElement("div");
+        pagination.className = "af-table-pagination";
+
+        const info = document.createElement("span");
+        info.className = "af-table-page-info";
+        pagination.appendChild(info);
+        this.pageInfo = info;
+
+        const prevButton = document.createElement("button");
+        prevButton.type = "button";
+        prevButton.textContent = "Prev";
+        prevButton.addEventListener("click", () => {
+          if (this.state.page > 1) {
+            this.state.page -= 1;
+            this.render();
+          }
+        });
+        pagination.appendChild(prevButton);
+        this.prevButton = prevButton;
+
+        const nextButton = document.createElement("button");
+        nextButton.type = "button";
+        nextButton.textContent = "Next";
+        nextButton.addEventListener("click", () => {
+          if (this.state.page < this.totalPages()) {
+            this.state.page += 1;
+            this.render();
+          }
+        });
+        pagination.appendChild(nextButton);
+        this.nextButton = nextButton;
+
+        this.toolbar.appendChild(pagination);
+      }
+    }
+
+    bindHeaderSort() {
+      this.columns.forEach((column) => {
+        if (!column.sortable || column.checkbox) {
+          return;
+        }
+
+        if (column.halign) {
+          column.element.style.textAlign = column.halign;
+        }
+        column.element.classList.add("af-sortable");
+        column.element.addEventListener("click", () => {
+          if (this.state.sortField === column.field) {
+            this.state.sortDirection = this.state.sortDirection === "asc" ? "desc" : "asc";
+          } else {
+            this.state.sortField = column.field;
+            this.state.sortDirection = "asc";
+          }
+          this.renderHeaders();
+          this.applyFiltersAndSort();
+          this.render();
+        });
+      });
+    }
+
+    async loadRows() {
+      if (!this.options.dataUrl) {
+        return this.readRowsFromMarkup();
+      }
+
+      try {
+        const response = await fetch(this.options.dataUrl, { credentials: "same-origin" });
+        if (!response.ok) {
+          return this.readRowsFromMarkup();
+        }
+        const payload = await response.json();
+        if (!Array.isArray(payload)) {
+          return this.readRowsFromMarkup();
+        }
+        return payload.map((row) => this.normalizeRow(row));
+      } catch (_error) {
+        return this.readRowsFromMarkup();
+      }
+    }
+
+    readRowsFromMarkup() {
+      const rows = Array.from(this.tbody.querySelectorAll("tr"));
+      return rows.map((tr) => {
+        const cells = Array.from(tr.querySelectorAll("td"));
+        const row = {};
+        this.columns.forEach((column) => {
+          const cell = cells[column.index];
+          if (column.checkbox) {
+            row[column.field] = Boolean(cell?.querySelector('input[type="checkbox"]')?.checked);
+          } else {
+            row[column.field] = cell ? cell.textContent.trim() : "";
+          }
+        });
+        return row;
+      });
+    }
+
+    normalizeRow(row) {
+      const normalized = {};
+      this.columns.forEach((column) => {
+        if (column.checkbox) {
+          normalized[column.field] = Boolean(row[column.field]);
+          return;
+        }
+        normalized[column.field] = row[column.field] ?? "";
+      });
+      return normalized;
+    }
+
+    applyFiltersAndSort() {
+      let rows = this.state.allRows.slice();
+      if (this.state.search) {
+        rows = rows.filter((row) => {
+          return this.columns.some((column) => {
+            if (column.checkbox) {
+              return false;
+            }
+            const value = row[column.field];
+            return String(value ?? "")
+              .toLowerCase()
+              .includes(this.state.search);
+          });
+        });
+      }
+
+      if (this.state.sortField) {
+        const direction = this.state.sortDirection === "asc" ? 1 : -1;
+        const field = this.state.sortField;
+        rows.sort((leftRow, rightRow) => {
+          const left = parseSortValue(leftRow[field]);
+          const right = parseSortValue(rightRow[field]);
+          if (left.type === "number" && right.type === "number") {
+            return (left.value - right.value) * direction;
+          }
+          return String(left.value).localeCompare(String(right.value)) * direction;
+        });
+      }
+
+      this.state.filteredRows = rows;
+      if (this.state.page > this.totalPages()) {
+        this.state.page = this.totalPages();
+      }
+    }
+
+    totalPages() {
+      if (!this.options.pagination) {
+        return 1;
+      }
+      return Math.max(1, Math.ceil(this.state.filteredRows.length / this.state.pageSize));
+    }
+
+    paginatedRows() {
+      if (!this.options.pagination) {
+        return this.state.filteredRows;
+      }
+      const from = (this.state.page - 1) * this.state.pageSize;
+      return this.state.filteredRows.slice(from, from + this.state.pageSize);
+    }
+
+    renderHeaders() {
+      this.columns.forEach((column) => {
+        const label = column.element.dataset.afLabel || column.element.textContent.trim();
+        column.element.dataset.afLabel = label;
+        if (!column.sortable || column.checkbox) {
+          return;
+        }
+
+        if (this.state.sortField === column.field) {
+          const directionMarker = this.state.sortDirection === "asc" ? " \u2191" : " \u2193";
+          column.element.textContent = `${label}${directionMarker}`;
+        } else {
+          column.element.textContent = label;
+        }
+      });
+    }
+
+    render() {
+      this.renderHeaders();
+      this.tbody.replaceChildren();
+
+      this.paginatedRows().forEach((row) => {
+        const tr = document.createElement("tr");
+        let checkboxControl = null;
+
+        this.columns.forEach((column) => {
+          const td = document.createElement("td");
+          if (column.align) {
+            td.style.textAlign = column.align;
+          }
+
+          if (column.checkbox) {
+            const checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = Boolean(row[column.field]);
+            checkbox.setAttribute("aria-label", "Select row");
+            checkbox.addEventListener("change", () => {
+              row[column.field] = checkbox.checked;
+              tr.classList.toggle("af-row-selected", checkbox.checked);
+            });
+            checkboxControl = checkbox;
+            td.appendChild(checkbox);
+            tr.classList.toggle("af-row-selected", checkbox.checked);
+          } else {
+            td.textContent = String(row[column.field] ?? "");
+          }
+
+          tr.appendChild(td);
+        });
+
+        if (this.options.clickToSelect && checkboxControl) {
+          tr.addEventListener("click", (event) => {
+            if (event.target.closest('a, button, input, label, select, textarea')) {
+              return;
+            }
+            checkboxControl.checked = !checkboxControl.checked;
+            checkboxControl.dispatchEvent(new Event("change", { bubbles: true }));
+          });
+        }
+
+        this.tbody.appendChild(tr);
+      });
+
+      if (this.options.pagination && this.pageInfo && this.prevButton && this.nextButton) {
+        const totalPages = this.totalPages();
+        this.pageInfo.textContent = `Page ${this.state.page} / ${totalPages}`;
+        this.prevButton.disabled = this.state.page <= 1;
+        this.nextButton.disabled = this.state.page >= totalPages;
+      }
+    }
+  }
+
+  document.querySelectorAll('table[data-toggle="table"]').forEach((table) => {
+    if (table.dataset.afTableInitialized === "true") {
+      return;
+    }
+    table.dataset.afTableInitialized = "true";
+    const engine = new AfTableEngine(table);
+    engine.init();
+  });
+});

data/lib/al_folio_core/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module AlFolioCore
-  VERSION = "1.0.3"
+  VERSION = "1.0.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: al_folio_core
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.0.5
 platform: ruby
 authors:
 - al-folio maintainers
@@ -179,6 +179,7 @@ files:
 - assets/js/nav-toggle.js
 - assets/js/no_defer.js
 - assets/js/progress-bar.js
+- assets/js/table-engine.js
 - assets/js/tabs.js
 - assets/js/theme.js
 - assets/js/tooltips-setup.js