fix(storybook): update stories to support mdx2

web/.knip.json

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

web/.storybook/main.js

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

web/.storybook/stories-category-doc-pages/Emoji.stories.mdx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

web/.storybook/tools/Emoji.stories.mdx

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