My First NPM Package: markdown-it-callouts

I’ve got a blog post in the works that uses infoboxes. Previously I had a little snippet adapted from eleventy-notes so I could parse Obsidian callouts into aside elements, but now I wanted to have special styling.

> [!info] They're defined like this!
> The first line is the title, and subsequent lines are the body.
> You can put whatever elements you want in here too, like code blocks or images.

I rolled up my sleeves and added all the markdown-it rendering code and CSS I needed. Once I had the new feature in place to correctly handle this non-standard markdown feature, I wanted to package it up for reusability^[1]. The code is available on GitHub, but it’s surprisingly annoying to pull in a Typescript dependency via a Git link. I could check in the compiled artifacts to source control, but that’s a poor practice if I can avoid it. Instead I decided to publish the package to npm.

My first attempt to publish on npm only sent up my Typescript source files, which is gives you the same problems as pulling in the Github repo. I had to learn about the package.json field files, so that way npm would package up my artifacts and not my source code. Otherwise the publishing process was familiar to me from publishing Rust crates. I ran npm publish and the package went up on the registry. Feel free to check it out for your own projects, if you also want a convenient way to parse callouts.