mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 12:18:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix(storybook): update storybook generation templates

Browse source
This commit is contained in:
Gabe Kangas 2024-10-20 12:20:04 -07:00
parent 78a7a45ff0
commit edc920f7db
18 changed files with 555 additions and 563 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
web/.storybook/stories-category-doc-pages/Design.mdx Normal file
View file

@ -0,0 +1,75 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
# 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)

28
web/.storybook/stories-category-doc-pages/Development.mdx Normal file
View file

@ -0,0 +1,28 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
---
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
---
<meta http-equiv="refresh" content="0; url=https://owncast.dev/owncast/Development-e9dda43167c048968a308c4dadac66c4" />
Click <a href="https://owncast.dev/owncast/Development-e9dda43167c048968a308c4dadac66c4">here</a> if you are not redirected.

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

@ -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';
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Built-in Custom Emoji
## Blob
<a href="img/emoji/blob/LICENSE.md" target="_blank">
LICENSE
</a>
<IconGallery>
<IconItem name="ablobattention.gif">
<img src="img/emoji/blob/ablobattention.gif" />
</IconItem>
<IconGallery>
<IconItem name="ablobattention.gif">
<img src="img/emoji/blob/ablobattention.gif" />
</IconItem>
<IconItem name="ablobaww.gif">
<img src="img/emoji/blob/ablobaww.gif" />
</IconItem>
<IconItem name="ablobblewobble.gif">
<img src="img/emoji/blob/ablobblewobble.gif" />
</IconItem>
<IconItem name="ablobcheer.gif">
<img src="img/emoji/blob/ablobcheer.gif" />
</IconItem>
<IconItem name="ablobcry.gif">
<img src="img/emoji/blob/ablobcry.gif" />
</IconItem>
<IconItem name="ablobdancer.gif">
<img src="img/emoji/blob/ablobdancer.gif" />
</IconItem>
<IconItem name="ablobgift.gif">
<img src="img/emoji/blob/ablobgift.gif" />
</IconItem>
<IconItem name="ablobgiggle.gif">
<img src="img/emoji/blob/ablobgiggle.gif" />
</IconItem>
<IconItem name="ablobparty.gif">
<img src="img/emoji/blob/ablobparty.gif" />
</IconItem>
<IconItem name="ablobsleep.gif">
<img src="img/emoji/blob/ablobsleep.gif" />
</IconItem>
<IconItem name="ablobthinking.gif">
<img src="img/emoji/blob/ablobthinking.gif" />
</IconItem>
<IconItem name="ablobwave.gif">
<img src="img/emoji/blob/ablobwave.gif" />
</IconItem>
<IconItem name="blobangry.png">
<img src="img/emoji/blob/blobangry.png" />
</IconItem>
<IconItem name="blobaww.png">
<img src="img/emoji/blob/blobaww.png" />
</IconItem>
<IconItem name="blobdancer.png">
<img src="img/emoji/blob/blobdancer.png" />
</IconItem>
<IconItem name="blobjam.png">
<img src="img/emoji/blob/blobjam.png" />
</IconItem>
<IconItem name="blobscream.png">
<img src="img/emoji/blob/blobscream.png" />
</IconItem>
<IconItem name="blobthanks.png">
<img src="img/emoji/blob/blobthanks.png" />
</IconItem>
<IconItem name="blobthinking.png">
<img src="img/emoji/blob/blobthinking.png" />
</IconItem>
<IconItem name="blobwave.png">
<img src="img/emoji/blob/blobwave.png" />
</IconItem>
<IconItem name="blobyes.png">
<img src="img/emoji/blob/blobyes.png" />
</IconItem>
<IconItem name="blobyum.png">
<img src="img/emoji/blob/blobyum.png" />
</IconItem>
</IconGallery>
<IconItem name="ablobaww.gif">
<img src="img/emoji/blob/ablobaww.gif" />
</IconItem>
<IconItem name="ablobblewobble.gif">
<img src="img/emoji/blob/ablobblewobble.gif" />
</IconItem>
<IconItem name="ablobcheer.gif">
<img src="img/emoji/blob/ablobcheer.gif" />
</IconItem>
<IconItem name="ablobcry.gif">
<img src="img/emoji/blob/ablobcry.gif" />
</IconItem>
<IconItem name="ablobdancer.gif">
<img src="img/emoji/blob/ablobdancer.gif" />
</IconItem>
<IconItem name="ablobgift.gif">
<img src="img/emoji/blob/ablobgift.gif" />
</IconItem>
<IconItem name="ablobgiggle.gif">
<img src="img/emoji/blob/ablobgiggle.gif" />
</IconItem>
<IconItem name="ablobparty.gif">
<img src="img/emoji/blob/ablobparty.gif" />
</IconItem>
<IconItem name="ablobsleep.gif">
<img src="img/emoji/blob/ablobsleep.gif" />
</IconItem>
<IconItem name="ablobthinking.gif">
<img src="img/emoji/blob/ablobthinking.gif" />
</IconItem>
<IconItem name="ablobwave.gif">
<img src="img/emoji/blob/ablobwave.gif" />
</IconItem>
<IconItem name="blobangry.png">
<img src="img/emoji/blob/blobangry.png" />
</IconItem>
<IconItem name="blobaww.png">
<img src="img/emoji/blob/blobaww.png" />
</IconItem>
<IconItem name="blobdancer.png">
<img src="img/emoji/blob/blobdancer.png" />
</IconItem>
<IconItem name="blobjam.png">
<img src="img/emoji/blob/blobjam.png" />
</IconItem>
<IconItem name="blobscream.png">
<img src="img/emoji/blob/blobscream.png" />
</IconItem>
<IconItem name="blobthanks.png">
<img src="img/emoji/blob/blobthanks.png" />
</IconItem>
<IconItem name="blobthinking.png">
<img src="img/emoji/blob/blobthinking.png" />
</IconItem>
<IconItem name="blobwave.png">
<img src="img/emoji/blob/blobwave.png" />
</IconItem>
<IconItem name="blobyes.png">
<img src="img/emoji/blob/blobyes.png" />
</IconItem>
<IconItem name="blobyum.png">
<img src="img/emoji/blob/blobyum.png" />
</IconItem>
</IconGallery>
## Conigliolo96
@ -107,31 +88,27 @@ import { Image, ImageRow } from './ImageAsset';
LICENSE
</a>
<IconGallery>
<IconItem name="conigliolo1.gif">
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
</IconItem>
<IconGallery>
<IconItem name="conigliolo1.gif">
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
</IconItem>
<IconItem name="conigliolo15.gif">
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
</IconItem>
<IconItem name="conigliolo17.gif">
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
</IconItem>
<IconItem name="conigliolo21.gif">
<img src="img/emoji/conigliolo96/conigliolo21.gif" />
</IconItem>
<IconItem name="conigliolo25.gif">
<img src="img/emoji/conigliolo96/conigliolo25.gif" />
</IconItem>
<IconItem name="conigliolo28.gif">
<img src="img/emoji/conigliolo96/conigliolo28.gif" />
</IconItem>
</IconGallery>
<IconItem name="conigliolo15.gif">
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
</IconItem>
<IconItem name="conigliolo17.gif">
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
</IconItem>
<IconItem name="conigliolo21.gif">
<img src="img/emoji/conigliolo96/conigliolo21.gif" />
</IconItem>
<IconItem name="conigliolo25.gif">
<img src="img/emoji/conigliolo96/conigliolo25.gif" />
</IconItem>
<IconItem name="conigliolo28.gif">
<img src="img/emoji/conigliolo96/conigliolo28.gif" />
</IconItem>
</IconGallery>
## Dog
@ -139,43 +116,36 @@ import { Image, ImageRow } from './ImageAsset';
LICENSE
</a>
<IconGallery>
<IconItem name="img001.svg">
<img src="img/emoji/dog/img001.svg" />
</IconItem>
<IconGallery>
<IconItem name="img001.svg">
<img src="img/emoji/dog/img001.svg" />
</IconItem>
<IconItem name="img091.svg">
<img src="img/emoji/dog/img091.svg" />
</IconItem>
<IconItem name="img093.svg">
<img src="img/emoji/dog/img093.svg" />
</IconItem>
<IconItem name="img203.svg">
<img src="img/emoji/dog/img203.svg" />
</IconItem>
<IconItem name="img288.svg">
<img src="img/emoji/dog/img288.svg" />
</IconItem>
<IconItem name="img327.svg">
<img src="img/emoji/dog/img327.svg" />
</IconItem>
<IconItem name="img346.svg">
<img src="img/emoji/dog/img346.svg" />
</IconItem>
<IconItem name="img347.svg">
<img src="img/emoji/dog/img347.svg" />
</IconItem>
<IconItem name="img352.svg">
<img src="img/emoji/dog/img352.svg" />
</IconItem>
</IconGallery>
<IconItem name="img091.svg">
<img src="img/emoji/dog/img091.svg" />
</IconItem>
<IconItem name="img093.svg">
<img src="img/emoji/dog/img093.svg" />
</IconItem>
<IconItem name="img203.svg">
<img src="img/emoji/dog/img203.svg" />
</IconItem>
<IconItem name="img288.svg">
<img src="img/emoji/dog/img288.svg" />
</IconItem>
<IconItem name="img327.svg">
<img src="img/emoji/dog/img327.svg" />
</IconItem>
<IconItem name="img346.svg">
<img src="img/emoji/dog/img346.svg" />
</IconItem>
<IconItem name="img347.svg">
<img src="img/emoji/dog/img347.svg" />
</IconItem>
<IconItem name="img352.svg">
<img src="img/emoji/dog/img352.svg" />
</IconItem>
</IconGallery>
## Mutant
@ -183,208 +153,160 @@ import { Image, ImageRow } from './ImageAsset';
LICENSE
</a>
<IconGallery>
<IconItem name="8_ball.svg">
<img src="img/emoji/mutant/8_ball.svg" />
</IconItem>
<IconGallery>
<IconItem name="8_ball.svg">
<img src="img/emoji/mutant/8_ball.svg" />
</IconItem>
<IconItem name="alien.svg">
<img src="img/emoji/mutant/alien.svg" />
</IconItem>
<IconItem name="american_football.svg">
<img src="img/emoji/mutant/american_football.svg" />
</IconItem>
<IconItem name="arms_in_the_air.svg">
<img src="img/emoji/mutant/arms_in_the_air.svg" />
</IconItem>
<IconItem name="artist.svg">
<img src="img/emoji/mutant/artist.svg" />
</IconItem>
<IconItem name="astronaut.svg">
<img src="img/emoji/mutant/astronaut.svg" />
</IconItem>
<IconItem name="back_of_hand_clw.svg">
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
</IconItem>
<IconItem name="back_of_hand_hoof.svg">
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
</IconItem>
<IconItem name="back_of_hand_paw.svg">
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
</IconItem>
<IconItem name="baseball.svg">
<img src="img/emoji/mutant/baseball.svg" />
</IconItem>
<IconItem name="basketball.svg">
<img src="img/emoji/mutant/basketball.svg" />
</IconItem>
<IconItem name="blep.svg">
<img src="img/emoji/mutant/blep.svg" />
</IconItem>
<IconItem name="bow_b3.svg">
<img src="img/emoji/mutant/bow_b3.svg" />
</IconItem>
<IconItem name="cat_crying.svg">
<img src="img/emoji/mutant/cat_crying.svg" />
</IconItem>
<IconItem name="cat_devious.svg">
<img src="img/emoji/mutant/cat_devious.svg" />
</IconItem>
<IconItem name="cat_grin.svg">
<img src="img/emoji/mutant/cat_grin.svg" />
</IconItem>
<IconItem name="cat_heart_eyes.svg">
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
</IconItem>
<IconItem name="cat_joy.svg">
<img src="img/emoji/mutant/cat_joy.svg" />
</IconItem>
<IconItem name="cat_kiss.svg">
<img src="img/emoji/mutant/cat_kiss.svg" />
</IconItem>
<IconItem name="cat_pouting.svg">
<img src="img/emoji/mutant/cat_pouting.svg" />
</IconItem>
<IconItem name="cat_scream.svg">
<img src="img/emoji/mutant/cat_scream.svg" />
</IconItem>
<IconItem name="cat_smile.svg">
<img src="img/emoji/mutant/cat_smile.svg" />
</IconItem>
<IconItem name="chef.svg">
<img src="img/emoji/mutant/chef.svg" />
</IconItem>
<IconItem name="detective.svg">
<img src="img/emoji/mutant/detective.svg" />
</IconItem>
<IconItem name="ear.svg">
<img src="img/emoji/mutant/ear.svg" />
</IconItem>
<IconItem name="eye.svg">
<img src="img/emoji/mutant/eye.svg" />
</IconItem>
<IconItem name="eyes.svg">
<img src="img/emoji/mutant/eyes.svg" />
</IconItem>
<IconItem name="facepalm.svg">
<img src="img/emoji/mutant/facepalm.svg" />
</IconItem>
<IconItem name="football.svg">
<img src="img/emoji/mutant/football.svg" />
</IconItem>
<IconItem name="ghost.svg">
<img src="img/emoji/mutant/ghost.svg" />
</IconItem>
<IconItem name="grumpy_block.svg">
<img src="img/emoji/mutant/grumpy_block.svg" />
</IconItem>
<IconItem name="hot_shit.svg">
<img src="img/emoji/mutant/hot_shit.svg" />
</IconItem>
<IconItem name="jack_o_lantern.svg">
<img src="img/emoji/mutant/jack_o_lantern.svg" />
</IconItem>
<IconItem name="long_pointed_ear.svg">
<img src="img/emoji/mutant/long_pointed_ear.svg" />
</IconItem>
<IconItem name="mechanical_arm.svg">
<img src="img/emoji/mutant/mechanical_arm.svg" />
</IconItem>
<IconItem name="no_good.svg">
<img src="img/emoji/mutant/no_good.svg" />
</IconItem>
<IconItem name="office_worker.svg">
<img src="img/emoji/mutant/office_worker.svg" />
</IconItem>
<IconItem name="ok_gesture.svg">
<img src="img/emoji/mutant/ok_gesture.svg" />
</IconItem>
<IconItem name="person_frowning.svg">
<img src="img/emoji/mutant/person_frowning.svg" />
</IconItem>
<IconItem name="raising_hand.svg">
<img src="img/emoji/mutant/raising_hand.svg" />
</IconItem>
<IconItem name="robot.svg">
<img src="img/emoji/mutant/robot.svg" />
</IconItem>
<IconItem name="shrug.svg">
<img src="img/emoji/mutant/shrug.svg" />
</IconItem>
<IconItem name="singer.svg">
<img src="img/emoji/mutant/singer.svg" />
</IconItem>
<IconItem name="skull.svg">
<img src="img/emoji/mutant/skull.svg" />
</IconItem>
<IconItem name="skull_and_crossbones.svg">
<img src="img/emoji/mutant/skull_and_crossbones.svg" />
</IconItem>
<IconItem name="softball.svg">
<img src="img/emoji/mutant/softball.svg" />
</IconItem>
<IconItem name="student.svg">
<img src="img/emoji/mutant/student.svg" />
</IconItem>
<IconItem name="studio_microphone.svg">
<img src="img/emoji/mutant/studio_microphone.svg" />
</IconItem>
<IconItem name="technologist.svg">
<img src="img/emoji/mutant/technologist.svg" />
</IconItem>
<IconItem name="tennis.svg">
<img src="img/emoji/mutant/tennis.svg" />
</IconItem>
<IconItem name="volleyball.svg">
<img src="img/emoji/mutant/volleyball.svg" />
</IconItem>
</IconGallery>
<IconItem name="alien.svg">
<img src="img/emoji/mutant/alien.svg" />
</IconItem>
<IconItem name="american_football.svg">
<img src="img/emoji/mutant/american_football.svg" />
</IconItem>
<IconItem name="arms_in_the_air.svg">
<img src="img/emoji/mutant/arms_in_the_air.svg" />
</IconItem>
<IconItem name="artist.svg">
<img src="img/emoji/mutant/artist.svg" />
</IconItem>
<IconItem name="astronaut.svg">
<img src="img/emoji/mutant/astronaut.svg" />
</IconItem>
<IconItem name="back_of_hand_clw.svg">
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
</IconItem>
<IconItem name="back_of_hand_hoof.svg">
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
</IconItem>
<IconItem name="back_of_hand_paw.svg">
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
</IconItem>
<IconItem name="baseball.svg">
<img src="img/emoji/mutant/baseball.svg" />
</IconItem>
<IconItem name="basketball.svg">
<img src="img/emoji/mutant/basketball.svg" />
</IconItem>
<IconItem name="blep.svg">
<img src="img/emoji/mutant/blep.svg" />
</IconItem>
<IconItem name="bow_b3.svg">
<img src="img/emoji/mutant/bow_b3.svg" />
</IconItem>
<IconItem name="cat_crying.svg">
<img src="img/emoji/mutant/cat_crying.svg" />
</IconItem>
<IconItem name="cat_devious.svg">
<img src="img/emoji/mutant/cat_devious.svg" />
</IconItem>
<IconItem name="cat_grin.svg">
<img src="img/emoji/mutant/cat_grin.svg" />
</IconItem>
<IconItem name="cat_heart_eyes.svg">
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
</IconItem>
<IconItem name="cat_joy.svg">
<img src="img/emoji/mutant/cat_joy.svg" />
</IconItem>
<IconItem name="cat_kiss.svg">
<img src="img/emoji/mutant/cat_kiss.svg" />
</IconItem>
<IconItem name="cat_pouting.svg">
<img src="img/emoji/mutant/cat_pouting.svg" />
</IconItem>
<IconItem name="cat_scream.svg">
<img src="img/emoji/mutant/cat_scream.svg" />
</IconItem>
<IconItem name="cat_smile.svg">
<img src="img/emoji/mutant/cat_smile.svg" />
</IconItem>
<IconItem name="chef.svg">
<img src="img/emoji/mutant/chef.svg" />
</IconItem>
<IconItem name="detective.svg">
<img src="img/emoji/mutant/detective.svg" />
</IconItem>
<IconItem name="ear.svg">
<img src="img/emoji/mutant/ear.svg" />
</IconItem>
<IconItem name="eye.svg">
<img src="img/emoji/mutant/eye.svg" />
</IconItem>
<IconItem name="eyes.svg">
<img src="img/emoji/mutant/eyes.svg" />
</IconItem>
<IconItem name="facepalm.svg">
<img src="img/emoji/mutant/facepalm.svg" />
</IconItem>
<IconItem name="football.svg">
<img src="img/emoji/mutant/football.svg" />
</IconItem>
<IconItem name="ghost.svg">
<img src="img/emoji/mutant/ghost.svg" />
</IconItem>
<IconItem name="grumpy_block.svg">
<img src="img/emoji/mutant/grumpy_block.svg" />
</IconItem>
<IconItem name="hot_shit.svg">
<img src="img/emoji/mutant/hot_shit.svg" />
</IconItem>
<IconItem name="jack_o_lantern.svg">
<img src="img/emoji/mutant/jack_o_lantern.svg" />
</IconItem>
<IconItem name="long_pointed_ear.svg">
<img src="img/emoji/mutant/long_pointed_ear.svg" />
</IconItem>
<IconItem name="mechanical_arm.svg">
<img src="img/emoji/mutant/mechanical_arm.svg" />
</IconItem>
<IconItem name="no_good.svg">
<img src="img/emoji/mutant/no_good.svg" />
</IconItem>
<IconItem name="office_worker.svg">
<img src="img/emoji/mutant/office_worker.svg" />
</IconItem>
<IconItem name="ok_gesture.svg">
<img src="img/emoji/mutant/ok_gesture.svg" />
</IconItem>
<IconItem name="person_frowning.svg">
<img src="img/emoji/mutant/person_frowning.svg" />
</IconItem>
<IconItem name="raising_hand.svg">
<img src="img/emoji/mutant/raising_hand.svg" />
</IconItem>
<IconItem name="robot.svg">
<img src="img/emoji/mutant/robot.svg" />
</IconItem>
<IconItem name="shrug.svg">
<img src="img/emoji/mutant/shrug.svg" />
</IconItem>
<IconItem name="singer.svg">
<img src="img/emoji/mutant/singer.svg" />
</IconItem>
<IconItem name="skull.svg">
<img src="img/emoji/mutant/skull.svg" />
</IconItem>
<IconItem name="skull_and_crossbones.svg">
<img src="img/emoji/mutant/skull_and_crossbones.svg" />
</IconItem>
<IconItem name="softball.svg">
<img src="img/emoji/mutant/softball.svg" />
</IconItem>
<IconItem name="student.svg">
<img src="img/emoji/mutant/student.svg" />
</IconItem>
<IconItem name="studio_microphone.svg">
<img src="img/emoji/mutant/studio_microphone.svg" />
</IconItem>
<IconItem name="technologist.svg">
<img src="img/emoji/mutant/technologist.svg" />
</IconItem>
<IconItem name="tennis.svg">
<img src="img/emoji/mutant/tennis.svg" />
</IconItem>
<IconItem name="volleyball.svg">
<img src="img/emoji/mutant/volleyball.svg" />
</IconItem>
</IconGallery>

46
web/.storybook/stories-category-doc-pages/Images.mdx
View file

@ -1,31 +1,27 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Images
<IconGallery>
<IconItem name="fediverse-black.png">
<img src="img/fediverse-black.png" />
</IconItem>
<IconGallery>
<IconItem name="fediverse-black.png">
<img src="img/fediverse-black.png" />
</IconItem>
<IconItem name="fediverse-color.png">
<img src="img/fediverse-color.png" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/follow.svg" />
</IconItem>
<IconItem name="indieauth.png">
<img src="img/indieauth.png" />
</IconItem>
<IconItem name="like.svg">
<img src="img/like.svg" />
</IconItem>
<IconItem name="repost.svg">
<img src="img/repost.svg" />
</IconItem>
</IconGallery>
<IconItem name="fediverse-color.png">
<img src="img/fediverse-color.png" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/follow.svg" />
</IconItem>
<IconItem name="indieauth.png">
<img src="img/indieauth.png" />
</IconItem>
<IconItem name="like.svg">
<img src="img/like.svg" />
</IconItem>
<IconItem name="repost.svg">
<img src="img/repost.svg" />
</IconItem>
</IconGallery>

13
web/.storybook/stories-category-doc-pages/LogosAndGraphics.mdx
View file

@ -1,12 +1,11 @@
import { Canvas, Meta, Story } from '@storybook/blocks';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Project Assets/Logos & Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
<Meta title="owncast/Project Assets/Logos &amp; Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
# Logos & Graphics
# Logos &amp; Graphics
<ImageRow
images={[
<ImageRow images={[
{src: "project/header.png", name: "header.png"},
{src: "project/kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png", name: "kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png"},
{src: "project/logo-glare-outlined.png", name: "logo-glare-outlined.png"},
@ -17,5 +16,5 @@ import { Image, ImageRow } from './ImageAsset';
{src: "project/owncast-background.png", name: "owncast-background.png"},
{src: "project/owncast-browser-mobile.png", name: "owncast-browser-mobile.png"},
{src: "project/sticker-bigtech-alt.png", name: "sticker-bigtech-alt.png"},
]}
/>
]}/>

73
web/.storybook/stories-category-doc-pages/ProductDefinition.mdx
View file

@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/blocks';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
# 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.

221
web/.storybook/stories-category-doc-pages/SocialPlatformImages.mdx
View file

@ -1,131 +1,102 @@
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# Social Platform Images
<IconGallery>
<IconItem name="bandcamp.svg">
<img src="img/platformlogos/bandcamp.svg" />
</IconItem>
<IconGallery>
<IconItem name="bandcamp.svg">
<img src="img/platformlogos/bandcamp.svg" />
</IconItem>
<IconItem name="default.svg">
<img src="img/platformlogos/default.svg" />
</IconItem>
<IconItem name="discord.svg">
<img src="img/platformlogos/discord.svg" />
</IconItem>
<IconItem name="donate.svg">
<img src="img/platformlogos/donate.svg" />
</IconItem>
<IconItem name="facebook.svg">
<img src="img/platformlogos/facebook.svg" />
</IconItem>
<IconItem name="fediverse.svg">
<img src="img/platformlogos/fediverse.svg" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/platformlogos/follow.svg" />
</IconItem>
<IconItem name="github.svg">
<img src="img/platformlogos/github.svg" />
</IconItem>
<IconItem name="gitlab.svg">
<img src="img/platformlogos/gitlab.svg" />
</IconItem>
<IconItem name="google.svg">
<img src="img/platformlogos/google.svg" />
</IconItem>
<IconItem name="instagram.svg">
<img src="img/platformlogos/instagram.svg" />
</IconItem>
<IconItem name="keyoxide.png">
<img src="img/platformlogos/keyoxide.png" />
</IconItem>
<IconItem name="ko-fi.svg">
<img src="img/platformlogos/ko-fi.svg" />
</IconItem>
<IconItem name="lbry.svg">
<img src="img/platformlogos/lbry.svg" />
</IconItem>
<IconItem name="liberapay.svg">
<img src="img/platformlogos/liberapay.svg" />
</IconItem>
<IconItem name="link.svg">
<img src="img/platformlogos/link.svg" />
</IconItem>
<IconItem name="linkedin.svg">
<img src="img/platformlogos/linkedin.svg" />
</IconItem>
<IconItem name="mastodon.svg">
<img src="img/platformlogos/mastodon.svg" />
</IconItem>
<IconItem name="matrix.svg">
<img src="img/platformlogos/matrix.svg" />
</IconItem>
<IconItem name="odysee.svg">
<img src="img/platformlogos/odysee.svg" />
</IconItem>
<IconItem name="patreon.svg">
<img src="img/platformlogos/patreon.svg" />
</IconItem>
<IconItem name="paypal.svg">
<img src="img/platformlogos/paypal.svg" />
</IconItem>
<IconItem name="snapchat.svg">
<img src="img/platformlogos/snapchat.svg" />
</IconItem>
<IconItem name="soundcloud.svg">
<img src="img/platformlogos/soundcloud.svg" />
</IconItem>
<IconItem name="spotify.svg">
<img src="img/platformlogos/spotify.svg" />
</IconItem>
<IconItem name="steam.svg">
<img src="img/platformlogos/steam.svg" />
</IconItem>
<IconItem name="tiktok.svg">
<img src="img/platformlogos/tiktok.svg" />
</IconItem>
<IconItem name="twitch.svg">
<img src="img/platformlogos/twitch.svg" />
</IconItem>
<IconItem name="twitter.svg">
<img src="img/platformlogos/twitter.svg" />
</IconItem>
<IconItem name="xmpp.svg">
<img src="img/platformlogos/xmpp.svg" />
</IconItem>
<IconItem name="youtube.svg">
<img src="img/platformlogos/youtube.svg" />
</IconItem>
</IconGallery>
<IconItem name="default.svg">
<img src="img/platformlogos/default.svg" />
</IconItem>
<IconItem name="discord.svg">
<img src="img/platformlogos/discord.svg" />
</IconItem>
<IconItem name="donate.svg">
<img src="img/platformlogos/donate.svg" />
</IconItem>
<IconItem name="facebook.svg">
<img src="img/platformlogos/facebook.svg" />
</IconItem>
<IconItem name="fediverse.svg">
<img src="img/platformlogos/fediverse.svg" />
</IconItem>
<IconItem name="follow.svg">
<img src="img/platformlogos/follow.svg" />
</IconItem>
<IconItem name="github.svg">
<img src="img/platformlogos/github.svg" />
</IconItem>
<IconItem name="gitlab.svg">
<img src="img/platformlogos/gitlab.svg" />
</IconItem>
<IconItem name="google.svg">
<img src="img/platformlogos/google.svg" />
</IconItem>
<IconItem name="instagram.svg">
<img src="img/platformlogos/instagram.svg" />
</IconItem>
<IconItem name="keyoxide.png">
<img src="img/platformlogos/keyoxide.png" />
</IconItem>
<IconItem name="ko-fi.svg">
<img src="img/platformlogos/ko-fi.svg" />
</IconItem>
<IconItem name="lbry.svg">
<img src="img/platformlogos/lbry.svg" />
</IconItem>
<IconItem name="liberapay.svg">
<img src="img/platformlogos/liberapay.svg" />
</IconItem>
<IconItem name="link.svg">
<img src="img/platformlogos/link.svg" />
</IconItem>
<IconItem name="linkedin.svg">
<img src="img/platformlogos/linkedin.svg" />
</IconItem>
<IconItem name="mastodon.svg">
<img src="img/platformlogos/mastodon.svg" />
</IconItem>
<IconItem name="matrix.svg">
<img src="img/platformlogos/matrix.svg" />
</IconItem>
<IconItem name="odysee.svg">
<img src="img/platformlogos/odysee.svg" />
</IconItem>
<IconItem name="patreon.svg">
<img src="img/platformlogos/patreon.svg" />
</IconItem>
<IconItem name="paypal.svg">
<img src="img/platformlogos/paypal.svg" />
</IconItem>
<IconItem name="snapchat.svg">
<img src="img/platformlogos/snapchat.svg" />
</IconItem>
<IconItem name="soundcloud.svg">
<img src="img/platformlogos/soundcloud.svg" />
</IconItem>
<IconItem name="spotify.svg">
<img src="img/platformlogos/spotify.svg" />
</IconItem>
<IconItem name="steam.svg">
<img src="img/platformlogos/steam.svg" />
</IconItem>
<IconItem name="tiktok.svg">
<img src="img/platformlogos/tiktok.svg" />
</IconItem>
<IconItem name="twitch.svg">
<img src="img/platformlogos/twitch.svg" />
</IconItem>
<IconItem name="twitter.svg">
<img src="img/platformlogos/twitter.svg" />
</IconItem>
<IconItem name="xmpp.svg">
<img src="img/platformlogos/xmpp.svg" />
</IconItem>
<IconItem name="youtube.svg">
<img src="img/platformlogos/youtube.svg" />
</IconItem>
</IconGallery>

9
web/.storybook/stories-category-doc-pages/Tshirt.mdx
View file

@ -1,12 +1,11 @@
import { Canvas, Meta, Story } from '@storybook/blocks';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
<Meta title="owncast/Project Assets/T-Shirt" parameters={{chromatic: { disableSnapshot: true }}} />
# T-shirt
<ImageRow
images={[
<ImageRow images={[
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png"},
@ -20,5 +19,5 @@ import { Image, ImageRow } from './ImageAsset';
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png", name: "all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png", name: "all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png", name: "all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png"},
]}
/>
]}/>

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

@ -1,6 +1,6 @@
import { Canvas, Meta, Story } from '@storybook/blocks';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
# How we develop components
@ -64,7 +64,7 @@ export const MyNewButton: FC<MyNewButtonProps> = ({ 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`.

0
web/.storybook/tools/Document.stories.mdx.broken → web/.storybook/tools/Document.template
View file

0
web/.storybook/tools/Emoji.stories.mdx.broken → web/.storybook/tools/Emoji.template
View file

0
web/.storybook/tools/Images.stories.mdx.broken → web/.storybook/tools/Images.template
View file

0
web/.storybook/tools/ImagesLarge.stories.mdx.broken → web/.storybook/tools/ImagesLarge.template
View file

4
web/.storybook/tools/generate-document-stories.mjs
View file

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

2
web/.storybook/tools/generate-emoji-story.mjs
View file

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

2
web/.storybook/tools/generate-image-story.mjs
View file

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

10
web/.storybook/tools/generate-stories.sh
View file

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

2
web/next-env.d.ts vendored
View file

@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />
// 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.