mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 20:28:15 +03:00
fix(storybook): update storybook generation templates
This commit is contained in:
Gabe Kangas
parent
78a7a45ff0
commit
edc920f7db
18 changed files with 555 additions and 563 deletions
75
web/.storybook/stories-category-doc-pages/Design.mdx
Normal file
75
web/.storybook/stories-category-doc-pages/Design.mdx
Normal 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
28
web/.storybook/stories-category-doc-pages/Development.mdx
Normal 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.
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 & Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Logos & Graphics
|
||||
# Logos & 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"},
|
||||
]}
|
||||
/>
|
||||
]}/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"},
|
||||
]}
|
||||
/>
|
||||
]}/>
|
||||
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
|
|
@ -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
2
web/next-env.d.ts
vendored
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue