The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.
Ensure you've installed and setup the AgnosticUI Astro integration
which will import the required common.min.css onto your page:
npm i astro-agnosticuiThen add the integration to your astro.config.mjs (you may need to run Astro with experimental integrations flag astro dev --experimental-integrations):
import { defineConfig } from 'astro/config';
import agnosticAstro from 'astro-agnosticui';;
export default defineConfig({
integrations: [agnosticAstro()]
});Then you can import Astro Card component (agnostic-astro ships with the astro-agnosticui integration):
import AgCard from 'agnostic-astro/Card.astro';Here's the agnostic-astro Card component in use:
<AgCard>
<h1 class="mbe24"><a href="#">You're Invited!</a></h1>
<p class="mbe24">We'll be hacking all night!</p>
<button class="btn btn-block">Join Us!</button>
</AgCard>(1234 votes)
Gingerbread gingerbread candy lollipop oat cake danish dragée sugar plum. Lemon drops powder icing cake chocolate.
(1234 votes)
Gingerbread gingerbread candy lollipop oat cake danish dragée sugar plum. Lemon drops powder icing cake chocolate.
We'll be hacking all night long on Astro 🚀 and AgnosticUI. Come join us for the fun times!
We'll be hacking all night long on Astro 🚀 and AgnosticUI. Come join us for the fun times!
Here be dragons. Thou art forewarned!
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.