This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript (except bits you very specifically opt-in to). That HTML-first approach is also why I like Eleventy. It’s just that, as awesome as Eleventy is, I’d prefer working in more modern components and modern templating. Plus I like the build-time JavaScript access in Astro components at my fingertips.
But what if Eleventy offered JavaScript templates also? Well it kinda does—there is a plugin eleventy-plugin-vue (official) that looks well on its way toward that end. But here’s another take on it from Ben Holmes: Slinkity. I’ll quote the bullet points:
- 🚀 Unlocks component frameworks (React, Vue, and Svelte) for writing page templates and layout templates. So you can turn an existing
.htmlor.liquidfile into a.jsxfile, and immediately start building routes on your site using React.- 🔖 Includes powerful shortcodes to insert components into existing pages. Add a line like this to your markdown, HTML, Nunjucks, etc, and watch the magic happen:
{% react './path/to/component.jsx' %}- 💧 Hydrates these component-driven pages on the client. In other words, all your dynamic state management will work in development and production with 0 extra setup.
- 🔗 (Optionally) Turns your site into a single page app. This opens the door for animated page transitions, persistent state between pages, and more!
It seems like it’s bringing the Astro vibe to Eleventy. It even uses Snowpack, which is the build tool by the Astro team.
Direct Link to Article — Permalink
The post Slinkity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-07-26T14:36:04+00:00) Slinkity. Retrieved from https://www.scien.cx/2021/07/26/slinkity/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.