Gabe Kangas
4 years ago
17 changed files with 641 additions and 218 deletions
@ -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> |
|
||||||
<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> |
|
||||||
|
|
||||||
|
<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 |
## 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> |
|
||||||
<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> |
|
||||||
|
|
||||||
|
<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 |
## 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,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> |
||||||
|
|
||||||
|
|||||||
@ -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> |
||||||
|
|||||||
@ -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}} |
||||||
|
]}/> |
||||||
Loading…
Reference in new issue