From 67cec2dcbb109c5a60e8d824220288dbd5ad2f8a Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Thu, 12 May 2022 20:58:08 -0700 Subject: [PATCH] Expand documentation for web project. Closes #1848 --- web/README.md | 47 ++++++++++++++-------------- web/stories/Introduction.stories.mdx | 1 - 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/web/README.md b/web/README.md index 339f9f7f9..26e8b1542 100644 --- a/web/README.md +++ b/web/README.md @@ -1,15 +1,33 @@ -# Owncast Web - -## Owncast Web Frontend +# Owncast Web Frontend The Owncast web frontend is a [Next.js](https://nextjs.org/) project with [React](https://reactjs.org/) components, [TypeScript](https://www.typescriptlang.org/), [Sass](https://sass-lang.com/) styling, using [Ant Design](https://ant.design/) UI components. -### Getting Started +## Getting Started **First**, install the dependencies. `npm install --include=dev` +## Components and Styles + +You can start the [Storybook](https://storybook.js.org/) UI for exploring, testing, and developing components by running: + +`npm run storybook` + +This allows for components to be made available without the need of the server to be running and changes to be made in +isolation. + +## Contribute + +1. Find a component that hasn't yet been worked on by looking through the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) and the sidebar of components in storybook. +1. See if you can have an example of this functionality in action via the [Owncast Demo Server](https://watch.owncast.online) or [Owncast Nightly Build](https://nightly.owncast.online) so you know how it's supposed to work if it's interactive. +1. Visit the `Docs` tab to read any specific documentation that may have been written about how this component works. +1. Go to the `Canvas` tab of the component you selected and see if there's a Design attached to it. +1. If there is a design, then that's a starting point you can use to start building out the component. +1. If there isn't, then visit the [Owncast Demo Server](https://watch.owncast.online), the [Owncast Nightly Build](https://nightly.owncast.online), or the proposed [v2 design](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=0%3A1) for some ways to start. +1. If no design exists, then you can ask around the Owncast chat for help, for come up with your own ideas! +1. No designs are stuck in stone, and we're using this as an opportunity to level up the UI of Owncast, so all ideas are welcome. + ### Run the web project Make sure you're running an instance of Owncast on localhost:8080, as your copy of the admin will look to use that as the API. @@ -18,15 +36,6 @@ Make sure you're running an instance of Owncast on localhost:8080, as your copy `npm run dev` -### Components and Styles - -You can start the [Storybook](https://storybook.js.org/) UI for exploring, testing, and developing components by running: - -`npm run storybook` - -This allows for components to be made available without the need of the server to be running and changes to be made in -isolation. - ### Update the project You can add or edit a pages by modifying `pages/something.js`. The page auto-updates as you edit the file. @@ -40,7 +49,7 @@ https://owncast.online/api/development/ ### Admin Authentication -The pages until `/admin` require authentication to make API calls. +The pages under `/admin` require authentication to make API calls. Auth: HTTP Basic @@ -54,13 +63,3 @@ To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Style guide and components - -We are currently experimenting with using [Storybook](https://storybook.js.org/) to build components, experiment with styling, and have a single place to find colors, fonts, and other styles. - -To work with Storybook: - -`npm run storybook` diff --git a/web/stories/Introduction.stories.mdx b/web/stories/Introduction.stories.mdx index 3ddec11d7..807f6d5de 100644 --- a/web/stories/Introduction.stories.mdx +++ b/web/stories/Introduction.stories.mdx @@ -40,7 +40,6 @@ and the sidebar of components to the left. 1. No designs are stuck in stone, and we're using this as an opportunity to level up the UI of Owncast, so all ideas are welcome. - ## How? This rewrite is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.