Nitro Component Catalog Plugin
This plugin allows you to navigate and preview all your components.
Example preview
Installation
npm i --save-dev nitro-component-catalog
Integration into nitro
Place the following configuration file to your projects/routes/pattern-catalog.js
component-catalog.js
var nitroPatternNavigation = require('@namics/nitro-component-catalog');
var path = require('path');
// Frontify demos
module.exports = function(app) {
app.use('/', nitroComponentCatalog({
// The location of your component source files
root: path.resolve(__dirname, '../../components'),
// The component preview view - 'preview' resolves to views/component.hbs
componentView: 'component',
// The example view - 'example' resolves to views/example.hbs
exampleView: 'example',
// The example code view - 'code' resolves to views/code.hbs
exampleCodeView: 'code',
// The example partial - '_partials/example' resolves to views/_partials/example.hbs
examplePartial: '_partials/example',
// The navigation view - 'navigation' resolves to views/navigation.hbs
navigationView: 'navigation',
// Optional - additional view data
viewData: app.locals,
// Optional - page title prefix
pageTitle: 'Pattern library',
// Optional if you are using webpack you might pass the compiler instance
// This will NOT handle your webpack compilation but only visualise the dependencies
webpackApp: webpack(webpackConfig),
// Optional - if your project needs specific resolver settings you can pass
// a custom resolver instance
nitroComponentResolver: new NitroComponentResolver(/* ... */),
// Optional - if your project needs additional validations on the pattern.json
// you can pass a custom validator instance
nitroComponentValidator: new NitroComponentValidator(/* ... */),
}));
};