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 — Scroll observer

Viewport scroll position watcher which binds data attributes to `body` for further CSS usage. JS scroll event is properly throttled for performance economy.

Demonstration


Scroll viewport!
Current : ℹ️  

🚀  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 — 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
@docsearch/react
Algolia, Inc.
MIT
@fontsource/exo-2
Lotus <declininglotus@gmail.com>
MIT
@julian_cataldo/astro
Julian Cataldo
ISC
@julian_cataldo/astro-base
Julian Cataldo
ISC
@julian_cataldo/astro-breakpoints
Julian Cataldo
ISC
@julian_cataldo/astro-color-mode
Julian Cataldo
ISC
@julian_cataldo/astro-licenses-report
Julian Cataldo
ISC
@julian_cataldo/astro-lightbox
Julian Cataldo
ISC
@julian_cataldo/astro-link
Julian Cataldo
ISC
@julian_cataldo/astro-media-map
Julian Cataldo
ISC
@julian_cataldo/astro-prefetch
Julian Cataldo
ISC
@julian_cataldo/astro-resets
Julian Cataldo
ISC
@julian_cataldo/astro-scroll-observer
Julian Cataldo
ISC
@julian_cataldo/astro-seo
Julian Cataldo
ISC
@julian_cataldo/astro-tooltips
Julian Cataldo
ISC
@julian_cataldo/astro-transition
Julian Cataldo
ISC
@wbmnky/license-report-generator
Sebastian Roming
MIT
asciinema-player
Marcin Kulik
Apache-2.0
astro
withastro
MIT
core-util-is
Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
MIT
glob
Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)
ISC
glob-promise
Ahmad Nassri <ahmad@ahmadnassri.com> (https://www.ahmadnassri.com/)
MIT
heroicons
-
MIT
is-fullwidth-code-point
Sindre Sorhus
MIT
leaflet
-
BSD-2-Clause
mermaid.cli
Tyler Long <tyler4long@gmail.com>
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
sass
Natalie Weizenbaum
MIT
tsparticles
Matteo Bruni <matteo.bruni@me.com>
MIT
tsparticles-preset-stars
Matteo Bruni
MIT

🚀  Astro — Media map embed

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

Demonstration


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