🚀 Astro — Base document enclosure
Provide sensible defaults for HTML base document. The goal is to reduce boilerplate when using multiple layouts in Astro projects.
Common web patterns, building blocks…
Provide sensible defaults for HTML base document. The goal is to reduce boilerplate when using multiple layouts in Astro projects.
Provides cross languages breakpoints handlers for your app. SCSS mixin, JS hook and a DOM data attribute, all share the same responsive scale you choose to feed in.
Provides system or user-defined color scheme preference, with a toggle mechanism. Settings are persisted, component is progressively enhanced and flash of unstyled content avoided. Also, it will provide an easier way to target theme with CSS / SCSS / JS.
Provides Google Analytics 4 snippet injection.
This component capture mouse hovering on links with internal URLs. Then, it will prefetch the HTML document beforehand.
<link rel="prefetch" as="document" href="...">
elements appended inside <head>
element.
Simple lightbox component.
This component relies on the good old browser router, still, it will give to your website an SPA feel, without all the JS overhead.
Common CSS resets in a configurable Astro component. Only needed CSS is injected into critical path.
Bare minimum SEO meta tags to make most social networks and Google engine happy.
Viewport scroll position and direction watcher. Binds states data attributes to `HTML` for further JS/CSS usage. Scroll event is throttled for performance economy.
Progressively enhanced. This component globally override regular `title` attributes on all links with Tippy.js tooltips.
Embed code editors for YAML, Markdown, JS / TS, JSON… Specifically tailored for each language. Powered by the Monaco Editor and helpers.
Embed you Mermaid diagrams inside your Astro templates. Features server-side rendering and smart caching.
Embed an interactive map in your webpage. Using Leaflet.js under the hood.
You can extend this HTML element with generic attributes like
aria-label
…
Give credits to the awesome JS open-source community with this component. It will generate a table with important informations about packages used by your project.
Comes unstyled.
This component is easily stylable, and fully accessible.
Supercharge your links. This component detects external / anchor / same domain / mail / telephone `href`, and apply optimizations accordingly.
A tabs bar + panels component which works entirely without JS. Supports height equalization and automatic vertical scroll bar for tabs bar.
panel-<n>-tallest
.
Hello world
Heya
The content below this component will reflow depending on panel content height.
Hello world
Hé Hô
Hé Hô
Hé Hô
Embed player for terminal sessions (recorded with asciinema) in your Astro project. Using asciinema player under the hood. Comes with full asciinema player settings support, typings and docs hints.
Complete toolbox for Astro / JSX component testing and analysis. For design systems, storybooks, local dev. isolation, documentation…