Eleventy and Foam Tips

July 3, 2022 by Jan Martin Borgersen

While re-working this website to be driven by Foam and 11ty, I stumbled upon a number of things that weren't immediately obvious or straightforward to me from reading the docs.

Rendering Foam wiki-links with Eleventy

Information on this one was pretty scattered, and the main foam-eleventy-template doesn't handle this directly. Here's what I did to make them work. Note that markdownItOptions also turns on auto-linking of bare urls.

Add a dev dependency on markdown-it-wikilinks
Add this block to eleventy.js

const markdownIt = require("markdown-it");
const markdownItWikilinks = require("markdown-it-wikilinks")({ 
  baseURL: '/',
  uriSuffix: '',
  makeAllLinksAbsolute: true
});
const markdownItOptions = {
  html: true,
  linkify: true
};
const markdownLib = markdownIt(markdownItOptions).use(markdownItWikilinks);

The other issue I ran into is that Foam's wiki-links work great in VS Code regardless of any folder structure you have in your Foam repo, but as soon as you try to publish with 11ty, paths get borked.

As an example, inside VS Code [[ampersands]] works perfectly well to create a wiki-link to my 2003 frustrations about XML parsing, and Foam does all it's wonderful linking magic. However, that produces an 11ty link to nowhere.

[[essays/2003/ampersands]] will, however, work in both places. Check it out: essays/2003/ampersands

Reversing the order of a collection

With Nunjucks, it really is this simple to reverse the order of your collection. You don't need to create a custom filter.

{% for item in collections[tag] | reverse %}

Responsive Images

I had some code working on another website from a few years ago that seemed to work to produce responsive image sets inside 11ty. As most things, versions slowly incremented and old code no longer worked, or at least it no longer worked as expected.

Thanks to Tomi Chen's fantastic article about responsive images in Eleventy I got things working properly again with a few tweaks to paths.

Github Codespaces and Paste Image Extension

I'm a huge fan of the Markdown Image plugin to VS Code for any of my personal content sites, and I'm a huge fan of Github's Codespaces, which you can use to spin up an editor into any of those content sites in seconds, from anywhwere, in any web browser. Yay for this huge leap for dev tools.

Unfortunately, these two things don't work together, probably for multiple web browser security reasons. If you're using Markdown Image, you will have to run it in a local installation of VS Code.