Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@biotope/preview
Advanced tools
npm install @biotope/preview --save
The components you would like to see inside of the preview need configurations. The preview parses your components src directory for all files called "index.ts" inside folders called "preview".
{
"title": "Component Title",
"docs": `
# Markdown
## To describe my component.
I can write as much markdown as I want.
`,
"htmlTagName": "your-component-html-tag",
"resources": [
"path/to/component-script.js"
],
"configurations": [
{
"title": "Title for your Component in Storybook",
"props": [
{
"name": "text-prop",
"value": "Lorem ipsum",
"knob": {
"type": "text",
"label": "Component Text",
}
},
{
"name": "number-prop",
"value": 123
}
],
"innerHtml": "Lorem ipsum",
"innerHtmlAsKnob": true,
"children": [
{
"htmlTagName": "slotted-component-html-tag",
"resources": [...],
"props": [...],
"children": [...],
"innerHtml": "HTML content",
}
]
}
]
}
Please make sure that your configuration matches the TypeScript interface IComponentConfiguration defined in the preview package.
Since @biotope/preview uses your components' compiled source code inside the dist folder, before generating the preview you need to run
npm run build
Then you can use either
npx biotope-preview-build
to create a preview folder in your project with a index.html you then can serve somewhere, or
npx biotope-preview-serve
to only serve a temporary storybook preview.
To further configure the biotope preview, you can create a preview-config.js on your project's base level. You can the define the following (optional) parameters to adjust the process to your project structure:
Here you can see a examplary preview-config.js:
module.exports = {
globalResources: [
"css/styles.css",
],
componentsSrcDir: "src/components",
resourcesDir: "dist/resources",
outputDir: "preview",
};
The theme can be defined in the preview-config.js in the root of your project. There are different parameters to adapt the theme. Here's an example:
module.exports = {
theme: {
base: 'light',
colorPrimary: '#607DBE',
colorSecondary: '#F07D61',
brandTitle: '@biotope/preview',
brandUrl: 'https://biotope.sh/',
brandImage: 'https://biotope.sh/_assets/biotope-logo.svg',
}
};
There's a fallback theme, so you don't have to change the theme. You can also pass just one parameter, for example the colorSecondary:
module.exports = {
theme: {
colorSecondary: '#ff238d'
}
};
For all available theming parameters, please check out the Storybook documentation.
FAQs
A package to preview all your biotope components
The npm package @biotope/preview receives a total of 0 weekly downloads. As such, @biotope/preview popularity was classified as not popular.
We found that @biotope/preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.