hello world
9 Dec 2023
Setting up this blog was a bit tricky. One requirement I imposed was that it be in markdown rather than in handwritten JSX, so I had to
set up react-markdown.
This was straightforward enough, but then I realised the rendered JSX wasn't using Chakra UI's styling.
There's a package to fix this (chakra-ui-markdown-renderer), but it's out-of-date with react-markdown.
In any case, I figured that I might want slightly different CSS styling for my blog anyway, so this blog is styled by
hand.
But then, as I was putting the markdown renderer through its paces, I realised that image linking didn't quite work as I expected. I wanted to link to local images as I'd do in a typical Markdown file, i.e.
[some image in a local folder](/blog/assets/local-image.jpg)
However, it turns out that when Create React App (CRA) bundles images into the build output, image files are given dynamically generated filenames, e.g. /static/media/user_icon.140c35101be9afee7e30.jpg.
These filenames may change between builds, and even if they didn't, having to link to ugly dynamically-generated files makes for a bad developer experience.
There isn't a good way of working around this while using CRA, and after some googling, I kept seeing NextJS come up as an indirect solution to this problem because of how filepath structure and webapp routing are synced under the NextJS approach.
Good enough for me! I decided to migrate this website to NextJS. It took most of the free evenings of my honeymoon and there were some hitches, but more on that in another post.
In any case, the new NextJS setup works like a charm and has fantastic support for MDX. Big fan of NextJS now!
playing with Markdown
italics
bold
this is h1
this is h2
this is h3
this is h4
# this is code
import hello
print('world')
- This
- is
- a series
- of bulletpoints
- with
- nesting
- this
- is
- an ordered list
behold, a blockquote!
Fig. 1. an image with a link
Fig. 2. a regular image with hover text