Trawling through blogs to add to my feed reader, I came across a number of posts related to the February 2025 IndieWeb Carnival theme of affirmations. It nudged me to think about the words I rub into A+'s brain with repetition.

Once a year or so, A+'s virtual school teachers typically play a video about affirmations as part of the social-emotional learning aspect of the curriculum.¹ The perky narrator exhorts the listeners to repeat the affirmations after her. A+ doesn't. I don't know if many of the other kids do.

The words I use with A+ are more powerful, so I want to be thoughtful about them. There's this idea floating around: the way we talk to our children becomes their inner voice.²

Here's what I find myself repeating:

• "You worked hard on that." I'm not 100% clear on the results of the meta-analyses of growth mindset research, but it makes sense to me to focus on acknowledging her effort rather than things that might be considered fixed characteristics. It's a good contrast to the "You're so smart!" that she might get from people impressed by her skills at solving Rubik's cubes or her enjoyment of math. She likes it when I see what she's doing, so I also add specific descriptions, and I extend it with a long-term perspective. Today she excitedly told me about how she worked together with a classmate on their literacy groupwork, so I echoed that back to her and connected it to her growth over time. I also often say "You did that!" and flesh it out with details.
• "You got this." Because it's important for her to feel my belief and trust in her, and to enjoy confidence and self-efficacy. She's been doing well with increased personal responsibility for things like homework. Sometimes I say "We got this" instead, when we're working together.
• "You know the way." Because it's extra fun (and extra effective) to sing the things I want her to remember, and because often she already knows the next thing she needs to do and this is a fun way of sending her off. This one is from the We Know the Way song from Moana. I like how I can use snippets of Disney musicals and bring in all the emotional storytelling connected to them. I occasionally touch on another line from that song: "We set a course to find a brand new island everywhere we roam." She's going to have to find a brand new way. She can do it. We're wayfinders.
• "I got you." Because sometimes she stumbles and falls, and that's okay. We're here. Sometimes all she needs is a snuggle. Sometimes she needs a bandage or an energy bar or an emergency frozen treat. Sometimes she needs an extra pair of hands or someone to brainstorm with. We can figure things out together.
• "You're wonderful." Because it's good for her to know I'm glad she exists, in a way that focuses on her wonderfulness rather than my act of loving her. Along these lines, I also frequently say, "You're awesome!"
• "It's your experiment!" Because trying things out will help her learn, and this reminds me to back off and let her decide.

Over dinner, I mentioned this list of things I often say to A+. She wanted me to add these ones:

• "I appreciate you, child."
• "I love you."
• "I'm going to pounce on you." Which is usually interrupted by her pouncing on me. This amuses her greatly. I like this playful way to offer a hug.

It is easiest to say these things when we're both well-rested and in good moods, so part of my job is to manage myself so that I can be in that state as often as possible.

A+'s beginning to echo these words back to us. She tells me what she'd like to use her allowance to experiment with. Yesterday at dinner, she told me, "You're awesome!" in the same way that I often tell her. Sometimes, as I send her off on her next task, she sings, "We know the way."

One night, as I was tucking A+ in, she asked for snuggles. I burrowed under the blankets and said, "I got you." She said, "You always do."

We have two cases of mangoes on our kitchen counter: the last case of Ataulfo mangoes W- could find at the Nations supermarket a short bike-ride away from the house (slightly underripe at purchase; it's been a few days, so now A+ says they're perfect), and a case of Tommy Atkins mangoes that are greener and tougher. He had meant to buy Hadens, but accidentally picked the Tommys up instead. That's okay, I said. I can turn them into mango shakes.

Wikipedia describes the Tommys as:

Although generally not considered to be the best in terms of sweetness and flavor, it is valued for its very long shelf life and tolerance of handling and transportation with little or no bruising or degradation.

Thomas Atkins submitted the fruit to the variety committee of the Florida Mango Forum multiple times during the 1950s, which rejected it due to its unremarkable eating qualities and considerable fiber in the flesh.

A+ has definitely developed mango preferences. Like me, she likes the smooth, sweet creaminess of Ataulfo and other Philippine-type mangoes. She's the one who regularly checks the mangoes for ripeness and reports on their status, letting us know as soon as they're soft. After a good meal, she often prepares a mango for herself, using a paring knife to skim it close to the seed. Sometimes she cuts a criss-cross grid and flips it into a turtle, or scoops out the insides for chopstick practice. She's gotten much better at getting most of the mango out; there's usually very little for me to scrape off the rest of the skins. Without prompting, she remembers to wash her hands before and after. One evening, watching her deftly cut her mango, I said, "People pay good money to send kids to cooking classes so they can pick up knife skills. Could buy a lot of mangoes for that money." We had fun joking about the short-term and long-term benefits.

I grew up eating mangoes in the Philippines. Sometimes they were on the breakfast table. Sometimes I had them at merienda (afternoon snack). Mangoes were either yellow, kidney-shaped, soft, and sweet, or the tart green mangoes that were also delicious in a different way, either straight-up or with salt or with bagoong (fermented fish or shrimp paste). (It took me a while to appreciate bagoong, but eventually I got the hang of it.) Green mango shakes were also a treat.

After I moved to Canada in 2005, I went a long time without regularly buying mangoes. Still mentally converting costs to Philippine pesos, I balked at the expense of individual mangoes. The supermarket rarely sold good-looking Ataulfo mangoes, mostly just other mango cultivars that were more fibrous. If they did have the yellow kidney-shaped mangoes of my memory, the ones sold individually tended to be wrinkly and sad. A case of mangoes felt like overkill for just me, and I never quite got around to seeing if any of my friends wanted to, I don't know, rotate mango buying.

I think we only started buying cases of mangoes last year or the year before that. Now we're more comfortable knowing that even if we buy cases one after the other, we'll eat them before they go bad. We'll never say, "I'm all mangoed out." (And if we ever do get to that point, I can just dehydrate whichever mangoes are left.) It is definitely a frill and we're lucky to be able to enjoy them.

When it's warm enough for the kids to complain of the heat, we tend to ramp up our mango consumption even more. For the past two years, I've been bringing a cooler of frozen treats to A+'s park playdates. It started as a way to fend off temptation from the ice cream trucks that like to prowl around parks, and as a reaction to the ridiculousness of retail/wholesale pricing when it comes to summer refreshments. My days in A+'s sphere of friends are numbered, so I may as well make the most of it. It's a splurge, but time-limited. She will probably not invite me to lurk in the background with a cooler of popsicles when she's 18 years old. So yes to all the things, for now: home-made mango freezies; strawberries and peaches from the farmers market when they're in season; freezies made from pick-your-own strawberries when we make it out to a farm. (Child labour!) Raspberry freezies are sometimes too intense or too seedy for the kids. A+ is not a fan of cantaloupe freezies, but I like them. For the watermelon freezes, we're a bit divided. I like to add a little bit of sugar to the watermelon if it seems like it needs it. A+ takes pride in not adding any sugar to home-made freezies, so whenever she wants to be in charge of making them (which is almost always), I let her go with whatever she wants. She likes to use the mini-watermelons and add a splash of lemon juice. It always tastes refreshing.

Sometimes we bring Chapman's ice lollies (the kids prefer the single-flavour ones) or other store-bought treats. Sometimes A+ proudly insists on paying for these herself; early experiences of prosocial spending, hooray! When the fruits are in season, I prefer to make home-made freezies. We don't follow any recipes. We just prepare the fruits and put them into the blender.

I use disposable popsicle bags from AliExpress since I haven't found a local source I like, and have determined that:

• Zipper seals are nice for filling, but difficult to open. The best bags have a little notch for tearing under the seal, but this is hard to see in product photos. I often bring scissors if the bags don't have notches.
• 22cm x 5cm: just right
• 28cm x 5.5cm: too much

We have a couple of reusable freezie molds that we sometimes use. I save those for A+ and me because I know they'll find their way back to the cooler.

I used to walk to the playdates with A+ in a stroller (she still fits in the Thule Chariot Cheetah XT, even at 9 years old), with the cooler balanced on top of it. It took me 45 minutes to an hour to walk to her usual park playdates, but the freezies were fine if I packed the cooler with lots of ice packs. With the cargo bike, I can get to the playdates in 15 minutes or so, which means there's plenty of time for A+ to play and get warm before she decides it's time for a freezie break, and the freezies are all still nicely cold.

A+'s favourite friends get first dibs by virtue of proximity when she decides it's popsicle time (after A+, of course, who gets first pick). It feels quite satisfying when A+'s friends sidle up and ask very politely if there happen to be any more of those mango popsicles. Then we extend the selection to everyone else in the playgroup, and then, when everyone's sorted out, the occasional brave soul who wanders up to the strange woman handing frozen treats out to kids. I try to make eye contact with their grown-up first to check if it's okay. Sometimes when I'm distracted, I ask the new kids if their grown-up is okay with it, but I get the feeling that their quick nod might not be entirely reliable as it tends to be done with their eyes fixed on the prize. Gotta find their actual grown-up. I know A+ likes to go back for seconds or thirds on really hot days, so sometimes I keep a special stash for her in a nylon drawstring bag in the cooler. Sometimes I have one too.

I'm Filipino. Part of my love language is food. Taste can anchor memories, and I hope these are part of her core experiences of childhood. I want these to be part of my memories of her. That's worth the mangoes.

• Help wanted:
  • Re: Safe evaluation of macros (was: bug#77341: [PATCH] ; (find-function- - looking for volunteers to help improve trusted-content on Windows
• Emacs 30:
  • The new JSON parser is fast
• Upcoming events (iCal file, Org):
  • Atelier Emacs Montpellier (in person) https://lebib.org/date/atelier-emacs Fri Apr 11 1800 Europe/Paris
  • M-x Research: TBA https://m-x-research.github.io/ Wed Apr 16 0800 America/Vancouver - 1000 America/Chicago - 1100 America/Toronto - 1500 Etc/GMT - 1700 Europe/Berlin - 2030 Asia/Kolkata - 2300 Asia/Singapore
• Beginner:
  • Use GNU Emacs : The Plain Text Computing Environment (Reddit, Irreal)
• Emacs configuration:
  • Goodbye setq, hello setopt! (Reddit, Irreal)
  • Emacs Config From Scratch, Part 1: Foundations (2023)
  • Bozhidar Batsov: Emacs Startup Time Doesn’t Matter
  • Marie K. Ekeberg: Github Actions workflow for my Emacs config?! - Why would I even do that?
  • salvari/emacs30_elpaca_public: My new configuration for Emacs using Elpaca as package manager - Codeberg.org (@salvari@mastodon.gal)
• Emacs Lisp:
  • Listful Andrew: Slug — Create friendly slugs for your URLs and filenames (Emacs package)
• Appearance:
  • eee.el Updated: Now with nerd-icons Support for Enhanced Visuals in ee-find and ee-rg
  • Protesilaos Stavrou: Emacs: stylistic refinements to the “tinted” Modus themes
• Navigation:
  • TIL C-x C-f: you can just start typing ~/ without deleting the old path
  • Emacs 31: New window commands (Reddit, HN, Irreal)
  • Taming emacs buffers using side windows (Reddit)
• Writing:
  • Emacs Redux: Essential Flyspell (Irreal)
• Org Mode:
  • Marcin Borkowski: Back to pomodoros - but only in the morning
  • (udpate) org-supertag update to 3.0: add AI backend, support bidirectional tag relation
  • The Struggle of Syncing Plain Text with Databases: My Journey with org-supertag
  • Org Mode tips from oantolin, including kbd custom link type for keyboard macros
  • Git Links in Org (@ablatedsprocket@hachyderm.io)
  • Org Mode and Hurl (Reddit)
  • Nth Brains with Emacs Org Roam (33:43)
  • ob-duckdb - execute duckdb source blocks (first time making a package). (Reddit)
  • Alvaro Ramirez: Journelly vs Emacs: Why Not Both?
• Completion:
  • Complement corfu, vertico, and completion-preview with prescient.el sorting (Reddit)
• Coding:
  • Configuring Language Servers Dynamically
  • Enhance vc-dir in Emacs with Magit-like Unpulled/UnpushedRecent Headers
  • Forge v0.5.0 released, with support for Github discussions
• Math:
  • Chung-hong Chan: Fixing a sore point of ESS: `ess-indent-with-fancy-comments`
• Web:
  • Sacha Chua: Using Emacs Lisp to batch-demote HTML headings for my static site
  • Chris Maiorana: Spin up a simple web server from Emacs
• Mail, news, and chat:
  • Trials and Visions of Internet Relay Chat [in Emacs and elsewhere]​ (Reddit)
• Doom Emacs:
  • Doom Emacs icon
• EXWM:
  • EXWM setup (@ArneBab@rollenspiel.social)
• Fun:
  • nethack-el updated for v3.6.7 (testers wanted)
  • minesweeper - Play minesweeper inside Emacs - sourcehut hg (Reddit)
  • game-2048 - Play a block-sliding game inside Emacs - sourcehut hg
• AI:
  • My first Emacs package Relysium - Bring joy to your coding with LLM
  • James Dyer: Ollama-Buddy 0.9.17: Claude Support, Asynchronous Operations and Responses to Registers
• Community:
  • emacs.social - new Mastodon instance (Reddit, @runlevelrobot@social.lol)
  • The way I work in 2025 | skybert.net (@skybert@hachyderm.io)
  • Why I use Emacs (13:20)
  • Lispy Gopher Climate 2025 04 02 ramin_hal9001 #emacs #unix #lisp #philosophy #live #interview - Community Video (1:00:32, @screwtape@mastodon.sdf.org, show notes)
• Other:
  • FYI: Mituharu's Mac port is getting updates (Reddit)
  • stripspace.el - Ensure Emacs Automatically Removes Trailing Whitespace Before Saving a Buffer, with an Option to Preserve the Cursor Column (Reddit)
• Emacs development:
  • emacs-devel:
    • [PATCH] proposal for message-mode email completion enhancements - might need cross-package coordination?
    • Re: Semantic: update or remove? - CEDET components and features
  • ; Note existing binding of vc-git-stash-delete-at-point
  • Add bindings for vc-git-stash-delete-at-point, vc-git-stash-delete
  • Teach VC-Dir to automatically add and remove marks on other lines
  • ; * etc/NEWS: Announce new input methods (bug#77026).
  • Restrict symbol prettification to displayable glyphs
  • Optionally display function docstring in eldoc
  • Disable desktop-restore-frames by default on Android
  • Add repeat-map for Python indentation commands
  • Add 'project-customize-dirlocals'
  • Add cl-with-accessors
• New packages:
  • circom-mode: Major mode for editing Circom circuit (MELPA)
  • fretboard: Visualize guitar scales and chord shapes on a fretboard (MELPA)
  • fsrs: Free Spaced Repetition Scheduler (MELPA)
  • pache-dark-theme: High-contrast theme based on Gruvbox (MELPA)
  • pink-bliss-uwu-theme: Pink color theme (MELPA)
  • vue3-mode: Syntax highlighting for modern Vue.js 3 (MELPA)
  • wallabag: Save and manage articles with wallabag (MELPA)

Links from reddit.com/r/emacs, r/orgmode, r/spacemacs, r/planetemacs, Mastodon #emacs, Bluesky #emacs, Hacker News, lobste.rs, programming.dev, lemmy.world, lemmy.ml, planet.emacslife.com, YouTube, the Emacs NEWS file, Emacs Calendar, and emacs-devel. Thanks to Andrés Ramírez for emacs-devel links. Do you have an Emacs-related link or announcement? Please e-mail me at sacha@sachachua.com. Thank you!

• Thanks to Pictionary, we caught up with all the illustrations that A+ needed to do for her homework.
• I tweaked my blog navigation and headings. I also exported the comments from Disqus and took it off my site.
• I got rid of some clutter.

Blog posts

• Adding subheadings and sketches to my blog page navigation
• Using Emacs Lisp to batch-demote HTML headings for my static site
• Monthly review: March 2025: going on field trips; shifting from fretting to learning
• 2025-03-31 Emacs news
• Moving 18 years of comments out of Disqus and into my 11ty static site

Sketches

• 2025-03-31-05 March 2025 – monthly review.jpeg

Toots

Headings help us make sense of longer blog posts. Heading links are like signposts letting you know what's ahead and where you can take a shortcut to get to what you're interested in.

Headings are useful for me too. Sometimes I browse my blog and come across things I've completely forgotten writing about, so the headings can help me remember without having to reread long posts. If I use headings more often, I might be able to work with bigger chunks of thoughts. If I can work with bigger chunks of thoughts, then maybe I can think about more things that are hard to fit within the limits of my working memory. Making headings more navigable also means I might not have to worry about the tangents I go on and the number of different thoughts I try to smoosh together, if people can jump straight to the parts that sound relevant to them.

I particularly like the way Karthik uses a sticky table of contents for long blog posts like The Emacs Window Management Almanac | Karthinks. I also like the way the Read the Docs Sphinx Theme displays a nested table of contents on the left side on wide screens. I use org-html-themes to export Org Mode files with that theme when I want to be fancy, like my Emacs configuration (usually works, although sometimes my config is broken).

The last time I tinkered with my webpage margins, I put my "On this page" list on the left side and the blog post headings (if any) on the right side, mostly because it was easy to do. I just changed the margin and float attributes of the element with the subheadings. I'd like to clear up more space for potential sidenotes or doodles, though. This time, I experimented with nesting the blog navigation inside the "On this page" navigation on the left side.

Here's how I did it:

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

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>`;
  });
};

/* 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
    }
}

/* 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 can use a sketch as a map, too

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.

HTML defines a hierarchy of headings going from <h1> to <h6>, which comes in especially handy when people are navigating with a screenreader or converting web pages to Org Mode. I think search engines might use them to get a sense of the page's structure, too. On my blog, the hierarchy usually goes like this:

• <h1>: site title,
• <h2>: blog post titles, since I put multiple blog posts on the main page and category pages (ex: blogging)
• <h3>: blog post's subheadings, if any
• <h4>: I rarely need subsubheadings in my main blog posts, but they're there just in case

While fiddling with my blog's CSS so that I could try this fluid type scale, I realized that the subheadings in my exported blog entries started at <h2> instead of <h3>. This meant that the outline was this:

• Site title
  • Blog post 1
  • Subheading 1
  • Subheading 2
  • Blog post 2
  • Subheading 1
  • Subheading 2
  • Blog post 3

I wanted the outline to be this:

• Site title
  • Blog post 1
    • Subheading 1
    • Subheading 2
  • Blog post 2
    • Subheading 1
    • Subheading 2
  • Blog post 3

This was because I hadn't changed org-html-toplevel-hlevel during my 11ty export process. To solve this for new posts, I added a new option org-11ty-toplevel-hlevel that defaults to 3 in ox-11ty.el, re-exported one of my long blog posts to test it, and confirmed that my headings now started at <h3>.

I still had all my old HTML files with the wrong levels of headings. I wrote some Emacs Lisp to shift the headings downwards (h5 to h6, h4 to h5, h3 to h4, h2 to h3) in a file if it had an <h2> in it. Regular expressions are usually not a good idea when it comes to HTML because there might be exceptions, but I figured it was a pretty small and low-risk change, so I decided not to use the full XML/DOM parsing functions. I saved all the blog posts under version control just in case I messed things up. Here's my function:

(defun my-html-shift-headings (filename)
  "Shift heading tags in FILENAME."
  (interactive "FFile: ")
  (let ((case-fold-search t)) ; make the search case-insensitive
    (with-temp-buffer
      (insert-file-contents filename)
      (goto-char (point-min))
      ;; Only modify the files where we have an h2
      (when (or (search-forward "<h2" nil t)
                (search-forward "</h2>" nil t))
        (goto-char (point-min))
        ;; Handle both opening and closing tags
        (while (re-search-forward "<\\(/\\)?h\\([2-5]\\)\\>" nil t)
          (let* ((closing-tag (match-string 1))
                 (heading-level (string-to-number (match-string 2)))
                 (new-level (1+ heading-level)))
            (replace-match (concat "<" closing-tag "h" (number-to-string new-level)))))
        (write-file filename)
        filename))))

Running it on all the source HTML files in specific subdirectories was easy with directory-files-recursively.

(dolist (dir '("~/proj/static-blog/blog"
               "~/proj/static-blog/content"))
  (mapc 'my-html-shift-headings
        (directory-files-recursively
         dir
         "\\.html\\'")))

Then I could just rebuild my blog and get all the right heading levels. Spot-checks with Inspect Element show that the headings now have the right tags, and org-web-tools-read-url-as-org now picks up the right hierarchy for the page.

Correcting the input files was easier and more efficient than modifying my 11ty template engine to shift the heading levels whenever I build my site (probably by defining a preprocessor). I could've written a NodeJS script to do that kind of file manipulation, but writing it in Emacs Lisp matched how I might think of doing it interactively. Using Emacs Lisp was also easy to test on one or two files, check the list of files matched by directory-files-recursively, and then run it on everything.

Going forward, the new org-11ty-toplevel-hlevel variable should properly modify the behaviour of Org's HTML export to get the headings at the right level. We'll see!