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

@hydrogen-design-system/component-skip-to-content

v0.0.6

Published

Hydrogen's skip-to-content link component.

Downloads

7

Readme

Hydrogen's skip-to-content link component

Installation

You can install this component as a standalone package using npm install @hydrogen-design-system/component-skip-to-content --save-dev

This component can also be installed as a part of Hydrogen in its entirety. Learn more.

Usage

For standard usage, please see Hydrogen's documentation.

Contributing

Hydrogen's properties are built using Gulp, Sass, Autoprefixer, CSSnano, and Babel.

This component module contains the following in the dist folder:

  • the component's code that is imported by @hydrogen-design-system/system
  • a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:

  • HTML

Please ensure that work on this component updates all supported markup where possible.

The code for this component can be found in:

  • src/markup/
  • src/scripts/
  • src/styles/

You will need:

_VERSION

_VERSION is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have _VERSION appended (e.g. data-h2-accordion_VERSION) in the following places:

  • src/markup
  • src/scripts
  • src/styles/instance.scss

It is also important to use _VERSION when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in src/scripts that follow a function myNewFunctionName_VERSION () {} pattern.

Important commands

  • npm install
    • installs all development dependencies
  • npm run dev
    • builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
  • npm run build
    • runs the build command to process all files for production
    • this will automatically build the system and instanced versions of the component
  • npm publish
    • builds the component
    • publishes it to the public package repository