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

airbags

v0.1.0-rc.2

Published

An isomorphic react based generator of sites

Downloads

1

Readme

Airbags

Create ~~isomorphic~~ universal static websites, using an uniform API when generating and on the client side.

See example in docs

Build Status Coverage Status

Plain Usage

Collecting

Collect pages using the collect function, which takes a stream of vinyl files and an extractor, e.g. the markdown extractor. Extractors are functions which takes a string and returns an object with the shape

{
  html: `<string of html>`,
  meta: {
    `<meta data from file>`
  }
}

collect generates a siteMap object:

collect(source, extractor).then(siteMap => console.log(siteMap));

Context

The context contains information which should be available both when generating static pages and during runtime on the client side. Create a context using createContext.

const context = createContext({ siteMap });

Context API

The context API lets us access data, and consists of two main parts: the strategies and the middleware.

Strategies define how to access the context data. Middleware can extend the context and the API: they can modify the context or add methods to the API.

import createApi, { createHttpStrategy } from 'airbags/api';
import { home, menu, config } from 'airbags/middleware';

const middleware = {
  home(), // A page with `home: true` in meta data will be renamed `index`
  menu(), // Add a method `.getMenu()` to API, which returns pages with `inMenu: true` in meta data
  config({ siteName: 'My Awesome Site' }), // Add a method `getConfig()` to API, which returns the supplied object
};

const api = createApi([createHttpStrategy('/')], middleware);

When rendering, you probably want to use the cache strategy instead of the HTTP strategy. The cache strategy factory createCacheStrategy, takes an optional context, or the context can be set later with the setContext method.

Render

Renderers take an API instance and returns a stream of vinyl files. This package contains two renderers, the json renderer and renderer suitable for use with React, reactRenderer.

const renderers = [
  renderJson,
  createReactRenderer(renderPath), // `renderPath` is a function `nakedPath` -> Promise<string of html>
];

mergeStream(...renderers.map(renderer => renderer(api)))
  .on('data', file => {
    // Store the file
  })
  .on('end', console.log('Rendered successfully!'));

Todo

  • [ ] Support hot reloading of content
  • [ ] Support style loaders in generating phase