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

documentation-hipster

v1.0.0

Published

documentation.js Bootstrap Theme with TypeScript and React support

Downloads

959

Readme

documentation-hipster

License: ISC Node.js CI

documentation-hipster is a react-styleguidist-inspired theme for documentation.js with support for TypeScript and React components

Style by Andre from NounProject.com Logo Style by Andre from NounProject.com

You can check an example documentation that uses it here: rlayers

rlayers API screenshot

Usage

Install

npm i --save-dev documentation-hipster

Run

documentation build ... --theme=node_modules/documentation-hipster/index.js

Using with React Components

documentation-hipster supports the non-standard JSDoc tag @propsfor that allows to link the properties interface definition to the component.

Browse the Shops

(...in their next versions...stay tuned ...)

rlayers - React Component in TypeScript

gdal-async - Node.js addon in C++/JS with documentation-polyglot

Customization

Configuration File

documentation-hipster supports the following options in the documentation.yml configuration file:

documentation-hipster:
  # Disable the warning that multiple elements share the same base name
  # and cannot have their automatic cross links resolved
  crossLinksDupeWarning: false
  # An external function that must be the default export of the following file
  # Will get called every time a symbol is resolved to allow linking to external documentations
  # Check the rlayers project for an example
  externalCrossLinks: scripts/externalCrossLinks.js
  # If present every element will link to its source code
  srcLinkBase: https://github.com/mmomtchev/node-gdal-async/blob/master/
  # All CSS classes may be changed from these defaults
  classes:
    container: 'container d-flex flex-row',
    nav: 'position-sticky nav-section list',
    main: 'main-section ps-3',
    title: 'mt-2 mb-3 me-2',
    examples: 'ms-4',
    mainItem: 'me-1',
    navItem: 'd-flex flex-row align-items-center',
    navCollapse: 'btn btn-collapse m-0 me-2 p-0 align-items-center',
    navList: 'list-group',
    navListItem: 'list-group-item border-0',
    navLink: 'text-decoration-none',
    navText: 'm-0',
    paramsTable: 'table table-light',
    paramsParameterHeader: 'col-2',
    paramsTypeHeader: 'col-4',
    paramsDescriptionHeader: 'col-6',
    paramsParameterData: '',
    paramsTypeData: '',
    paramsDescriptionData: '',
    returns: 'me-1',
    source: 'ms-auto fs-6 fw-lighter'
  # Completely replace the built-in CSS
  css: my.css
  # Add some classes to the built-in CSS
  extraCss: scripts/gdal-doc.css

Total Conversions

documentation-hipster uses Bootstrap and Handlebars. Simply copy the documentation-hipster directory to your project and edit the templates in ./hbs.