I use Org Mode's table of contents directive to include a table of contents in blog posts. I wrap it inside a sticky-toc block to indicate when I want it to be part of the sticky table of contents on my blog. In Org Mode, the syntax looks like this:

#+begin_sticky-toc
#+TOC: headlines 2 local
#+end_sticky-toc

I put it in a yasnippet so that I don't have to remember it. I just type tocs (for TOC, sticky) and then press TAB to complete it.

After exporting individual HTML files from Org Mode, I turn them into my blog using the 11ty static site generator. To simplify my archive pages, I have an onThisPage shortcode which lists the posts on that page. I changed it to include the sticky-toc contents from the items' templateContent attributes.

const { JSDOM } = require('jsdom');

module.exports = function (eleventyConfig) {
  function formatPostLine(item, index) {
    let subtoc = '';
    if (item.templateContent?.match(/sticky-toc/)) {
      const doc = new JSDOM(item.templateContent).window.document;
      const sub = doc.querySelector('.sticky-toc ul, .sticky-toc div, .sticky-toc-after-scrolling div');
      if (sub) {
        if (sub.querySelector('.panzoom')) {
          console.log('remove panzoom');
          sub.querySelector('.panzoom').classList.remove('panzoom');  // don't do panzoom for now
        }
        sub.classList.remove('panzoom');
        subtoc = sub.outerHTML;
      }
    }
    return `<li><a class="toc-link" data-index="index${index}" href="${item.url}">${item.data.title}</a>${subtoc}</li>`;
  }
  eleventyConfig.addShortcode('onThisPage', function (list) {
    return `<nav class="on-this-page">
On this page:
<ul>
${list.map(formatPostLine).join("\n")}
</ul>
</nav>`;
  });
};

And then there's a bunch of CSS in assets/css/style.css:

/* tables of contents */
.on-this-page > ul > li > ul, .on-this-page > ul > li > div { display: none }

@media only screen and (width >= 95em) {
    html, body { overflow-x: unset; }

    .sticky-toc, .sticky-left, .sticky-right {
        font-size: var(--fs-sm);
        width: calc((100vw - var(--body-max-width) - 5rem)/2);
        position: sticky;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        scroll-behavior: smooth;
        background: var(--modus-bg-main);
        top: 0;
        padding: 1rem;
    }

    article .sticky-toc {
        display: none
    }

    .single-post article .sticky-toc {
        display: block;
    }

    .sticky-toc, .sticky-left, .single-post article .sticky-toc {
        margin-left: calc((-100vw + var(--body-max-width))/2);
        float: left;
    }

    .sticky-right {
        margin-right: calc((-100vw + var(--body-max-width))/2);
        float: right;
    }

    /* Hide the TOCs for non-active posts, but only if JS is enabled */
    .js .on-this-page > ul > li > ul, .js .on-this-page > ul > li > div { display: none }
    .on-this-page > ul > li.post-active > ul, .on-this-page > ul > li.post-active > div { display: block }

    .active { background-color: var(--modus-bg-tab-bar) }

    .sticky-toc svg .active rect {
        fill: var(--modus-bg-tab-bar) !important;
        fill-opacity: 1 !important;
        mix-blend-mode: darken;
        stroke-dash-array: unset !important;
        stroke-width: 4px;
    }

    .link-to-nonsticky-toc {
        display: none
    }
}

I also have some Javascript to highlight the active post and show the subheadings for it in assets/js/misc.js.

/* Table of contents */

function stickyTocAfterScrolling() {
  const elements = document.querySelectorAll('.single-post .sticky-toc-after-scrolling');
  let lastScroll = window.scrollY;

  elements.forEach(element => {
    const clone = element.cloneNode(true);
    clone.setAttribute('class', 'sticky-toc');
    clone.querySelector('.panzoom')?.classList.remove('panzoom');
    element.parentNode.insertBefore(clone, element.nextSibling);
  });

  const observer = new IntersectionObserver(
    (entries) => {
      const currentScroll = window.scrollY;
      const scrollingDown = currentScroll > lastScroll;
      lastScroll = currentScroll;

      entries.forEach(entry => {
        const element = entry.target;
        const clone = cloneMap.get(element);

        if (!entry.isIntersecting && scrollingDown) {
          clone.setAttribute('class', 'sticky-toc');
          clone.style.display = 'block';
        } else if (entry.isIntersecting && !scrollingDown) {
          element.style.visibility = 'visible';
          clone.style.display = 'none';
        }
      });
    },
    {
      root: null,
      threshold: 0,
      rootMargin: '-10px 0px 0px 0px'
    }
  );

  elements.forEach(element => {
    observer.observe(element);
  });

  window.addEventListener('resize', () => {
    elements.forEach(element => {
      const clone = cloneMap.get(element);
      if (clone.style.display != 'none') {
        // reset didn't seem to work
        svgPanZoom(clone.querySelector('svg')).destroy();
        addPanZoomToElement(clone.querySelector('svg'));
      }
    });
  }, { passive: true });
}

stickyTocAfterScrolling();

function scrollToActiveTocLink() {
  const activeLink = document.querySelector('.sticky-toc .active');
  const tocContainer = document.querySelector('.sticky-toc');
  if (!activeLink || !tocContainer) return;
  const tocRect = tocContainer.getBoundingClientRect();
  const linkRect = activeLink.getBoundingClientRect();
  if (linkRect.top < tocRect.top || linkRect.bottom > tocRect.bottom) {
    const scrollPosition = linkRect.top + tocContainer.scrollTop -
                          (tocRect.height / 2) + (linkRect.height / 2);
    tocContainer.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  }
}
function getVisibleArticle() {
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  return [...document.querySelectorAll('article')].find((article) => {
    const rect = article.getBoundingClientRect();
    const visibleTop = Math.max(0, rect.top);
    const visibleBottom = Math.min(viewportHeight, rect.bottom);
    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
    return visibleHeight > 0; // find the first visible one
  });
}

function handleActiveTOCLink() {
  const updateActive = function(links, active) {
    const activeFragment = active.includes('#') ?
          active.substring(active.indexOf('#')) : '';
    links.forEach(link => {
      const href = link.getAttribute('href');
      if (href.includes(window.location.origin)) {
        link.classList.toggle('active', href == active)
      } else if (href.startsWith('#')) {
        link.classList.toggle('active', href == activeFragment);
      }
    });
  };
  const posts = document.querySelectorAll('.post');
  const tocLinks = document.querySelectorAll('.on-this-page .toc-link');
  const options = {
    root: null,
    rootMargin: '-20% 0px -70% 0px',
    threshold: 0
  };
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const id = entry.target.id;
        const link = document.querySelector(`.toc-link[data-index="${id}"]`);
        document.querySelectorAll('.sticky-toc .active').forEach((o) => o.classList.remove('active'));
        document.querySelectorAll('.post-active').forEach((o) => o.classList.remove('post-active'));
        if (link) {
          link.classList.add('active');
          const item = link.closest('li');
          item.classList.add('post-active');
        }
      }
    });
    scrollToActiveTocLink();
  }, options);
  posts.forEach((post) => { observer.observe(post); });

  const stickyTocLinks = document.querySelectorAll('article .sticky-toc a, .on-this-page a');
  const postTocObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const id = entry.target.id;
        const url = window.location.origin + window.location.pathname + '#' + id.replace(/^outline-container-/, '');
        updateActive(stickyTocLinks, url);
      }
    });
    scrollToActiveTocLink();
  }, options);

  document.querySelectorAll('article .sticky-toc, article .sticky-toc-after-scrolling').forEach((toc) => {
    const post = toc.closest('article');
    if (post) {
      post.querySelectorAll('.outline-2, .outline-3').forEach((section) => { postTocObserver.observe(section) });
    }
  });
  const visible = getVisibleArticle();
  const id = visible?.id;
  if (id) {
    const activeLink = document.querySelector(`.toc-link[data-index="${id}"]`);
    if (activeLink) {
      activeLink.classList.add('active');
      activeLink.closest('li').classList.add('post-active');
      scrollToActiveTocLink();
    }
  }
}
handleActiveTOCLink();

I sometimes want to use sketchnotes as overviews, especially if I've added hyperlinks to them. I used to make the images show up on the right side, but now I want them to show up in the left-side navigation instead. Also, I wanted any links to headings to automatically get recoloured as I scroll to that heading.

I added a special case to the handleActiveTOCLink function to handle anchor hyperlinks (just #anchor) in the SVG. It probably makes sense to make those absolute URLs, which means slightly changing my workflows for hyperlinking SVGs and writing about sketches.

So on both the category page (ex: the Hyperlinking SVGs entry in category - drawing, which might have moved off the first page of results if you're reading this far in the future) and the single-post page (ex: Hyperlinking SVGs), there's a full-sized version of the image in the main blog post, and then a small copy of it in the margin on the left. The sidebar copy is probably too small to read, but it might be enough to get a sense of spatial relationships, and the links also have title attributes that are displayed as tooltips when you hover.

I use Javascript to duplicate the image and make a small, sticky version because I haven't quite figured out how to properly make it sticky when off-screen with just CSS. Even my JS feels a little tangled. Maybe this would be a good excuse to learn about web components; someone's probably figured out something polished.

I'm curious about using more drawings to anchor my thinking and structure my blog posts.

Some people read my blog using EWW (the Emacs Web Wowser, of course), so I want my blog to be reasonable even without CSS and JS.

A number of people read my blog without Javascript enabled. I installed the Firefox extension Script Switch so that I can test my blog with and without Javascript whenever I remember.

I sometimes look up my blog posts on my phone and there's no space for any of this fanciness there, so it'll only kick in on large screens. My CSS file is littered with various breakpoints I've cargo-culted over the years and I should simplify it at some point. At the moment, if it looks fine on my Lenovo P52, I'm happy.

Theoretically, the right margin is now available for sidenotes, so I might be able to look at ox-tufte and Eleventufte and get something going. Then I'll have a way to add small notes that are shorter than a paragraph. Longer tangents can go in a details/summary element instead, although I have it on good authority that one can write at length in footnotes. I love the footnotes in the Bartimaeus series, and apparently there are quite a few books where the footnotes are part of the storytelling.)

It might be nice to let tables extend into the right sidebar when I know I won't have a doodle nearby. Incidentally, Sidenotes In Web Design · Gwern.net uses breadcrumbs in the left sidebar instead of a table of contents, so there's more space for tables and sidenotes.

I thought about using CSS breakpoints so that on a medium-sized screen, we can have the left sidebar even if there's no space for something on the right. I haven't gotten around to experimenting with it yet, though. Besides, I don't know yet if I want to prioritize the stuff I want in the right sidebar (side notes, doodles) over fairly-static navigation.

As I mentioned, it might be handy to tweak my SVG linking workflow to use absolute URLs.

Sometimes I look up my notes within Emacs, but surprisingly often, I look them up on the Web. Navigation isn't just cosmetic. I want to get better at using my blog as a tool for thought, so tinkering with layout isn't just window dressing. It's (very slowly) experimenting with scaffolding for my brain. Little things can help!

In February, I wrote I wanted to:

• Practise being calmer and more easygoing; get better at thinking in terms of experiments
  • Progress!
• Take A+ on more informal field trips: Royal Ontario Museum, pottery class
  • Didn't make it to the ROM, made it to pottery and other places
• Start digging into the ideas and tasks I've been postponing
  • Barely any progress on this; I keep coming up with new ideas!
• Finish the Simply Piano course and start working on sheet music for the songs A+ wants to sing
  • I managed to finish the beginner course and now I'm mid-way through the intermediate ones
• Practise singing scales while waiting for A+ to catch up with Simply Sing
  • She caught up and went beyond me, yay! I'm still definitely off-key, but we can sing enough to have fun
• Automate the BigBlueButton setup a bit more so that I don't forget about meetups
  • … forgot to check on my automation, but was able to scramble things together in time for a meetup

The weather's starting to warm up. Skating season is pretty much over, but now we're moving into biking season and picnic season, so that's all good. We had a couple of outdoor playdates and we hosted one of her friends for backyard pizza-making. A+'s been biking more, too. Hooray!

I continue to work on fretting less about A+'s schoolwork. Creativity and playfulness tend to work better for her anyway. For example, she tends to respond well if I invite her to do the homework on my lap, or if I challenge her to dictate her math answers in Chinese, or if I ask her to answer while she's upside down. Scheduling my fretting for one day a week seems to help me not worry too much the rest of the time. On Saturdays, I make a checklist of work that still remains, but I'm not terribly attached to whether it all gets done that day. I find it easier to back off when I remind myself of the long-term perspectives:

• I want her to figure out how to do things even without me pushing.
• Failure is data. Early failure is useful, too. It's good to try things out while the stakes are low.
• It might not be a problem. Even if it's a problem, it might not be her problem.
• School is a small part of the picture, and grades just provide feedback on whether A+ has demonstrated the skills they're looking for in a way that they can evaluate. Some things are easier if you do well in school, but there are many other paths.
• This is her experiment, not mine.
• Also, learning how to let her try things out for herself will help me even more when she becomes a teenager, so it's good for me to learn while the stakes are low too

An easy way to distract myself from fretting by focusing on the things I want to learn and do. I've added piano practice to my daily routine, which is an interesting way to check on how distractible my mind is. There's also writing, coding, tidying up around the house… Plenty of things to keep me busy.

I've been going for more walks, too. Finally started tromping around the paths in the park. I usually clip my lapel mic on for those walks, since they're a good opportunity to braindump. I'm definitely not as coherent as Prot, but maybe with practice, I'll get the hang of exploring my thoughts in a linear way. One of the nice things about thinking out loud this way is realizing quite quickly where the limits of my thoughts are, where I trail off into vagueness or tangled words.

I like to draw as a way to help me untangle my thoughts. I enjoyed drawing more this month, including some fun experiments with drawing feelings. I ordered a screen protector and a pencil grip from Paperlike. With that, I think I'm fairly comfortable drawing on the iPad now. My SuperNote A5X has been a bit neglected, but there's been a system update that added stickers, so that might be fun to check out. Drawing is one of the types of homework that A+ regularly procrastinates, but she responds better if I draw along with her. It's great. I get a weekly source of drawing prompts thanks to Grade 3 structured literary analysis homework. I haven't been following drawing tutorials as much these days. Maybe that's something that might be fun to pick up again.

It's getting easier and easier to talk myself down from fretting as I watch A+ enjoy the growth in her self-efficacy. She can do so many more things for herself now. She figured out how to swing across the rotating monkey bars that she couldn't reach before, and connected the idea of momentum to homework. She was proud of getting to level 7 in the Simply Sing app, and of her 6+-week streak. She experimented with different story ideas. She hiked through freezing rain with her nature club. She even proudly chose and bought herself some groceries.

A+ asked for more field trips, so I tried to plan at least one interesting activity a week, sometimes pulling her out of virtual school after afternoon recess. It worked out really well, I think. We were able to enjoy the sunshine, spend time exploring the world around us. QUick notes:

• cubing comp (A+ did 2x2, 3x3, and Pyraminx): A+'s been going to an online cubing club, so she's been practising on and off, but her current hyperfocus is singing instead of cubing. Still, she was happy with how she did, and she enjoyed volunteering as a judge. This was a bit of a last-minute registration for us, so I've added a TODO to check for upcoming competitions at the start of the year.
• a public library with 3D printers: A+ wanted to try printing a model that she made at the library's Tinkercad workshop. She also wanted to print a cube stand. Both worked out pretty well. It was a nice bike trip to the Fort York library. A+ hasn't come up with more print ideas yet and neither have I, but it's nice to know that the resources are available.
• a pottery wheel lesson: she's interested in more pottery wheel practice and also a painting workshop. She's not interested in hand-building yet and she still needs my help with the wheel. Could be fun to explore together.
• Ripley's Aquarium: she enjoyed petting the stingrays and looking at the sharks. I forgot to take advantage of the Presto discount, whoops! Anyway, I'll see when A+ wants to go again. If I think we'll be there frequently, then we can get a membership.
• The homeschoolers' playgroup: It was nice to reconnect with friends at the park now that they're coming out of hibernation.

A+'s a little behind on schoolwork, but I think that's more of a matter of motivation rather than knowledge, and we'll be able to catch up. I'm looking forward to exploring more things next month and seeing what we can get away with.

• Emacs:
  • Org:
    • Reading more blogs; Emacs Lisp: Listing blogs based on an OPML file
    • Getting an Org link URL from a string; debugging regex groups
    • Remove open Org Mode clock entries
    • Org Mode: Merge top-level items in an item list
    • Org Mode: Cutting the current list item (including nested lists) with a speed command
  • Mastodon:
    • mastodon.el: Collect handles in clipboard (Emacs kill ring)
    • mastodon.el: Copy toot URL after posting; also, copying just this post with 11ty
    • mastodon.el: Copy toot content as Org Mode
• Blogging:
  • Old-school blogger - I enjoyed this opportunity to look back and look forward
  • Playing with chunk size when writing
  • On this day
  • Tweaking my 11ty blog to link to the Mastodon post defined in an Org Mode property
  • Moving 18 years of comments out of Disqus and into my 11ty static site
• Drawing: These were fun to draw!
  • Stick figure out feelings
  • Feline feelings
• Life:
  • Reflecting on my conscientiousness (or whatever the opposite is)
  • Visual book notes: ADHD is Awesome - Penn and Kim Holderness (2024)
• Reviews:
  • Monthly review: February 2025
  • Weekly review: Week ending March 21, 2025
  • Week ending March 28, 2025: mastodon.el tweaks, search, workflows
• Emacs News:
  • 2025-03-03 Emacs news
  • 2025-03-10 Emacs news
  • 2025-03-17 Emacs news
  • 2025-03-24 Emacs news
  • 2025-03-31 Emacs news

• 2025-03-16-01 Old-school blogger – blogging writing.jpeg
• 2025-03-20-01 ADHD is Awesome #visual-book-notes #adhd.jpeg
• 2025-03-22-02 Stick figure out feelings – drawing emotions.svg
• 2025-03-24-03 Field trip: Ripley's Aquarium – FieldTrip nature.jpeg
• 2025-03-26-01 Feline feelings – drawing emotions.svg
• 2025-03-31-05 March 2025 – monthly review.jpeg

Thanks to my resolution to fret less, I'm spending less time on childcare (A+) and more time exploring my own interests (Discretionary - Productive). I've even been doing a little less consulting. It feels good. I'm still around in case she wants help, but now I get to explore things I want to do.

Let's break that discretionary/consulting time down:

Ah, yes, mostly music. We have a Yamaha YDP-113 piano which is finally getting played, yay me (and yay W-'s decision to get it about two decades ago). I want to get the hang of at least Simply Sing's intermediate lessons so I can finally play those Disney songs at a consistent tempo, which means A+ will be able to sing instead of having to stop and restart as I stumble on notes. Plus music has a way of gently pointing out when my attention wanders, so there's that. This feels like a reasonably good use of my time.

• Get better at enjoying life with A+ and W-
  • Keep replacing fretting with snuggles and connection
  • Look for more field trip possibilities
  • Explore more recipes, especially as more local produce becomes available
• Playdates:
  • Popsicles, biking, farmers markets… fun fun fun!
• Gardening:
  • Start some seedlings indoors (bitter melon, cherry tomatoes, marigolds, basil; maybe cucumber?)
  • Convert the rest of the grass into garden and amend the soil
  • Direct-sow lettuce, poppies
• Sewing:
  • Might be good to start thinking about sewing more skirts and dresses for A+ and me, and probably new swimwear too.
• Habits:
  • Continue with piano, walking/biking, writing, drawing
  • Ease into some kind of strength thing? Grip strength might be a good place to start. Maybe I can learn some hand-strengthening exercises I can do next time A+'s doing homework on my lap.

One challenge: there are a lot of comments. How many? I got curious about analyzing the XML, and then of course I wanted to do that from Emacs. I used pipx install yq to install yq so that I could use the xq tool to query the XML, much like jq works.

My uncompressed Disqus XML export was 28MB. I spent some time deleting spam comments through the web interface, which helped with the filtering. I also deleted some more comments from the XML file as I noticed them. I needed to change /wp/ to /blog/, too.

This is how I analyzed the archive for non-deleted posts, uniquified based on message. I'll include the full Org source of that block (including the header lines) in my blog post so that you can see how I call it later.

#+NAME: analyze-disqus
#+begin_src shell :var rest="| length | \"\\(.) unique comments\"" :exports results
~/.local/bin/xq -r "[.disqus.post[] |
   select(.isDeleted != \"true\" and .message) |
   {key: .message, value: .}] |
  map(.value) |
  unique_by(.message) ${rest}" < disqus.xml
#+end_src

When I evaluate that with C-c C-c, I get:

8265 unique comments

I was curious about how it broke down by year. Because I named the source code block and used a variable to specify how to process the filtered results earlier, I can call that with a different value.

Here's the call in my Org Mode source:

#+CALL: analyze-disqus(rest="| map(.createdAt[0:4]) | group_by(.) | map([(.[0]), length]) | reverse | [\"Year\", \"Count\"], .[] | @csv") :results table output :wrap my_details Table of comment count by year

I tried fiddling around with Org's #+PLOT keyword, but I couldn't figure out how to get the bar graph the way I wanted it to be. Someday, if I ever figure that out, I'll definitely save the Gnuplot setup as a snippet. For now, I visualized it using seaborn instead.

import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt
import numpy as np

df = pd.DataFrame(data[1:], columns=data[0])
df['Count'] = df['Count'].astype(int)
df['Year'] = df['Year'].astype(int)
df = df.sort_values('Year')
plt.figure(figsize=(12, 6))
ax = sns.barplot(x='Year', y='Count', data=df)
plt.title('Comments by Year (2007-2025)', fontsize=16, fontweight='bold')
plt.xlabel('Year')
plt.ylabel('Comments')
plt.xticks(rotation=45)
plt.grid(axis='y')
for i, v in enumerate(df['Count']):
    ax.text(i, v + 20, str(v), ha='center', fontsize=9)
plt.tight_layout()
plt.savefig('year_count_plot.svg')
return 'year_count_plot.svg'

Ooooooh, I can probably cross-reference this with the number of posts from my /blog/all/index.json file. I used Claude AI's help to come up with the code below, since merging data and plotting them nicely is still challenging for me. Now that I have the example, though, maybe I can do other graphs more easily. (This looks like a related tutorial on combining barplots and lineplots.)

import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt
import numpy as np
import json
from matplotlib.ticker import FuncFormatter
from datetime import datetime

with open('/home/sacha/proj/static-blog/_site/blog/all/index.json', 'r') as f:
    posts_data = json.load(f)

# Process post data
posts_df = pd.DataFrame(posts_data)
posts_df['Year'] = pd.to_datetime(posts_df['date']).dt.year
post_counts = posts_df.groupby('Year').size().reset_index(name='post_count')

# Convert to DataFrame
comments_df = pd.DataFrame(comment_data[1:], columns=comment_data[0])
comments_df['Count'] = comments_df['Count'].astype(int)
comments_df['Year'] = comments_df['Year'].astype(int)

# Merge the two dataframes
merged_df = pd.merge(post_counts, comments_df, on='Year', how='outer').fillna(0)
merged_df = merged_df.sort_values('Year')

# Calculate comments per post ratio
merged_df['comments_per_post'] = merged_df['Count'] / merged_df['post_count']
merged_df['comments_per_post'] = merged_df['comments_per_post'].replace([np.inf, -np.inf], np.nan).fillna(0)

# Create a single figure instead of two subplots
fig, ax1 = plt.subplots(figsize=(15, 8))

# Custom colors
post_color = "#1f77b4"    # blue
comment_color = "#ff7f0e" # orange
ratio_color = "#2ca02c"   # green

# Setting up x-axis positions
x = np.arange(len(merged_df))
width = 0.35

# Bar charts on first y-axis
bars1 = ax1.bar(x - width/2, merged_df['post_count'], width, color=post_color, label='Posts')
bars2 = ax1.bar(x + width/2, merged_df['Count'], width, color=comment_color, label='Comments')
ax1.set_ylabel('Count (Posts & Comments)', fontsize=12)

# Add post count values above bars
for i, bar in enumerate(bars1):
    height = bar.get_height()
    if height > 0:
        ax1.text(bar.get_x() + bar.get_width()/2., height + 5,
                f'{int(height)}', ha='center', va='bottom', color=post_color, fontsize=9)

# Add comment count values above bars
for i, bar in enumerate(bars2):
    height = bar.get_height()
    if height > 20:  # Only show if there's enough space
        ax1.text(bar.get_x() + bar.get_width()/2., height + 5,
                f'{int(height)}', ha='center', va='bottom', color=comment_color, fontsize=9)

# Line graph on second y-axis
ax2 = ax1.twinx()
line = ax2.plot(x, merged_df['comments_per_post'], marker='o', color=ratio_color,
              linewidth=2, label='Comments per Post')
ax2.set_ylabel('Comments per Post', color=ratio_color, fontsize=12)
ax2.tick_params(axis='y', labelcolor=ratio_color)
ax2.set_ylim(bottom=0)

# Add ratio values near line points
for i, ratio in enumerate(merged_df['comments_per_post']):
    if ratio > 0:
        ax2.text(i, ratio + 0.2, f'{ratio:.1f}', ha='center', color=ratio_color, fontsize=9)

# Set x-axis labels
ax1.set_xticks(x)
ax1.set_xticklabels(merged_df['Year'], rotation=45)
ax1.set_title('Blog Posts, Comments, and Comments per Post by Year', fontsize=16, fontweight='bold')
ax1.grid(axis='y')

# Add combined legend
lines1, labels1 = ax1.get_legend_handles_labels()
lines2, labels2 = ax2.get_legend_handles_labels()
ax1.legend(lines1 + lines2, labels1 + labels2, loc='upper left')

# Layout and save
plt.tight_layout()
plt.savefig('posts_comments_analysis.svg')
return 'posts_comments_analysis.svg'

Timeline notes:

• In this graph, comments are reported by the timestamp of the comment, not the date of the post.
• In 2007 or so, I moved to Wordpress from planner-rss.el. I think I eventually imported those Wordpress comments into Disqus when I got annoyed with Wordpress comments (Akismet? notifications?).
• In 2008 and 2009, I was working on enterprise social computing at IBM. I made a few presentations that were popular. Also, mentors and colleagues posted lots of comments.
• In 2012, I started my 5-year experiment with semi-retirement.
• In 2016, A+ was born, so I wrote much fewer posts.
• In 2019/2020, I wrote a lot of blog posts documenting how I was running EmacsConf with Emacs, and other Emacs tweaks along the way. The code is probably very idiosyncratic (… unless you happen to know other conference organizers who like to do as much as possible within Emacs? Even then, there are lots of assumptions in the code), but maybe people picked up useful ideas anyway. =)

What were my top 20 most-commented posts?

(let* ((json-object-type 'alist)
       (json-array-type 'list)
       (comments-json (json-read-file "~/proj/static-blog/_data/commentsCounts.json"))
       (posts-json (json-read-file "~/proj/static-blog/_site/blog/all/index.json"))
       (post-map (make-hash-table :test 'equal)))
  ;; map permalink to title
  (dolist (post posts-json)
    (let ((permalink (cdr (assoc 'permalink post)))
          (title (cdr (assoc 'title post))))
      (puthash permalink title post-map)))
  ;; Sort comments by count (descending)
  (mapcar
   (lambda (row)
     (list
      (cdr row)
            (org-link-make-string
       (concat "https://sachachua.com" (symbol-name (car row)))
       (with-temp-buffer
         (insert (or (gethash (symbol-name (car row)) post-map) (symbol-name (car row))))
         (mm-url-decode-entities)
         (buffer-string)))))
   (seq-take
    (sort comments-json
          (lambda (a b) (> (cdr a) (cdr b))))
    n)))

Top 3 by year. Note that this goes by the timestamp of the post, not the comment, so even old posts are in here.

(let* ((json-object-type 'alist)
       (json-array-type 'list)
       (comments-json (json-read-file "~/proj/static-blog/_data/commentsCounts.json"))
       (posts-json (json-read-file "~/proj/static-blog/_site/blog/all/index.json"))
       by-year)
  (setq posts-json
        (mapcar
         (lambda (post)
           (let ((comments (alist-get (intern (alist-get 'permalink post)) comments-json)))
             (if comments
                 (cons (cons 'comments (alist-get (intern (alist-get 'permalink post)) comments-json 0))
                       post)
               post)))
         posts-json))
  (setq by-year
        (seq-group-by
         (lambda (o)
           (format-time-string "%Y"
                               (date-to-time
                                (alist-get 'date o))
                               "America/Toronto"))
         (seq-filter (lambda (o) (alist-get 'comments o)) posts-json)))
  (org-list-to-org
   (cons 'unordered
         (seq-keep
          (lambda (year)
            (list
             (org-link-make-string (concat "https://sachachua.com/blog/" (car year))
                                   (car year))
             (cons 'unordered
                   (mapcar
                    (lambda (entry)
                      (list (format "%s (%d)"
                                    (org-link-make-string
                                     (concat "https://sachachua.com" (alist-get 'permalink entry))
                                     (with-temp-buffer
                                       (insert (alist-get 'title entry))
                                       (mm-url-decode-entities)
                                       (buffer-string)))
                                    (alist-get 'comments entry))))
                    (seq-take
                     (sort
                      (cdr year)
                      (lambda (a b) (> (alist-get 'comments a)
                                       (alist-get 'comments b))))
                     n)))))
          (nreverse by-year)))))

• 2025
  • Using image-dired to browse the latest screenshots from multiple directories (2)
  • Changing planet.emacslife.com (2)
  • 2025-03-03 Emacs news (2)
• 2024
  • Using an Emacs Lisp macro to define quick custom Org Mode links to project files; plus URLs and search (6)
  • Excerpts from a conversation with John Wiegley (johnw) and Adam Porter (alphapapa) about personal information management (5)
  • Yay Emacs 1: EmacsConf 2023 report, SVG animation, Embark, Org Mode links (4)
• 2023
  • How I keep track of new Emacs packages (3)
  • Automatically refiling Org Mode headings based on tags (3)
  • Building up my tech notes (2)
• 2022
  • Recoloring my sketches with Python (5)
  • Late-night braindumps by talking to myself (3)
  • 2022-01-24 Emacs news (2)
• 2021
  • A list of sharks that are obligate ram ventilators (6)
  • Org Mode: Insert YouTube video with separate captions (6)
  • Thinking about Emacs community maintenance (6)
• 2020
  • Why I love free software (9)
  • Python+FontForge+Org: I made a font based on my handwriting! (7)
  • 2020-12-14 Emacs news (5)
• 2019
  • Turning an Org Mode outline into an HTML table with a column for more notes (10)
  • Tweaking Emacs on Android via Termux: xclip, xdg-open, syncthing conflicts (9)
  • Visual Book Notes: No-Drama Discipline (2014) (6)
• 2018
  • 2018-04-09 Emacs news (6)
  • A- and household life (5)
  • Using Org Mode, LaTeX, Beamer, and Medibang Paint to make a children's book (4)
• 2017
  • Quick notes on my current interface for time-tracking (9)
  • Working around my phone plan’s lack of roaming (8)
  • Emacs: Pasting with the mouse without moving the point – mouse-yank-at-point (5)
• 2016
  • Using categories to organize your Org agenda (16)
  • 2016-01-16 Emacs Hangout (9)
  • Microphthalmia: small eye (8)
• 2015
  • Let’s have a virtual Emacs conference in August – help me make it happen! (18)
  • Thinking about how to make better use of Yasnippet in my Emacs workflow (17)
  • July 2015 Emacs Hangout (13)
• 2014
  • Reinvesting time and money into Emacs (25)
  • Improving how I organize notes with Org Mode (19)
  • Emacs: M-y as helm-show-kill-ring (18)
• 2013
  • How to Learn Emacs: A Hand-drawn One-pager for Beginners / A visual tutorial (45)
  • Brainstorming ways to help build the Emacs community (19)
  • Emacs: How I organize my Org files (19)
• 2012
  • Org-mode and habits (30)
  • zomg, Evernote and Emacs (29)
  • Literate programming and my Emacs configuration file (25)
• 2011
  • Planning an Emacs-based personal wiki – Org? Muse? Hmm… (42)
  • Drupal: Overriding Drupal autocompletion to pass more parameters (22)
  • Rhetoric and the Manila Zoo; reflections on conversations and a request for insight (21)
• 2010
  • Even more awesome LotusScript mail merge for Lotus Notes + Microsoft Excel (88)
  • Married! (38)
  • Moving from testing to development (37)
• 2009
  • What can I help you learn? Looking for mentees (36)
  • Lotus Notes mail merge from a Microsoft Excel spreadsheet (33)
  • Nothing quite like Org for Emacs (30)
• 2008
  • The Gen Y Guide to Web 2.0 at Work (23)
  • Outlining Your Notes with Org (18)
  • Tagging in Org – plus bonus code for timeclocks and tags! (14)
• 2007
  • Clocking Time with Emacs Org (18)
  • Emacs: Choosing between Org and Planner (13)
  • Wicked Cool Emacs: get in on the action! (10)
• 2006
  • How to wear a malong (6)
  • What makes a good life? (6)
  • Emacs + LinkedIn: Another totally idiosyncratic bit of code (3)
• 2005
  • Emacs: It’s all about people (4)
  • Learning Bisaya (4)
  • Networking (3)
• 2004
  • nethack-el (4)
  • RMAIL labels (4)
  • Sketch website design (3)
• 2003
  • CookOrDie Day 2: Veal sausage and potatoes (4)
  • Look into literate programming (3)
  • Automatically detecting proxy settings (3)
• 2002
  • Hello world, school, teaching, games () (1)

As you can probably tell, I love writing about Emacs, especially when people drop by in the comments to:

• share that they'd just learned about some small thing I mentioned in passing and that it was really useful for this other part of their workflow that I totally wouldn't have guessed
• point out a simpler package or built-in Emacs function that also does whatever clever hack I wrote about, just in a more polished way
• link to a blog post or code snippet where they've borrowed the idea and added their own spin

I want to keep having those sorts of conversations.

8000+ comments are a lot to read, but it should be pretty straightforward to review the comments at least until 2016 or so, and then just clean out spam as I come across it after that. I used the Disqus web interface to delete spam comments since the isSpam attribute didn't seem to be reliable. The web interface pages through comments 25 items at a time and doesn't seem to let you select all of them, so I started tinkering around with using Spookfox to automate this. Spookfox lets me control Mozilla Firefox from Emacs Lisp.

(progn
  ;; select all
  (spookfox-eval-js-in-active-tab "document.querySelector('.mod-bar__check input').click()")
  (wait-for 1)
  ;; delete
  (spookfox-eval-js-in-active-tab "document.querySelectorAll('.mod-bar__button')[2].click()")
  (wait-for 2)
  ;; click OK, which should make the list refresh
  (spookfox-eval-js-in-active-tab "btn = document.querySelectorAll('.mod-bar__button')[1]; if (btn.textContent.match('OK')) btn.click();")
  (wait-for 4)
  ;; backup: (spookfox-eval-js-in-active-tab "window.location.href = 'https://sachac.disqus.com/admin/moderate/spam'")
  )

I got to the end of the spam comments after maybe 10 or 20 pages, though, so maybe Disqus had auto-deleted most of the spam comments.

It's almost amusing, paging through all these spammy attempts at link-building and product promotion. I didn't want to click on any of the links since there might be malware, so sometimes I used curl to check the site. Most of the old spam links I checked don't even have working domains any more. Anything that needed spam didn't really have lasting power. It was all very "My name is Ozymandias, king of kings: / Look on my works, ye Mighty, and despair!"… and then gone.

Back to eleventy-import-disqus. I followed the directions to make a contentMap.json and removed the trailing , from the last entry so that the JSON could be parsed.

Modifications to eleventy-import-disqus:

• The original code created all the files in the same directory, so I changed it to create the same kind of nested structure I use (generally ./blog/yyyy/mm/post-slug/index.html and ./blog/yyyy/mm/post-slug/index.11tydata.json). I decided to store the Disqus comments in index.json, which is lower-priority than .11tydata.json. fs-extra made this easier by creating all the parent directories.
• Ignored deleted messages
• Discarded avatars
• Did some reporting to help me review potential spam
• Reparented messages if I deleted their parent posts
• Indent the thread JSON nicely in case I want to add or remove comments by hand

With the thread JSON files, my blog takes 143 seconds to generate, versus 133 seconds without the comments. +10 seconds isn't too bad. I was worried that it would be longer, since I added 2,088 data JSON files to the build process, but I guess 11ty is pretty efficient.

It had been nice to have a comment form that people could fill in from anywhere and which shared their comments without needing my (often delayed) intervention. I learned lots of things from what people shared. Sometimes people even had discussions with each other, which was extra cool. Still, I think it might be a good time to experiment with alternatives. Plain e-mail for now, I guess, maybe with a nudge asking people if I could share their comments. Mastodon, too - could be fun to make it easy to add a toot to the static comments from mastodon.el or from my Org Mode inbox. (Update 2025-03-30: Adding Mastodon toots as comments in my 11ty static blog) Might be good to figure out Webmentions, too. (But then other people have been dealing with spam Webmentions, of course.)

Comment counts can be useful social signals for interesting posts. I haven't added comment counts to the lists of blog posts yet. eleventy-import-disqus created a commentsCounts.json, which I could use in my templates. However, I might change the comments in the per-post .json file if I figure out how to include Mastodon comments, so I may need to update that file or recalculate it from the posts.

Many of the blogs I read have shifted away from commenting systems, and the ones who still have comments on seem to be bracing for AI-generated comment spam. I'm not sure I like the way the Internet is moving, but maybe in this little corner, we can still have conversations across time. Comments are such a wonderful part of learning out loud. I wonder how we can keep learning together.