I made a blog!
If you’re reading this, then that means I’ve finally actually set up my website! I’m hoping for this to be a simple place for me to write about the projects I’m working on, cool programming tips, and anything else that strikes my fancy. This post is meant to be both a bit of background on the site and a test of some of its features.
About the website
The site is a reasonably simple SvelteKit website, with a custom
build process that uses pandoc to convert from Markdown
files to HTML files, which are then fed to SvelteKit as +page.svelte files; it the compiles them into HTML files
while allowing me to include things like fancy widgets. Getting pandoc
to spit out a file that’s usable as a Svelte file is clumsy so I’ll
probably use it sparingly, but in principle it’s possible to build fancy
features into the Markdown files.
For example, the following paragraph in Markdown contains a Svelte variable substitution that, since it gets processed by the SvelteKit compiler, is arranged to be filled in by the server-side rendering and therefore renders correctly even if JavaScript is disabled on the client side:
You are visitor number 99*!
(*since the server started. I don’t actually keep track of this stuff.)
I’m expecting to use this mostly for rendering little toys and demonstrations in my blog posts. The core site can be loaded entirely without JavaScript, but I’m using Svelte to enhance some of the features; in addition to widgets that might be included in some posts, I’ve also got e.g. preloading on all the links
I chose a super simple style for the site because I feel like a lot of the fancy CSS on modern websites is unnecessary. The entire CSS of this website is about 120 lines of code and you know, it looks pretty good I think.
Images
One of the things I specifically wanted from my website was really
good support for images. To draw an image you can always just put an <img> tag, but actually making it look good requires
a bunch of forethought:
- If you just write an image tag, the browser doesn’t know how large
the image is until it’s fetched the image file, which causes the
contents of the page below the image to shift after the page has loaded.
To avoid this, you need to set the
width=andheight=properties on images correctly; but this requires more information than is in the Markdown files and requires cross-referencing against the image file on the server side to figure out how to generate the HTML. - Modern browsers support selecting one of multiple different image sizes depending on screen resolution, image size, etc., but taking full advantage of this feature requires resizing the image to multiple resolutions in advance on the server side.
- Nowadays images on the web should usually be in
webpformat, but I don’t want to have to manually convert all my images myself.
Therefore I set up the website to use the Svelte enhanced
image library: I can just write <enhanced:img> rather than <img> and Svelte does all the conversions
and such for me, and bundles the image into the build process.
RSS feed when?
Not yet but Soon™!
Why is the text pink?
Several people have asked this. idk I think it looks nice :)
File transfer
I also wrote a file transfer widget just for fun and to learn WebRTC. It’s available here.