Digital Notebook - Project Notes
My notebook (the website you are currently on) is a wiki-like digital knowledge base. I manage the files with Foam. The site is generated by Eleventy, hosted on GitHub, and published with Digital Ocean as a subdomain of my main site.
The idea behind a wiki-like knowledge-base is to make it easier draw connections between ideas, even (especially?) disparate ones. This is facilitated by backlinks, which are links that link to the current page.
Eleventy
I prefer Astro to Eleventy, but one thing Eleventy does that Astro doesn't is let you use whatever folder structure you want. Astro forces you to put content collections in a special content
folder that lives apart from the rest of your pages. This would have messed with Foam's link structure.
Maybe this wouldn't have mattered all that much, since this site is self-contained and deployed as a subdomain. But I didn't mind having an excuse to play with Eleventy again.
Eventually I'd like to integrate this site with my main site, so I'll have to figure out the Astro thing at some point.
Wikilinks
Backlinks are almost universally handled with wikilinks. (Though I don't really understand why. I don't see what's special about wikilinks beyond the syntax, and I don't actually find the syntax all that convenient. I must be missing something.) The problem is that wikilinks aren't a native markdown feature, so any given site generator (like Eleventy) isn't going to know what to do with them.
Luckily for me, Juan Frank had already figured this out in his Eleventy Foam Template. What his solution didn't account for, as far as I could tell, was placeholder text. So a wikilink that looked like this [[note|link text]]
would render like that on the page. With Claude's help, I added a regex to remove the pipe and the text to the left of it.
That's pretty much all there was to it. What the site doesn't do at the moment is render backlinks on the page. This isn't a disaster, because I see all those in Foam, but it'd be nice if they were on the site, too.
Private Notes
There are some notes I don't want to publish, but I'd prefer to keep them with the rest of my notes so I can link to them. For my purposes, the solution wasn't too complicated. I store my private notes in a private
folder, then add that folder to .gitignore
, which also automatically adds it to .eleventyignore
. This means the private
folder won't be uploaded to GitHub, and it won't be written to Eleventy's site output.
On the 404 page, I tell users to check the url. If it includes /private/
, they've stumbled on a private note.
This works for me, but if I want to generalize this to a reusable Eleventy-Foam template, I'll probably need to find a different method. Users won't necessarily want to keep their private notes in a specific folder. A more flexible approach would be to include a private
key in notes' frontmatter, and use that to filter them from git and the site output. Though as you can see in my notes on the subject, this is more complicated than it sounds.
Checklist
Add fontsImprove performance- Jampack
Support private notesSyntax highlighting- Render links (backlinks or otherwise, external and internal)
- Search
- Promote
- Eleventy showcase and communities
- Foam showcase and communities
Other To-Dos
Everything is just thrown in here for now.
A lot of this will be relevant to my Eleventy-Foam template, whenever I get around to that.
- autoprefixer
- Style internal and external differently
- skiplink
- use a shortcode to hide the homepage header
- search
- css nano
- jampack?
- Prefetch everything
- Bundle css
- 404
- Offline - service worker - cache first? Or check in the bg somehow
- Navigation
- Breadcrumbs
- Exclude foam from build
Docs
- Hidden files
- npm install
- Global data
- Default styles
- Credit to Juan Frank - https://github.com/juanfrank77/foam-eleventy-template
- Recommended extensions
- Recommended settings
- Nunjucks formatter
- Run content folder by itself or just use the 11ty root. One or the other, not both.
You may need to configure your 404 page, depending on where your site is hosted.