Andy Matuschak Stacked Notes

notes-andy-showcase.mov

My take on stacked tabs view from Andy Matuschak Notes. See other example on the note taking app Obsidian., and Andy thoughts on it.

See deploy here.

Thought process

• How to deal with File IO operations on Node enviroments?
• Thanks to @NicolasMontone, he recommended using Node File IO operations . See his code.
• Tried using Vite Assets with import.meta.glob, saw some Svelte Kit references, but nope.
• Why not use Bun because it's more fun? so ended using Bun File I/O operations .
• How to parse markdown content from a File? use gray-matter
• How to serve markdown content? using API Routes and parsing them on the server, just return the markdown with 'Content-Type': 'text/markdown'. This is the most important part
• How to deal with nodes and backlinks? Not yet.
• What is an Abstract Syntax Tree (AST)?
• How to travel an AST? use unist-util-visit. Tried this:

export function extractHrefs(markdown: string): string[] {
	const links: any = [];
	remark()
		.use(() => (tree) => {
			visit(tree, 'link', (node: Node, index, parent) => {
				// if the url string is not a relative path then return
				//  todo: try to save the files who has external links
				if (node.url.includes('http')) return consola.error('External link found', node.url);

				links.push(node.url);
				console.log({ links });
			});
		})
		.process(markdown, () => {});
	return links;
}

Limitations

• How to deal with the stacked notes reactively on the page? Because Andy use the queryparams such as https://notes.andymatuschak.org/About_these_notes?stackedNotes=zCMhncA1iSE74MKKYQS5PBZ to deal with it. Currently I deal with then a writable state.
• Should I file hosting for the markdown files? Because the ID it's using is the slug. Probably will cause some problems in the future, and it's better to GET by ID. Maybe host the markdown files on R2 or Supabase?
• Andy fetches all backlinks on every note visited. If you visit https://notes.andymatuschak.org/About_these_notes, on the network tab, it will fetch all external references for that note.
• How to fetch all links on a markdown file? then you need to travel an AST (Abstract Syntax Tree).

Installation

First, install Bun runtime.

curl -fsSL https://bun.sh/install | bash

Then install dependencies on the root folder:

bun install

Run the dev server. It's important to note on the package.json we are using bunx and --bun commands to ensure Bun is the runtime.

bun dev

Deployment

Because we are using Bun as a runtime (with the File I/O operations), Vercel is not an option because it just only supports Bun as a package manager, not the runtime. Just Render supports it natively, or your favorite VPS.