There was a long weekend, and I was kinda itching to do something that I had in my mind. And now that's done, we now have this post, brought to you by my Obisidan MD vault serving as this sites Content Management System. This site is now a mix of pages written in Svelte, alongside my ObdsidianMD-produced posts, which is not part of the source code for this site. The current workflow looks like this:
- Write in Obsidian
- Press the Generate AST button (custom plugin) in Obsidian
- Press the commit and push button (Git plugin) in Obsidian
- WIP: Go to Vercel's website and press redeploy
- In the future: I would like to also put the logic inside my custom plugin so I never have to leave Obsidian There are several parts to making this work:
- Obsidian serves as my Content Management Application. It offers WYSIWYG (What you see is what you get) editor experience, accessible in mobile devices, too. Obsidian is also extendable with plugins, so the plugins serve as my site's Content Delivery Application.
- We have my custom plugin, obsidian-ast-generator, that transforms markdown files into Abstract Syntax Trees, making it easier for me fully customize the experience in my frontend. This plugin is just changing parts of the popular Obsidian plugin obsidian-kanban
- obsidian-get allows me to sync the generated AST files into a file server. Not exactly an actual file server, since I'm just using Gitlab for hosting my files. I could have used something more fit, like an S3 bucket or Cloudflare's R2, but this looks like something that's good enough for my use case.
- Gitlab as my "file server". I didn't want to use Github for syncing my files since doing so would pollute my Github activity.
- We have our frontend library Pineapple serving as the base package for my websites. More specifically, a module in it called Parsnip that does all the logic to fetch the files from our file server and process it into Svelte components that we can heavily customize to our likings.
- Then after all that, we now reach here: Turnip! The codebase that runs this site is called Turnip, if you haven't guessed. It imports the Pineapple package, and uses the Parsnip module to display these blogs.
- Turnip is hosted in Vercel as a managed server. This is kinda relevant because I had to make choice if I wanted to take advantage of the Vercel-exclusive Svelte Incremental Static Regeneration that comes with the default Svelte adapter, which would be a cool way to have both the prerender speeds and dynamic pages, without rebuilding and redeploying the app. I think the easiest way to do this is just to redeploy the site every time the content has changed. It's not like I have hundreds or thousands of pages, and even if I did, I'm not at the point at which Vercel will hit me with a bill since they don't have my credit card. Everything I've been using is free. But, not gonna lie, the perfectionist in me is bothered by the idea that it takes several minutes to update a few pages because now it has to rebuild the entire site to update that one part. I could do client side rendering, but I think it might be slow. Alas, let's not be perfectionist.
TODOS
- Deploy using Obsidian
- Set up calls to Vercel
- Call to deploy
- Poll for 5 mins? then promote to prod
Things that I'm testing on are left below:
Testing
Look at funny seal
List test
Below me is a list
- item 1
- 1.2
- 1.3
- 2
- item 3
Random blockquote
console.log('Help');
console.log('Some other line');I don't know what else to test :pensive:
