npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@igor.dvlpr/astro-easynav-button

v1.4.2

Published

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼

Downloads

71

Readme

📃 Table of contents

🕵🏼 Usage

Install it by executing:

npm i "@igor.dvlpr/astro-easynav-button"

Then import it into your Astro project:

Layout.astro

import EasyNavButton from '@igor.dvlpr/astro-easynav-button'

<footer>
{ /* other markup */ }
  <EasyNavButton
    background="#09F"
    backgroundHover="#006"
  />
{ /* other markup */ }
</footer>

CSP notice

[!WARNING] This Astro component includes its own JavaScript, if you use CSP External link in your project you need to add its respective integrity hash to the allowed sources list.

Inline script SHA-256 hash: sha256-KWtqqqQFySoITWIucvZhAoWjT2J9jdUA7LfvxyqjJvQ=

🤹🏼 API

This component supports a variety of optional customization and functionality options, listed below:


polyfillScroll: boolean

Since the component uses the scrollend event for properly adjusting its appearance according to the user scroll action and the given event currently has limited availability (source: caniuse) a polyfill is enabled by default, set this property to false in order to disable the inclusion of the JavaScript polyfill file.

The default value is true.

[!TIP] The used polyfill was created and is maintained by me as well, it being located:

scrollend-polyfill

[!NOTE] The polyfill file is minified, served via the jsDelivr CDN and has no side-effects in browsers that already support the scrollend event natively.

[!WARNING] If you use CSP External link in your project you need to add the polyfill's integrity hash to the allowed sources list.


background: string

Background color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#afc7e5'.


backgroundHover: string

Background color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#3869c2'.


color: string

Foreground color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#333333'.


colorHover: string

Foreground color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is '#ffffff'.


size: number

Size of the button defined as the number of px.

The default value is 48.


borderRadius: number

Border radius of the button defined as the number of px.

The default value is 6.

[!TIP] Set to 0 to disable round corners.


offset: number

Offset of the button from the edge of the window defined as the number of px.

The default value is 10.


fontSize: number

The font size of the button defined as the number of px.

The default value is 30.


animationTime: string

The duration of the animation when swapping the up/down arrows applied on the button. Can be any valid CSS time value, in msec, sec, etc.

The default value is '250ms'.


iconTop: string

A glyph to use as the up arrow icon.

The default value is '\25B2' (U+25B2, ▲).


iconBottom: string

A glyph to use as the bottom arrow icon.

The default value is '\25BC' (U+25BC, ▼).


zIndex: number

The z-index value for the button. Adjust it only if you have used z-index in your CSS.

The default value is 999.


position: 'left' | 'right'

The horizontal position, either left or right edge of the window.

The default value is 'right'.


show: 'always' | 'whenNeeded'

Defines when to show the button.

'always' will ignore if scrolling is possible (scrollbar visible),

'whenNeeded' will check if scrolling is possible (scrollbar visible) and change the button's visibility based on it.

The default value is 'whenNeeded'.


✨ Examples

index.astro

import EasyNavButton from '@igor.dvlpr/astro-easynav-button'

<Layout title="Welcome to Astro.">
  <main>
    <EasyNavButton
      background="#09F"
      backgroundHover="#006"
      show="always"
    />
  </main>
</Layout>

📝 Changelog

✨ Changelog is available here: CHANGELOG.md.


🪪 License

Licensed under the MIT license which is available here, MIT license.


🧬 Related

@igor.dvlpr/astro-post-excerpt

⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! 💎

@igor.dvlpr/recursive-readdir

📖 Provides recursive readdir() and readdirSync() functions. 📁

@igor.dvlpr/valid-path

🧰 Provides ways of testing whether a given value can be a valid file/directory name. 🏜

@igor.dvlpr/windev

🍃 Provides ways of checking whether a path is a legacy Windows device. 💾

@igor.dvlpr/extendable-string

🦀 ExtendableString allows you to create strings on steroids that have custom transformations applied to them, unlike common, plain strings.. 🪀


👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).