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

Commit updated Storybook stories

pull/2654/head
Owncast 3 years ago
parent
a51f831aa8
commit
9ee9983bda
5 changed files with 64 additions and 62 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. 7
      web/.storybook/stories-category-doc-pages/Development.stories.mdx
  2. 12
      web/.storybook/stories-category-doc-pages/Images.stories.mdx
  3. 19
      web/.storybook/stories-category-doc-pages/LogosAndGraphics.stories.mdx
  4. 62
      web/.storybook/stories-category-doc-pages/SocialPlatformImages.stories.mdx
  5. 26
      web/.storybook/stories-category-doc-pages/Tshirt.stories.mdx

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

@ -35,8 +35,9 @@ The web frontend of Owncast is written in React with TypeScript built using [Nex @@ -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 @@ -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
Unescape View File

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

@ -6,14 +6,15 @@ import { Image, ImageRow } from './ImageAsset'; @@ -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
Unescape View File

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

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

Write Preview
Loading…
Cancel
Save