Commit updated Storybook stories
This commit is contained in:
Owncast
parent
fc47d3158c
commit
f4ef01fca0
@ -0,0 +1,85 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="owncast/Documentation/Get Started with Owncast Development" />
|
||||
|
||||
---
|
||||
title: "How to work on Owncast"
|
||||
description: The technical details for those wishing to take part in Owncast development.
|
||||
tags:
|
||||
[
|
||||
development,
|
||||
contribute,
|
||||
open-source,
|
||||
github,
|
||||
git,
|
||||
go,
|
||||
react,
|
||||
typescript,
|
||||
contributing,
|
||||
]
|
||||
aliases: [/docs/building]
|
||||
type: toc
|
||||
toc: true
|
||||
---
|
||||
|
||||
Owncast is a straightforward web application and compared to many projects is very easy to get running locally and contributing to.
|
||||
|
||||
- The backend is written in [Go](https://go.dev/).
|
||||
- The frontend is written in [React](https://reactjs.org/).
|
||||
|
||||
If you're interested in contributing to Owncast, here's how you can get started.
|
||||
|
||||
## How to start with Frontend development
|
||||
|
||||
The web frontend of Owncast is written in React with TypeScript built using [Next.js](https://nextjs.org/).
|
||||
|
||||
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`.
|
||||
|
||||
### Run the web project
|
||||
|
||||
1. Change to the `web` directory and install dependencies with `npm install`.
|
||||
1. Start the development server with `npm run dev`.
|
||||
1. Open `http://localhost:3000` in your browser.
|
||||
|
||||
You must have an instance of Owncast running locally to connect to. You can run one with `go run main.go` from the root of the repository. Read more details about running development Owncast under the backend section.
|
||||
|
||||
### 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.
|
||||
|
||||
### Use Storybook to update and create components
|
||||
|
||||
Storybook is a tool that allows you to create and test components in isolation. It's a great way to develop new components and test them out without running a copy of the Owncast server.
|
||||
|
||||
1. Run `npm run storybook` to start the Storybook server.
|
||||
1. Open `http://localhost:6006` in your browser.
|
||||
1. Navigate the Storybook interface to browse and test components.
|
||||
|
||||
## How to start with Backend development
|
||||
|
||||
The backend of Owncast is written in Go. It operates as a web and API server, inbound RTMP ingestion server, outbound HLS distribution server, and chat server.
|
||||
|
||||
1. Ensure you have the [Go programming language](https://go.dev/dl/) tools installed for your system.
|
||||
1. Clone the Owncast repository with `git clone https://github.com/owncast/owncast`.
|
||||
1. A c compiler and tooling must be available on your system. Generally this means installing `gcc` and its development libraries.
|
||||
1. Run `go run main.go` from the root of the repository.
|
||||
|
||||
### Go Linting
|
||||
|
||||
We use golangci-lint to lint our Go code. While optional, it is a useful tool to assist you in writing better Go code. You can install it from the [golangci-lint](https://golangci-lint.run/usage/install/#local-installation) website.
|
||||
|
||||
## Run a development stream
|
||||
|
||||
Many features are only enabled when a stream is live. You can run a local stream using any video file you have around by running:
|
||||
|
||||
```bash
|
||||
./test/ocTestStream.sh somevideofile.mp4
|
||||
```
|
||||
|
||||
## If you haven't yet, find an issue to work on
|
||||
|
||||
Visit our [Good First Issues](https://github.com/owncast/owncast/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) list to find something that might be a good fit for you to start on. Otherwise, feel free to drop into our [community chat](https://owncast.rocket.chat) and say hi and we can get to know you and see where you'd like to take part.
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
@ -9,122 +7,126 @@ import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
|
||||
## 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"},
|
||||
]}/>
|
||||
|
||||
<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"},
|
||||
]}/>
|
||||
|
||||
|
||||
## 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"},
|
||||
]}/>
|
||||
|
||||
<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"},
|
||||
]}/>
|
||||
|
||||
|
||||
## 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"},
|
||||
]}/>
|
||||
|
||||
<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"},
|
||||
]}/>
|
||||
|
||||
|
||||
## 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"},
|
||||
]}/>
|
||||
|
||||
<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"},
|
||||
]}/>
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="owncast/Documentation/Building Web Components" />
|
||||
<Meta title="owncast/Documentation/Building Frontend Components" />
|
||||
|
||||
# How we develop components
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user