First Post!

Oct 4, 2024

This is the first post on the blog!

#general #svelte #webdev

Table of Contents

Welcome to the blog!

You might be wondering why I decided to start a blog. Well the thing is, this isn’t my first blog. I’ve had one in that past hosted on GitHub pages built with Jekyll, using the minima theme. I made that around a month or two after I made a GitHub account. It was purely for the joy of deploying my own blog - I didn’t actually write anything on it 😂

I randomly came across a few people’s blogs yesterday and I noticed one thing: they were all built from the ground up. Not many people used Jekyll or a GitHub pages theme or even Hugo. Most were either static sites or Next.js/SvelteKit blogs with custom styling, routing and syntax highlighting. I randomly got the urge to start a blog again and this time, I wanted to build it from scratch.

I was a bit stuck however… I had tried using SvelteKit to dynamically make a list of pages and pre-render them, those attempts hadn’t gone too well. Especially since I wanted to load files from the source directory, and for some weird reason it didn’t work when deployed - because obviously the source code isn’t deployed. Or that’s what I thought.

I started following JoyOfCode’s tutorial hoping that they would address the issue. The fix was rather simple

const paths = import.meta.glob("/src/posts/*.md", { eager: true });

For the curious, here’s how vite does this. I’m not going to explain it here because I’m not sure I understand it myself 😅

The rest of the tutorial was pretty straightforward. They had decided to use Open Props for the styling but I went for good ol’ Tailwind CSS. That did make following the tutorial a bit harder since they were using a lot of premade values - converting that to Tailwind classes was really annoying - so I did end up using some vanilla CSS rules for the layout. The markdown is parsed using MDsveX and styled with Tailwind Typography and shadcn-svelte for the dark mode toggle.

I have 6 88x31 icons in the footer, which I thought would be cool to add but they kinda feel out of place with this cool and minimal blog — might remove it later with feedback. Also an RSS feed! I thought of not adding it because a total of 0 people who visit my blog probably uses RSS but its cool that its there and its as an 88x31 button so extre points for retro-ness I guess

I also spent half an hour fixing a code tag that made the blog unusable on mobile. The <pre> and <code> tags were going out of the screen on mobile, so I added word wrapping to the svelte file but that didn’t work. I wasted time since the solution was really just to move that to the global css file so it affected the rendered markdown 🤦‍♂️

Best part of the entire blog is syntax highlighting for 200+ languages with 50+ VSCode themes thanks to shiki! I’m using the github-dark-default theme which I had used for nearly for 2 years on VSCode, eventually switching between tokyo night and poimandres. I guess markdown support is good too?

Blockquotes are cool

Bold Italic Inline code blocks.

Copying text on Mac using ⌘ + C

Copying text on Linux/Windows using CTRL + C

function sayHello(a) {
	console.log(`Hello, ${a}!`);
}
function sayHello(a: string): void {
	console.log(`Hello, ${a}!`);
}
def say_hello(a: str) -> None:
  print(f"Hello, {a}!")
{
	"title": "First Post!",
	"description": "This is the first post on the blog!",
	"date": "2024-10-04",
	"categories": ["general", "svelte", "webdev"],
	"published": true
}

And also images! SvelteKit

Back