Why I built a theme for the AstroJS community
This is a brief story about why I decided to build a simple and responsive theme template for the AstroJS community.
Let's start pointing out what AstroJS is and why I chose to use it.
Much has been written about JS frameworks. It sometimes feels like there's a new framework or developer tool every week, so you can be forgiven for wanting to roll your eyes at yet another.
AstroJS is a static site generator (SSG) like Gatsby or NEXTjs. AstroJS as another JavaScript framework also works with server-side-rendering (SSR) in any route within the app and even rendering at the edge.
So, you could use your favorite tools from your fave frameworks all while not having to JavaScript bloat. Where a Next.js homepage may hit 100+KB of JavaScript, Astro can pull this down to less than 10 KB while letting you use the tools that you already love: React, Vue, Svelte, Markdown, and so on.
Main features that you likely won’t be able to wait to play with:
- Keep isolating components → Astro allows you to get a highly modular structure in your project, as you are probably already used to.
- Keep playing with its siblings → As I mentioned above, if you want to implement a component that you already built in your project, you can just simply copy and paste it into AstroJS.
- Zero JS runtime → Astro renders HTML on the server and strips away any remaining, unused JavaScript.
- The power of islands → Need interactive UI? Load individual, not-blocking component islands in parallel.
- Lazy loading islands → Components only hydrate when they scroll into view. If you don't see it, Astro won't load it. If you want to know more about Astro Islands, click here.
That's when it hit me →
The previous section might have made it seem that NEXTjs and Astro are at odds with each other, that their relationship is adversarial. This is not the case/intention. Rather, both of them should be working together or at least, with the same target to ensure the quality and requirements of your project.
As it is known, everything in life depends on what you need and what you'd like to do with those tools. The intent is that the developer should be able to build and improve his projects.
Astro is directed more towards happy-path situations and IMHO, it's a perfect tool to build small or medium-sized projects, meanwhile, if you want to build a big web app likely, I’d really recommend you to use NEXTjs instead. It’s at this level that we might see performance and throughput put tests and so forth.
Before you move on →
You might have noticed that I wrote about Astro and NEXT but I didn't write still anything about the theme that I built.
The main features of Astro Neumorphism:
- Interactive and customizable card in the homepage. (Hover the card asap you can please! )
- Display a list with your Medium posts by simply replacing your Medium username.
- Fully responsive site → depending on the viewport it shows different components.
- The dark mode can be configured using
tailwind.config.js. - Build using TypeScript and Preact lib.
- Styled with Tailwind CSS.
- Uses
astro@1.1 - Modular — The structure is highly modular, feel free to customize or add new components.
- Font family — The Google font
Ralewayhas been integrated into the project. It's not using a CDN.
Here it goes the link to the repo → https://github.com/paabloLC/astro-neumorphism
Here it goes a live demo. → https://astro-neumorph.deno.dev/
I deployed it using Deno which is a runtime similar to Node, but with an API that’s more similar to the browser’s API. This adapter provides access to Deno’s API and creates a script to run your project on a Deno server.
What's more →
Now is a good time to get the ball rolling again and build something cool using NEXTjs and let's see the main differences that I notice.
Thank you for reading, see you next time!
