👩🎓 Level: Expert
patternplate can be configured via patternplate.config.js.
In absence of a patternplate.config.js file the defaults are:
module.exports = {
docs: ["docs/**/*.md"],
entry: ["lib/**/*.js"],
render: "@patternplate/render-default/render",
mount: "@patternplate/render-default/mount"
};
An array of glob patterns string[].
Relative to patternplate.config.js.
Files matching the glob pattern are considered as sources for documentation.
Example
module.exports = {
// all .md files next to patternplate.config.js
docs: ["*.md"]
};
An array of glob patterns string[].
Relative to patternplate.config.js.
Files matching the glob pattern are considered as demo entries.
Example
module.exports = {
// All *.demo.js files in dist, e.g. dist/button/button.demo.js
entry: ["dist/**/*.demo.js"]
};
An absolute or relative module id string, resolved relative to patternplate.config.js.
The default export of the resolved module is used as server-side render function.
Examples
module.exports = {
// use render of the node module @patternplate/render-react
render: "@patternplate/render-react/render"
};
module.exports = {
// use the file render.js next to patternplate.config.js
render: "./render.js"
};
An absolute or relative module id string, resolved relative to patternplate.config.js.
The default export of the resolved module is used as client-side mount function.
Examples
module.exports = {
// use render of the node module @patternplate/render-react
render: "@patternplate/render-react/mount"
};
module.exports = {
// use the file mount.js next to patternplate.config.js
render: "./mount.js"
};
An absolute or relative module id string, resolved relative to patternplate.config.js.
The exports of the resolved module are used as a specialized demo that is displayed independently
of the patternplate web interface on /
Examples
module.exports = {
// use the file cover.js next to patternplate.config.js
render: "./cover.js"
};
A map of theming-related properties. Use this to adapt the interface of patternplate to
your CI requirements.
There are three classes of ui configuration:
Examples
module.exports = {
ui: {
logo: `
<svg height="30" width="30">
<rect widht="30" height="30"/>
</svg>`,
colorBackgroundDark: "rgb(15, 15, 50)",
colorBackgroundSecondaryDark: "rgb(26, 24, 68)",
colorBackgroundTertiaryDark: "rgb(26, 24, 68)",
colorBorderDark: "rgb(26, 24, 68)"
}
};
An SVG to use as logo above the main navigation. patternplate performs
sanitization on the provided SVG code to prevent side effects between
the embedded SVG and the interface.
Graphics with height and width of 30 are recommended.
Examples
module.exports = {
ui: {
logo: `
<svg height="30" width="30">
<rect widht="30" height="30"/>
</svg>`
}
};
An SVG to use as favicon in browsers. In clients without SVG favicon support a PNG is generated automatically. patternplate performs
sanitization on the provided SVG code.
module.exports = {
ui: {
favicon: `
<svg height="30" width="30">
<circle cx="15" cy="15" r="15"/>
</svg>`
}
};
CSS font value to use for basic text styling, e.g. Links, Paragraphs.
module.exports = {
ui: {
fontDefault: `Comic Sans`
}
};
CSS font value to use for headline styling
module.exports = {
ui: {
fontHeadline: `Arial, sans-serif`
}
};
CSS font value to use for code
module.exports = {
ui: {
fontCode: `Menlo, monospace`
}
};
Global CSS Color of active color to use througout the interface, e.g. links, activated navigation items.
module.exports = {
ui: {
colorActive: `rgb(255, 0, 0)`
}
};
Global CSS Color for error messages, deprecated / alpha flags.
module.exports = {
ui: {
colorError: `rgb(255, 0, 0)`
}
};
Global CSS Color for warning messages and beta flags.
module.exports = {
ui: {
colorWarning: `rgb(255, 0, 0)`
}
};
Global CSS Color for info messages
module.exports = {
ui: {
colorInfo: `rgb(255, 0, 0)`
}
};
Global CSS Color for sucess messages and stable flags
module.exports = {
ui: {
colorSucess: `rgb(255, 0, 0)`
}
};
Themed CSS Color for primary background. Applies to e.g. sidebar, search.
module.exports = {
ui: {
colorBackgroundDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for backgrounds. Applies to e.g. active items in sidebar
module.exports = {
ui: {
colorBackgroundSecondaryDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for backgrounds. Applies to e.g. active labels in sidebar
module.exports = {
ui: {
colorBackgroundTertiaryDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for borders.
module.exports = {
ui: {
colorBorderDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for basic text color.
module.exports = {
ui: {
colorTextDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for inverted text color.
module.exports = {
ui: {
colorTextNegatedDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for recessed text color.
module.exports = {
ui: {
colorRecessDark: `rgb(255, 0, 0)`
}
};
Themed CSS Color for primary background. Applies to e.g. Markdown.
module.exports = {
ui: {
colorBackgroundLight: `rgb(255, 0, 0)`
}
};
Themed CSS Color for backgrounds.
module.exports = {
ui: {
colorBackgroundSecondaryLight: `rgb(255, 0, 0)`
}
};
Themed CSS Color for backgrounds.
module.exports = {
ui: {
colorBackgroundTertiaryLight: `rgb(255, 0, 0)`
}
};
Themed CSS Color for borders, e.g. for <hr/>.
module.exports = {
ui: {
colorBorderLight: `rgb(255, 0, 0)`
}
};
Themed CSS Color for basic text color.
module.exports = {
ui: {
colorTextLight: `rgb(255, 0, 0)`
}
};
Themed CSS Color for inverted text color.
module.exports = {
ui: {
colorTextNegatedLight: `rgb(255, 0, 0)`
}
};
Themed CSS Color for recessed text color.
module.exports = {
ui: {
colorRecessLight: `rgb(255, 0, 0)`
}
};
A boolean value that switches the components on/off from the sidebar.
module.exports = {
ui: {
showComponents: false
}
};