fix(storybook): update stories to support mdx2
This commit is contained in:
Gabe Kangas
parent
c22d5357ab
commit
ab8c2279e3
@ -75,6 +75,12 @@
|
||||
"stylelint-config-standard",
|
||||
"stylelint-config-standard-scss",
|
||||
"postcss",
|
||||
"stylelint"
|
||||
"stylelint",
|
||||
"@babel/core",
|
||||
"@storybook/addon-mdx-gfm",
|
||||
"@storybook/addon-styling-webpack",
|
||||
"@storybook/nextjs",
|
||||
"@storybook/react",
|
||||
"resolve-url-loader",
|
||||
]
|
||||
}
|
||||
@ -110,20 +110,6 @@ module.exports = {
|
||||
use: ['@svgr/webpack'],
|
||||
});
|
||||
|
||||
// config.module.rules.push({
|
||||
// test: /\.less$/,
|
||||
// use: [
|
||||
// require.resolve('style-loader'),
|
||||
// require.resolve('css-loader'),
|
||||
// {
|
||||
// loader: require.resolve('less-loader'),
|
||||
// options: {
|
||||
// lessOptions: { javascriptEnabled: true },
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
|
||||
return config;
|
||||
},
|
||||
|
||||
@ -135,6 +121,6 @@ module.exports = {
|
||||
staticDirs: ['../public', '../../static', './story-assets'],
|
||||
|
||||
docs: {
|
||||
autodocs: true,
|
||||
autodocs: false,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
@ -6,14 +6,11 @@ import { Image, ImageRow } from './ImageAsset';
|
||||
# Built-in Custom Emoji
|
||||
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## Blob
|
||||
|
||||
<a href="img/emoji/blob/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
`} />
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="ablobattention.gif">
|
||||
@ -85,14 +82,11 @@ import { Image, ImageRow } from './ImageAsset';
|
||||
</IconGallery>
|
||||
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## Conigliolo96
|
||||
|
||||
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
`} />
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="conigliolo1.gif">
|
||||
@ -116,14 +110,11 @@ import { Image, ImageRow } from './ImageAsset';
|
||||
</IconGallery>
|
||||
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## Dog
|
||||
|
||||
<a href="img/emoji/dog/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
`} />
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="img001.svg">
|
||||
@ -156,14 +147,11 @@ import { Image, ImageRow } from './ImageAsset';
|
||||
</IconGallery>
|
||||
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## Mutant
|
||||
|
||||
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
`} />
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="8_ball.svg">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
||||
import { ColorRow, getColor } from './Color';
|
||||
|
||||
<Meta
|
||||
@ -9,14 +9,10 @@ import { ColorRow, getColor } from './Color';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description markdown={`
|
||||
|
||||
## Component Colors
|
||||
|
||||
These are the specific colors used for components in the web application. They point to colors in the Owncast color palette but CSS variable names can be overwritten for customizing the theme.
|
||||
|
||||
`}/>
|
||||
|
||||
<ColorPalette>
|
||||
<ColorItem
|
||||
title="Text"
|
||||
|
||||
@ -8,15 +8,10 @@ import { ColorRow, getColor } from './Color';
|
||||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description markdown={`
|
||||
|
||||
## Theme Color Palette
|
||||
|
||||
These are the colors used across the web application. All the specific component colors point to colors in this palette. If you override one of these colors all usage of that color will be updated.
|
||||
|
||||
`}/>
|
||||
|
||||
<ColorPalette>
|
||||
<ColorItem
|
||||
title="Theme color palette"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
||||
import { ColorRow, getColor } from './Color';
|
||||
|
||||
<Meta
|
||||
@ -8,15 +8,10 @@ import { ColorRow, getColor } from './Color';
|
||||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description markdown={`
|
||||
|
||||
## User Colors
|
||||
|
||||
These are the colors available for assigning to chat users for display purposes. The CSS variables can be overwritten for customizing the theme.
|
||||
|
||||
`}/>
|
||||
|
||||
<ColorPalette>
|
||||
<ColorItem title="User Color 0" colors={{ ...getColor('theme-color-users-0') }} />
|
||||
<ColorItem
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/Basic Example"
|
||||
@ -9,12 +9,9 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## Basic
|
||||
|
||||
This is the most basic Owncast setup and is what you get when you run it without any additional services.
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`graph TD
|
||||
@ -34,13 +31,10 @@ This is the most basic Owncast setup and is what you get when you run it without
|
||||
`}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## S3 Object Storage
|
||||
|
||||
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
||||
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`graph TD
|
||||
@ -74,15 +68,11 @@ Instead of video players pulling the stream from your Owncast server it would in
|
||||
`}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## CDN in front of S3 Object Storage
|
||||
|
||||
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
||||
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
||||
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
subgraph Video Assets
|
||||
@ -119,12 +109,9 @@ This leads to not only your server not serving any video traffic, but the video
|
||||
`}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## CDN in front of Owncast
|
||||
|
||||
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/S3 With CDN Example"
|
||||
@ -9,15 +9,11 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## CDN in front of S3 Object Storage
|
||||
|
||||
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
||||
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
||||
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
subgraph Video Assets
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/CDN Example"
|
||||
@ -9,12 +9,9 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## CDN in front of Owncast
|
||||
|
||||
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/S3 Example"
|
||||
@ -9,13 +9,10 @@ import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||
}}
|
||||
/>
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## S3 Object Storage
|
||||
|
||||
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
||||
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
||||
`} />
|
||||
|
||||
<Mermaid
|
||||
chart={`graph TD
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Emoji" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
@ -7,14 +7,11 @@ import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
{{#each emojiCollections}}
|
||||
|
||||
<Description
|
||||
markdown={`
|
||||
## {{capitalize this.name}}
|
||||
|
||||
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
`} />
|
||||
|
||||
<IconGallery>
|
||||
{{#each images}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user