Fluidity pack: Body scripts

What it does

Change log

• Sep 14, 2026 v2.3: sticky blog TOC builder. Bullet's Astral template ships the sidebar container (.blog-nav-container) but renders it empty, so this script builds the links itself from the post's h2/h3/h4 headings (indents relative to the highest level used), smooth-scrolls with a 110px offset so headings land below the floating navbar, and runs a scrollspy that highlights the current section (.active-toc). Only runs on blog posts with 2+ headings. Needs the v2.9 CSS. Reduced-motion safe. File: 5-blog-toc.html below, paste into the Bullet Body field after the hero-link script.
• Sep 12, 2026 v2.2: webeeui-hero-link script: wraps the image inside any callout tagged webeeui-hero-link in a link to the Skool community (opens in new tab). File: 4-hero-link.html below, paste into the Bullet Body field after the count-up script.
• Sep 12, 2026 v2.1.1: selector fix. Bullet renders indented headings as h3 tags with class .notion-h2, so the original h2 selector matched nothing. Now targets .co-webeeui-simple-3-col .notion-h2 (h2 tag kept as fallback). Same fix needed for the tabular-nums CSS line.
• Sep 12, 2026 v2.1: stats count-up restored for webeeui-simple-3-col (20+ hrs / 40% less / 100%). Counts from 0 on scroll into view, 1.4s ease-out, 150ms stagger, reduced-motion safe. File: 3-stats-countup.html below, paste into the Bullet Body field after the Vanta script.
• Sep 10, 2026 v1.3: fix for Bullet TOC scrollIntoView hijacking page scroll on posts with anchor links
• Sep 10, 2026 v1.2: added count-up and card cascade scripts
• Sep 10, 2026 v1.1: swapped Vanta fog for Vanta NET particle network
• Sep 10, 2026 v1.0: initial pack (fog hero, scroll reveals)
• Sep 12, 2026 v2.0: trimmed to Vanta hero + TOC scroll fix only; removed scroll reveals, stats count-up and blog card cascade as part of the site CSS reset

v2.3 file

<!-- ============================================================
     Fluidity pack v2.3 : Blog TOC builder
     Populates Bullet's empty .blog-nav-container from the post
     headings, with smooth-scroll offset and scrollspy.
     Pairs with the v2.9 sticky TOC CSS.
     Paste into the Bullet Body field after the hero-link script.
     ============================================================ -->
<script>
(function () {
  var container = document.querySelector('.blog-nav-container');
  var content = document.querySelector('.blog_page_content .notion-page');
  if (!container || !content) return; /* not a blog post */

  var esc = function (s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  };

  var headings = Array.prototype.slice.call(content.querySelectorAll('h2, h3, h4'))
    .filter(function (h) { return h.id && h.id.indexOf('block-') === 0 && h.textContent.trim(); });
  if (headings.length < 2) return; /* short posts stay clean */

  var levels = headings.map(function (h) {
    var m = h.className.match(/notion-h(\d)/);
    return m ? parseInt(m[1], 10) : 1;
  });
  var minLevel = Math.min.apply(null, levels);

  container.innerHTML =
    '<div class="blog_navigator">' +
      '<div class="blog_navigator_title">On this page</div>' +
      '<div class="blog_navigator_inner_container">' +
        headings.map(function (h, i) {
          var indent = Math.min(levels[i] - minLevel, 2);
          return '<div class="toc toc-indent-' + indent + '"><a href="#' +
                 h.id.replace(/^block-/, '') + '">' + esc(h.textContent.trim()) + '</a></div>';
        }).join('') +
      '</div>' +
    '</div>';

  var links = Array.prototype.slice.call(container.querySelectorAll('a'));
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  /* smooth scroll with room for the floating navbar */
  links.forEach(function (a, i) {
    a.addEventListener('click', function (e) {
      e.preventDefault();
      var top = headings[i].getBoundingClientRect().top + window.pageYOffset - 110;
      window.scrollTo({ top: top, behavior: reduceMotion ? 'auto' : 'smooth' });
      history.replaceState(null, '', a.getAttribute('href'));
    });
  });

  /* scrollspy: highlight the section in view */
  function spy() {
    var current = 0;
    headings.forEach(function (h, i) { if (h.getBoundingClientRect().top <= 140) current = i; });
    links.forEach(function (a, i) { a.classList.toggle('active-toc', i === current); });
  }
  document.addEventListener('scroll', spy, { passive: true });
  spy();
})();
</script>

v2.2 file

v2.1 file