diff --git a/web/.storybook/stories-category-doc-pages/Design.mdx b/web/.storybook/stories-category-doc-pages/Design.mdx
new file mode 100644
index 000000000..03d0dd47d
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/Design.mdx
@@ -0,0 +1,75 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+# Owncast Design Guidelines & Resources
+
+A collection of design contribution guidelines and resources for the Owncast interface.
+
+> **All participating designers are highly encouraged to shape and evolve these guidelines!**
+> It is a work in progress and as we have design contributors we can work to solidify the process, tools and resources.
+
+## 👋 Welcome
+
+Owncast is a live streaming and chat server targeted to anybody who has live streaming needs. This means anybody from corporate events, government meetings, game streamers, musicians, churches, TV stations, and more.
+
+Read the detailed [product definition](https://github.com/owncast/owncast/blob/develop/docs/product-definition.md) to learn more.
+
+## 🚢 How to contribute to product design
+
+1. Check out open [issues](https://github.com/owncast/owncast/issues) here on GitHub (we label them with `needs design`)
+2. Feel free to open an issue on your own if you find something you would like to contribute to the project.
+3. Add your contributions to an issue and we promise we will review your contribution carefully and foster discussions
+
+**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
+ [Code of Conduct](https://github.com/owncast/owncast/blob/develop/CODE_OF_CONDUCT.md)
+
+## 🎭 Target audience
+
+Owncast is a live streaming and chat server targeted to anybody who has live streaming needs. This means anything from corporate events, government meetings, game streams, concerts, TV stations, and more.
+
+## 🧑🎨 Product design opportunities
+
+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?
+
+## 💅 Design relevant materials
+
+A collection of design relevant information and materials can be found under the "style" section of "Storybook" here:
+
+http://owncast.online/components
+
+### Fonts
+
+https://owncast.online/components/?path=%2Fdocs%2Fowncast-styles-typography--page
+
+Body text: Inter
+
+Display/Header text: Poppins
+
+### Colors
+
+https://owncast.online/components/?path=%2Fdocs%2Fowncast-styles-colors-components--page
+
+### Design Files, Screenshots, etc
+
+We do not currently have any design files that fully represent the state of
+the Owncast interface. However, going forward it would be nice to resolve this
+and collaborate on designs.
+
+We do have a [PenPot organization](https://design.penpot.app/#/dashboard/team/8373f780-f255-11ec-b774-f940e3befd53/projects). Please ask for access.
+
+## 🎓 License
+
+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.mdx b/web/.storybook/stories-category-doc-pages/Development.mdx
new file mode 100644
index 000000000..e146344e5
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/Development.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+
+
+---
+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]
+type: toc
+toc: true
+---
+
+
+
+Click here if you are not redirected.
+
diff --git a/web/.storybook/stories-category-doc-pages/Emoji.mdx b/web/.storybook/stories-category-doc-pages/Emoji.mdx
index c0eca6ab4..b2b6ae433 100644
--- a/web/.storybook/stories-category-doc-pages/Emoji.mdx
+++ b/web/.storybook/stories-category-doc-pages/Emoji.mdx
@@ -1,105 +1,86 @@
-import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/blocks';
+import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
# Built-in Custom Emoji
+
## Blob
LICENSE
-
-
- 
-
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
## Conigliolo96
@@ -107,31 +88,27 @@ import { Image, ImageRow } from './ImageAsset';
LICENSE
-
-
- 
-
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
## Dog
@@ -139,43 +116,36 @@ import { Image, ImageRow } from './ImageAsset';
LICENSE
-
-
- 
-
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
## Mutant
@@ -183,208 +153,160 @@ import { Image, ImageRow } from './ImageAsset';
LICENSE
-
-
- 
-
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/.storybook/stories-category-doc-pages/Images.mdx b/web/.storybook/stories-category-doc-pages/Images.mdx
index 1e7f97693..dcf0efdc7 100644
--- a/web/.storybook/stories-category-doc-pages/Images.mdx
+++ b/web/.storybook/stories-category-doc-pages/Images.mdx
@@ -1,31 +1,27 @@
-import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
# Images
-
-
- 
-
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx b/web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
index 5a5771a8a..c8d52f01f 100644
--- a/web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
+++ b/web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
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
index d471c4a6b..956af1841 100644
--- a/web/.storybook/stories-category-doc-pages/ProductDefinition.mdx
+++ b/web/.storybook/stories-category-doc-pages/ProductDefinition.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
# Owncast Product Definition
@@ -10,7 +10,7 @@ By defining the goals and target user bases we have something stable to guide de
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]
+[TOC]
## Vision
@@ -18,15 +18,15 @@ While these definitions and lists should not be seen as exhaustive, in theory, o
## 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.
+- 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
@@ -36,18 +36,18 @@ An individual who is streaming as a hobby, a project, or is moving their audienc
**Needs**:
-* Security/ownership of their own stream.
-* Building an independent space.
-* Personalization.
-* Tools to manage a relationship with their audience.
+- 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.
+- 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
@@ -55,23 +55,23 @@ An individual or organization that has existing content, products or platforms t
**Needs**:
-* Broadcasting without censorship.
-* Full ownership of their brand.
-* Embedding and 3rd party playback.
-* Support private or invite-only streams.
-* Independence.
+- 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.
+- Censorship.
+- Rules.
+- Ads.
+- Risk of losing viewers from competitors and distractions.
**Desires**:
-* Hosting events.
-* Running their own broadcasting service.
+- Hosting events.
+- Running their own broadcasting service.
## Secondary Users
@@ -81,10 +81,11 @@ 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.
+- 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.
+- 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
index ce2ea5895..7fcdd02f1 100644
--- a/web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx
+++ b/web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx
@@ -1,131 +1,102 @@
-import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
+import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
# Social Platform Images
-
-
- 
-
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/web/.storybook/stories-category-doc-pages/Tshirt.mdx b/web/.storybook/stories-category-doc-pages/Tshirt.mdx
index 6fc12d67f..93d546aba 100644
--- a/web/.storybook/stories-category-doc-pages/Tshirt.mdx
+++ b/web/.storybook/stories-category-doc-pages/Tshirt.mdx
@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
# T-shirt
-
+ ]}/>
+
diff --git a/web/.storybook/stories-category-doc-pages/WebComponents.mdx b/web/.storybook/stories-category-doc-pages/WebComponents.mdx
index b2b1416ff..f4df9cf49 100644
--- a/web/.storybook/stories-category-doc-pages/WebComponents.mdx
+++ b/web/.storybook/stories-category-doc-pages/WebComponents.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
+
# How we develop components
@@ -64,7 +64,7 @@ export const MyNewButton: FC = ({ label, onClick }) => {
### Rationale
Since there's a lot of ways to create components, settling on one pattern helps maintain readability.
-But why *this* style?
+But why _this_ style?
See the discussion on the PR that introduced this pattern: [#2082](https://github.com/owncast/owncast/pull/2082).
@@ -101,3 +101,4 @@ We use [Storybook](https://storybook.js.org/) to create a component library wher
Make sure to include a `.stories.tsx` file with each (exported) component you create, and to update the stories file when making changes to existing components.
You can run the Storybook server locally with `npm run storybook`.
+
diff --git a/web/.storybook/tools/Document.stories.mdx.broken b/web/.storybook/tools/Document.template
similarity index 100%
rename from web/.storybook/tools/Document.stories.mdx.broken
rename to web/.storybook/tools/Document.template
diff --git a/web/.storybook/tools/Emoji.stories.mdx.broken b/web/.storybook/tools/Emoji.template
similarity index 100%
rename from web/.storybook/tools/Emoji.stories.mdx.broken
rename to web/.storybook/tools/Emoji.template
diff --git a/web/.storybook/tools/Images.stories.mdx.broken b/web/.storybook/tools/Images.template
similarity index 100%
rename from web/.storybook/tools/Images.stories.mdx.broken
rename to web/.storybook/tools/Images.template
diff --git a/web/.storybook/tools/ImagesLarge.stories.mdx.broken b/web/.storybook/tools/ImagesLarge.template
similarity index 100%
rename from web/.storybook/tools/ImagesLarge.stories.mdx.broken
rename to web/.storybook/tools/ImagesLarge.template
diff --git a/web/.storybook/tools/generate-document-stories.mjs b/web/.storybook/tools/generate-document-stories.mjs
index 0c565a7cd..21072cb8f 100644
--- a/web/.storybook/tools/generate-document-stories.mjs
+++ b/web/.storybook/tools/generate-document-stories.mjs
@@ -1,7 +1,7 @@
import fs from 'fs';
import handlebars from 'handlebars';
-const template = fs.readFileSync('./Document.stories.mdx', 'utf8');
+const template = fs.readFileSync('./Document.template', 'utf8');
let t = handlebars.compile(template, { noEscape: true });
const documents = [
@@ -30,5 +30,5 @@ documents.forEach(doc => {
const document = fs.readFileSync(doc.path, 'utf8');
const output = t({ name: doc.name, title: doc.title, content: document });
- fs.writeFileSync(`../stories-category-doc-pages/${doc.name}.stories.mdx`, output);
+ fs.writeFileSync(`../stories-category-doc-pages/${doc.name}.mdx`, output);
});
diff --git a/web/.storybook/tools/generate-emoji-story.mjs b/web/.storybook/tools/generate-emoji-story.mjs
index ff810cf74..d06d3771f 100644
--- a/web/.storybook/tools/generate-emoji-story.mjs
+++ b/web/.storybook/tools/generate-emoji-story.mjs
@@ -31,7 +31,7 @@ emojiCollectionDirs.forEach(collection => {
emojiCollections[collection] = { name: collection, images: emojiCollection };
});
-const template = fs.readFileSync('./Emoji.stories.mdx', 'utf8');
+const template = fs.readFileSync('./Emoji.template', 'utf8');
let t = handlebars.compile(template);
let output = t({ emojiCollections });
console.log(output);
diff --git a/web/.storybook/tools/generate-image-story.mjs b/web/.storybook/tools/generate-image-story.mjs
index d58a45144..59f29b1b2 100644
--- a/web/.storybook/tools/generate-image-story.mjs
+++ b/web/.storybook/tools/generate-image-story.mjs
@@ -31,7 +31,7 @@ const images = readdirSync(dir)
})
.filter(Boolean);
-const templateFile = useLarge ? './ImagesLarge.stories.mdx' : './Images.stories.mdx';
+const templateFile = useLarge ? './ImagesLarge.template' : './Images.template';
const template = fs.readFileSync(templateFile, 'utf8');
let t = handlebars.compile(template);
let output = t({ images, title, category });
diff --git a/web/.storybook/tools/generate-stories.sh b/web/.storybook/tools/generate-stories.sh
index 845fed1ba..7377230d0 100755
--- a/web/.storybook/tools/generate-stories.sh
+++ b/web/.storybook/tools/generate-stories.sh
@@ -1,7 +1,7 @@
#!/bin/sh
# Generate the custom Emoji story
-node generate-emoji-story.mjs >../stories-category-doc-pages/Emoji.stories.mdx
+node generate-emoji-story.mjs >../stories-category-doc-pages/Emoji.mdx
# Generate stories out of documentation
@@ -11,7 +11,7 @@ node generate-document-stories.mjs
# Project image assets
-node generate-image-story.mjs ../../public/img/ Images "owncast/Frontend Assets/Images" "img" >../stories-category-doc-pages/Images.stories.mdx
-node generate-image-story.mjs ../../public/img/platformlogos/ "Social Platform Images" "owncast/Frontend Assets/Social Platform Images" "img/platformlogos" >../stories-category-doc-pages/SocialPlatformImages.stories.mdx
-node generate-image-story.mjs ../story-assets/project/ "Logos & Graphics" "owncast/Project Assets/Logos & Graphics" "project" --large >../stories-category-doc-pages/LogosAndGraphics.stories.mdx
-node generate-image-story.mjs ../story-assets/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "tshirt" --large >../stories-category-doc-pages/Tshirt.stories.mdx
+node generate-image-story.mjs ../../public/img/ Images "owncast/Frontend Assets/Images" "img" >../stories-category-doc-pages/Images.mdx
+node generate-image-story.mjs ../../public/img/platformlogos/ "Social Platform Images" "owncast/Frontend Assets/Social Platform Images" "img/platformlogos" >../stories-category-doc-pages/SocialPlatformImages.mdx
+node generate-image-story.mjs ../story-assets/project/ "Logos & Graphics" "owncast/Project Assets/Logos & Graphics" "project" --large >../stories-category-doc-pages/LogosAndGraphics.mdx
+node generate-image-story.mjs ../story-assets/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "tshirt" --large >../stories-category-doc-pages/Tshirt.mdx
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -2,4 +2,4 @@
///
// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.