Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Commit updated Storybook stories

Browse Source
This commit is contained in:
Owncast 2023-01-30 22:10:01 +00:00
parent a51f831aa8
commit 9ee9983bda
5 changed files with 64 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,8 +35,9 @@ The web frontend of Owncast is written in React with TypeScript built using [Nex
You can browse the React components in the project using our [Storybook](https://owncast.online/components) page to get an idea of how the frontend is structured.
1. Clone the Owncast repository with `git clone https://github.com/owncast/owncast`.
1. Change to the `webv2` branch with `git checkout webv2`.
1. Fork the Owncast repository on Github located at https://github.com/owncast/owncast.
1. Check out your fork locally with `git clone https://github.com/yourusername/owncast`.
1. Create a new branch for your new changes with `git checkout -b my-new-feature`.
### Run the web project
@ -48,7 +49,7 @@ You must have an instance of Owncast running locally to connect to. You can run
### Learn about how to write React Components with Owncast
We have a [short document](https://github.com/owncast/owncast/blob/webv2/web/components/_COMPONENT_HOW_TO.md) outlining the specifics of the hows and whys of our specific component approach.
We have a [short document](https://github.com/owncast/owncast/blob/web/components/_COMPONENT_HOW_TO.md) outlining the specifics of the hows and whys of our specific component approach.
### Use Storybook to update and create components

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

@ -6,11 +6,11 @@ import { Image, ImageRow } from './ImageAsset';
# 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"},
{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"},
]}/>

19
web/.storybook/stories-category-doc-pages/LogosAndGraphics.stories.mdx
View File

@ -6,14 +6,15 @@ import { Image, ImageRow } from './ImageAsset';
# Logos &amp; Graphics
<ImageRow images={[
{src: "/project/header.png", name: "header.png"},
{src: "/project/kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png", name: "kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png"},
{src: "/project/logo-glare-outlined.png", name: "logo-glare-outlined.png"},
{src: "/project/logo-glare-vector.svg", name: "logo-glare-vector.svg"},
{src: "/project/logo-noglare-vector.svg", name: "logo-noglare-vector.svg"},
{src: "/project/logo-translucent-grey.svg", name: "logo-translucent-grey.svg"},
{src: "/project/logo-white.svg", name: "logo-white.svg"},
{src: "/project/owncast-background.png", name: "owncast-background.png"},
{src: "/project/owncast-browser-mobile.png", name: "owncast-browser-mobile.png"},
{src: "project/header.png", name: "header.png"},
{src: "project/kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png", name: "kiss-cut-stickers-5.5x5.5-default-60874a6c11849.png"},
{src: "project/logo-glare-outlined.png", name: "logo-glare-outlined.png"},
{src: "project/logo-glare-vector.svg", name: "logo-glare-vector.svg"},
{src: "project/logo-noglare-vector.svg", name: "logo-noglare-vector.svg"},
{src: "project/logo-translucent-grey.svg", name: "logo-translucent-grey.svg"},
{src: "project/logo-white.svg", name: "logo-white.svg"},
{src: "project/owncast-background.png", name: "owncast-background.png"},
{src: "project/owncast-browser-mobile.png", name: "owncast-browser-mobile.png"},
{src: "project/sticker-bigtech-alt.png", name: "sticker-bigtech-alt.png"},
]}/>

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

@ -6,36 +6,36 @@ import { Image, ImageRow } from './ImageAsset';
# 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"},
{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"},
]}/>

26
web/.storybook/stories-category-doc-pages/Tshirt.stories.mdx
View File

@ -6,18 +6,18 @@ import { Image, ImageRow } from './ImageAsset';
# T-shirt
<ImageRow images={[
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png"},
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png"},
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png"},
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-front-60873dde51eb3.png", name: "all-over-print-mens-crew-neck-t-shirt-white-front-60873dde51eb3.png"},
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-front-60873dde52064.png", name: "all-over-print-mens-crew-neck-t-shirt-white-front-60873dde52064.png"},
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-left-60873dde525e2.png", name: "all-over-print-mens-crew-neck-t-shirt-white-left-60873dde525e2.png"},
{src: "/tshirt/all-over-print-mens-crew-neck-t-shirt-white-right-60873dde52184.png", name: "all-over-print-mens-crew-neck-t-shirt-white-right-60873dde52184.png"},
{src: "/tshirt/all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62999.png", name: "all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62999.png"},
{src: "/tshirt/all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62aa4.png", name: "all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62aa4.png"},
{src: "/tshirt/all-over-print-womens-crew-neck-t-shirt-white-front-6087418b626d5.png", name: "all-over-print-womens-crew-neck-t-shirt-white-front-6087418b626d5.png"},
{src: "/tshirt/all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png", name: "all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png"},
{src: "/tshirt/all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png", name: "all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png"},
{src: "/tshirt/all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png", name: "all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde52297.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde523ae.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png", name: "all-over-print-mens-crew-neck-t-shirt-white-back-60873dde524ca.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-front-60873dde51eb3.png", name: "all-over-print-mens-crew-neck-t-shirt-white-front-60873dde51eb3.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-front-60873dde52064.png", name: "all-over-print-mens-crew-neck-t-shirt-white-front-60873dde52064.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-left-60873dde525e2.png", name: "all-over-print-mens-crew-neck-t-shirt-white-left-60873dde525e2.png"},
{src: "tshirt/all-over-print-mens-crew-neck-t-shirt-white-right-60873dde52184.png", name: "all-over-print-mens-crew-neck-t-shirt-white-right-60873dde52184.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62999.png", name: "all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62999.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62aa4.png", name: "all-over-print-womens-crew-neck-t-shirt-white-back-6087418b62aa4.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-front-6087418b626d5.png", name: "all-over-print-womens-crew-neck-t-shirt-white-front-6087418b626d5.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png", name: "all-over-print-womens-crew-neck-t-shirt-white-front-6087418b62878.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png", name: "all-over-print-womens-crew-neck-t-shirt-white-left-6087418b62b91.png"},
{src: "tshirt/all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png", name: "all-over-print-womens-crew-neck-t-shirt-white-right-6087418b62c88.png"},
]}/>