{"obsidian":[{"meta":{"title":"Obsidian vault setup","description":"Setting up the Obsidian vault for Syenite","author":null,"author_url":null,"published":"2023-09-28T14:30","updated":null,"tags":["syenite","obsidian"]},"path":"/2023/09/obsidian-vault-setup","content":"

I described briefly in syenite-building-blocks how Obsidian links are transformed to HTML.

I this guide I’ll talk about how to setup your Obsidian article vault.

My implementation assumes that the Obsidian vault is co-located with the blog codebase. Ideally, the two should be separated, so that you could keep the blog and vault in different repos and link them via a reference.

swyxkit 🔗 has that, but I think the way it does it is too complicated. For that reason, I decided to start simple using co-location and see if I can improve it down the road.

Implementation

The Obsidian vault is named article-vault and is hardcoded at the moment. article-vault is referenced in these places:

src/routes/[year]/[month]/[slug]/+page.js
vite.config.ts
src/lib/utils/index.js

My intention is to make it 1) configurable in config.js and later 2) separate it entirely from the blog engine into its own repository.

Folder structure

For now, this is what the vault folder structure looks like.

$\"obsidian-vault-structure.png\"$

The vault itself is located in /src. Within, there are 4 subfolders of interest:

_assets contains any images that you link in articles. For example horse-head.png is referenced in markdown-showcase.md using Obsidian syntax.
_drafts should be used for draft articles that are not yet ready to be published. When ready, move them to one of the [year]/[month] folders.
.obsidian is created automatically by Obsidian, contains Obsidian’s settings for the vault, and is ignored by default. If you want to add it to version control, feel free to remove it from .gitignore.
2023/09 etc is the article structure. I explained how I ended up with this structure in url-and-folder-structure. Ultimately it’s not too hard to make this flat (or whatever you fancy), just keep in mind that this engine is opinionated, and this is what works for me.

"},{"meta":{"title":"Syenite building blocks","description":"A high level overview of how Syenite is constructed","author":null,"author_url":null,"published":"2023-09-22T14:30","updated":"2023-10-08T14:30","tags":["syenite","obsidian"]},"path":"/2023/09/syenite-building-blocks","content":"

At the highest level, Syenite is built on SvelteKit 🔗, with Vite 🔗 and Tailwind CSS 🔗. But there are more bits and pieces that make it work.

mdsvex

mdsvex 🔗 is what allows Svelte code to exist and be executed from markdown files. This is cool because it allows dynamic components in markdown pages and articles, if you need it.

One example in Syenite is the src/components/UpdatedAt.svelte component.

You might wonder why would I need such a component when I can just get the updated timestamp from the frontmatter. Well, that’s because sometimes I want the updated date to be “evergreen”, in other words to always show today’s date. Bbbut why?? I have a very specific thing in mind for the future (I said this engine was opinionated af, didn’t I?).

Swyxkit

I lifted and adapted many parts from Swyxkit 🔗. I like a lot about that engine, but it’s a bit too feature-packed for me, plus it lacks a few things I want. Here are some things I poached.

the dark/light toggle (src/components/DarkModeToggle.svelte)
RSS (src/routes/rss.xml/+server.js) and sitemap (src/routes/sitemap.xml/+server.js)
the table of contents (src/components/TableOfContents.svelte)
the head metadata stuff - tedious and boring stuff, glad someone else has handled it

Obsidian integration

In theory, using Obsidian to write articles sounds straightforward. Just point the vault to a folder inside the blog codebase and start writing. Then SvelteKit + mdsvex takes care of the rest, right?

Well, not so fast. There’s the not-insignificant matter of internal document references that need to be converted to URLs, with a similar thing for images and other assets.

In other words, we want to convert links:

[[syenite-blog-engine|Syenite an opinionated blog engine]]\n\n👇\n\n<a href="/2023/09/syenite-blog-engine">Syenite an opinionated blog engine</a>

and images:

![[horse-head.png|Horse head]]\n\n👇\n\n<img src="/assets/horse-head.png" title="Horse head" alt="Horse head">

This is not trivial. So rather than shattering my brain trying to figure it out, I thought “surely someone else must have done it already”. Thankfully, a developer named Frank Noirot 🔗 did the legwork and wrote an article about it https://github.com/franknoirot/obsidian-sveltekit-blog/ 🔗.

While he only implemented document links (anchors), as soon as I made the first rough prototype I realized that images work differently. The heavy lifting had already been done so all I had left was to add very similar code to deal with images.

This logic can be found in src/lib/utils/index.js. The code may look messy, and some of it is repeating, but it’s all good - it works and that’s all that matters!

Read more about setting up the Obsidian vault.

This doesn’t work… yet

One Obsidian feature that is unsupported (it will throw a compile error) is referencing headings in an article.

This

[[syenite-blog-engine#The Frankenblog|Syenite blog engine]]

should resolve to

<a href=\"/2023/09/syenite-blog-engine#the-frankenblog\">Syenite blog engine</a>

Similarly, a heading containing inline code such as

[[url-and-folder-structure#Static pages as `.md` files|URL and folder structure]]

should resolve to

<a href=\"/2023/09/url-and-folder-structure#static-pages-as-md-files\">URL and folder structure</a>

Packages

https://github.com/remarkjs/remark-html 🔗 - extracts HTML from markdown, used for the RSS feed
https://github.com/paoloricciuti/sveltekit-search-params 🔗 - makes working with URL search parameters a lot easier
https://github.com/leeoniya/uFuzzy 🔗 - fuzzy search for articles
https://github.com/html-to-text/node-html-to-text 🔗 - extracts text from HTML (article HTML is first processed using remark), used for searching article content

Other

Additionally, Syenite uses several tools and services to make life easier.

"}]}

#obsidian