pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactor component stories to be documents to reduce story snapshots

gek/test-caches
Gabe Kangas 4 years ago
parent
566369837c
commit
d5c0d25084
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
17 changed files with 641 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/.storybook/stories-category-doc-pages/Design.stories.mdx
  2. 2
      web/.storybook/stories-category-doc-pages/Development.stories.mdx
  3. 428
      web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
  4. 33
      web/.storybook/stories-category-doc-pages/Images.stories.mdx
  5. 2
      web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
  6. 133
      web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
  7. 2
      web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
  8. 38
      web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
  9. 55
      web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
  10. 45
      web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
  11. 50
      web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
  12. 2
      web/.storybook/tools/Document.stories.mdx
  13. 30
      web/.storybook/tools/Emoji.stories.mdx
  14. 17
      web/.storybook/tools/Images.stories.mdx
  15. 12
      web/.storybook/tools/ImagesLarge.stories.mdx
  16. 4
      web/.storybook/tools/generate-image-story.mjs
  17. 4
      web/.storybook/tools/generate-stories.sh

2
web/.storybook/stories-category-doc-pages/Design.stories.mdx
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
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

2
web/.storybook/stories-category-doc-pages/Development.stories.mdx
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
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"

428
web/.storybook/stories-category-doc-pages/Emoji.stories.mdx
Unescape View File

@ -1,148 +1,324 @@ @@ -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';
<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
<Description
markdown={`
## Blob
<Story
name="Blob"
>
<a href="img/emoji/blob/LICENSE.md" target="_blank">
LICENSE
</a>
<ImageRow images={[
{src: "img/emoji/blob/ablobattention.gif", name: "ablobattention.gif"},
{src: "img/emoji/blob/ablobaww.gif", name: "ablobaww.gif"},
{src: "img/emoji/blob/ablobblewobble.gif", name: "ablobblewobble.gif"},
{src: "img/emoji/blob/ablobcheer.gif", name: "ablobcheer.gif"},
{src: "img/emoji/blob/ablobcry.gif", name: "ablobcry.gif"},
{src: "img/emoji/blob/ablobdancer.gif", name: "ablobdancer.gif"},
{src: "img/emoji/blob/ablobgift.gif", name: "ablobgift.gif"},
{src: "img/emoji/blob/ablobgiggle.gif", name: "ablobgiggle.gif"},
{src: "img/emoji/blob/ablobparty.gif", name: "ablobparty.gif"},
{src: "img/emoji/blob/ablobsleep.gif", name: "ablobsleep.gif"},
{src: "img/emoji/blob/ablobthinking.gif", name: "ablobthinking.gif"},
{src: "img/emoji/blob/ablobwave.gif", name: "ablobwave.gif"},
{src: "img/emoji/blob/blobangry.png", name: "blobangry.png"},
{src: "img/emoji/blob/blobaww.png", name: "blobaww.png"},
{src: "img/emoji/blob/blobdancer.png", name: "blobdancer.png"},
{src: "img/emoji/blob/blobjam.png", name: "blobjam.png"},
{src: "img/emoji/blob/blobscream.png", name: "blobscream.png"},
{src: "img/emoji/blob/blobthanks.png", name: "blobthanks.png"},
{src: "img/emoji/blob/blobthinking.png", name: "blobthinking.png"},
{src: "img/emoji/blob/blobwave.png", name: "blobwave.png"},
{src: "img/emoji/blob/blobyes.png", name: "blobyes.png"},
{src: "img/emoji/blob/blobyum.png", name: "blobyum.png"},
]}/>
</Story>
<a href="img/emoji/blob/LICENSE.md" target="_blank">
LICENSE
</a>
`} />
<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>
<Description
markdown={`
## Conigliolo96
<Story
name="Conigliolo96"
>
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
LICENSE
</a>
<ImageRow images={[
{src: "img/emoji/conigliolo96/conigliolo1.gif", name: "conigliolo1.gif"},
{src: "img/emoji/conigliolo96/conigliolo15.gif", name: "conigliolo15.gif"},
{src: "img/emoji/conigliolo96/conigliolo17.gif", name: "conigliolo17.gif"},
{src: "img/emoji/conigliolo96/conigliolo21.gif", name: "conigliolo21.gif"},
{src: "img/emoji/conigliolo96/conigliolo25.gif", name: "conigliolo25.gif"},
{src: "img/emoji/conigliolo96/conigliolo28.gif", name: "conigliolo28.gif"},
]}/>
</Story>
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
LICENSE
</a>
`} />
<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>
<Description
markdown={`
## Dog
<Story
name="Dog"
>
<a href="img/emoji/dog/LICENSE.md" target="_blank">
LICENSE
</a>
<ImageRow images={[
{src: "img/emoji/dog/img001.svg", name: "img001.svg"},
{src: "img/emoji/dog/img091.svg", name: "img091.svg"},
{src: "img/emoji/dog/img093.svg", name: "img093.svg"},
{src: "img/emoji/dog/img203.svg", name: "img203.svg"},
{src: "img/emoji/dog/img288.svg", name: "img288.svg"},
{src: "img/emoji/dog/img327.svg", name: "img327.svg"},
{src: "img/emoji/dog/img346.svg", name: "img346.svg"},
{src: "img/emoji/dog/img347.svg", name: "img347.svg"},
{src: "img/emoji/dog/img352.svg", name: "img352.svg"},
]}/>
</Story>
<a href="img/emoji/dog/LICENSE.md" target="_blank">
LICENSE
</a>
`} />
<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>
<Description
markdown={`
## Mutant
<Story
name="Mutant"
>
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
LICENSE
</a>
<ImageRow images={[
{src: "img/emoji/mutant/8_ball.svg", name: "8_ball.svg"},
{src: "img/emoji/mutant/alien.svg", name: "alien.svg"},
{src: "img/emoji/mutant/american_football.svg", name: "american_football.svg"},
{src: "img/emoji/mutant/arms_in_the_air.svg", name: "arms_in_the_air.svg"},
{src: "img/emoji/mutant/artist.svg", name: "artist.svg"},
{src: "img/emoji/mutant/astronaut.svg", name: "astronaut.svg"},
{src: "img/emoji/mutant/back_of_hand_clw.svg", name: "back_of_hand_clw.svg"},
{src: "img/emoji/mutant/back_of_hand_hoof.svg", name: "back_of_hand_hoof.svg"},
{src: "img/emoji/mutant/back_of_hand_paw.svg", name: "back_of_hand_paw.svg"},
{src: "img/emoji/mutant/baseball.svg", name: "baseball.svg"},
{src: "img/emoji/mutant/basketball.svg", name: "basketball.svg"},
{src: "img/emoji/mutant/blep.svg", name: "blep.svg"},
{src: "img/emoji/mutant/bow_b3.svg", name: "bow_b3.svg"},
{src: "img/emoji/mutant/cat_crying.svg", name: "cat_crying.svg"},
{src: "img/emoji/mutant/cat_devious.svg", name: "cat_devious.svg"},
{src: "img/emoji/mutant/cat_grin.svg", name: "cat_grin.svg"},
{src: "img/emoji/mutant/cat_heart_eyes.svg", name: "cat_heart_eyes.svg"},
{src: "img/emoji/mutant/cat_joy.svg", name: "cat_joy.svg"},
{src: "img/emoji/mutant/cat_kiss.svg", name: "cat_kiss.svg"},
{src: "img/emoji/mutant/cat_pouting.svg", name: "cat_pouting.svg"},
{src: "img/emoji/mutant/cat_scream.svg", name: "cat_scream.svg"},
{src: "img/emoji/mutant/cat_smile.svg", name: "cat_smile.svg"},
{src: "img/emoji/mutant/chef.svg", name: "chef.svg"},
{src: "img/emoji/mutant/detective.svg", name: "detective.svg"},
{src: "img/emoji/mutant/ear.svg", name: "ear.svg"},
{src: "img/emoji/mutant/eye.svg", name: "eye.svg"},
{src: "img/emoji/mutant/eyes.svg", name: "eyes.svg"},
{src: "img/emoji/mutant/facepalm.svg", name: "facepalm.svg"},
{src: "img/emoji/mutant/football.svg", name: "football.svg"},
{src: "img/emoji/mutant/ghost.svg", name: "ghost.svg"},
{src: "img/emoji/mutant/grumpy_block.svg", name: "grumpy_block.svg"},
{src: "img/emoji/mutant/hot_shit.svg", name: "hot_shit.svg"},
{src: "img/emoji/mutant/jack_o_lantern.svg", name: "jack_o_lantern.svg"},
{src: "img/emoji/mutant/long_pointed_ear.svg", name: "long_pointed_ear.svg"},
{src: "img/emoji/mutant/mechanical_arm.svg", name: "mechanical_arm.svg"},
{src: "img/emoji/mutant/no_good.svg", name: "no_good.svg"},
{src: "img/emoji/mutant/office_worker.svg", name: "office_worker.svg"},
{src: "img/emoji/mutant/ok_gesture.svg", name: "ok_gesture.svg"},
{src: "img/emoji/mutant/person_frowning.svg", name: "person_frowning.svg"},
{src: "img/emoji/mutant/raising_hand.svg", name: "raising_hand.svg"},
{src: "img/emoji/mutant/robot.svg", name: "robot.svg"},
{src: "img/emoji/mutant/shrug.svg", name: "shrug.svg"},
{src: "img/emoji/mutant/singer.svg", name: "singer.svg"},
{src: "img/emoji/mutant/skull.svg", name: "skull.svg"},
{src: "img/emoji/mutant/skull_and_crossbones.svg", name: "skull_and_crossbones.svg"},
{src: "img/emoji/mutant/softball.svg", name: "softball.svg"},
{src: "img/emoji/mutant/student.svg", name: "student.svg"},
{src: "img/emoji/mutant/studio_microphone.svg", name: "studio_microphone.svg"},
{src: "img/emoji/mutant/technologist.svg", name: "technologist.svg"},
{src: "img/emoji/mutant/tennis.svg", name: "tennis.svg"},
{src: "img/emoji/mutant/volleyball.svg", name: "volleyball.svg"},
]}/>
</Story>
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
LICENSE
</a>
`} />
<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>

33
web/.storybook/stories-category-doc-pages/Images.stories.mdx
Unescape View File

@ -1,16 +1,27 @@ @@ -1,16 +1,27 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<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
<ImageRow images={[
{src: "img/fediverse-black.png", name: "fediverse-black.png"},
{src: "img/fediverse-color.png", name: "fediverse-color.png"},
{src: "img/follow.svg", name: "follow.svg"},
{src: "img/indieauth.png", name: "indieauth.png"},
{src: "img/like.svg", name: "like.svg"},
{src: "img/repost.svg", name: "repost.svg"},
]}/>
<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>

2
web/.storybook/stories-category-doc-pages/ProductDefinition.stories.mdx
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
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

133
web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
Unescape View File

@ -1,41 +1,102 @@ @@ -1,41 +1,102 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<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
<ImageRow images={[
{src: "img/platformlogos/bandcamp.svg", name: "bandcamp.svg"},
{src: "img/platformlogos/default.svg", name: "default.svg"},
{src: "img/platformlogos/discord.svg", name: "discord.svg"},
{src: "img/platformlogos/donate.svg", name: "donate.svg"},
{src: "img/platformlogos/facebook.svg", name: "facebook.svg"},
{src: "img/platformlogos/fediverse.svg", name: "fediverse.svg"},
{src: "img/platformlogos/follow.svg", name: "follow.svg"},
{src: "img/platformlogos/github.svg", name: "github.svg"},
{src: "img/platformlogos/gitlab.svg", name: "gitlab.svg"},
{src: "img/platformlogos/google.svg", name: "google.svg"},
{src: "img/platformlogos/instagram.svg", name: "instagram.svg"},
{src: "img/platformlogos/keyoxide.png", name: "keyoxide.png"},
{src: "img/platformlogos/ko-fi.svg", name: "ko-fi.svg"},
{src: "img/platformlogos/lbry.svg", name: "lbry.svg"},
{src: "img/platformlogos/liberapay.svg", name: "liberapay.svg"},
{src: "img/platformlogos/link.svg", name: "link.svg"},
{src: "img/platformlogos/linkedin.svg", name: "linkedin.svg"},
{src: "img/platformlogos/mastodon.svg", name: "mastodon.svg"},
{src: "img/platformlogos/matrix.svg", name: "matrix.svg"},
{src: "img/platformlogos/odysee.svg", name: "odysee.svg"},
{src: "img/platformlogos/patreon.svg", name: "patreon.svg"},
{src: "img/platformlogos/paypal.svg", name: "paypal.svg"},
{src: "img/platformlogos/snapchat.svg", name: "snapchat.svg"},
{src: "img/platformlogos/soundcloud.svg", name: "soundcloud.svg"},
{src: "img/platformlogos/spotify.svg", name: "spotify.svg"},
{src: "img/platformlogos/steam.svg", name: "steam.svg"},
{src: "img/platformlogos/tiktok.svg", name: "tiktok.svg"},
{src: "img/platformlogos/twitch.svg", name: "twitch.svg"},
{src: "img/platformlogos/twitter.svg", name: "twitter.svg"},
{src: "img/platformlogos/xmpp.svg", name: "xmpp.svg"},
{src: "img/platformlogos/youtube.svg", name: "youtube.svg"},
]}/>
<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>

2
web/.storybook/stories-category-doc-pages/WebComponents.stories.mdx
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
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

38
web/.storybook/stories-category-doc-pages/InfrastructureExamples.stories.mdx → web/.storybook/stories-category-doc-pages/examples/BasicInfrastructureExamples.stories.mdx
Unescape View File

@ -1,14 +1,20 @@ @@ -1,14 +1,20 @@
import { Mermaid } from 'mdx-mermaid/Mermaid';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Canvas, Meta, Story, Description } from '@storybook/addon-docs';
<Meta
title="owncast/Documentation/Usage Examples"
parameters={{ chromatic: { disableSnapshot: true } }}
title="owncast/Documentation/Infrastructure Examples/Basic Example"
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.
`} />
<Mermaid
chart={`graph TD
@ -28,12 +34,13 @@ This is the most basic Owncast setup and is what you get when you run it without @@ -28,12 +34,13 @@ This is the most basic Owncast setup and is what you get when you run it without
`}
/>
</Story>
<Story name="S3 Object Storage">
<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
@ -67,13 +74,15 @@ Instead of video players pulling the stream from your Owncast server it would in @@ -67,13 +74,15 @@ Instead of video players pulling the stream from your Owncast server it would in
`}
/>
</Story>
<Story name="CDN in front of S3 Object Storage">
<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
@ -110,11 +119,12 @@ This leads to not only your server not serving any video traffic, but the video @@ -110,11 +119,12 @@ This leads to not only your server not serving any video traffic, but the video
`}
/>
</Story>
<Story name="CDN in front of Owncast">
<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
@ -143,5 +153,3 @@ If you're ok with some video requests coming directly to your Owncast server, an @@ -143,5 +153,3 @@ If you're ok with some video requests coming directly to your Owncast server, an
`}
/>
</Story>

55
web/.storybook/stories-category-doc-pages/examples/CDN+S3InfrastructureExamples.stories.mdx
Unescape View File

@ -0,0 +1,55 @@ @@ -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
`}
/>

45
web/.storybook/stories-category-doc-pages/examples/CDNInfrastructureExamples.stories.mdx
Unescape View File

@ -0,0 +1,45 @@ @@ -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
`}
/>

50
web/.storybook/stories-category-doc-pages/examples/S3InfrastructureExamples.stories.mdx
Unescape View File

@ -0,0 +1,50 @@ @@ -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
`}
/>

2
web/.storybook/tools/Document.stories.mdx
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
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}}

30
web/.storybook/tools/Emoji.stories.mdx
Unescape View File

@ -1,25 +1,27 @@ @@ -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';
<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
{{#each emojiCollections}}
<Description
markdown={`
## {{capitalize this.name}}
<Story
name="{{capitalize this.name}}"
>
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
LICENSE
</a>
<ImageRow images={[
{{#each this.images}}
{src: "{{this.src}}", name: "{{this.name}}"},
{{/each}}
]}/>
</Story>
<a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
LICENSE
</a>
`} />
<IconGallery>
{{#each images}}
<IconItem name="{{this.name}}">
<img src="{{this.src}}" />
</IconItem>
{{/each}}
</IconGallery>
{{/each}}

17
web/.storybook/tools/Images.stories.mdx
Unescape View File

@ -1,12 +1,13 @@ @@ -1,12 +1,13 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Image, ImageRow } from './ImageAsset';
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
<Meta title="{{category}}" parameters=\{{chromatic: { disableSnapshot: true }}} />
<Meta title="{{category}}" parameters=\{{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
# {{capitalize title}}
<ImageRow images={[
{{#each images}}
{src: "{{this.src}}", name: "{{this.name}}"},
{{/each}}
]}/>
<IconGallery>
{{#each images}}
<IconItem name="{{this.name}}">
<img src="{{this.src}}" />
</IconItem>
{{/each}}
</IconGallery>

12
web/.storybook/tools/ImagesLarge.stories.mdx
Unescape View File

@ -0,0 +1,12 @@ @@ -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}}
]}/>

4
web/.storybook/tools/generate-image-story.mjs
Unescape View File

@ -13,6 +13,7 @@ const dir = args[2]; @@ -13,6 +13,7 @@ const dir = args[2];
const title = args[3];
const category = args[4];
const publicPath = args[5];
const useLarge = args[6];
if (args.length < 6) {
console.error('Usage: generate-image-story.mjs <dir> <title> <category> <webpublicpath>');
@ -30,7 +31,8 @@ const images = readdirSync(dir) @@ -30,7 +31,8 @@ const images = readdirSync(dir)
})
.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 output = t({ images, title, category });
console.log(output);

4
web/.storybook/tools/generate-stories.sh
Unescape View File

@ -13,5 +13,5 @@ node generate-document-stories.mjs @@ -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/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/tshirt/ "T-shirt" "owncast/Project Assets/T-Shirt" "tshirt" >../stories-category-doc-pages/Tshirt.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

Write Preview
Loading…
Cancel
Save