Code Macabre

Backlinks in Eleventy

Myles Lewando — Fri, 23 Jan 2026 00:00:00 GMT

I recently rewrote this website from Astro into Eleventy. One of the main features I wanted to persist was the digital garden feel, and that involved adding backlinks to my notes. As mentioned in the Astro version of this guide, backlinks show the connections between notes by indicating which notes reference others.

This guide details how to add them to an Eleventy site.

1. Get the notes

Let's begin by getting our notes. In our Eleventy configuration file, create a new collection. I found filtering by glob the most reliable method of getting my notes:

eleventyConfig.addCollection('backlinks', async (collection) => {
  const notes = collection.getFilteredByGlob('src/notes/*.md');
}

This glob returns a collection of Markdown files stored in the src/notes/ folder. We can adjust this to match our collection path and whatever file format(s) we use.

2. Extract links from the note content

Next, we need to find and extract any links in our notes. Regex is useful here, as Markdown links follow a consistent format, [text](url).

We'll also create an empty object to hold the links our regex finds.

const linkRegex = /\[.*?\]\((.*?)\)/g;
const allLinks = {};

Now we need to iterate over each note, checking the body for links. We can get the note's body by using Eleventy's supplied page.rawInput data:

notes.map((note) => {
  const content = note.page.rawInput;
  const links = [...content.matchAll(linkRegex)];
});

Note: A first draft of this note used the internal Eleventy read() function (discovered by following an error message into the Eleventy codebase). It worked, but on Mastodon, I was informed that using page.rawInput exists, which is a much simpler way of accessing the content.

Each of these matched links comes with a few properties, but we want the URL of the link itself, which is the second property. Remember, this is zero-indexed, so we'll use link[1] to get it.

Within the notes.map() method, iterate across each note's links and extract the link URL:

if (links) {
  links.forEach((link) => {
    const linkUrl = link[1].toLowerCase().replace(/\/+$/, '');
  }
}

We're normalising links here by forcing the link to lowercase and using regex to remove any trailing slashes.

We need to populate our allLinks object with each extracted link. First, we'll check the link doesn't already exist in the object, and initialise it with an array if not, then push some data into the array. We also want to add a guard to ensure duplicate links aren't being added to the array (which can happen if a note references another note multiple times). We can add this check with Array.some().

Within the links.forEach() loop, add the following:

if (linkUrl) {
  if (!allLinks[linkUrl]) {
    allLinks[linkUrl] = [];
  }

  const alreadyLinked = allLinks[linkUrl].some(item => item.url === note.url);

  if (!alreadyLinked) {
    allLinks[linkUrl].push({
      title: note.data.title,
      url: note.url
    });
  }
}

Here, we're extracting data from the note, and from the note's frontmatter with the note's data object. Adjust this to match the note frontmatter and the data needed.

Finally, we just need to return the links. At the end of the backlinks collection function, add the following:

return allLinks;

3. Check for the current note

Now we have a collection containing all the links in every note, we need to cross-reference them with the current note's URL. We can get this by using Eleventy's supplied page.url data.

I created a new Nunjucks component at this stage, backlinks.njk. At the top, add a new variable,

{% set currentUrl = page.url | lower | replace(r/\/+$/, "") %}

Again, this normalises the current note's URL by making it lowercase and removing any trailing slashes. Then, we can populate a new variable with any matching entries in our backlinks collection:

{% set links = collections.backlinks[currentUrl] %}

This gives us an array of backlinks for each note.

4. Generate HTML

With this at the top of the backlinks component, we can add some HTML, iterating over the links array to populate a list of backlinks for each note.

{% if links %}
  <ul>
    {% for link in links %}
      <li>
        <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

5. Final code

Here's the complete code.

In eleventy.config.js:

eleventyConfig.addCollection('backlinks', async (collection) => {
    const notes = collection.getFilteredByGlob('src/notes/*.md');
    const linkRegex = /\[.*?\]\((.*?)\)/g;
    const allLinks = {};

    notes.map((note) => {
      const content = note.page.rawInput;
      const links = [...content.matchAll(linkRegex)];

      if (links) {
        links.forEach((link) => {
          const linkUrl = link[1].toLowerCase().replace(/\/+$/, '');
          
          if (linkUrl) {
            if (!allLinks[linkUrl]) {
              allLinks[linkUrl] = [];
            }
            
            const alreadyLinked = allLinks[linkUrl].some(item => item.url === note.url);
            
            if (!alreadyLinked) {
              allLinks[linkUrl].push({
                title: note.data.title,
                url: note.url
              });
            }
          }
        });
      }
    });

    return allLinks;
  });

In backlinks.njk:

{% set currentUrl = page.url | lower | replace(r/\/+$/, "") %}
{% set links = collections.backlinks[currentUrl] %}

{% if links %}
  <ul>
    {% for link in links %}
      <li>
        <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

By adding this component to our note layout file, backlinks will start appearing as we interlink our notes.

This is exactly how I've implemented backlinks into my own digital garden.

My Linux setup

Myles Lewando — Thu, 01 Jan 2026 00:00:00 GMT

I've previously used Xfce on Debian Testing, and more recently, Niri on Arch; my preference is always for a minimal Linux setup.

However, after encountering various problems one after another, I decided to distro-hop to a more established, out-of-the-box, minimal setup, choosing KDE Plasma on EndeavourOS. It's not likely to be a permanent move, but it serves my current purposes.

A minimal Linux setup on Debian

Myles Lewando — Wed, 05 Mar 2025 00:00:00 GMT

I'm a big fan of Linux, and I'm especially fond of having a minimal system with no bloatware. I've distro-hopped a number of times trying to find the perfect distro for me, alternating between Debian and Arch a few times. I finally tried Debian Testing, and really liked the rolling release version of Debian.

To install a minimal Xfce desktop environment, I use a similar process to Craig Coonrad's guide, where I install Debian's stable branch, then update sources to use Debian Testing.

Note: 'Bookworm' was the stable branch of Debian and 'Trixie' was the testing branch when this note was originally written. It's since updated to be 'Trixie' and 'Forky', respectively. This shouldn't matter, even when it changes again, as in the next step we refer to the testing branch as 'testing' rather than using a codename for a specific release.

1. Install minimal Debian Testing

When installing Debian via the ISO, we will encounter a screen titled 'Software selection'. Here, we can select which desktop environment we prefer; I want Xfce, but the checkbox here will install a lot of additional software I don't want, so we should uncheck everything except 'standard system utilities'.

Once installation has finished, we will reboot into a shell environment.

sudo nano /etc/apt/sources.list

Now, update the file to include the following sources:

deb http://deb.debian.org/debian testing main contrib non-free-firmware non-free
deb http://security.debian.org/debian-security testing-security main contrib non-free-firmware non-free

Save and exit, then update the system with,

sudo apt update && sudo apt upgrade

Then reboot.

2. Install minimal Xfce

Rather than installing the standard xfce package, which installs a lot of additional utilities, we can install only the essential packages with:

sudo apt install libxfce4ui-utils thunar xfce4-appfinder xfce4-panel xfce4-session xfce4-settings xfce4-terminal xfconf xfdesktop4 xfwm4

Reboot, and we will be greeted with a LightDM login screen which will open up a working minimal Xfce desktop environment.

3. Connecting to the internet

There may still be a few essential utilities required to make things run smoothly, such as the Network Manager. Install with,

sudo apt install network-manager-gnome

This will require configuring. Edit the NetworkManager.conf file with,

sudo nano /etc/NetworkManager/NetworkManager.conf

In this file, under the [ifupdown] section, amend the line from managed=false to managed=true. Save and exit this file and then restart the Network Manager with,

sudo service network-manager restart

4. Theming and adding custom CSS

I like to tweak Xfce to have a nice, clean, single panel.

This can be achieved by modifying the panel properies and moving the items around. I use the Matcha GTK Theme to theme the desktop and Flat Remix for my icons.

We can add a small amount of CSS to adjust the panel spacing. Create a file called gtk.css in the ~/.config/gtk-3.0/ directory, and add the following CSS:

.tasklist button, #clock-button, #whiskermenu-button, #xfce4-notification-plugin, #xfce4-power-manager-plugin, #pulseaudio-button {
	border-radius: 0;
}

#whiskermenu-button {
  padding: 0 5px;
}

#xfce4-power-manager-plugin image {
  color: #ffffff;
  opacity: 1;
}

#pulseaudio-button image {
	-gtk-icon-transform: scale(0.9);
  color: #ffffff;
  opacity: 1;
}

#pulseaudio-button .recording-indicator {
  -gtk-icon-transform: scale(0.6);
  padding: 0 5px 0 0;
}

#xfce-panel-toggle-button {
  border-radius: 0;
  padding: 0 5px;
}

This removes rounded edges from buttons, scales some of the panel icons to make them feel more consistent, makes the semi-transparent icons opaque, and adds some spacing to make the buttons flow better next to each other.

To see these changes, we can restart the panel with the command,

xfce4-panel -r

5. Additional applications

These are some of the additional applications I always install; I keep bloat to a minimum by being very selective.

calibre ebook manager
kew terminal-based music player
LibreWolf as my primary browser
Obsidian for notes and organising my thoughts
Polypane as my development browser
ungoogled-chromium as a supplementary browser
VSCodium code editor
WeeChat terminal-based IRC client
WezTerm terminal emulator, along with ZSH and Oh My ZSH! with the Spaceship prompt and the zsh-autosuggestions and zsh-syntax-highlighting add-ons

Withdrawing attention

Myles Lewando — Mon, 13 Jan 2025 00:00:00 GMT

After reading an article by Hugh McGuire, the founder of LibriVox, in late 2024, I made a vow to reduce my social media usage. I noted that although I didn't post much, I did find myself doomscrolling far too often, which was affecting my ability to read and reducing my creative output.

McGuire writes that "digital devices and software are finely tuned to train us to pay attention to them, no matter what else we should be doing"¹ and laments the difficulties people have concentrating. Social media in particular is a problem, and passive consumption of negative media can severely affect mental health; it was certainly affecting mine.

In her book, How to Do Nothing, Jenny Odell recognises the "waves of hating, shaming, and vindictive public opinion that roll unchecked through [social media] platforms"². She suggests that resisting is not a single act, but a practice:

Civil disobedience in the attention economy means withdrawing attention. ... A real withdrawal of attention happens first and foremost in the mind. What is needed, then, is not a "once-and-for-all" type of quitting but ongoing training: the ability not just to withdraw attention, but to invest it somewhere else, to enlarge and proliferate it, to improve its acuity.³

Erin Kissane points out that "position[ing] the broad landscape of connection as something that 'we' can simply do without—and without which we will indeed feel better and be more productive"⁴ is dangerous. Kissane continues by mentioning Rebecca Solnit's writing on care during and after disaster:

The need for broad connection becomes literally vital: people live or die based on the resources and help they receive or don't receive.⁵

Odell also discusses Solnit; indeed, the entire chapter titled 'The Ecology of Strangers' stresses the importance of other people. "If critical distance is what we're after," she writes, "I think there's an important distinction to make between isolating oneself versus removing oneself from the clamor and undue influence of public opinion."⁶

Balancing the need for connection with this clamour is difficult, particularly as some of these major platforms become more and more toxic. However, there is still value in remaining within select, safe(r) spaces. What I intend to do is to expand my attention and focus by reading more, and perhaps scrolling a little less.

Footnotes

Hugh McGuire, Why can't we read anymore? (2015), https://hughmcguire.medium.com/why-can-t-we-read-anymore-503c38c131fe. ↑︎
Jenny Odell, _How to Do Nothing: Resisting the Attention Economy (2019), 159. ↑︎
Odell, How to Do Nothing, 92-93. ↑︎
Erin Kissane, Against the dark forest (2024), https://www.wrecka.ge/against-the-dark-forest. ↑︎
Kissane, Against the dark forest. ↑︎
Odell, 141. ↑︎

Backlinks in Astro

Myles Lewando — Wed, 08 Jan 2025 00:00:00 GMT

Backlinks show the connections between notes by indicating which notes reference others, and are a fundamental feature of most personal knowledge management systems and digital gardens.

This guide details how to add backlinks to Astro. I've also written a guide on how to do this in Eleventy.

1. Get the notes

Let's begin by getting our notes. In the component script at the top of our file, add the following:

import { getCollection } from 'astro:content';

const allNotes = await getCollection('notes');

My collection is simply called 'notes', so adjust this to match your content collection name.

Note: This assumes we're using content collections, but it can be adapted to work for file-based routing by importing notes using import.meta.glob instead.

2. Extract links from the note content

Next, we need to find and extract any links in our notes. Regex is useful here, as markdown links follow a consistent format, [text](url).

We'll also create an empty object to hold the links our regex finds.

const linkRegex = /\[.*?\]\((.*?)\)/g;
const allLinks = {};

Now we need to iterate over each note, checking the body for links.

allNotes.forEach((note) => {
  const links = [...note.body.matchAll(linkRegex)];
});

Note: Again, if using file-based routing, we would need to use the rawContent() function to get the note content.

Each of these matched links comes with a few properties, but we want the URL of the link itself, which is the second property. Remember, this is zero-indexed, so we'll use link[1] to get it.

Within the allNotes.forEach() loop, iterate across each note's links and extract the link URL:

if (links) {
  links.forEach((link) => {
    const linkUrl = link[1];
  }
}

Within the links.forEach() loop, add the following:

if (linkUrl) {
  if (!allLinks[linkUrl]) {
    allLinks[linkUrl] = [];
  }
  allLinks[linkUrl].push({
    frontmatter: note.data,
    url: `/notes/${note.id}`
  });
}

Here, we're extracting the frontmatter with the note's data object, and building a URL with the note's id. Adjust this to match your note URL format.

3. Check for the current note

Now we have an object containing all the links in every note, we need to cross-reference them with the current note's URL. We can get this by using Astro's built-in Astro.url object.

const { pathname } = Astro.url;

By destructuring the pathname from the current URL, we can populate a new array with any matching entries in our allLinks object:

const backlinks = allLinks[pathname] || [];

This gives us an array of backlinks for each note.

4. Generate HTML

With this in the code fence at the top of a component, we can add some markup to the component template, iterating over the backlinks array to populate a list of backlinks for each note.

{backlinks.length > 0 && (
  <ul>
    {backlinks.map((backlink) => (
      <li>
        <a href={backlink.url}>{backlink.frontmatter.title}</a>
      </li>
    ))}
  </ul>
)}

5. Final code

Here's the complete code.

---
import { getCollection } from 'astro:content';

const { pathname } = Astro.url;
const allLinks = {};
const allNotes = await getCollection('notes');
const linkRegex = /\[.*?\]\((.*?)\)/g;

allNotes.forEach((note) => {
  const links = [...note.body.matchAll(linkRegex)];
  
  if (links) {
    links.forEach((link) => {
      const linkUrl = link[1];

      if (linkUrl) {
        if (!allLinks[linkUrl]) {
          allLinks[linkUrl] = [];
        }
        allLinks[linkUrl].push({
          frontmatter: note.data,
          url: `/notes/${note.id}`
        });
      }
    });
  }
});

const backlinks = allLinks[pathname] || [];
---

{backlinks.length > 0 && (
  <ul>
    {backlinks.map((backlink) => (
      <li>
        <a href={backlink.url}>{backlink.frontmatter.title}</a>
      </li>
    ))}
  </ul>
)}

By adding this component to our note layout file, backlinks will start appearing as we interlink our notes.

On graveyards

Myles Lewando — Sun, 05 Jan 2025 00:00:00 GMT

I love taking walks through cemeteries, crypts, and catacombs, a fact I include in my about page. The reasons for this are partially my interest in death culture and my fondness for nature, but there is something else which is articulated in Jenny Odell's book How To Do Nothing: Resisting the Attention Economy: when I take these walks, I'm doing nothing.

The 'nothing' being done is not actually nothing, but a shifting of attention, a meditation. The winding paths between gravestones are labyrinthine, "designed for nothing other than contemplative walking ... enabling a sort of dense infolding of attention."¹

Time appears to pause during these peaceful perambulations; "these places and moments are retreats ... they affect the way we see everyday life when we do come back to it."²

And when I do, I return deeply appreciating more, and feeling more real.

Footnotes

Jenny Odell, How To Do Nothing: Resisting the Attention Economy (2019), 7. ↑︎
Odell, How To Do Nothing, 9. ↑︎

Planting a digital garden

Myles Lewando — Wed, 01 Jan 2025 00:00:00 GMT

This site has had a few changes which lean in the digital garden direction. Backlinks are now added to the bottom of referenced notes, and all notes are now categorised based on their length and how well-formed the thoughts behind them are.

A seed is a brief, nascent thought, largely unformed and needing refinement.
A sprout is a developing thought, often moderately researched but still somewhat incomplete.
An evergreen note is a more complete thought, usually longer-form, researched, and less subject to change.

These categories are inspired by Maggie Appleton's 'seedling', 'budding', and 'evergreen' notes, and Anne-Laure Le Cunff's 'seeds', 'trees', and 'fruits'.

Expect more regular notes, perhaps a little less well-formed than polished articles.

DAGs in D3

Myles Lewando — Mon, 08 Jul 2024 00:00:00 GMT

A directed acyclic graph, or DAG, is a graph formed of edges and nodes which flows in one dominant direction, like a family tree or a flow chart.

In this guide, I'll describe how to setup a project with D3 and how to write a basic DAG using the dagre-d3 library.

1. Create the HTML base

Our graph will need to be attached to an <svg> element within an HTML file. Create a basic HTML file with the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3 DAG</title>
  </head>
  <body>
    <svg id="graph"></svg>
    <script></script>
  </body>
</html>

Note the <script> tags; this is where we will write our JavaScript.

2. Import libraries

The two libraries we'll need are d3 itself and dagre-d3. If we were using a build tool, we'd use npm to install these, but for simplicity, let's use a CDN.

Add the following above our empty <script> tag:

<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dagre-d3@0.6.4/dist/dagre-d3.min.js"></script>

3. Create SVG elements

So far, our HTML page is blank, apart from an empty SVG of undefined size. Let's use D3 to edit this SVG.

First, we want to select the SVG element, then modify some attributes. At the top of our empty <script> tag, add the following:

const svg = d3.select('#graph')
  .attr('width', window.innerWidth)
  .attr('height', window.innerHeight);

Here we're using D3 to perform a similar function to document.querySelector('#graph') to select the SVG element, which has an id of 'graph'. Then we're adjusting the SVG to match the width and height with the window by using window.innerWidth and window.innerHeight.

Add an additional line to create an empty group inside the SVG:

const inner = svg.append('g');

This is where we'll draw the graph.

Note: We could have created an SVG with width and height attributes, along with a group inside it, all in the HTML, but doing it this way gives a better understanding of how D3 can manipulate the DOM.

4. Setup the graph

Our graph is still blank. If you use the browser to inspect the HTML, however, you should see that the SVG fills the viewport and has a <g> element inside it.

We have a little more setup to do before adding anything we can see to the graph.

Initialise a new graph using the dagre-d3 library with the following line:

const graph = new dagreD3.graphlib.Graph().setGraph({});

Inside the setGraph() method, we can add options to change the graph's layout. We'll change the flow from the default direction, top-bottom ('TB'), to left-right ('LR'). Inside the setGraph({}) curly braces, add the following:

rankDir: 'LR'

Add a render method to allow us to render the graph using the dagre-d3 library:

const render = new dagreD3.render();

Finally, we'll call the render method with the following line:

render(inner, graph);

This render function takes in two arguments: where to render the graph, and what to render. Here, we're rendering the graph we just created in the inner, or <g>, SVG group.

5. Create nodes and edges

Now everything is setup, we come to the fun part. Let's create a very basic flow chart of two boxes (nodes) with a line (edge) joining them.

Create the nodes after the graph initialisation code, but before calling render().

graph.setNode(0, { label: 'A' });
graph.setNode(1, { label: 'B' });

The nodes can be numbered, as we've done, or the can be passed a string, like graph.setNode('zero', {}). We'll pass a label property into the options object to put some text inside the node. I've chosen 'A' and 'B' to make the direction of the flow more obvious.

If you refresh the page, you should see two black rectangles floating on the page. Let's join them together with an edge. Add the following line just below the nodes:

graph.setEdge(0, 1, { label: 'to' });

Hmm, something doesn't look right. Our rectangles are black and the line isn't displaying correctly. This is a CSS issue. We can target the nodes to give them a background colour of white and the edge to give it a stroke colour of black.

Add the following to the <head> of the page:

<style>
  .node rect {
    stroke: black;
    fill: white;
  }

  .edgePath path {
    stroke: black;
    fill: black;
  }
</style>

Now our nodes should show the text clearly, with a black outline and a white fill colour. The line too should be visible, along with the label text.

6. Bonus: Add zoom support

We are effectively finished; this is the basic DAG. However, there are a few things we can do to make it a bit more useable.

Let's centre the graph on the page and enable zoom functionality, so we can scroll the mouse wheel to scale the graph.

Add the following D3 code above the render function:

const zoom = d3.zoom().on('zoom', (element) => {
  inner.attr('transform', element.transform);
});
svg.call(zoom);

This sets up D3's zoom function to apply a transform to the 'inner' <g> element. Calling it applies that function to the <svg>. If you refresh the page, the mouse scroll wheel should zoom the svg in and out. Let's refine it.

After the render function, add the following code:

const bounds = inner.node().getBBox();
const width = svg.attr('width');
const height = svg.attr('height');

These variables make it easier to access the size of the 'inner' <g> element as well as the width and height of the <svg>. Now add another svg.call() line with the following:

svg.call(
  zoom.transform,
  d3.zoomIdentity
    .translate(width / 2, height / 2)
    .scale(Math.min(width / bounds.width, height / bounds.height))
    .translate(-bounds.x - bounds.width / 2, -bounds.y - bounds.height / 2)
);

There's a lot going on here, so let's break it down.

Using d3.zoomIdentify, we're setting a default zoom transform state in three parts:

With .translate(width / 2, height / 2), we're centring the graph on the page.
With .scale(Math.min(width / bounds.width, height / bounds.height)), we're scaling the graph so it fits the full width of the inner <g> element.
The final translate .translate(-bounds.x - bounds.width / 2, -bounds.y - bounds.height / 2) sets the graph to fit the inner element.

These three transformations resize and centre the graph so it's as large as possible on the page.

7. Final code

Our final code should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3 DAG</title>
    <style>
      .node rect {
        stroke: black;
        fill: white;
      }
    
      .edgePath path {
        stroke: black;
      }
    </style>
  </head>
  <body>
    <svg id="graph"></svg>
    <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dagre-d3@0.6.4/dist/dagre-d3.min.js"></script>
    <script>
      // Set up svg with D3
      const svg = d3.select('#graph')
        .attr('width', window.innerWidth)
        .attr('height', window.innerHeight);
      const inner = svg.append('g');

      // Add zoom support
      const zoom = d3.zoom().on('zoom', (element) => {
        inner.attr('transform', element.transform);
      });
      svg.call(zoom);

      // Set up graph
      const graph = new dagreD3.graphlib.Graph()
        .setGraph({ rankDir: 'LR' });

      // Draw nodes and edges
      graph.setNode(0, { label: 'A' });
      graph.setNode(1, { label: 'B' });
      graph.setEdge(0, 1, { label: 'to' });

      // Render graph
      const render = new dagreD3.render();
      render(inner, graph);

      // Get width and height of graph and svg element
      const bounds = inner.node().getBBox();
      const width = svg.attr('width');
      const height = svg.attr('height');

      // Centre and scale graph to fit page
      svg.call(
        zoom.transform,
        d3.zoomIdentity
          .translate(width / 2, height / 2)
          .scale(Math.min(width / bounds.width, height / bounds.height))
          .translate(-bounds.x - bounds.width / 2, -bounds.y - bounds.height / 2)
      );
    </script>
  </body>
</html>

For an example of this using Vite to bundle the code, check out my basic-dagre repo on GitHub.

For further information, and to make more complex graphs, take a look at the dagre-d3 wiki, as well as the original dagre wiki.