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. 🥰
No Excuses
I no longer have an excuse to put off starting a new project! Give Astro a try. There are a few "gotchas" that I had to deal with - like how to use vendor scripts across multiple pages and page loads. But the documentation and forums set me straight quickly.
Shameless Plug
I hope you'll check out The Resistance Toolkit. My hope is foster a community that is passionate about fighting hate, one step at a time.
Good Night, And Good Luck!
Top comments (0)