Refactor component stories to be documents to reduce story snapshots
This commit is contained in:
Gabe Kangas
@@ -1,6 +1,6 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||||
|
|
||||||
<Meta title="owncast/Documentation/Design" parameters={{chromatic: { disableSnapshot: true }}}/>
|
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||||
|
|
||||||
# Owncast Design Guidelines & Resources
|
# Owncast Design Guidelines & Resources
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||||
|
|
||||||
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{chromatic: { disableSnapshot: true }}}/>
|
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||||
|
|
||||||
---
|
---
|
||||||
title: "How to work on Owncast"
|
title: "How to work on Owncast"
|
||||||
|
|||||||
@@ -1,148 +1,324 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||||
import { Image, ImageRow } from './ImageAsset';
|
import { Image, ImageRow } from './ImageAsset';
|
||||||
|
|
||||||
<Meta title="owncast/Frontend Assets/Emoji" parameters={{chromatic: { disableSnapshot: true }}} />
|
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||||
|
|
||||||
# Built-in Custom Emoji
|
# Built-in Custom Emoji
|
||||||
|
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
## Blob
|
## Blob
|
||||||
|
|
||||||
<Story
|
<a href="img/emoji/blob/LICENSE.md" target="_blank">
|
||||||
name="Blob"
|
LICENSE
|
||||||
>
|
</a>
|
||||||
<a href="img/emoji/blob/LICENSE.md" target="_blank">
|
`} />
|
||||||
LICENSE
|
|
||||||
</a>
|
<IconGallery>
|
||||||
<ImageRow images={[
|
<IconItem name="ablobattention.gif">
|
||||||
{src: "img/emoji/blob/ablobattention.gif", name: "ablobattention.gif"},
|
<img src="img/emoji/blob/ablobattention.gif" />
|
||||||
{src: "img/emoji/blob/ablobaww.gif", name: "ablobaww.gif"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/ablobblewobble.gif", name: "ablobblewobble.gif"},
|
<IconItem name="ablobaww.gif">
|
||||||
{src: "img/emoji/blob/ablobcheer.gif", name: "ablobcheer.gif"},
|
<img src="img/emoji/blob/ablobaww.gif" />
|
||||||
{src: "img/emoji/blob/ablobcry.gif", name: "ablobcry.gif"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/ablobdancer.gif", name: "ablobdancer.gif"},
|
<IconItem name="ablobblewobble.gif">
|
||||||
{src: "img/emoji/blob/ablobgift.gif", name: "ablobgift.gif"},
|
<img src="img/emoji/blob/ablobblewobble.gif" />
|
||||||
{src: "img/emoji/blob/ablobgiggle.gif", name: "ablobgiggle.gif"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/ablobparty.gif", name: "ablobparty.gif"},
|
<IconItem name="ablobcheer.gif">
|
||||||
{src: "img/emoji/blob/ablobsleep.gif", name: "ablobsleep.gif"},
|
<img src="img/emoji/blob/ablobcheer.gif" />
|
||||||
{src: "img/emoji/blob/ablobthinking.gif", name: "ablobthinking.gif"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/ablobwave.gif", name: "ablobwave.gif"},
|
<IconItem name="ablobcry.gif">
|
||||||
{src: "img/emoji/blob/blobangry.png", name: "blobangry.png"},
|
<img src="img/emoji/blob/ablobcry.gif" />
|
||||||
{src: "img/emoji/blob/blobaww.png", name: "blobaww.png"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/blobdancer.png", name: "blobdancer.png"},
|
<IconItem name="ablobdancer.gif">
|
||||||
{src: "img/emoji/blob/blobjam.png", name: "blobjam.png"},
|
<img src="img/emoji/blob/ablobdancer.gif" />
|
||||||
{src: "img/emoji/blob/blobscream.png", name: "blobscream.png"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/blobthanks.png", name: "blobthanks.png"},
|
<IconItem name="ablobgift.gif">
|
||||||
{src: "img/emoji/blob/blobthinking.png", name: "blobthinking.png"},
|
<img src="img/emoji/blob/ablobgift.gif" />
|
||||||
{src: "img/emoji/blob/blobwave.png", name: "blobwave.png"},
|
</IconItem>
|
||||||
{src: "img/emoji/blob/blobyes.png", name: "blobyes.png"},
|
<IconItem name="ablobgiggle.gif">
|
||||||
{src: "img/emoji/blob/blobyum.png", name: "blobyum.png"},
|
<img src="img/emoji/blob/ablobgiggle.gif" />
|
||||||
]}/>
|
</IconItem>
|
||||||
</Story>
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
## Conigliolo96
|
## Conigliolo96
|
||||||
|
|
||||||
<Story
|
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
|
||||||
name="Conigliolo96"
|
LICENSE
|
||||||
>
|
</a>
|
||||||
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
|
`} />
|
||||||
LICENSE
|
|
||||||
</a>
|
<IconGallery>
|
||||||
<ImageRow images={[
|
<IconItem name="conigliolo1.gif">
|
||||||
{src: "img/emoji/conigliolo96/conigliolo1.gif", name: "conigliolo1.gif"},
|
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
|
||||||
{src: "img/emoji/conigliolo96/conigliolo15.gif", name: "conigliolo15.gif"},
|
</IconItem>
|
||||||
{src: "img/emoji/conigliolo96/conigliolo17.gif", name: "conigliolo17.gif"},
|
<IconItem name="conigliolo15.gif">
|
||||||
{src: "img/emoji/conigliolo96/conigliolo21.gif", name: "conigliolo21.gif"},
|
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
|
||||||
{src: "img/emoji/conigliolo96/conigliolo25.gif", name: "conigliolo25.gif"},
|
</IconItem>
|
||||||
{src: "img/emoji/conigliolo96/conigliolo28.gif", name: "conigliolo28.gif"},
|
<IconItem name="conigliolo17.gif">
|
||||||
]}/>
|
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
|
||||||
</Story>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
## Dog
|
## Dog
|
||||||
|
|
||||||
<Story
|
<a href="img/emoji/dog/LICENSE.md" target="_blank">
|
||||||
name="Dog"
|
LICENSE
|
||||||
>
|
</a>
|
||||||
<a href="img/emoji/dog/LICENSE.md" target="_blank">
|
`} />
|
||||||
LICENSE
|
|
||||||
</a>
|
<IconGallery>
|
||||||
<ImageRow images={[
|
<IconItem name="img001.svg">
|
||||||
{src: "img/emoji/dog/img001.svg", name: "img001.svg"},
|
<img src="img/emoji/dog/img001.svg" />
|
||||||
{src: "img/emoji/dog/img091.svg", name: "img091.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/dog/img093.svg", name: "img093.svg"},
|
<IconItem name="img091.svg">
|
||||||
{src: "img/emoji/dog/img203.svg", name: "img203.svg"},
|
<img src="img/emoji/dog/img091.svg" />
|
||||||
{src: "img/emoji/dog/img288.svg", name: "img288.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/dog/img327.svg", name: "img327.svg"},
|
<IconItem name="img093.svg">
|
||||||
{src: "img/emoji/dog/img346.svg", name: "img346.svg"},
|
<img src="img/emoji/dog/img093.svg" />
|
||||||
{src: "img/emoji/dog/img347.svg", name: "img347.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/dog/img352.svg", name: "img352.svg"},
|
<IconItem name="img203.svg">
|
||||||
]}/>
|
<img src="img/emoji/dog/img203.svg" />
|
||||||
</Story>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
## Mutant
|
## Mutant
|
||||||
|
|
||||||
<Story
|
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
|
||||||
name="Mutant"
|
LICENSE
|
||||||
>
|
</a>
|
||||||
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
|
`} />
|
||||||
LICENSE
|
|
||||||
</a>
|
<IconGallery>
|
||||||
<ImageRow images={[
|
<IconItem name="8_ball.svg">
|
||||||
{src: "img/emoji/mutant/8_ball.svg", name: "8_ball.svg"},
|
<img src="img/emoji/mutant/8_ball.svg" />
|
||||||
{src: "img/emoji/mutant/alien.svg", name: "alien.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/american_football.svg", name: "american_football.svg"},
|
<IconItem name="alien.svg">
|
||||||
{src: "img/emoji/mutant/arms_in_the_air.svg", name: "arms_in_the_air.svg"},
|
<img src="img/emoji/mutant/alien.svg" />
|
||||||
{src: "img/emoji/mutant/artist.svg", name: "artist.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/astronaut.svg", name: "astronaut.svg"},
|
<IconItem name="american_football.svg">
|
||||||
{src: "img/emoji/mutant/back_of_hand_clw.svg", name: "back_of_hand_clw.svg"},
|
<img src="img/emoji/mutant/american_football.svg" />
|
||||||
{src: "img/emoji/mutant/back_of_hand_hoof.svg", name: "back_of_hand_hoof.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/back_of_hand_paw.svg", name: "back_of_hand_paw.svg"},
|
<IconItem name="arms_in_the_air.svg">
|
||||||
{src: "img/emoji/mutant/baseball.svg", name: "baseball.svg"},
|
<img src="img/emoji/mutant/arms_in_the_air.svg" />
|
||||||
{src: "img/emoji/mutant/basketball.svg", name: "basketball.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/blep.svg", name: "blep.svg"},
|
<IconItem name="artist.svg">
|
||||||
{src: "img/emoji/mutant/bow_b3.svg", name: "bow_b3.svg"},
|
<img src="img/emoji/mutant/artist.svg" />
|
||||||
{src: "img/emoji/mutant/cat_crying.svg", name: "cat_crying.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/cat_devious.svg", name: "cat_devious.svg"},
|
<IconItem name="astronaut.svg">
|
||||||
{src: "img/emoji/mutant/cat_grin.svg", name: "cat_grin.svg"},
|
<img src="img/emoji/mutant/astronaut.svg" />
|
||||||
{src: "img/emoji/mutant/cat_heart_eyes.svg", name: "cat_heart_eyes.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/cat_joy.svg", name: "cat_joy.svg"},
|
<IconItem name="back_of_hand_clw.svg">
|
||||||
{src: "img/emoji/mutant/cat_kiss.svg", name: "cat_kiss.svg"},
|
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
|
||||||
{src: "img/emoji/mutant/cat_pouting.svg", name: "cat_pouting.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/cat_scream.svg", name: "cat_scream.svg"},
|
<IconItem name="back_of_hand_hoof.svg">
|
||||||
{src: "img/emoji/mutant/cat_smile.svg", name: "cat_smile.svg"},
|
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
|
||||||
{src: "img/emoji/mutant/chef.svg", name: "chef.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/detective.svg", name: "detective.svg"},
|
<IconItem name="back_of_hand_paw.svg">
|
||||||
{src: "img/emoji/mutant/ear.svg", name: "ear.svg"},
|
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
|
||||||
{src: "img/emoji/mutant/eye.svg", name: "eye.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/eyes.svg", name: "eyes.svg"},
|
<IconItem name="baseball.svg">
|
||||||
{src: "img/emoji/mutant/facepalm.svg", name: "facepalm.svg"},
|
<img src="img/emoji/mutant/baseball.svg" />
|
||||||
{src: "img/emoji/mutant/football.svg", name: "football.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/ghost.svg", name: "ghost.svg"},
|
<IconItem name="basketball.svg">
|
||||||
{src: "img/emoji/mutant/grumpy_block.svg", name: "grumpy_block.svg"},
|
<img src="img/emoji/mutant/basketball.svg" />
|
||||||
{src: "img/emoji/mutant/hot_shit.svg", name: "hot_shit.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/jack_o_lantern.svg", name: "jack_o_lantern.svg"},
|
<IconItem name="blep.svg">
|
||||||
{src: "img/emoji/mutant/long_pointed_ear.svg", name: "long_pointed_ear.svg"},
|
<img src="img/emoji/mutant/blep.svg" />
|
||||||
{src: "img/emoji/mutant/mechanical_arm.svg", name: "mechanical_arm.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/no_good.svg", name: "no_good.svg"},
|
<IconItem name="bow_b3.svg">
|
||||||
{src: "img/emoji/mutant/office_worker.svg", name: "office_worker.svg"},
|
<img src="img/emoji/mutant/bow_b3.svg" />
|
||||||
{src: "img/emoji/mutant/ok_gesture.svg", name: "ok_gesture.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/person_frowning.svg", name: "person_frowning.svg"},
|
<IconItem name="cat_crying.svg">
|
||||||
{src: "img/emoji/mutant/raising_hand.svg", name: "raising_hand.svg"},
|
<img src="img/emoji/mutant/cat_crying.svg" />
|
||||||
{src: "img/emoji/mutant/robot.svg", name: "robot.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/shrug.svg", name: "shrug.svg"},
|
<IconItem name="cat_devious.svg">
|
||||||
{src: "img/emoji/mutant/singer.svg", name: "singer.svg"},
|
<img src="img/emoji/mutant/cat_devious.svg" />
|
||||||
{src: "img/emoji/mutant/skull.svg", name: "skull.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/skull_and_crossbones.svg", name: "skull_and_crossbones.svg"},
|
<IconItem name="cat_grin.svg">
|
||||||
{src: "img/emoji/mutant/softball.svg", name: "softball.svg"},
|
<img src="img/emoji/mutant/cat_grin.svg" />
|
||||||
{src: "img/emoji/mutant/student.svg", name: "student.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/studio_microphone.svg", name: "studio_microphone.svg"},
|
<IconItem name="cat_heart_eyes.svg">
|
||||||
{src: "img/emoji/mutant/technologist.svg", name: "technologist.svg"},
|
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
|
||||||
{src: "img/emoji/mutant/tennis.svg", name: "tennis.svg"},
|
</IconItem>
|
||||||
{src: "img/emoji/mutant/volleyball.svg", name: "volleyball.svg"},
|
<IconItem name="cat_joy.svg">
|
||||||
]}/>
|
<img src="img/emoji/mutant/cat_joy.svg" />
|
||||||
</Story>
|
</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,16 +1,27 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
|
||||||
import { Image, ImageRow } from './ImageAsset';
|
|
||||||
|
|
||||||
<Meta title="owncast/Frontend Assets/Images" parameters={{chromatic: { disableSnapshot: true }}} />
|
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||||
|
|
||||||
# Images
|
# Images
|
||||||
|
|
||||||
<ImageRow images={[
|
<IconGallery>
|
||||||
{src: "img/fediverse-black.png", name: "fediverse-black.png"},
|
<IconItem name="fediverse-black.png">
|
||||||
{src: "img/fediverse-color.png", name: "fediverse-color.png"},
|
<img src="img/fediverse-black.png" />
|
||||||
{src: "img/follow.svg", name: "follow.svg"},
|
</IconItem>
|
||||||
{src: "img/indieauth.png", name: "indieauth.png"},
|
<IconItem name="fediverse-color.png">
|
||||||
{src: "img/like.svg", name: "like.svg"},
|
<img src="img/fediverse-color.png" />
|
||||||
{src: "img/repost.svg", name: "repost.svg"},
|
</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,6 +1,6 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||||
|
|
||||||
<Meta title="owncast/Documentation/Product Definition" parameters={{chromatic: { disableSnapshot: true }}}/>
|
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||||
|
|
||||||
# Owncast Product Definition
|
# Owncast Product Definition
|
||||||
|
|
||||||
|
|||||||
@@ -1,41 +1,102 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
|
||||||
import { Image, ImageRow } from './ImageAsset';
|
|
||||||
|
|
||||||
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{chromatic: { disableSnapshot: true }}} />
|
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||||
|
|
||||||
# Social Platform Images
|
# Social Platform Images
|
||||||
|
|
||||||
<ImageRow images={[
|
<IconGallery>
|
||||||
{src: "img/platformlogos/bandcamp.svg", name: "bandcamp.svg"},
|
<IconItem name="bandcamp.svg">
|
||||||
{src: "img/platformlogos/default.svg", name: "default.svg"},
|
<img src="img/platformlogos/bandcamp.svg" />
|
||||||
{src: "img/platformlogos/discord.svg", name: "discord.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/donate.svg", name: "donate.svg"},
|
<IconItem name="default.svg">
|
||||||
{src: "img/platformlogos/facebook.svg", name: "facebook.svg"},
|
<img src="img/platformlogos/default.svg" />
|
||||||
{src: "img/platformlogos/fediverse.svg", name: "fediverse.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/follow.svg", name: "follow.svg"},
|
<IconItem name="discord.svg">
|
||||||
{src: "img/platformlogos/github.svg", name: "github.svg"},
|
<img src="img/platformlogos/discord.svg" />
|
||||||
{src: "img/platformlogos/gitlab.svg", name: "gitlab.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/google.svg", name: "google.svg"},
|
<IconItem name="donate.svg">
|
||||||
{src: "img/platformlogos/instagram.svg", name: "instagram.svg"},
|
<img src="img/platformlogos/donate.svg" />
|
||||||
{src: "img/platformlogos/keyoxide.png", name: "keyoxide.png"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/ko-fi.svg", name: "ko-fi.svg"},
|
<IconItem name="facebook.svg">
|
||||||
{src: "img/platformlogos/lbry.svg", name: "lbry.svg"},
|
<img src="img/platformlogos/facebook.svg" />
|
||||||
{src: "img/platformlogos/liberapay.svg", name: "liberapay.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/link.svg", name: "link.svg"},
|
<IconItem name="fediverse.svg">
|
||||||
{src: "img/platformlogos/linkedin.svg", name: "linkedin.svg"},
|
<img src="img/platformlogos/fediverse.svg" />
|
||||||
{src: "img/platformlogos/mastodon.svg", name: "mastodon.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/matrix.svg", name: "matrix.svg"},
|
<IconItem name="follow.svg">
|
||||||
{src: "img/platformlogos/odysee.svg", name: "odysee.svg"},
|
<img src="img/platformlogos/follow.svg" />
|
||||||
{src: "img/platformlogos/patreon.svg", name: "patreon.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/paypal.svg", name: "paypal.svg"},
|
<IconItem name="github.svg">
|
||||||
{src: "img/platformlogos/snapchat.svg", name: "snapchat.svg"},
|
<img src="img/platformlogos/github.svg" />
|
||||||
{src: "img/platformlogos/soundcloud.svg", name: "soundcloud.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/spotify.svg", name: "spotify.svg"},
|
<IconItem name="gitlab.svg">
|
||||||
{src: "img/platformlogos/steam.svg", name: "steam.svg"},
|
<img src="img/platformlogos/gitlab.svg" />
|
||||||
{src: "img/platformlogos/tiktok.svg", name: "tiktok.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/twitch.svg", name: "twitch.svg"},
|
<IconItem name="google.svg">
|
||||||
{src: "img/platformlogos/twitter.svg", name: "twitter.svg"},
|
<img src="img/platformlogos/google.svg" />
|
||||||
{src: "img/platformlogos/xmpp.svg", name: "xmpp.svg"},
|
</IconItem>
|
||||||
{src: "img/platformlogos/youtube.svg", name: "youtube.svg"},
|
<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,6 +1,6 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||||
|
|
||||||
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{chromatic: { disableSnapshot: true }}}/>
|
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||||
|
|
||||||
# How we develop components
|
# How we develop components
|
||||||
|
|
||||||
|
|||||||
@@ -1,14 +1,20 @@
|
|||||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||||
|
|
||||||
<Meta
|
<Meta
|
||||||
title="owncast/Documentation/Usage Examples"
|
title="owncast/Documentation/Infrastructure Examples/Basic Example"
|
||||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
parameters={{
|
||||||
|
previewTabs: { canvas: { hidden: true } },
|
||||||
|
chromatic: { disableSnapshot: true },
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Story name="Basic">
|
<Description
|
||||||
|
markdown={`
|
||||||
|
## Basic
|
||||||
|
|
||||||
This is the most basic Owncast setup and is what you get when you run it without any additional services.
|
This is the most basic Owncast setup and is what you get when you run it without any additional services.
|
||||||
|
`} />
|
||||||
|
|
||||||
<Mermaid
|
<Mermaid
|
||||||
chart={`graph TD
|
chart={`graph TD
|
||||||
@@ -28,12 +34,13 @@ This is the most basic Owncast setup and is what you get when you run it without
|
|||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</Story>
|
<Description
|
||||||
|
markdown={`
|
||||||
<Story name="S3 Object Storage">
|
## S3 Object Storage
|
||||||
|
|
||||||
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
||||||
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
||||||
|
`} />
|
||||||
|
|
||||||
<Mermaid
|
<Mermaid
|
||||||
chart={`graph TD
|
chart={`graph TD
|
||||||
@@ -67,13 +74,15 @@ Instead of video players pulling the stream from your Owncast server it would in
|
|||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</Story>
|
<Description
|
||||||
|
markdown={`
|
||||||
<Story name="CDN in front of S3 Object Storage">
|
## CDN in front of S3 Object Storage
|
||||||
|
|
||||||
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
||||||
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
||||||
|
|
||||||
|
`} />
|
||||||
|
|
||||||
<Mermaid
|
<Mermaid
|
||||||
chart={`flowchart TD
|
chart={`flowchart TD
|
||||||
subgraph Video Assets
|
subgraph Video Assets
|
||||||
@@ -110,11 +119,12 @@ This leads to not only your server not serving any video traffic, but the video
|
|||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</Story>
|
<Description
|
||||||
|
markdown={`
|
||||||
<Story name="CDN in front of Owncast">
|
## CDN in front of Owncast
|
||||||
|
|
||||||
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
||||||
|
`} />
|
||||||
|
|
||||||
<Mermaid
|
<Mermaid
|
||||||
chart={`flowchart TD
|
chart={`flowchart TD
|
||||||
@@ -143,5 +153,3 @@ If you're ok with some video requests coming directly to your Owncast server, an
|
|||||||
|
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</Story>
|
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||||
|
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||||
|
|
||||||
|
<Meta
|
||||||
|
title="owncast/Documentation/Infrastructure Examples/S3 With CDN Example"
|
||||||
|
parameters={{
|
||||||
|
previewTabs: { canvas: { hidden: true } },
|
||||||
|
chromatic: { disableSnapshot: true },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
|
## CDN in front of S3 Object Storage
|
||||||
|
|
||||||
|
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
||||||
|
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
||||||
|
|
||||||
|
`} />
|
||||||
|
|
||||||
|
<Mermaid
|
||||||
|
chart={`flowchart TD
|
||||||
|
subgraph Video Assets
|
||||||
|
S3[fa:fa-hard-drive S3 Object Storage]
|
||||||
|
CDN[fa:fa-cloud Global CDN]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Clients
|
||||||
|
WebPlayer[fa:fa-window-maximize Web App]
|
||||||
|
Embeds[fa:fa-window-restore Embeds]
|
||||||
|
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||||
|
SmartTV[fa:fa-tv Smart TV]
|
||||||
|
VLC[fa:fa-shapes VLC]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Web Assets & Chat Service
|
||||||
|
direction TB
|
||||||
|
Owncast{fa:fa-server Owncast}
|
||||||
|
end
|
||||||
|
|
||||||
|
Owncast--Upload\\nVideo-->S3
|
||||||
|
Owncast--Web-->WebPlayer
|
||||||
|
Owncast<--Chat-->WebPlayer
|
||||||
|
Owncast--Web-->Embeds
|
||||||
|
|
||||||
|
CDN--Download\\nVideo-->WebPlayer
|
||||||
|
CDN--Download\\nVideo-->Embeds
|
||||||
|
CDN--Download\\nVideo-->MobileApps
|
||||||
|
CDN--Download\\nVideo-->SmartTV
|
||||||
|
CDN--Download\\nVideo-->VLC
|
||||||
|
|
||||||
|
S3 --- CDN
|
||||||
|
|
||||||
|
`}
|
||||||
|
/>
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||||
|
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||||
|
|
||||||
|
<Meta
|
||||||
|
title="owncast/Documentation/Infrastructure Examples/CDN Example"
|
||||||
|
parameters={{
|
||||||
|
previewTabs: { canvas: { hidden: true } },
|
||||||
|
chromatic: { disableSnapshot: true },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
|
## CDN in front of Owncast
|
||||||
|
|
||||||
|
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
||||||
|
`} />
|
||||||
|
|
||||||
|
<Mermaid
|
||||||
|
chart={`flowchart TD
|
||||||
|
CDN{{fa:fa-cloud Global CDN}}
|
||||||
|
Owncast{fa:fa-server Owncast}
|
||||||
|
|
||||||
|
subgraph Clients
|
||||||
|
WebPlayer[fa:fa-window-maximize Web App]
|
||||||
|
Embeds[fa:fa-window-restore Embeds]
|
||||||
|
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||||
|
SmartTV[fa:fa-tv Smart TV]
|
||||||
|
VLC[fa:fa-shapes VLC]
|
||||||
|
end
|
||||||
|
|
||||||
|
CDN--Web-->WebPlayer
|
||||||
|
Owncast<--Chat-->WebPlayer
|
||||||
|
CDN--Web-->Embeds
|
||||||
|
|
||||||
|
CDN--Download\\nVideo-->WebPlayer
|
||||||
|
CDN--Download\\nVideo-->Embeds
|
||||||
|
CDN--Download\\nVideo-->MobileApps
|
||||||
|
CDN--Download\\nVideo-->SmartTV
|
||||||
|
CDN--Download\\nVideo-->VLC
|
||||||
|
|
||||||
|
CDN --- Owncast
|
||||||
|
|
||||||
|
`}
|
||||||
|
/>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||||
|
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
|
||||||
|
|
||||||
|
<Meta
|
||||||
|
title="owncast/Documentation/Infrastructure Examples/S3 Example"
|
||||||
|
parameters={{
|
||||||
|
previewTabs: { canvas: { hidden: true } },
|
||||||
|
chromatic: { disableSnapshot: true },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
|
## S3 Object Storage
|
||||||
|
|
||||||
|
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
||||||
|
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
||||||
|
`} />
|
||||||
|
|
||||||
|
<Mermaid
|
||||||
|
chart={`graph TD
|
||||||
|
subgraph Chat & Web Assets
|
||||||
|
Owncast{fa:fa-server Owncast}
|
||||||
|
end
|
||||||
|
|
||||||
|
Owncast--Upload\\nVideo-->S3
|
||||||
|
|
||||||
|
subgraph Video Assets
|
||||||
|
S3[fa:fa-hard-drive S3 Object Storage]
|
||||||
|
end
|
||||||
|
|
||||||
|
subgraph Clients
|
||||||
|
WebPlayer[fa:fa-window-maximize Web App]
|
||||||
|
Embeds[fa:fa-window-restore Embeds]
|
||||||
|
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||||
|
SmartTV[fa:fa-tv Smart TV]
|
||||||
|
VLC[fa:fa-shapes VLC]
|
||||||
|
end
|
||||||
|
|
||||||
|
Owncast--Web-->WebPlayer
|
||||||
|
Owncast--Web-->Embeds
|
||||||
|
Owncast<--Chat-->WebPlayer
|
||||||
|
S3--Download\\nVideo-->WebPlayer
|
||||||
|
S3--Download\\nVideo-->Embeds
|
||||||
|
S3--Download\\nVideo-->MobileApps
|
||||||
|
S3--Download\\nVideo-->SmartTV
|
||||||
|
S3--Download\\nVideo-->VLC
|
||||||
|
|
||||||
|
`}
|
||||||
|
/>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||||
|
|
||||||
<Meta title="owncast/Documentation/{{title}}" parameters=\{{chromatic: { disableSnapshot: true }}}/>
|
<Meta title="owncast/Documentation/{{title}}" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||||
|
|
||||||
{{content}}
|
{{content}}
|
||||||
|
|||||||
@@ -1,25 +1,27 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, Description, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||||
import { Image, ImageRow } from './ImageAsset';
|
import { Image, ImageRow } from './ImageAsset';
|
||||||
|
|
||||||
<Meta title="owncast/Frontend Assets/Emoji" parameters=\{{chromatic: { disableSnapshot: true }}} />
|
<Meta title="owncast/Frontend Assets/Emoji" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||||
|
|
||||||
# Built-in Custom Emoji
|
# Built-in Custom Emoji
|
||||||
|
|
||||||
{{#each emojiCollections}}
|
{{#each emojiCollections}}
|
||||||
|
|
||||||
|
<Description
|
||||||
|
markdown={`
|
||||||
## {{capitalize this.name}}
|
## {{capitalize this.name}}
|
||||||
|
|
||||||
<Story
|
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
|
||||||
name="{{capitalize this.name}}"
|
LICENSE
|
||||||
>
|
</a>
|
||||||
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
|
`} />
|
||||||
LICENSE
|
|
||||||
</a>
|
<IconGallery>
|
||||||
<ImageRow images={[
|
{{#each images}}
|
||||||
{{#each this.images}}
|
<IconItem name="{{this.name}}">
|
||||||
{src: "{{this.src}}", name: "{{this.name}}"},
|
<img src="{{this.src}}" />
|
||||||
{{/each}}
|
</IconItem>
|
||||||
]}/>
|
{{/each}}
|
||||||
</Story>
|
</IconGallery>
|
||||||
|
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
|
||||||
import { Image, ImageRow } from './ImageAsset';
|
|
||||||
|
|
||||||
<Meta title="{{category}}" parameters=\{{chromatic: { disableSnapshot: true }}} />
|
<Meta title="{{category}}" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||||
|
|
||||||
# {{capitalize title}}
|
# {{capitalize title}}
|
||||||
|
|
||||||
<ImageRow images={[
|
<IconGallery>
|
||||||
{{#each images}}
|
{{#each images}}
|
||||||
{src: "{{this.src}}", name: "{{this.name}}"},
|
<IconItem name="{{this.name}}">
|
||||||
{{/each}}
|
<img src="{{this.src}}" />
|
||||||
]}/>
|
</IconItem>
|
||||||
|
{{/each}}
|
||||||
|
</IconGallery>
|
||||||
|
|||||||
12
web/.storybook/tools/ImagesLarge.stories.mdx
Normal file
12
web/.storybook/tools/ImagesLarge.stories.mdx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||||
|
import { Image, ImageRow } from './ImageAsset';
|
||||||
|
|
||||||
|
<Meta title="{{category}}" parameters=\{{chromatic: { disableSnapshot: true }}} />
|
||||||
|
|
||||||
|
# {{capitalize title}}
|
||||||
|
|
||||||
|
<ImageRow images={[
|
||||||
|
{{#each images}}
|
||||||
|
{src: "{{this.src}}", name: "{{this.name}}"},
|
||||||
|
{{/each}}
|
||||||
|
]}/>
|
||||||
@@ -13,6 +13,7 @@ const dir = args[2];
|
|||||||
const title = args[3];
|
const title = args[3];
|
||||||
const category = args[4];
|
const category = args[4];
|
||||||
const publicPath = args[5];
|
const publicPath = args[5];
|
||||||
|
const useLarge = args[6];
|
||||||
|
|
||||||
if (args.length < 6) {
|
if (args.length < 6) {
|
||||||
console.error('Usage: generate-image-story.mjs <dir> <title> <category> <webpublicpath>');
|
console.error('Usage: generate-image-story.mjs <dir> <title> <category> <webpublicpath>');
|
||||||
@@ -30,7 +31,8 @@ const images = readdirSync(dir)
|
|||||||
})
|
})
|
||||||
.filter(Boolean);
|
.filter(Boolean);
|
||||||
|
|
||||||
const template = fs.readFileSync('./Images.stories.mdx', 'utf8');
|
const templateFile = useLarge ? './ImagesLarge.stories.mdx' : './Images.stories.mdx';
|
||||||
|
const template = fs.readFileSync(templateFile, 'utf8');
|
||||||
let t = handlebars.compile(template);
|
let t = handlebars.compile(template);
|
||||||
let output = t({ images, title, category });
|
let output = t({ images, title, category });
|
||||||
console.log(output);
|
console.log(output);
|
||||||
|
|||||||
@@ -13,5 +13,5 @@ node generate-document-stories.mjs
|
|||||||
|
|
||||||
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/ 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 ../../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" >../stories-category-doc-pages/LogosAndGraphics.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" >../stories-category-doc-pages/Tshirt.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
|
||||||
|
|||||||
Reference in New Issue
Block a user