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

@storybook/components-marketing

v3.1.1

Published

Storybook marketing component library

Downloads

299

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

domyendomyenkasperpeulenkasperpeulenvalentinpalkovicvalentinpalkovicjreinholdjreinholdkylegachkylegachndelangenndelangenshilmanshilmantmeasdaytmeasdayghengeveldghengeveldwinkervsbeckswinkervsbecksyannbfyannbf

Keywords

Readme

Storybook Marketing Component Library

UI components for the Storybook marketing, docs, addons, blog and showcase sites.

NPM JavaScript Style Guide

Used by

Note: these components are not used in Storybook's UI.

Tech stack

Building components

Maintaining the system

Install

npm install --save @storybook/components-marketing

Install peer dependencies:

npm install --save @docsearch/css @storybook/theming [email protected]

Usage — global header and footer

The page header comprises of three parts: Eyerbrow, Nav, and SubNav

Eyebrow, Nav, and Footer usually live at the shared layout level whereas the SubNav is specific to each page. The SubNav can be configured in several different ways, check out its stories file for examples.

All these components support an inverse variant.

Sourcing data

Source shared DX data from https://storybook-dx.netlify.app/.netlify/functions/dx-data

  • Eyerbrow requires latestPost
  • Footer requires subscriberCount

Configuring links

The Nav and Footer links are configured via the LinksContextProvider. It comes with a default set of links

https://storybook-dx.netlify.app/.netlify/functions/dx-data

Styling

Eyebrow contains a Search component which depends on @docsearch/css. You need to load these styles in your app, probably at the top-most, global, level:

import '@docsearch/css';

Development Scripts

yarn release

Bump the version

Push a release to GitHub and npm

Push a changelog to GitHub

Notes:

  • Requires authentication with npm adduser
  • auto is used to generate a changelog and push it to GitHub. In order for this to work correctly, environment variables called GH_TOKEN and NPM_TOKEN are needed that reference a GitHub personal access token and a NPM "Publish" token with the appropriate permissions to update the repo.

License

MIT © storybookjs