Components collection


Common web patterns, building blocks…

🚀  Astro — Base document enclosure

Provide sensible defaults for HTML base document. The goal is to reduce boilerplate when using multiple layouts in Astro projects.


🚀  Astro — Breakpoints handlers with (S)CSS / DOM / JS

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.


🚀  Astro — Color mode, with user override

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.

Demonstration


↑ Click me!

🚀  Astro — URLs prefetching on hover

This component capture mouse hovering on links with internal URLs. Then, it will prefetch the HTML document beforehand.

Demonstration

Hover links below!

🚀  Astro — Full page transition overlay

This component relies on the good old browser router, still, it will give to your website an SPA feel, without all the JS overhead.


🚀  Astro — Scroll observer

Viewport scroll position and direction watcher. Binds states data attributes to `HTML` for further JS/CSS usage. Scroll event is throttled for performance economy.


🚀  Astro — Code Editor 📝

Embed code editors for YAML, Markdown, JS / TS, JSON… Specifically tailored for each language. Powered by the Monaco Editor and helpers.


🚀  Astro — Diagrams with Mermaid JS 🧜🏻‍♀️

Embed you Mermaid diagrams inside your Astro templates. Features server-side rendering and smart caching.

Demonstration

AliceBobJohnBob thinks a longlong time, so longthat the text doesnot fit on a row.Hello Bob, how are you?How about you John?I am good thanks!I am good thanks!Checking with John...Yes... John, how are you?AliceBobJohn

🚀  Astro — Geographical map embed (Leaflet)

Embed an interactive map in your webpage. Using Leaflet.js under the hood.

Demonstration

Geographical map Geographical map Geographical map Geographical map

You can extend this HTML element with generic attributes like aria-label


🚀  Astro — Packages licenses report generator

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.

Demonstration

Comes unstyled.
This component is easily stylable, and fully accessible.


Dependencies of the current website you are visiting (depth is set to 1):
Nom
Auteur
License
URL
@fontsource/exo-2
Lotus <declininglotus@gmail.com>
MIT
@julian_cataldo/astro-lightbox
Julian Cataldo
ISC
@julian_cataldo/astro-resets
Julian Cataldo
ISC
@wbmnky/license-report-generator
Sebastian Roming
MIT
asciinema-player
Marcin Kulik
Apache-2.0
astro
withastro
MIT
astro-base-document
Julian Cataldo
ISC
astro-google-analytics
Julian Cataldo
ISC
astro-page-transition
Julian Cataldo
ISC
d3-collection
Mike Bostock
BSD-3-Clause
d3-voronoi
Mike Bostock
BSD-3-Clause
glob
Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
ISC
glob-promise
Ahmad Nassri <ahmad@ahmadnassri.com> (https://www.ahmadnassri.com/)
MIT
is-fullwidth-code-point
Sindre Sorhus
MIT
-
leaflet
-
BSD-2-Clause
mermaid
Knut Sveidqvist
MIT
p-try
Sindre Sorhus
MIT
-
path-is-absolute
Sindre Sorhus
MIT
-
pseudomap
Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
ISC
react-dom
-
MIT
rehype-rewrite
Kenny Wong <wowohoo@qq.com>
MIT
remark-gfm
Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
MIT
-
sass
Natalie Weizenbaum
MIT
tr46
Sebastian Mayr <npm@smayr.name>
MIT
tsparticles
Matteo Bruni <matteo.bruni@me.com>
MIT
tsparticles-preset-stars
Matteo Bruni
MIT
unist-util-visit
Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)
MIT
-
webidl-conversions
Domenic Denicola <d@domenic.me> (https://domenic.me/)
BSD-2-Clause
-
whatwg-url
Sebastian Mayr <github@smayr.name>
MIT
-

🚀  Astro — Tabs bar + panels

A tabs bar + panels component which works entirely without JS. Supports height equalization and automatic vertical scroll bar for tabs bar.

Demonstration

WITH "tallest" panel equalization

Use panel-<n>-tallest.

Panel 1

Hello world

Panel 2

Panel 3

Heya


WITHOUT "tallest" equalization

The content below this component will reflow depending on panel content height.

Panel 1

Hello world

Panel 2

Panel 3

Hé Hô

Hé Hô

Hé Hô

Unstyled

Panel 1

Panel 2

Panel 3


🚀  Astro — Terminal player (Asciinema)

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.

Demonstration


🚀  Astro — Testbed 👩🏻‍🔬🧫

Complete toolbox for Astro / JSX component testing and analysis. For design systems, storybooks, local dev. isolation, documentation…