mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 20:28:15 +03:00
WIP storybook upgrade
This commit is contained in:
Gabe Kangas
parent
d939d9f43d
commit
f424fe6dae
59 changed files with 1452 additions and 6686 deletions
|
|
@ -3,12 +3,7 @@ module.exports = {
|
|||
previewMdx2: true,
|
||||
},
|
||||
|
||||
stories: [
|
||||
'../.storybook/stories-category-doc-pages/**/*.stories.mdx',
|
||||
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../components/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
'../pages/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
stories: ['../.storybook/stories-category-doc-pages/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../components/**/*.stories.@(js|jsx|ts|tsx)', '../pages/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
|
|
@ -98,6 +93,7 @@ module.exports = {
|
|||
],
|
||||
},
|
||||
},
|
||||
'@chromatic-com/storybook'
|
||||
],
|
||||
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
|
|
|
|||
|
|
@ -71,11 +71,11 @@ export const parameters = {
|
|||
fetchMock: {
|
||||
mocks: [],
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
// actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
docs: {
|
||||
container: DocsContainer,
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
// actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
viewMode: 'docs',
|
||||
controls: {
|
||||
matchers: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Owncast Design Guidelines & Resources
|
||||
|
||||
|
|
@ -23,8 +23,8 @@ Read the detailed [product definition](https://github.com/owncast/owncast/blob/d
|
|||
|
||||
**We encourage you to:**
|
||||
|
||||
- Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
|
||||
- Check out our [Contributor Guide](https://owncast.online/help) and
|
||||
* Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
|
||||
* Check out our [Contributor Guide](https://owncast.online/help) and
|
||||
[Code of Conduct](https://github.com/owncast/owncast/blob/develop/CODE_OF_CONDUCT.md)
|
||||
|
||||
## 🎭 Target audience
|
||||
|
|
@ -36,9 +36,9 @@ Owncast is a live streaming and chat server targeted to anybody who has live str
|
|||
Owncast is a constantly moving project with features both old and new. This allows for design contributions to be both big or small.
|
||||
You may not know how much time you can dedicate to the project, or if you'll be able to see something through to the end, so be honest about that. Take on projects that you'll be able to see completed.
|
||||
|
||||
- So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
|
||||
- If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
|
||||
- Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
|
||||
* So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
|
||||
* If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
|
||||
* Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
|
||||
|
||||
## 💅 Design relevant materials
|
||||
|
||||
|
|
@ -72,4 +72,3 @@ All design work is licensed under the
|
|||
[MIT](https://mit-license.org/)
|
||||
|
||||
[(Back to top)](#-table-of-contents)
|
||||
|
||||
|
|
@ -1,26 +1,27 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
***
|
||||
|
||||
---
|
||||
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]
|
||||
\[
|
||||
development,
|
||||
contribute,
|
||||
open-source,
|
||||
github,
|
||||
git,
|
||||
go,
|
||||
react,
|
||||
typescript,
|
||||
contributing,
|
||||
]
|
||||
aliases: \[/docs/building]
|
||||
type: toc
|
||||
toc: true
|
||||
---
|
||||
---------
|
||||
|
||||
<meta http-equiv="refresh" content="0; url=https://owncast.dev/owncast/Development-e9dda43167c048968a308c4dadac66c4" />
|
||||
|
||||
390
web/.storybook/stories-category-doc-pages/Emoji.mdx
Normal file
390
web/.storybook/stories-category-doc-pages/Emoji.mdx
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/blocks';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Built-in Custom Emoji
|
||||
|
||||
## Blob
|
||||
|
||||
<a href="img/emoji/blob/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
## Conigliolo96
|
||||
|
||||
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="conigliolo1.gif">
|
||||
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="conigliolo15.gif">
|
||||
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="conigliolo17.gif">
|
||||
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
|
||||
</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>
|
||||
|
||||
## Dog
|
||||
|
||||
<a href="img/emoji/dog/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
## Mutant
|
||||
|
||||
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="8_ball.svg">
|
||||
<img src="img/emoji/mutant/8_ball.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="alien.svg">
|
||||
<img src="img/emoji/mutant/alien.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="american_football.svg">
|
||||
<img src="img/emoji/mutant/american_football.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="arms_in_the_air.svg">
|
||||
<img src="img/emoji/mutant/arms_in_the_air.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="artist.svg">
|
||||
<img src="img/emoji/mutant/artist.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="astronaut.svg">
|
||||
<img src="img/emoji/mutant/astronaut.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="back_of_hand_clw.svg">
|
||||
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="back_of_hand_hoof.svg">
|
||||
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="back_of_hand_paw.svg">
|
||||
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="baseball.svg">
|
||||
<img src="img/emoji/mutant/baseball.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="basketball.svg">
|
||||
<img src="img/emoji/mutant/basketball.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="blep.svg">
|
||||
<img src="img/emoji/mutant/blep.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="bow_b3.svg">
|
||||
<img src="img/emoji/mutant/bow_b3.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="cat_crying.svg">
|
||||
<img src="img/emoji/mutant/cat_crying.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="cat_devious.svg">
|
||||
<img src="img/emoji/mutant/cat_devious.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="cat_grin.svg">
|
||||
<img src="img/emoji/mutant/cat_grin.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="cat_heart_eyes.svg">
|
||||
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="cat_joy.svg">
|
||||
<img src="img/emoji/mutant/cat_joy.svg" />
|
||||
</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,312 +0,0 @@
|
|||
import { Canvas, Meta, Story, IconGallery, IconItem } from '@storybook/addon-docs';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Emoji" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Built-in Custom Emoji
|
||||
|
||||
|
||||
## Blob
|
||||
|
||||
<a href="img/emoji/blob/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
## Conigliolo96
|
||||
|
||||
<a href="img/emoji/conigliolo96/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="conigliolo1.gif">
|
||||
<img src="img/emoji/conigliolo96/conigliolo1.gif" />
|
||||
</IconItem>
|
||||
<IconItem name="conigliolo15.gif">
|
||||
<img src="img/emoji/conigliolo96/conigliolo15.gif" />
|
||||
</IconItem>
|
||||
<IconItem name="conigliolo17.gif">
|
||||
<img src="img/emoji/conigliolo96/conigliolo17.gif" />
|
||||
</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>
|
||||
|
||||
|
||||
## Dog
|
||||
|
||||
<a href="img/emoji/dog/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
## Mutant
|
||||
|
||||
<a href="img/emoji/mutant/LICENSE.md" target="_blank">
|
||||
LICENSE
|
||||
</a>
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="8_ball.svg">
|
||||
<img src="img/emoji/mutant/8_ball.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="alien.svg">
|
||||
<img src="img/emoji/mutant/alien.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="american_football.svg">
|
||||
<img src="img/emoji/mutant/american_football.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="arms_in_the_air.svg">
|
||||
<img src="img/emoji/mutant/arms_in_the_air.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="artist.svg">
|
||||
<img src="img/emoji/mutant/artist.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="astronaut.svg">
|
||||
<img src="img/emoji/mutant/astronaut.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="back_of_hand_clw.svg">
|
||||
<img src="img/emoji/mutant/back_of_hand_clw.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="back_of_hand_hoof.svg">
|
||||
<img src="img/emoji/mutant/back_of_hand_hoof.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="back_of_hand_paw.svg">
|
||||
<img src="img/emoji/mutant/back_of_hand_paw.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="baseball.svg">
|
||||
<img src="img/emoji/mutant/baseball.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="basketball.svg">
|
||||
<img src="img/emoji/mutant/basketball.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="blep.svg">
|
||||
<img src="img/emoji/mutant/blep.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="bow_b3.svg">
|
||||
<img src="img/emoji/mutant/bow_b3.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="cat_crying.svg">
|
||||
<img src="img/emoji/mutant/cat_crying.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="cat_devious.svg">
|
||||
<img src="img/emoji/mutant/cat_devious.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="cat_grin.svg">
|
||||
<img src="img/emoji/mutant/cat_grin.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="cat_heart_eyes.svg">
|
||||
<img src="img/emoji/mutant/cat_heart_eyes.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="cat_joy.svg">
|
||||
<img src="img/emoji/mutant/cat_joy.svg" />
|
||||
</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>
|
||||
|
||||
|
||||
31
web/.storybook/stories-category-doc-pages/Images.mdx
Normal file
31
web/.storybook/stories-category-doc-pages/Images.mdx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Images
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="fediverse-black.png">
|
||||
<img src="img/fediverse-black.png" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="fediverse-color.png">
|
||||
<img src="img/fediverse-color.png" />
|
||||
</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,27 +0,0 @@
|
|||
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Images
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="fediverse-black.png">
|
||||
<img src="img/fediverse-black.png" />
|
||||
</IconItem>
|
||||
<IconItem name="fediverse-color.png">
|
||||
<img src="img/fediverse-color.png" />
|
||||
</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,11 +1,12 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
<Meta title="owncast/Project Assets/Logos & Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
|
||||
<Meta title="owncast/Project Assets/Logos & Graphics" parameters={{chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Logos & Graphics
|
||||
# Logos & Graphics
|
||||
|
||||
<ImageRow images={[
|
||||
<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"},
|
||||
|
|
@ -16,5 +17,5 @@ import { Image, ImageRow } from './ImageAsset';
|
|||
{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"},
|
||||
]}/>
|
||||
|
||||
]}
|
||||
/>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Owncast Product Definition
|
||||
|
||||
## Why
|
||||
|
||||
By defining the goals and target user bases we have something stable to guide decisions, features, conversations and keep clarity around what is being built.
|
||||
|
||||
While these definitions and lists should not be seen as exhaustive, in theory, once this is seen as "complete" there should be few, if any changes, as that would note a large change in direction and goals.
|
||||
|
||||
\[TOC]
|
||||
|
||||
## Vision
|
||||
|
||||
> The out-of-the-box personal broadcast platform for DIY streamers and integrators.
|
||||
|
||||
## Primary Goals
|
||||
|
||||
* Useful out of the box.
|
||||
* Fast to get running.
|
||||
* Self-contained.
|
||||
* An alternative, not a competitor.
|
||||
* For individuals, not service providers.
|
||||
* Easy to integrate into other projects/products.
|
||||
* Low barrier to entry.
|
||||
* Empowering.
|
||||
* Customizable and hackable.
|
||||
|
||||
## Primary Users
|
||||
|
||||
### The DIY Streamer
|
||||
|
||||
An individual who is streaming as a hobby, a project, or is moving their audience from an existing streaming platform.
|
||||
|
||||
**Needs**:
|
||||
|
||||
* Security/ownership of their own stream.
|
||||
* Building an independent space.
|
||||
* Personalization.
|
||||
* Tools to manage a relationship with their audience.
|
||||
|
||||
**Pains**:
|
||||
|
||||
* Kicked off other streaming services.
|
||||
* Feeling of inequality or bias.
|
||||
* Their content has low visibility.
|
||||
* Platform rules do not align with them.
|
||||
* Do not agree with the forced ads, tracking and analytics.
|
||||
|
||||
### The Integrator
|
||||
|
||||
An individual or organization that has existing content, products or platforms that they want to add live streaming functionality to.
|
||||
|
||||
**Needs**:
|
||||
|
||||
* Broadcasting without censorship.
|
||||
* Full ownership of their brand.
|
||||
* Embedding and 3rd party playback.
|
||||
* Support private or invite-only streams.
|
||||
* Independence.
|
||||
|
||||
**Pains**:
|
||||
|
||||
* Censorship.
|
||||
* Rules.
|
||||
* Ads.
|
||||
* Risk of losing viewers from competitors and distractions.
|
||||
|
||||
**Desires**:
|
||||
|
||||
* Hosting events.
|
||||
* Running their own broadcasting service.
|
||||
|
||||
## Secondary Users
|
||||
|
||||
### The Viewer
|
||||
|
||||
An audience member that is often, but not always, taking part in chat.
|
||||
|
||||
**Needs**:
|
||||
|
||||
* To watch high quality video.
|
||||
* Ways to interact with the streamer. Chat, memes, emoji.
|
||||
* Calls to actions, links, next steps.
|
||||
|
||||
**Pains**:
|
||||
|
||||
* Understanding the interface and knowing they're in the correct place.
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="owncast/Documentation/Product Definition" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||
|
||||
# Owncast Product Definition
|
||||
|
||||
## Why
|
||||
|
||||
By defining the goals and target user bases we have something stable to guide decisions, features, conversations and keep clarity around what is being built.
|
||||
|
||||
While these definitions and lists should not be seen as exhaustive, in theory, once this is seen as "complete" there should be few, if any changes, as that would note a large change in direction and goals.
|
||||
|
||||
[TOC]
|
||||
|
||||
## Vision
|
||||
|
||||
> The out-of-the-box personal broadcast platform for DIY streamers and integrators.
|
||||
|
||||
## Primary Goals
|
||||
|
||||
- Useful out of the box.
|
||||
- Fast to get running.
|
||||
- Self-contained.
|
||||
- An alternative, not a competitor.
|
||||
- For individuals, not service providers.
|
||||
- Easy to integrate into other projects/products.
|
||||
- Low barrier to entry.
|
||||
- Empowering.
|
||||
- Customizable and hackable.
|
||||
|
||||
## Primary Users
|
||||
|
||||
### The DIY Streamer
|
||||
|
||||
An individual who is streaming as a hobby, a project, or is moving their audience from an existing streaming platform.
|
||||
|
||||
**Needs**:
|
||||
|
||||
- Security/ownership of their own stream.
|
||||
- Building an independent space.
|
||||
- Personalization.
|
||||
- Tools to manage a relationship with their audience.
|
||||
|
||||
**Pains**:
|
||||
|
||||
- Kicked off other streaming services.
|
||||
- Feeling of inequality or bias.
|
||||
- Their content has low visibility.
|
||||
- Platform rules do not align with them.
|
||||
- Do not agree with the forced ads, tracking and analytics.
|
||||
|
||||
### The Integrator
|
||||
|
||||
An individual or organization that has existing content, products or platforms that they want to add live streaming functionality to.
|
||||
|
||||
**Needs**:
|
||||
|
||||
- Broadcasting without censorship.
|
||||
- Full ownership of their brand.
|
||||
- Embedding and 3rd party playback.
|
||||
- Support private or invite-only streams.
|
||||
- Independence.
|
||||
|
||||
**Pains**:
|
||||
|
||||
- Censorship.
|
||||
- Rules.
|
||||
- Ads.
|
||||
- Risk of losing viewers from competitors and distractions.
|
||||
|
||||
**Desires**:
|
||||
|
||||
- Hosting events.
|
||||
- Running their own broadcasting service.
|
||||
|
||||
## Secondary Users
|
||||
|
||||
### The Viewer
|
||||
|
||||
An audience member that is often, but not always, taking part in chat.
|
||||
|
||||
**Needs**:
|
||||
|
||||
- To watch high quality video.
|
||||
- Ways to interact with the streamer. Chat, memes, emoji.
|
||||
- Calls to actions, links, next steps.
|
||||
|
||||
**Pains**:
|
||||
|
||||
- Understanding the interface and knowing they're in the correct place.
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Social Platform Images
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="bandcamp.svg">
|
||||
<img src="img/platformlogos/bandcamp.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="default.svg">
|
||||
<img src="img/platformlogos/default.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="discord.svg">
|
||||
<img src="img/platformlogos/discord.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="donate.svg">
|
||||
<img src="img/platformlogos/donate.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="facebook.svg">
|
||||
<img src="img/platformlogos/facebook.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="fediverse.svg">
|
||||
<img src="img/platformlogos/fediverse.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="follow.svg">
|
||||
<img src="img/platformlogos/follow.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="github.svg">
|
||||
<img src="img/platformlogos/github.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="gitlab.svg">
|
||||
<img src="img/platformlogos/gitlab.svg" />
|
||||
</IconItem>
|
||||
|
||||
<IconItem name="google.svg">
|
||||
<img src="img/platformlogos/google.svg" />
|
||||
</IconItem>
|
||||
|
||||
<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>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
import { Canvas, Meta, Story, IconItem, IconGallery } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="owncast/Frontend Assets/Social Platform Images" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Social Platform Images
|
||||
|
||||
<IconGallery>
|
||||
<IconItem name="bandcamp.svg">
|
||||
<img src="img/platformlogos/bandcamp.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="default.svg">
|
||||
<img src="img/platformlogos/default.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="discord.svg">
|
||||
<img src="img/platformlogos/discord.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="donate.svg">
|
||||
<img src="img/platformlogos/donate.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="facebook.svg">
|
||||
<img src="img/platformlogos/facebook.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="fediverse.svg">
|
||||
<img src="img/platformlogos/fediverse.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="follow.svg">
|
||||
<img src="img/platformlogos/follow.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="github.svg">
|
||||
<img src="img/platformlogos/github.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="gitlab.svg">
|
||||
<img src="img/platformlogos/gitlab.svg" />
|
||||
</IconItem>
|
||||
<IconItem name="google.svg">
|
||||
<img src="img/platformlogos/google.svg" />
|
||||
</IconItem>
|
||||
<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>
|
||||
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import { Image, ImageRow } from './ImageAsset';
|
||||
|
||||
<Meta title="owncast/Project Assets/T-Shirt" parameters={{chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# T-shirt
|
||||
|
||||
<ImageRow images={[
|
||||
<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"},
|
||||
|
|
@ -19,5 +20,5 @@ import { Image, ImageRow } from './ImageAsset';
|
|||
{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"},
|
||||
]}/>
|
||||
|
||||
]}
|
||||
/>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, Typeset, Source } from '@storybook/blocks';
|
||||
|
||||
<Meta
|
||||
title="owncast/Styles/Typography"
|
||||
|
|
@ -14,7 +14,7 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
|
|||
|
||||
These are the font families in use by Owncast.
|
||||
|
||||
---
|
||||
***
|
||||
|
||||
export const bodyFont = {
|
||||
type: {
|
||||
|
|
@ -63,12 +63,7 @@ export const bodyFont = {
|
|||
|
||||
## Usage
|
||||
|
||||
<Canvas
|
||||
columns={2}
|
||||
withSource="open"
|
||||
withToolbar
|
||||
style={{ fontFamily: 'var(--theme-text-body-font-family)' }}
|
||||
>
|
||||
<Canvas columns={2} withSource="open" withToolbar style={{ fontFamily: 'var(--theme-text-body-font-family)' }}>
|
||||
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-body-font-family')}
|
||||
</Canvas>
|
||||
|
||||
|
|
@ -128,11 +123,7 @@ export const displayFont = {
|
|||
|
||||
## Usage
|
||||
|
||||
<Canvas
|
||||
columns={2}
|
||||
withSource="open"
|
||||
withToolbarstyle={{ fontFamily: 'var(--theme-text-display-font-family)' }}
|
||||
>
|
||||
<Canvas columns={2} withSource="open" withToolbarstyle={{ fontFamily: 'var(--theme-text-display-font-family)' }}>
|
||||
{getComputedStyle(document.documentElement).getPropertyValue('--theme-text-display-font-family')}
|
||||
</Canvas>
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}}/>
|
||||
<Meta title="owncast/Documentation/Building Frontend Components" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# How we develop components
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ export const MyNewButton: FC<MyNewButtonProps> = ({ label, onClick }) => {
|
|||
### Rationale
|
||||
|
||||
Since there's a lot of ways to create components, settling on one pattern helps maintain readability.
|
||||
But why _this_ style?
|
||||
But why *this* style?
|
||||
|
||||
See the discussion on the PR that introduced this pattern: [#2082](https://github.com/owncast/owncast/pull/2082).
|
||||
|
||||
|
|
@ -101,4 +101,3 @@ We use [Storybook](https://storybook.js.org/) to create a component library wher
|
|||
Make sure to include a `.stories.tsx` file with each (exported) component you create, and to update the stories file when making changes to existing components.
|
||||
|
||||
You can run the Storybook server locally with `npm run storybook`.
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
|
||||
import { ColorRow, getColor } from './Color';
|
||||
|
||||
<Meta
|
||||
|
|
@ -22,6 +22,7 @@ These are the specific colors used for components in the web application. They p
|
|||
...getColor('theme-color-components-text-on-dark'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="Primary Button"
|
||||
subtitle=""
|
||||
|
|
@ -46,15 +47,16 @@ These are the specific colors used for components in the web application. They p
|
|||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
<ColorItem
|
||||
title="Chat"
|
||||
subtitle=""
|
||||
colors={{
|
||||
...getColor('theme-color-components-chat-background'),
|
||||
...getColor('theme-color-components-chat-text'),
|
||||
}}
|
||||
/>
|
||||
<ColorItem
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="Modals"
|
||||
subtitle=""
|
||||
colors={{
|
||||
|
|
@ -63,15 +65,17 @@ These are the specific colors used for components in the web application. They p
|
|||
...getColor('theme-color-components-modal-content-background'),
|
||||
...getColor('theme-color-components-modal-content-text'),
|
||||
}}
|
||||
/>
|
||||
<ColorItem
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="Page Content"
|
||||
subtitle="Tabbed content"
|
||||
colors={{
|
||||
...getColor('theme-color-components-content-background'),
|
||||
}}
|
||||
/>
|
||||
<ColorItem
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="Menus"
|
||||
subtitle=""
|
||||
colors={{
|
||||
|
|
@ -82,8 +86,9 @@ These are the specific colors used for components in the web application. They p
|
|||
...getColor('theme-color-components-menu-item-hover-bg'),
|
||||
...getColor('theme-color-components-menu-item-focus-bg'),
|
||||
}}
|
||||
/>
|
||||
<ColorItem
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="Form Fields"
|
||||
subtitle=""
|
||||
colors={{
|
||||
|
|
@ -93,14 +98,14 @@ These are the specific colors used for components in the web application. They p
|
|||
...getColor('theme-color-components-menu-item-text'),
|
||||
...getColor('theme-color-components-form-field-border'),
|
||||
}}
|
||||
/>
|
||||
<ColorItem
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="Video Player Status Bar"
|
||||
subtitle="Displays duration and viewer count."
|
||||
colors={{
|
||||
...getColor('theme-color-components-video-status-bar-background'),
|
||||
...getColor('theme-color-components-video-status-bar-foreground'),
|
||||
}}
|
||||
/>
|
||||
|
||||
/>
|
||||
</ColorPalette>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem, Description } from '@storybook/blocks';
|
||||
import { ColorRow, getColor } from './Color';
|
||||
|
||||
<Meta
|
||||
|
|
@ -8,6 +8,7 @@ import { ColorRow, getColor } from './Color';
|
|||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
## Theme Color Palette
|
||||
|
||||
These are the colors used across the web application. All the specific component colors point to colors in this palette. If you override one of these colors all usage of that color will be updated.
|
||||
|
|
@ -25,6 +26,7 @@ These are the colors used across the web application. All the specific component
|
|||
...getColor('theme-color-palette-5'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
colors={{
|
||||
...getColor('theme-color-palette-6'),
|
||||
|
|
@ -34,8 +36,7 @@ These are the colors used across the web application. All the specific component
|
|||
...getColor('theme-color-palette-10'),
|
||||
...getColor('theme-color-palette-11'),
|
||||
}}
|
||||
|
||||
/>
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
colors={{
|
||||
|
|
@ -47,6 +48,7 @@ These are the colors used across the web application. All the specific component
|
|||
...getColor('theme-color-palette-warning'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
colors={{
|
||||
...getColor('theme-color-background-light'),
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story, ColorPalette, ColorItem } from '@storybook/blocks';
|
||||
import { ColorRow, getColor } from './Color';
|
||||
|
||||
<Meta
|
||||
|
|
@ -8,48 +8,56 @@ import { ColorRow, getColor } from './Color';
|
|||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
## User Colors
|
||||
|
||||
These are the colors available for assigning to chat users for display purposes. The CSS variables can be overwritten for customizing the theme.
|
||||
|
||||
<ColorPalette>
|
||||
<ColorItem title="User Color 0" colors={{ ...getColor('theme-color-users-0') }} />
|
||||
|
||||
<ColorItem
|
||||
title="User Color 1"
|
||||
colors={{
|
||||
...getColor('theme-color-users-1'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="User Color 2"
|
||||
colors={{
|
||||
...getColor('theme-color-users-2'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="User Color 3"
|
||||
colors={{
|
||||
...getColor('theme-color-users-3'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="User Color 4"
|
||||
colors={{
|
||||
...getColor('theme-color-users-4'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="User Color 5"
|
||||
colors={{
|
||||
...getColor('theme-color-users-5'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="User Color 6"
|
||||
colors={{
|
||||
...getColor('theme-color-users-6'),
|
||||
}}
|
||||
/>
|
||||
|
||||
<ColorItem
|
||||
title="User Color 7"
|
||||
colors={{
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsAndroidStockBrowserLandscapeStories from './Screenshots-android-stock-browser-landscape.stories';
|
||||
|
||||
<Meta of={ScreenshotsAndroidStockBrowserLandscapeStories} />
|
||||
|
||||
<Story of={ScreenshotsAndroidStockBrowserLandscapeStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsAndroidStockBrowserLandscapeStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/Android Landscape/Stock Browser',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-offline.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-online.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/Android Landscape/Stock Browser"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-offline.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/android-10.0-android-browser-samsung-galaxy-s20-ultra-landscape-online.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsAndroidStockBrowserPortraitStories from './Screenshots-android-stock-browser-portrait.stories';
|
||||
|
||||
<Meta of={ScreenshotsAndroidStockBrowserPortraitStories} />
|
||||
|
||||
<Story of={ScreenshotsAndroidStockBrowserPortraitStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsAndroidStockBrowserPortraitStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/Android Portrait/Stock Browser',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/Android Portrait/Stock Browser"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png"
|
||||
alt="Android Browser offline"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsIPadLandscapeSafariStories from './Screenshots-iPad-landscape-safari.stories';
|
||||
|
||||
<Meta of={ScreenshotsIPadLandscapeSafariStories} />
|
||||
|
||||
<Story of={ScreenshotsIPadLandscapeSafariStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsIPadLandscapeSafariStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/iPad Landscape/Safari',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
|
||||
alt="macOS Safari offline"
|
||||
width="800px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
|
||||
alt="macOS Safari online"
|
||||
width="800px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/iPad Landscape/Safari"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
|
||||
alt="macOS Safari offline"
|
||||
width="800px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
|
||||
alt="macOS Safari online"
|
||||
width="800px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsIPadPortraitSafariStories from './Screenshots-iPad-portrait-safari.stories';
|
||||
|
||||
<Meta of={ScreenshotsIPadPortraitSafariStories} />
|
||||
|
||||
<Story of={ScreenshotsIPadPortraitSafariStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsIPadPortraitSafariStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/iPad Portrait/Safari',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png"
|
||||
alt="macOS Safari offline"
|
||||
width="800px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png"
|
||||
alt="macOS Safari online"
|
||||
width="800px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/iPad Portrait/Safari"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png"
|
||||
alt="macOS Safari offline"
|
||||
width="800px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png"
|
||||
alt="macOS Safari online"
|
||||
width="800px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsIPhoneSafariLandscapeStories from './Screenshots-iPhone-safari-landscape.stories';
|
||||
|
||||
<Meta of={ScreenshotsIPhoneSafariLandscapeStories} />
|
||||
|
||||
<Story of={ScreenshotsIPhoneSafariLandscapeStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsIPhoneSafariLandscapeStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/iPhone/Safari/Landscape',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
|
||||
alt="iPhone Safari offline"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
|
||||
alt="iPhone Safari online"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/iPhone/Safari/Landscape"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
|
||||
alt="iPhone Safari offline"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
|
||||
alt="iPhone Safari online"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsIPhoneSafariPortraitStories from './Screenshots-iPhone-safari-portrait.stories';
|
||||
|
||||
<Meta of={ScreenshotsIPhoneSafariPortraitStories} />
|
||||
|
||||
<Story of={ScreenshotsIPhoneSafariPortraitStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsIPhoneSafariPortraitStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/iPhone/Safari/Portrait',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
|
||||
alt="iPhone Safari offline"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
|
||||
alt="iPhone Safari online"
|
||||
height="1000px"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/iPhone/Safari/Portrait"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
|
||||
alt="iPhone Safari offline"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
|
||||
alt="iPhone Safari online"
|
||||
height="1000px"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsMacOsChromeStories from './Screenshots-macOS-chrome.stories';
|
||||
|
||||
<Meta of={ScreenshotsMacOsChromeStories} />
|
||||
|
||||
<Story of={ScreenshotsMacOsChromeStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsMacOsChromeStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/macOS/Chrome',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/os-x-ventura-chrome-desktop-default-offline.png"
|
||||
alt="macOS Chrome offline"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/os-x-ventura-chrome-desktop-default-online.png"
|
||||
alt="macOS Chrome online"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/macOS/Chrome"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/os-x-ventura-chrome-desktop-default-offline.png"
|
||||
alt="macOS Chrome offline"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/os-x-ventura-chrome-desktop-default-online.png"
|
||||
alt="macOS Chrome online"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsMacOsFirefoxStories from './Screenshots-macOS-firefox.stories';
|
||||
|
||||
<Meta of={ScreenshotsMacOsFirefoxStories} />
|
||||
|
||||
<Story of={ScreenshotsMacOsFirefoxStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsMacOsFirefoxStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/macOS/Firefox',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/os-x-ventura-firefox-desktop-default-offline.png"
|
||||
alt="macOS Chrome offline"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/os-x-ventura-firefox-desktop-default-online.png"
|
||||
alt="macOS Chrome online"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/macOS/Firefox"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/os-x-ventura-firefox-desktop-default-offline.png"
|
||||
alt="macOS Chrome offline"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/os-x-ventura-firefox-desktop-default-online.png"
|
||||
alt="macOS Chrome online"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsMacOsSafariStories from './Screenshots-macOS-safari.stories';
|
||||
|
||||
<Meta of={ScreenshotsMacOsSafariStories} />
|
||||
|
||||
<Story of={ScreenshotsMacOsSafariStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsMacOsSafariStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/macOS/Safari',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/os-x-ventura-safari-desktop-default-offline.png"
|
||||
alt="macOS Safari offline"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/os-x-ventura-safari-desktop-default-online.png"
|
||||
alt="macOS Safari online"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/macOS/Safari"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/os-x-ventura-safari-desktop-default-offline.png"
|
||||
alt="macOS Safari offline"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/os-x-ventura-safari-desktop-default-online.png"
|
||||
alt="macOS Safari online"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsWindowsChromeStories from './Screenshots-windows-chrome.stories';
|
||||
|
||||
<Meta of={ScreenshotsWindowsChromeStories} />
|
||||
|
||||
<Story of={ScreenshotsWindowsChromeStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsWindowsChromeStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/Windows/Chrome',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/windows-11-chrome-desktop-default-offline.png"
|
||||
alt="Windows Chrome offline"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/windows-11-chrome-desktop-default-online.png"
|
||||
alt="Windows Chrome online"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/Windows/Chrome"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/windows-11-chrome-desktop-default-offline.png"
|
||||
alt="Windows Chrome offline"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/windows-11-chrome-desktop-default-online.png"
|
||||
alt="Windows Chrome online"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
import * as ScreenshotsWindowsFirefoxStories from './Screenshots-windows-firefox.stories';
|
||||
|
||||
<Meta of={ScreenshotsWindowsFirefoxStories} />
|
||||
|
||||
<Story of={ScreenshotsWindowsFirefoxStories.Offline} />
|
||||
|
||||
<Story of={ScreenshotsWindowsFirefoxStories.Online} />
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export default {
|
||||
title: 'owncast/Screenshots/Windows/Firefox',
|
||||
|
||||
parameters: {
|
||||
chromatic: {
|
||||
disableSnapshot: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Offline = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/windows-10-firefox-desktop-default-offline.png"
|
||||
alt="Windows Firefox offline"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Offline',
|
||||
};
|
||||
|
||||
export const Online = {
|
||||
render: () => (
|
||||
<img
|
||||
src="screenshots/windows-10-firefox-desktop-default-online.png"
|
||||
alt="Windows Firefox online"
|
||||
width="100%"
|
||||
/>
|
||||
),
|
||||
|
||||
name: 'Online',
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta
|
||||
title="owncast/Screenshots/Windows/Firefox"
|
||||
parameters={{ chromatic: { disableSnapshot: true } }}
|
||||
/>
|
||||
|
||||
<Story name="Offline">
|
||||
|
||||
<img
|
||||
src="screenshots/windows-10-firefox-desktop-default-offline.png"
|
||||
alt="Windows Firefox offline"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
|
||||
<Story name="Online">
|
||||
|
||||
<img
|
||||
src="screenshots/windows-10-firefox-desktop-default-online.png"
|
||||
alt="Windows Firefox online"
|
||||
width="100%"
|
||||
/>
|
||||
|
||||
</Story>
|
||||
21
web/doctor-storybook.log
Normal file
21
web/doctor-storybook.log
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
🩺 The doctor is checking the health of your Storybook..
|
||||
╭ Incompatible packages found ───────────────────────────────────────────────────╮
|
||||
│ │
|
||||
│ The following packages are incompatible with Storybook 8.0.8 as they │
|
||||
│ depend on different major versions of Storybook packages: │
|
||||
│ - @storybook/addon-postcss@2.0.0 │
|
||||
│ - @storybook/addon-styling-webpack@0.0.6 │
|
||||
│ │
|
||||
│ │
|
||||
│ Please consider updating your packages or contacting the maintainers for │
|
||||
│ compatibility details. │
|
||||
│ For more on Storybook 8 compatibility, see the linked GitHub issue: │
|
||||
│ https://github.com/storybookjs/storybook/issues/26031 │
|
||||
│ │
|
||||
╰────────────────────────────────────────────────────────────────────────────────╯
|
||||
|
||||
You can always recheck the health of your project by running:
|
||||
npx storybook doctor
|
||||
|
||||
Full logs are available in /home/gabek/src/webv2-merge/owncast/web/doctor-storybook.log
|
||||
|
||||
6003
web/package-lock.json
generated
6003
web/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -26,8 +26,8 @@
|
|||
"@fontsource/inter": "^5.0.0",
|
||||
"@fontsource/poppins": "5.1.0",
|
||||
"@next/bundle-analyzer": "^14.0.0",
|
||||
"@uiw/codemirror-theme-bbedit": "4.23.5",
|
||||
"@uiw/react-codemirror": "4.23.5",
|
||||
"@uiw/codemirror-theme-bbedit": "4.23.4",
|
||||
"@uiw/react-codemirror": "4.23.4",
|
||||
"@xstate/react": "3.2.2",
|
||||
"antd": "4.24.16",
|
||||
"autoprefixer": "^10.4.14",
|
||||
|
|
|
|||
Loading…
Reference in a new issue