diff --git a/web/.storybook/main.js b/web/.storybook/main.js
index b00feec09..b6d752a8d 100644
--- a/web/.storybook/main.js
+++ b/web/.storybook/main.js
@@ -3,12 +3,7 @@ module.exports = {
previewMdx2: true,
},
- stories: [
- '../.storybook/stories-category-doc-pages/**/*.stories.mdx',
- '../stories/**/*.stories.@(js|jsx|ts|tsx)',
- '../components/**/*.stories.@(js|jsx|ts|tsx)',
- '../pages/**/*.stories.@(js|jsx|ts|tsx)',
- ],
+ stories: ['../.storybook/stories-category-doc-pages/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../components/**/*.stories.@(js|jsx|ts|tsx)', '../pages/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
@@ -98,6 +93,7 @@ module.exports = {
],
},
},
+ '@chromatic-com/storybook'
],
webpackFinal: async (config, { configType }) => {
diff --git a/web/.storybook/preview.js b/web/.storybook/preview.js
index a4f9bbfc1..a90998399 100644
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -71,11 +71,11 @@ export const parameters = {
fetchMock: {
mocks: [],
},
- actions: { argTypesRegex: '^on[A-Z].*' },
+ // actions: { argTypesRegex: '^on[A-Z].*' },
docs: {
container: DocsContainer,
},
- actions: { argTypesRegex: '^on[A-Z].*' },
+ // actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
controls: {
matchers: {
diff --git a/web/.storybook/stories-category-doc-pages/Design.stories.mdx b/web/.storybook/stories-category-doc-pages/Design.mdx
similarity index 90%
rename from web/.storybook/stories-category-doc-pages/Design.stories.mdx
rename to web/.storybook/stories-category-doc-pages/Design.mdx
index 03d0dd47d..f4f6a4f46 100644
--- a/web/.storybook/stories-category-doc-pages/Design.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Design.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/blocks';
-
+
# Owncast Design Guidelines & Resources
@@ -23,8 +23,8 @@ Read the detailed [product definition](https://github.com/owncast/owncast/blob/d
**We encourage you to:**
-- Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
-- Check out our [Contributor Guide](https://owncast.online/help) and
+* Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
+* Check out our [Contributor Guide](https://owncast.online/help) and
[Code of Conduct](https://github.com/owncast/owncast/blob/develop/CODE_OF_CONDUCT.md)
## 🎠Target audience
@@ -36,9 +36,9 @@ Owncast is a live streaming and chat server targeted to anybody who has live str
Owncast is a constantly moving project with features both old and new. This allows for design contributions to be both big or small.
You may not know how much time you can dedicate to the project, or if you'll be able to see something through to the end, so be honest about that. Take on projects that you'll be able to see completed.
-- So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
-- If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
-- Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
+* So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
+* If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
+* Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
## 💅 Design relevant materials
@@ -72,4 +72,3 @@ All design work is licensed under the
[MIT](https://mit-license.org/)
[(Back to top)](#-table-of-contents)
-
diff --git a/web/.storybook/stories-category-doc-pages/Development.stories.mdx b/web/.storybook/stories-category-doc-pages/Development.mdx
similarity index 66%
rename from web/.storybook/stories-category-doc-pages/Development.stories.mdx
rename to web/.storybook/stories-category-doc-pages/Development.mdx
index e146344e5..c275a2c96 100644
--- a/web/.storybook/stories-category-doc-pages/Development.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Development.mdx
@@ -1,26 +1,27 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/blocks';
-
+
+
+***
----
title: "How to work on Owncast"
description: The technical details for those wishing to take part in Owncast development.
tags:
- [
- development,
- contribute,
- open-source,
- github,
- git,
- go,
- react,
- typescript,
- contributing,
- ]
-aliases: [/docs/building]
+\[
+development,
+contribute,
+open-source,
+github,
+git,
+go,
+react,
+typescript,
+contributing,
+]
+aliases: \[/docs/building]
type: toc
toc: true
----
+---------
diff --git a/web/.storybook/stories-category-doc-pages/Emoji.mdx b/web/.storybook/stories-category-doc-pages/Emoji.mdx
new file mode 100644
index 000000000..c0eca6ab4
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/Emoji.mdx
@@ -0,0 +1,390 @@
+import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/blocks';
+import { Image, ImageRow } from './ImageAsset';
+
+
+
+# Built-in Custom Emoji
+
+## Blob
+
+
+ LICENSE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Conigliolo96
+
+
+ LICENSE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Dog
+
+
+ LICENSE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Mutant
+
+
+ LICENSE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx b/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
deleted file mode 100644
index b2b6ae433..000000000
--- a/web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
+++ /dev/null
@@ -1,312 +0,0 @@
-import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
-import { Image, ImageRow } from './ImageAsset';
-
-
-
-# Built-in Custom Emoji
-
-
-## Blob
-
-
- LICENSE
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Conigliolo96
-
-
- LICENSE
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Dog
-
-
- LICENSE
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## Mutant
-
-
- LICENSE
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/.storybook/stories-category-doc-pages/Images.mdx b/web/.storybook/stories-category-doc-pages/Images.mdx
new file mode 100644
index 000000000..1e7f97693
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/Images.mdx
@@ -0,0 +1,31 @@
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
+
+
+
+# Images
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/.storybook/stories-category-doc-pages/Images.stories.mdx b/web/.storybook/stories-category-doc-pages/Images.stories.mdx
deleted file mode 100644
index dcf0efdc7..000000000
--- a/web/.storybook/stories-category-doc-pages/Images.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
-
-
-
-# Images
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/.storybook/stories-category-doc-pages/LogosAndGraphics.stories.mdx b/web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
similarity index 79%
rename from web/.storybook/stories-category-doc-pages/LogosAndGraphics.stories.mdx
rename to web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
index c8d52f01f..5a5771a8a 100644
--- a/web/.storybook/stories-category-doc-pages/LogosAndGraphics.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
@@ -1,11 +1,12 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/blocks';
import { Image, ImageRow } from './ImageAsset';
-
+
-# Logos & Graphics
+# Logos & Graphics
-
-
+ ]}
+/>
diff --git a/web/.storybook/stories-category-doc-pages/ProductDefinition.mdx b/web/.storybook/stories-category-doc-pages/ProductDefinition.mdx
new file mode 100644
index 000000000..d471c4a6b
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/ProductDefinition.mdx
@@ -0,0 +1,90 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+
+
+# Owncast Product Definition
+
+## Why
+
+By defining the goals and target user bases we have something stable to guide decisions, features, conversations and keep clarity around what is being built.
+
+While these definitions and lists should not be seen as exhaustive, in theory, once this is seen as "complete" there should be few, if any changes, as that would note a large change in direction and goals.
+
+\[TOC]
+
+## Vision
+
+> The out-of-the-box personal broadcast platform for DIY streamers and integrators.
+
+## Primary Goals
+
+* Useful out of the box.
+* Fast to get running.
+* Self-contained.
+* An alternative, not a competitor.
+* For individuals, not service providers.
+* Easy to integrate into other projects/products.
+* Low barrier to entry.
+* Empowering.
+* Customizable and hackable.
+
+## Primary Users
+
+### The DIY Streamer
+
+An individual who is streaming as a hobby, a project, or is moving their audience from an existing streaming platform.
+
+**Needs**:
+
+* Security/ownership of their own stream.
+* Building an independent space.
+* Personalization.
+* Tools to manage a relationship with their audience.
+
+**Pains**:
+
+* Kicked off other streaming services.
+* Feeling of inequality or bias.
+* Their content has low visibility.
+* Platform rules do not align with them.
+* Do not agree with the forced ads, tracking and analytics.
+
+### The Integrator
+
+An individual or organization that has existing content, products or platforms that they want to add live streaming functionality to.
+
+**Needs**:
+
+* Broadcasting without censorship.
+* Full ownership of their brand.
+* Embedding and 3rd party playback.
+* Support private or invite-only streams.
+* Independence.
+
+**Pains**:
+
+* Censorship.
+* Rules.
+* Ads.
+* Risk of losing viewers from competitors and distractions.
+
+**Desires**:
+
+* Hosting events.
+* Running their own broadcasting service.
+
+## Secondary Users
+
+### The Viewer
+
+An audience member that is often, but not always, taking part in chat.
+
+**Needs**:
+
+* To watch high quality video.
+* Ways to interact with the streamer. Chat, memes, emoji.
+* Calls to actions, links, next steps.
+
+**Pains**:
+
+* Understanding the interface and knowing they're in the correct place.
diff --git a/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx b/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
deleted file mode 100644
index 956af1841..000000000
--- a/web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-
-
-# Owncast Product Definition
-
-## Why
-
-By defining the goals and target user bases we have something stable to guide decisions, features, conversations and keep clarity around what is being built.
-
-While these definitions and lists should not be seen as exhaustive, in theory, once this is seen as "complete" there should be few, if any changes, as that would note a large change in direction and goals.
-
-[TOC]
-
-## Vision
-
-> The out-of-the-box personal broadcast platform for DIY streamers and integrators.
-
-## Primary Goals
-
-- Useful out of the box.
-- Fast to get running.
-- Self-contained.
-- An alternative, not a competitor.
-- For individuals, not service providers.
-- Easy to integrate into other projects/products.
-- Low barrier to entry.
-- Empowering.
-- Customizable and hackable.
-
-## Primary Users
-
-### The DIY Streamer
-
-An individual who is streaming as a hobby, a project, or is moving their audience from an existing streaming platform.
-
-**Needs**:
-
-- Security/ownership of their own stream.
-- Building an independent space.
-- Personalization.
-- Tools to manage a relationship with their audience.
-
-**Pains**:
-
-- Kicked off other streaming services.
-- Feeling of inequality or bias.
-- Their content has low visibility.
-- Platform rules do not align with them.
-- Do not agree with the forced ads, tracking and analytics.
-
-### The Integrator
-
-An individual or organization that has existing content, products or platforms that they want to add live streaming functionality to.
-
-**Needs**:
-
-- Broadcasting without censorship.
-- Full ownership of their brand.
-- Embedding and 3rd party playback.
-- Support private or invite-only streams.
-- Independence.
-
-**Pains**:
-
-- Censorship.
-- Rules.
-- Ads.
-- Risk of losing viewers from competitors and distractions.
-
-**Desires**:
-
-- Hosting events.
-- Running their own broadcasting service.
-
-## Secondary Users
-
-### The Viewer
-
-An audience member that is often, but not always, taking part in chat.
-
-**Needs**:
-
-- To watch high quality video.
-- Ways to interact with the streamer. Chat, memes, emoji.
-- Calls to actions, links, next steps.
-
-**Pains**:
-
-- Understanding the interface and knowing they're in the correct place.
-
diff --git a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx
new file mode 100644
index 000000000..ce2ea5895
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx
@@ -0,0 +1,131 @@
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
+
+
+
+# Social Platform Images
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
deleted file mode 100644
index 7fcdd02f1..000000000
--- a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
-
-
-
-# Social Platform Images
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/.storybook/stories-category-doc-pages/Tshirt.stories.mdx b/web/.storybook/stories-category-doc-pages/Tshirt.mdx
similarity index 96%
rename from web/.storybook/stories-category-doc-pages/Tshirt.stories.mdx
rename to web/.storybook/stories-category-doc-pages/Tshirt.mdx
index 93d546aba..6fc12d67f 100644
--- a/web/.storybook/stories-category-doc-pages/Tshirt.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Tshirt.mdx
@@ -1,11 +1,12 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/blocks';
import { Image, ImageRow } from './ImageAsset';
# T-shirt
-
-
+ ]}
+/>
diff --git a/web/.storybook/stories-category-doc-pages/Typography.stories.mdx b/web/.storybook/stories-category-doc-pages/Typography.mdx
similarity index 90%
rename from web/.storybook/stories-category-doc-pages/Typography.stories.mdx
rename to web/.storybook/stories-category-doc-pages/Typography.mdx
index d9cbab28f..1e8ed1216 100644
--- a/web/.storybook/stories-category-doc-pages/Typography.stories.mdx
+++ b/web/.storybook/stories-category-doc-pages/Typography.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Typeset, Source } from '@storybook/blocks';
+
@@ -128,11 +123,7 @@ export const displayFont = {
## Usage
-