Feat improve mobile ux (#99)

* [feat] better mobile exp + better table of contents

* [chore] hidding manual tocs

* [chore] updating makefile

Author: johnlarkin1

Makefile

@@ -10,7 +10,7 @@ build-img:
 
 # build js
 build-js:
-	node gulp_js.js
+	node build_js.js --no-serve
 
 # the whole kit and kabootle
 jekyll:

_includes/toc.html

@@ -0,0 +1,14 @@
+{% if page.toc != false %}
+<aside class="toc" aria-label="Table of Contents">
+  <button class="toc__toggle" type="button" aria-expanded="false" aria-controls="toc-content">
+    <svg class="toc__icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M2 4h12v1H2V4zm0 3.5h12v1H2v-1zm0 3.5h8v1H2V11z"/>
+    </svg>
+    <span class="toc__title">Contents</span>
+    <svg class="toc__chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M2 4l4 4 4-4"/>
+    </svg>
+  </button>
+  <nav id="toc-content" class="toc__nav"></nav>
+</aside>
+{% endif %}

_js/scripts.js

@@ -23,6 +23,7 @@ $(document).ready(function () {
   initPinnedCarousel();
   initContactHub();
   initSearch();
+  initTableOfContents();
 
   // Initialize Python runners if present
   if ($(".interactive-python").length > 0) {
@@ -940,6 +941,98 @@ function initScrollIndicator() {
   });
 }
 
+/*-------------------------------------------------------------------------*/
+/* TABLE OF CONTENTS */
+/* -----------------------------------------------------------------------*/
+
+function initTableOfContents() {
+  var $toc = $('.toc');
+  if ($toc.length === 0) return;
+
+  var $toggle = $toc.find('.toc__toggle');
+  var $nav = $toc.find('.toc__nav');
+
+  // Generate TOC from headers (h1, h2, h3, h4) - skip "Table of Contents" header
+  var $headers = $('.post-content').find('h1, h2, h3, h4').filter(function() {
+    var text = $(this).text().trim();
+    // For comparison, strip emojis/special chars but check original text isn't empty
+    var textForComparison = text.toLowerCase().replace(/[^\w\s]/g, '').trim();
+    return textForComparison !== 'table of contents' && text.length > 0;
+  });
+
+  if ($headers.length === 0) {
+    $toc.hide();
+    return;
+  }
+
+  var $list = $('<ul class="toc__list"></ul>');
+  $headers.each(function () {
+    var $h = $(this);
+    // Get the full text content including emojis
+    var text = $h.text().trim();
+    var level = this.tagName.toLowerCase();
+    var id = $h.attr('id');
+    if (!id) {
+      // Generate ID from text, removing emojis and special chars for valid ID
+      id = 'toc-' + text.toLowerCase()
+        .replace(/[\u{1F300}-\u{1FAF8}]/gu, '') // Remove emojis from ID
+        .replace(/[^\w\s-]/g, '')
+        .trim()
+        .replace(/\s+/g, '-')
+        .substring(0, 50);
+      $h.attr('id', id);
+    }
+
+    var $item = $('<li class="toc__item toc__item--' + level + '"></li>');
+    var $link = $('<a class="toc__link" href="#' + id + '"></a>');
+    $link.text(text); // Preserves emojis
+    $item.append($link);
+    $list.append($item);
+  });
+  $nav.append($list);
+
+  // Toggle functionality - starts collapsed on all devices
+  $toggle.on('click', function () {
+    var expanded = $(this).attr('aria-expanded') === 'true';
+    $(this).attr('aria-expanded', !expanded);
+    $nav.toggleClass('is-open');
+  });
+
+  // Scroll spy
+  var $links = $toc.find('.toc__link');
+  var scrollTimer;
+  $(window).on('scroll.toc', function () {
+    clearTimeout(scrollTimer);
+    scrollTimer = setTimeout(function () {
+      var scrollPos = $(window).scrollTop() + 100;
+      var activeId = null;
+      $headers.each(function () {
+        if (scrollPos >= $(this).offset().top) {
+          activeId = $(this).attr('id');
+        }
+      });
+      $links.removeClass('is-active');
+      if (activeId) {
+        $links.filter('[href="#' + activeId + '"]').addClass('is-active');
+      }
+    }, 50);
+  });
+
+  // Smooth scroll on click
+  $links.on('click', function (e) {
+    e.preventDefault();
+    var $target = $($(this).attr('href'));
+    if ($target.length) {
+      $('html, body').animate({ scrollTop: $target.offset().top - 80 }, 400);
+      // Close on mobile after click
+      if ($(window).width() < 992) {
+        $toggle.attr('aria-expanded', 'false');
+        $nav.removeClass('is-open');
+      }
+    }
+  });
+}
+
 /*-------------------------------------------------------------------------*/
 /* CODE TOGGLE FUNCTIONALITY */
 /* -----------------------------------------------------------------------*/

_layouts/post.html

@@ -64,6 +64,7 @@ <h1 class="hero__title">{{ page.title }}</h1>
   <main class="site__content">
     <div class="container">
       <article class="post-content" itemprop="articleBody" data-pagefind-body>
+        {% include toc.html %}
         {% if page.encrypted %} 
           <body>
             <div class="protected">

_posts/2022-03-27-porvata-spar.md

@@ -25,6 +25,7 @@ As an aside, and this is more biased obviously, but I've seen how hard both Nick
 
 So let's dive in.
 
+<!--
 # Table of Contents
 
 - [Background](#background)
@@ -54,6 +55,7 @@ So let's dive in.
     - [Logging](#logging)
     - [Linting and GitHooks](#linting-and-githooks)
 - [Conclusion](#conclusion)
+-->
 
 # Introduction
 

_posts/2022-06-05-message-parser.md

@@ -17,6 +17,7 @@ However, a pretty simple workaround is utilizing the sqlite3 database that's pop
 
 <span style="color:blue">Note, if you're just interested in code, you can skip all this and check out <a href="https://github.com/johnlarkin1/imessage-cli">this repo</a>.</span>
 
+<!--
 # Table of Contents
 
 - [Background](#background)
@@ -46,6 +47,7 @@ However, a pretty simple workaround is utilizing the sqlite3 database that's pop
     - [Total Number of Distinct Convos](#total-number-of-distinct-convos)
       - [Examples](#examples-4)
 - [Conclusion](#conclusion)
+-->
 
 # Introduction
 

_posts/2023-03-03-chrome-betting-kelly.md

@@ -10,6 +10,7 @@ favorite: true
 
 Much to the knowledge of my friends (and to the chagrin of my mother), I do fancy a good tennis bet every now and then. And this blog is going to unpack some of that.
 
+<!--
 # Table of Contents
 
 First, a quick overview of what we'll be covering.
@@ -35,6 +36,7 @@ First, a quick overview of what we'll be covering.
     - [An Example](#an-example)
 - [Analysis Results](#analysis-results)
 - [Conclusion](#conclusion)
+-->
 
 # Introduction
 

_posts/2024-02-20-into-the-arena.md

@@ -9,6 +9,7 @@ favorite: true
 pinned: 6
 ---
 
+<!--
 # Table of Contents
 
 - [Table of Contents](#table-of-contents)
@@ -52,6 +53,7 @@ pinned: 6
     - [Deeper Understanding and New Technical Skills](#deeper-understanding-and-new-technical-skills)
   - [Next Steps 🪜](#next-steps-)
   - [Dendrogram Visualization](#dendrogram-visualization)
+-->
 
 # Motivation
 

_posts/2024-11-19-book-brain.md

@@ -7,6 +7,7 @@ summary: Automating book reports. An exploration into chunking, qdrant, and embe
 favorite: true
 ---
 
+<!--
 # Table of Contents
 
 - [Table of Contents](#table-of-contents)
@@ -40,6 +41,7 @@ favorite: true
     - [Outside of the LLMs themselves, what other tools should you use in this process? Vector DBs, indexers, RAG tooling, etc?](#outside-of-the-llms-themselves-what-other-tools-should-you-use-in-this-process-vector-dbs-indexers-rag-tooling-etc)
 - [Conclusion](#conclusion)
 - [Next Steps](#next-steps)
+-->
 
 # Motivation
 

_posts/2024-12-31-advent-of-code.md

@@ -8,6 +8,7 @@ categories: [Advent of Code, Dev]
 summary: Slogging through Advent of Code 2024
 ---
 
+<!--
 # Table of Contents
 
 - [Table of Contents](#table-of-contents)
@@ -32,6 +33,7 @@ summary: Slogging through Advent of Code 2024
 - [Code](#code)
   - [Solutions](#solutions)
   - [Closing Thoughts](#closing-thoughts)
+-->
 
 # Introduction