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

doca-moo-de-event-contracts-theme

v1.0.0

Published

Doca theme used by MOO Data Engineering team fort their Event Contract documentation

Downloads

4

Vulnerabilities

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

Links

Git

Maintainers

thidrethidre

Keywords

Readme

doca-moo-de-event-contracts-theme

Simple Twitter Boostrap 3 based theme for doca.

It's supposed to be used in combination with doca - a tool that scaffolds API documentation based on JSON HyperSchemas.

Please file any issues at the doca repository.

Usage

npm install -g doca
doca init -t moo-de-event-contracts

This creates a new API documentation with doca-moo-de-event-contracts-theme as a dependency.

How to create your own theme

The best way is to fork and modify this repository. The integration with doca is pretty loose and it makes just a few assumptions about your theme.

React Components

Doca expects to import two React components from your theme (otherwise it fails):

  • App - main root component that gets all schemas through the props
  • Head - <head></head> part of the final documentation

App component

App component can expect to receive two props:

  • this.props.schemas : Immutable.List - an array of all imported schemas, the schema format can be found here - it's the ouput of json-schema-example-loader. However, the whole data structure is additionally turned into immutable one by Immutable.js library and Immutable.fromJS() function. It deeply converts all arrays into Immutable.List and all objects into Immutable.Map. Thus, you have to use slightly different methods for iteration or prop access.
  • this.props.config : object - a plain object exported by users from config.js, it should always have the key title.

Head component

Head component can expect to receive two props:

  • this.props.title : string - the title specified in config.js

  • this.props.cssBundle : string - you should put this code into your Head component:

    {this.props.cssBundle && <link href={this.props.cssBundle} rel="stylesheet" />}

State

  • You should just use native this.state and keep the state in your components. It's perfect for things like toggling.
  • Advanced: If your theme is getting bigger (a lot of state everywhere), you can consider using Redux. Doca is already using Redux for handling schemas. Your theme can export a reducer (check this pattern in our cf-ui components). However, it's up to you to modify the scaffolded application and import your reducer in /src/client/reducers/index.js. Doca app currently doesn't do any assumptions about this (it could auto-import the theme reducer in future though). So if you want to make your theme useful out-of-the-box, try to use native this.state instead.

Global variables

You can use these three global variables (provided by webpack):

  • IS_JAVASCRIPT : bool - doca provides npm run build:nojs script. You can ship your API docs without JS bundle. This variable is true when nojs flag is used. It gives you opportunity to do some changes in your components (show/hide sections should be visible by default etc.)
  • LAST_MODIFIED : number - Date.now() value, in case you want to display "last modified" information somewhere
  • process.env.NODE_ENV : enum - can be development or production

Styles

You have three options how to style your React components:

  • React inline styles.
  • Link directly your external stylesheet in the Head component.
  • Doca's webpack expects to find folder /styles in your theme. It dynamically imports and processes all css, less and scss files from this folder. Magic! Then, it bundles them into a single css file and passes this.props.cssBundle to your Head component. You can leave this folder empty, then this.props.cssBundle is going to be empty.

Unfortunately, you can't directly import styles from your React components since webpack can't resolve such requires in node_modules.

Publishing

We would be happy to see more open source doca themes! Let us know if you publish some. It should follow this name convention:

doca-XXXXXXXX-theme

Tips

  • Immutable.js is used because resulting app (page) can be pretty big and we want to keep re-rendering fast. All your components should implement shouldComponentUpdate() method, so it prevents unnecessary re-renders. Or you can simply extend your components from react-pure-render.

  • When you're developing a new theme, you can streamline the process by copy&pasting your components into Doca app. That will give you hot-reloading! Otherwise, you can use npm link. With every change, you have to call npm link again, so it triggers npm prepublish and rebuilds your components (babel/JSX -> ES5).

  • npm run lint (use node v4+)