mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 05:25:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix(storybook): update stories to support mdx2

Browse source
This commit is contained in:
Gabe Kangas 2023-10-25 21:39:19 -07:00
parent c22d5357ab
commit ab8c2279e3
No known key found for this signature in database
GPG key ID: 4345B2060657F330
11 changed files with 16 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/.knip.json
View file

@ -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",
]
}

16
web/.storybook/main.js
View file

@ -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,
},
};

14
web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
View file

@ -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">

6
web/.storybook/stories-category-doc-pages/colors/ComponentColors.stories.mdx
View file

@ -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"

5
web/.storybook/stories-category-doc-pages/colors/OwncastColorPalette.stories.mdx
View file

@ -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"

7
web/.storybook/stories-category-doc-pages/colors/UserColors.stories.mdx
View file

@ -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

15
web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
View file

@ -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

6
web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
View file

@ -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

5
web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
View file

@ -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

5
web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
View file

@ -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

5
web/.storybook/tools/Emoji.stories.mdx
View file

@ -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}}