Building This Site with Astro.js
Context or Problem
Tested different Astro.js configurations, integrated Tailwind CSS and evaluated Markdoc vs MDX for content embedding.
Experiment
As usual in my fucking free time I start to build this site.
My plan was to experiment with various configurations, evaluate the pros and cons of content embedding with Markdoc versus MDX, and even integrate some alternatives to Tailwind CSS.
Like many professional do, I go Astro JS official docs for fresh installation guide.
But yeah the installation folder is not empty because I have tried to do some random things before, so I just delete all in that folder except .git folder just to make sure I track all my funny codes and commit list.
Funny Tailwind CSS V4 Integration
Seems like I faild to add Tailwind CSS v4 integration in Astro and I don’t know why. So I just following Official Tailwind CSS + Astro docs instead and it works fine.
Of course I need to do git commit {:bash} and make sure I don’t add too much file changes and make it hard to read in future.
Using Markdoc or MDX
Now I try using gitflow just to make me looks cool.
I start with creating new branch like dev branch, then git checkout dev to that branch pretty simple.
Then adding new integration with Markdoc, I read the Astro JS docs copy-paste some command and it works.
npx astro add markdoc {:bash}
While I am copy-pasted again from Chat GPT and official Astro docs, I got HTML warning something about tag <time> {:html} that need to have ISO value or something.
Solve it easily by using something like this
<time datetime={journal.data.createdAt.toISOString()}> {formatDateTime(new Date(journal.data.createdAt))}</time>I don’t know if it’s correct or what but atleast the warning is gone.
And theeeeeen after some funny debugging and manual testing (of course) I decided to use MDX instead of Markdoc, why? Because I want to use rehype-pretty-code that seems like didn’t work with Markdoc. It was something related with rehype plugin, remark plugin and something similar that I found it couldn’t work in Markdoc.
Again, I don’t know if it’s the right approach or not I just try to solve my problem and it works.
Outcome
After some funny manual testing and debugging I have good enough starting point for my MDX based journal with Astro JS and styling with Tailwind CSS v4. It should accept the use of MDX plugin like rehype-pretty-code.
Possible Next Step
Continue to implementing proper styling for rehype-pretty-code and other layout.