This is Pitsby's configuration file. This file should be created in the root directory of the project which you want the documentation will be created for:
module.exports = {
projects: [
{
engine: 'angular',
collectDocsFrom: './src/angular',
moduleName: 'my-angular-components'
},
{
engine: 'react',
collectDocsFrom: './src/react',
// You may optionally declare some specific React version (Default: 16.13.0)
// NOTE: For now, Pitsby has no support for React 18.
version: '16.8.0'
},
{
engine: 'vue',
collectDocsFrom: './src/vue',
// The name of your library according UMD (Universal Module Definition).
// Pitsby will look for this name as a global variable.
libraryName: 'myVueComponents'
// You may optionally declare some specific Vue version (Default: 2.5.13)
// NOTE: For now, Pitsby has no support for Vue 3.
version: '2.6.0'
},
{
engine: 'vanilla',
collectDocsFrom: './src/vanilla',
}
],
styles: [
'./dist/my-styles.css',
// You can optionally declare an object representing
// the link tag attributes:
{ href: './dist/other.css', rel: 'stylesheet' },
{ href: './dist/any-other.css', rel: 'prefetch', as: 'style' }
],
scripts: [
'./dist/my-components.js',
// You can optionally declare an object representing
// the script tag attributes:
{ src: './dist/es6/components.js', type: 'module' },
{ src: 'https://some.cdn.com/lib.js', crossorigin: '' },
// In addition to the native HTML attributes for a script tag,
// you can use the Boolean "inline" property to indicate whether
// a script must be presented inline. This is the case of "importmaps",
// since browsers still don't support importmap coming from external sources.
{ src: './src/doc.importmap.js', type: 'importmap', inline: true }
],
other: [
'./dist/images/',
'./dist/fonts/',
'./dist/etc/'
],
metrics: {
// You can choose one, and only one, of the following
// alternatives to track pageviews:
// A) Google Analytics
// Supports Universal Analytics and Google Analytics 4 properties
googleAnalyticsId: 'UA-XXXXXXXXX-X',
// B) Plausible
plausibleId: 'mysite.com',
plausibleOptions: {
// By default, Plausible does not track events on localhost.
// You can enable localhost tracking by passing the following option:
trackLocalhost: true
// To see all available options, visit:
// https://github.com/plausible/plausible-tracker#usage
}
},
// You can optionally control Pitsby's color scheme (light/dark).
colorScheme: {
// In addition, you can set the color scheme used on Pitsby's first render.
initial: 'dark',
// If your components support both light/dark color schemes, you can
// listen for changes made by the user and theme you components accordingly.
onChange: function(scheme){
// This function receives the color scheme (light/dark) just selected by the user.
// With the selected color scheme in hands, you can appropriately adjust the
// theme of you component library.
//
// HEADS UP! This function gets executed at browser's runtime, not Node's.
// So you won't have access here to anything you eventually required in the
// configuration file using commonjs.
}
},
custom: {
favicon: {
// The following image must be included in the 'other' attribute above.
filepath: './some/path/to/favicon.png'
},
logo: {
// The following image must be included in the 'other' attribute above.
filepath: './some/path/to/image.svg',
width: '100px',
height: '100px'
},
// Styles to be applied globally.
// This is perfect when you need to do just a few overrides, otherwise,
// prefer to create a dedicated stylesheet for documentation and include it
// in the 'styles' attribute above.
styles: `
p-main { color: red; }
`,
windowTitle: 'My Custom Window Title'
},
outputDirectory: './docs'
};A list of projects with their specifications:
Components' engine. Support for AngularJS (angular), React (react), Vue (vue) and Vanilla (vanilla) components;
The directory where Pitsby should look for .doc.js files regardless of the engine used.
Angular module's name that contains the components you are writing *.doc.js for.
The path Pitsby should use to import your Vue components. Your Vue components should be written using the Vue plugin strategy: Vue.use(yourVueComponents).
You can optionally set a version for React (default: 16.13.0) or Vue (default: 2.5.13) projects.
List of stylesheets that should be included in the documentation
List of scripts that should be included in the documentation.
List of any other file/directory that should be included in the documentation.
IDs to be used on third party metrics services integration. For now, Pitsby support Google Analytics only.
UI Elements attributes that should be customized.
Directory where the documentation should be outputted to. If not informed, documentation will be outputted to a directory called pitsby.