Background

I think this site is long overdue. I wanted some central, live-repository where I could capture some of the problem-solving and ideas I have while writing software. I also would like to use this content to self-advertise as a motivated and engaged software developer that enjoys learning and solving problems. I had briefly played around with Astro and with the latest release of v5.0 I decided it was time to give it a try in earnest.

Priorities

Primary

• easy to deploy
• can immediately start writing content: blog/02-astro-mdx-and-state
• can embed examples of the code I’m referencing
• can use a free template for quickly getting started
• typescript & tailwind

My entire goal revolved around creating an extremely quick-to-host site that I could immediately start writing content for. Astro has been pretty fun to start working with. I’m still becoming more and more familiar with collections, using plugins, mdx and embedding dynamic javascript islands (within .mdx posts!). But the lack of a deeper understanding of the framework hasn’t stopped me from creating the content I was hoping to create right away. It feels like I’ll be able to easily grow into the framework without compromising on any of my priorities, which is a great feeling.

Secondary

• link obsidian notes content in a clever way

I haven’t yet tried to create collections into my obsidian notes, but will revisit this when I make the attempt.

Highlights

Embedding Code

One thing I’ve found pretty incredible is using vite’s ?raw import to get the text-content of a file in combination with Astro’s <Code /> component. This allows me to render a referenced file in a code-block using Markdown-syntax highlighting.

---
import { Code } from 'astro:components';
import RAW_canvasMachine from './canvasMachine.ts?raw';
---

<Code lang={'ts'} code={RAW_canvasMachine}/>

This means I don’t need to worry about keeping copies of code-snippets in-sync with one another. I can more naturally reference working code without worrying if it will become out-of-date.

React Plugins and Islands

I like that I can use familiar tsx syntax to quickly create re-usable, dynamic islands. It works perfectly for small P.O.C.-type work.