![Marijuana’s hidden threat to fertility and family planning [PODCAST]](https://kevinmd.com/wp-content/uploads/The-Podcast-by-KevinMD-WideScreen-3000-px-1-scaled.jpg)
Blasting Off With Astro
3...2...1...Blast Off! Exciting news, my open source project to fight hate, The Resistance Toolkit, now has an official website / web app! Quick recap of the events to led to this moment: I created a GitHub project that lists causes, organizations, and actions to take to support them. This is an effort to counteract all of the hate that has become emboldened in recent days. The project lived in a GitHub repo partly because I didn't feel like I had the time or resources to commit to building out an entire website or app. I don't know about you, but in my opinion, the Web Dev & Javascript scene has gotten a little out of hand. I often feel paralyzed when I am starting a simple project. Does my little website need and entire WordPress backend or JS CMS equivalent? Should I choose React (Next.js now?), Vue, Angular, or Svelte? Hmmm, server side rendering, but with server-less functions? Don't even get me started with the umpteen JS state management libraries... It's enough to put me off of starting new projects. Enter Astro! What is Astro, you ask? Astro is a JavaScript web framework optimized for building fast, content-driven websites... It supports every major UI framework. Bring your existing components and take advantage of Astro's optimized client build performance. I decided to give Astro a shot for a couple of reasons: It's front end framework agnostic. You can use .md, .mdx, .html, .astro, .jsx, .js (pretty much anything) to compile your website. Simple static or server side rendering. Asset handling is a breeze. Astro can handle image optimization, determine quality, and infer size of remote images. Built in view transitions (and the ability to customize them). Easy prefetching. I was relieved that I could use the markdown files I had already created for the project. I could take my existing files, plop them in the src directory, and boom I have the skeleton of my website up and running! However, I needed it to be a little more dynamic. So I added some Astro properties and collections to manage the 15 causes and ~60 organizations listed in the project. I could then create layouts and convert the .md files for individual causes into templates to handle dynamic routing. Example: src/data //collections and types src/causes.mdx //causes collection page src/cause/[slug].astro //individual cause template I won't go into all of the details (maybe I'll do a walk through in the future) but, this allowed me to rapidly develop out the website. There are also lots of Astro and community developed plugins as well.
3...2...1...Blast Off!
Exciting news, my open source project to fight hate, The Resistance Toolkit, now has an official website / web app!
Quick recap of the events to led to this moment:
- I created a GitHub project that lists causes, organizations, and actions to take to support them. This is an effort to counteract all of the hate that has become emboldened in recent days.
- The project lived in a GitHub repo partly because I didn't feel like I had the time or resources to commit to building out an entire website or app.
I don't know about you, but in my opinion, the Web Dev & Javascript scene has gotten a little out of hand. I often feel paralyzed when I am starting a simple project.
- Does my little website need and entire WordPress backend or JS CMS equivalent?
- Should I choose React (Next.js now?), Vue, Angular, or Svelte?
- Hmmm, server side rendering, but with server-less functions?
- Don't even get me started with the umpteen JS state management libraries...
It's enough to put me off of starting new projects. Enter Astro!
What is Astro, you ask?
Astro is a JavaScript web framework optimized for building fast, content-driven websites... It supports every major UI framework. Bring your existing components and take advantage of Astro's optimized client build performance.
I decided to give Astro a shot for a couple of reasons:
- It's front end framework agnostic. You can use .md, .mdx, .html, .astro, .jsx, .js (pretty much anything) to compile your website.
- Simple static or server side rendering.
- Asset handling is a breeze. Astro can handle image optimization, determine quality, and infer size of remote images.
- Built in view transitions (and the ability to customize them).
- Easy prefetching.
I was relieved that I could use the markdown files I had already created for the project. I could take my existing files, plop them in the src directory, and boom I have the skeleton of my website up and running!
However, I needed it to be a little more dynamic. So I added some Astro properties and collections to manage the 15 causes and ~60 organizations listed in the project. I could then create layouts and convert the .md files for individual causes into templates to handle dynamic routing. Example:
src/data //collections and types
src/causes.mdx //causes collection page
src/cause/[slug].astro //individual cause template
I won't go into all of the details (maybe I'll do a walk through in the future) but, this allowed me to rapidly develop out the website. There are also lots of Astro and community developed plugins as well.
