No more Not Invented Here so I decided to look into some libraries to make my life easier.

pocketbasejs

The best js framework for Pocketbase. Has all the required collections API which are generic so you can get all the Typescript goodness straight of the bat. The best feature I found though was the subscribe API, I found it works very well in tandem with the SvelteKit concept of stores. Which are client side dynamic stores which can be referenced inline in the page design but are reactive to change. This allows you to subscribe to the collection which you need to represent client side and use the SvelteKit store to be dynamically updated based on the event type coming from the subscription. So for example where $pocketbase is the Pocketbase client and $articles is the svelte store of an ArticleMap

type ArticleMap = {
  [id: string]: Article;
}
export const articles: Writable<ArticleMap> = writable({});

$pocketbase
      .collection("articles")
      .subscribe<Article>("*", async (sub: RecordSubscription<Article>) => {
        if (sub.action === "create") {
          $articles[sub.record.slug] = sub.record;
        } else if (sub.action === "update") {
          const article = await $pocketbase
            .collection("articles")
            .getOne<Article>(sub.record.id);
          $articles[article.slug] = article;
        } else if (sub.action === "delete") {
          delete $articles[sub.record.slug];
        }
      });

This means the frontend is dynamically updated and you can then reference any of the articles in any components or do a reference by slug in the ArticleMap. Doing this makes keeping the UI component accurate and dynamic a whole lot easier, just remember to initially populate the store when you need it, I found doing it via the +layout.server.ts file a clean solution. Also a small bug was when I was storing a native Map type it would be reinstantiated on every read this made it useless hence the creation of the ArticleMap type.

mdsvex

I stipulated that I wanted to write Markdown and have it rendered to html. I found mdsvex suited perfectly. mdsvex is a library to do markdown processing. It seems to be predominantly for rendering markdown files hosted in the file structure of the application on the filesystem, this is very powerful as it can hook into the svelte preprocessor and allow you do render svelte components within your markdown. Very powerful, however I’m not storing my markdown in files, they will be retrieved from Pocketbase. This is a problem as the compile function call in mdsvex uses path.join which is not available client side from node.js so it cannot be called when on the page, when we want to process the stored markdown to html. This limitation has been reported before. #1 #2 This cause the npm run build to fail. So to get around this limitation it is accessed via a +page.server.ts form submit Action when the original markdown is submitted. I store both the markdown and the resultant html. This means rendering on the client side is trivial as we have the html available. Less processing cost more storage cost. I’ve been very happy with choosing mdsvex after the initial hiccups.

Monaco Editor

The Monaco Editor is pretty amazing, if your not aware the Monaco Editor is the editor that runs in Visual Studio Code. And as VSCode is an Electron application; this is web native component. It has got syntax highlighting, intellisense for specific languages and themes. This made it stupidly easy to get a 1st class native editor running that I can use to build the posts then store the result and feed it to mdsvex for markdown processing. With all the features available it makes writing the blog feel familiar seeing as I spend most of my day with a VSCode window open.

Dalle 2

Yes, I’m on the AI hype train just like everyone else. Using Dalle2 has been great just to get some article header art generated and done with out me firing up Photoshop again; I’m trying to avoid Not Invented Here. With Dalle2 trying to get consistency across images can be a bit of a pain. I did however seem to get not only a consistent style but also colour palette using the quote An Andy Warhol style painting of… Obviously there was some deviation and I chose the most consistent but it did make my life much easier.

Conclusion

With these tools and frameworks it’s allowed me to get a pretty high standard of editor functional wise, they jury is still out on if it looks any good. Here’s what it ended up looking like: