Categories: posts |code

A Fresh Beginning. Hello SvelteKit!

Ok, so it’s just another blog conversion. But I’m glad I finally got around to working on it.

So what changed? Well, this blog is now running on SvelteKit. It used to run on Jekyll. I’ve also ran a different blog on Hugo. I think each has their advantages, but this is my 5th different Svelte site / application (see ProgrammingTIL (SvelteKit), ListenAddict (Sapper), Code Name Parker (SvelteKit), and Producer (SvelteKit, but just a shell right now)), and I honestly just enjoy Svelte so much more than anything else.

The nice thing about converting this blog to SvelteKit is the ability to use msdvex, which allows me to use svelte components directly in my blog. So I’m hoping to build out cooler, more interactive things in the future.

Behold, My Stuff!

So I can use any of my components in my blog posts, whenever I want. For example, if I wanted to drop my <SubscribeForm /> in the middle of this blog, I can:

And then I can just keep writing. Of course, this assumes I keep writing 😱.

So how does it work, exactly? Well, I’m not an mdsvex expert, but the basics are this. In my markdown file, I’m able to import whatever code I’d like:

<script>import SubscribeForm from '$lib/app/forms/SubscribeForm.svelte';</script>

Then later, when I want to use that component, I can:

<SubscribeForm />

Or if I want to have my Dark mode toggle, I can do that too:

Of course, not everything will be beautiful, unless you take the time to design it to work in every place possible; right now, I’m thinking the <ThemeToggle>, while nice, looks a little silly on hover when it’s in the middle of the blog due to its full width, but it works just fine in the header… but I’m not going to change it just for this section!

Anywho, the plan for this blog is to be long-form essays, and maybe some mid-range technical ones as well. I’m not entirely sure. I’ve also signed up for dev.to, but haven’t posted anything yet. The idea being I’ll likely cross post between the two, but due to my ability to use Svelte here, I’ll most likely keep the longer and more interactive essays and blog posts here.

Until next time!

Special thanks

Thanks to @c-bandy and @mikenikles for sharing their Github Repos for how they implemented their SvelteKit blog in Markdown: c-bandy repo @mikenikles repo

Don’t forget to turn on the flashlight (dark mode only):