24 changed files with 733 additions and 643 deletions
@ -1,4 +1,9 @@ |
|||||||
{ |
{ |
||||||
|
"useTabs": false, |
||||||
|
"printWidth": 100, |
||||||
"tabWidth": 2, |
"tabWidth": 2, |
||||||
"useTabs": false |
"singleQuote": true, |
||||||
|
"trailingComma": "all", |
||||||
|
"jsxBracketSameLine": false, |
||||||
|
"arrowParens": "avoid" |
||||||
} |
} |
||||||
|
|||||||
@ -1,167 +1,210 @@ |
|||||||
import { Button, Card, Col, Divider, Result, Row } from 'antd' |
import { Button, Card, Col, Divider, Result, Row } from 'antd'; |
||||||
import Meta from 'antd/lib/card/Meta' |
import Meta from 'antd/lib/card/Meta'; |
||||||
import Title from 'antd/lib/typography/Title' |
import Title from 'antd/lib/typography/Title'; |
||||||
import { |
import { |
||||||
AlertOutlined, |
AlertOutlined, |
||||||
ApiTwoTone, |
ApiTwoTone, |
||||||
BookOutlined, |
BookOutlined, |
||||||
BugTwoTone, |
BugTwoTone, |
||||||
CameraTwoTone, |
CameraTwoTone, |
||||||
DatabaseTwoTone, |
DatabaseTwoTone, |
||||||
EditTwoTone, |
EditTwoTone, |
||||||
Html5TwoTone, |
Html5TwoTone, |
||||||
LinkOutlined, |
LinkOutlined, |
||||||
QuestionCircleTwoTone, |
QuestionCircleTwoTone, |
||||||
SettingTwoTone, |
SettingTwoTone, |
||||||
SlidersTwoTone, |
SlidersTwoTone, |
||||||
} from '@ant-design/icons' |
} from '@ant-design/icons'; |
||||||
import React from 'react' |
import React from 'react'; |
||||||
|
|
||||||
interface Props { } |
interface Props {} |
||||||
|
|
||||||
export default function Help(props: Props) { |
export default function Help(props: Props) { |
||||||
const questions = [ |
const questions = [ |
||||||
{ |
{ |
||||||
icon: <SettingTwoTone style={{ fontSize: '24px' }} />, |
icon: <SettingTwoTone style={{ fontSize: '24px' }} />, |
||||||
title: "I want to configure my owncast instance", |
title: 'I want to configure my owncast instance', |
||||||
content: ( |
content: ( |
||||||
<div> |
<div> |
||||||
<a href="https://owncast.online/docs/configuration/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a> |
<a |
||||||
</div> |
href="https://owncast.online/docs/configuration/" |
||||||
) |
target="_blank" |
||||||
}, |
rel="noopener noreferrer" |
||||||
{ |
> |
||||||
icon: <CameraTwoTone style={{ fontSize: '24px' }} />, |
<LinkOutlined /> Learn more |
||||||
title: "I need help configuring my broadcasting software", |
</a> |
||||||
content: ( |
</div> |
||||||
<div> |
), |
||||||
<a href="https://owncast.online/docs/broadcasting/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a> |
}, |
||||||
</div> |
{ |
||||||
) |
icon: <CameraTwoTone style={{ fontSize: '24px' }} />, |
||||||
}, |
title: 'I need help configuring my broadcasting software', |
||||||
{ |
content: ( |
||||||
icon: <Html5TwoTone style={{ fontSize: '24px' }} />, |
<div> |
||||||
title: "I want to embed my stream into another site", |
<a |
||||||
content: ( |
href="https://owncast.online/docs/broadcasting/" |
||||||
<div> |
target="_blank" |
||||||
<a href="https://owncast.online/docs/embed/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a> |
rel="noopener noreferrer" |
||||||
</div> |
> |
||||||
) |
<LinkOutlined /> Learn more |
||||||
}, |
</a> |
||||||
{ |
</div> |
||||||
icon: <EditTwoTone style={{ fontSize: '24px' }} />, |
), |
||||||
title: "I want to customize my website", |
}, |
||||||
content: ( |
{ |
||||||
<div> |
icon: <Html5TwoTone style={{ fontSize: '24px' }} />, |
||||||
<a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a> |
title: 'I want to embed my stream into another site', |
||||||
</div> |
content: ( |
||||||
) |
<div> |
||||||
}, |
<a href="https://owncast.online/docs/embed/" target="_blank" rel="noopener noreferrer"> |
||||||
{ |
<LinkOutlined /> Learn more |
||||||
icon: <SlidersTwoTone style={{ fontSize: '24px' }} />, |
</a> |
||||||
title: "I want to tweak my encoding quality or performance", |
</div> |
||||||
content: ( |
), |
||||||
<div> |
}, |
||||||
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a> |
{ |
||||||
</div> |
icon: <EditTwoTone style={{ fontSize: '24px' }} />, |
||||||
) |
title: 'I want to customize my website', |
||||||
}, |
content: ( |
||||||
{ |
<div> |
||||||
icon: <DatabaseTwoTone style={{ fontSize: '24px' }} />, |
<a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer"> |
||||||
title: "I want to offload my video to an external storage provider", |
<LinkOutlined /> Learn more |
||||||
content: ( |
</a> |
||||||
<div> |
</div> |
||||||
<a href="https://owncast.online/docs/s3/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a> |
), |
||||||
</div> |
}, |
||||||
) |
{ |
||||||
}, |
icon: <SlidersTwoTone style={{ fontSize: '24px' }} />, |
||||||
] |
title: 'I want to tweak my encoding quality or performance', |
||||||
|
content: ( |
||||||
const otherResources = [ |
<div> |
||||||
{ |
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"> |
||||||
icon: <BugTwoTone style={{ fontSize: '24px' }} />, |
<LinkOutlined /> Learn more |
||||||
title: "I found a bug", |
</a> |
||||||
content: ( |
</div> |
||||||
<div> |
), |
||||||
If you found a bug, then please |
}, |
||||||
<a href="https://github.com/owncast/owncast/issues/new/choose" target="_blank" rel="noopener noreferrer"> let us know</a> |
{ |
||||||
</div> |
icon: <DatabaseTwoTone style={{ fontSize: '24px' }} />, |
||||||
) |
title: 'I want to offload my video to an external storage provider', |
||||||
}, |
content: ( |
||||||
{ |
<div> |
||||||
icon: <QuestionCircleTwoTone style={{ fontSize: '24px' }} />, |
<a href="https://owncast.online/docs/s3/" target="_blank" rel="noopener noreferrer"> |
||||||
title: "I have a general question", |
<LinkOutlined /> Learn more |
||||||
content: ( |
</a> |
||||||
<div> |
</div> |
||||||
Most general questions are answered in our |
), |
||||||
<a href="https://owncast.online/docs/faq/" target="_blank" rel="noopener noreferrer"> FAQ</a> or exist in our <a href="https://github.com/owncast/owncast/discussions">discussions</a> |
}, |
||||||
</div> |
]; |
||||||
) |
|
||||||
}, |
|
||||||
{ |
|
||||||
icon: <ApiTwoTone style={{ fontSize: '24px' }} />, |
|
||||||
title: "I want to use the API", |
|
||||||
content: ( |
|
||||||
<div> |
|
||||||
You can view the API documentation for either the |
|
||||||
<a href="https://owncast.online/api/latest" target="_blank" rel="noopener noreferrer"> latest </a> |
|
||||||
or |
|
||||||
<a href="https://owncast.online/api/development" target="_blank" rel="noopener noreferrer"> development </a> |
|
||||||
release. |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
return ( |
const otherResources = [ |
||||||
|
{ |
||||||
|
icon: <BugTwoTone style={{ fontSize: '24px' }} />, |
||||||
|
title: 'I found a bug', |
||||||
|
content: ( |
||||||
<div> |
<div> |
||||||
<Title style={{textAlign: 'center'}}>How can we help you?</Title> |
If you found a bug, then please |
||||||
<Row gutter={[16, 16]} justify="space-around" align="middle"> |
<a |
||||||
<Col xs={24} lg={12} style={{textAlign: 'center'}}> |
href="https://github.com/owncast/owncast/issues/new/choose" |
||||||
<Result status="500" /> |
target="_blank" |
||||||
<Title level={2}>Troubleshooting</Title> |
rel="noopener noreferrer" |
||||||
<Button target="_blank" rel="noopener noreferrer" href="https://owncast.online/docs/troubleshooting/" icon={<LinkOutlined/>} type="primary">Read Troubleshoting</Button> |
> |
||||||
</Col> |
{' '} |
||||||
<Col xs={24} lg={12} style={{textAlign: 'center'}}> |
let us know |
||||||
<Result status="404" /> |
</a> |
||||||
<Title level={2}>Documentation</Title> |
|
||||||
<Button target="_blank" rel="noopener noreferrer" href="https://owncast.online/" icon={<LinkOutlined/>} type="primary">Read the Docs</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Divider /> |
|
||||||
<Title level={2}>Common tasks</Title> |
|
||||||
<Row gutter={[16, 16]}> |
|
||||||
{ |
|
||||||
questions.map(question => ( |
|
||||||
<Col xs={24} lg={12}> |
|
||||||
<Card key={question.title}> |
|
||||||
<Meta |
|
||||||
avatar={question.icon} |
|
||||||
title={question.title} |
|
||||||
description={question.content} |
|
||||||
/> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
)) |
|
||||||
} |
|
||||||
</Row> |
|
||||||
<Divider /> |
|
||||||
<Title level={2}>Other</Title> |
|
||||||
<Row gutter={[16, 16]}> |
|
||||||
{ |
|
||||||
otherResources.map(question => ( |
|
||||||
<Col xs={24} lg={12}> |
|
||||||
<Card key={question.title}> |
|
||||||
<Meta |
|
||||||
avatar={question.icon} |
|
||||||
title={question.title} |
|
||||||
description={question.content} |
|
||||||
/> |
|
||||||
</Card> |
|
||||||
</Col> |
|
||||||
)) |
|
||||||
} |
|
||||||
</Row> |
|
||||||
</div> |
</div> |
||||||
) |
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: <QuestionCircleTwoTone style={{ fontSize: '24px' }} />, |
||||||
|
title: 'I have a general question', |
||||||
|
content: ( |
||||||
|
<div> |
||||||
|
Most general questions are answered in our |
||||||
|
<a href="https://owncast.online/docs/faq/" target="_blank" rel="noopener noreferrer"> |
||||||
|
{' '} |
||||||
|
FAQ |
||||||
|
</a>{' '} |
||||||
|
or exist in our <a href="https://github.com/owncast/owncast/discussions">discussions</a> |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: <ApiTwoTone style={{ fontSize: '24px' }} />, |
||||||
|
title: 'I want to use the API', |
||||||
|
content: ( |
||||||
|
<div> |
||||||
|
You can view the API documentation for either the |
||||||
|
<a href="https://owncast.online/api/latest" target="_blank" rel="noopener noreferrer"> |
||||||
|
latest |
||||||
|
</a> |
||||||
|
or |
||||||
|
<a |
||||||
|
href="https://owncast.online/api/development" |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
> |
||||||
|
development |
||||||
|
</a> |
||||||
|
release. |
||||||
|
</div> |
||||||
|
), |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Title style={{ textAlign: 'center' }}>How can we help you?</Title> |
||||||
|
<Row gutter={[16, 16]} justify="space-around" align="middle"> |
||||||
|
<Col xs={24} lg={12} style={{ textAlign: 'center' }}> |
||||||
|
<Result status="500" /> |
||||||
|
<Title level={2}>Troubleshooting</Title> |
||||||
|
<Button |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
href="https://owncast.online/docs/troubleshooting/" |
||||||
|
icon={<LinkOutlined />} |
||||||
|
type="primary" |
||||||
|
> |
||||||
|
Read Troubleshoting |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={24} lg={12} style={{ textAlign: 'center' }}> |
||||||
|
<Result status="404" /> |
||||||
|
<Title level={2}>Documentation</Title> |
||||||
|
<Button |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
href="https://owncast.online/" |
||||||
|
icon={<LinkOutlined />} |
||||||
|
type="primary" |
||||||
|
> |
||||||
|
Read the Docs |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Divider /> |
||||||
|
<Title level={2}>Common tasks</Title> |
||||||
|
<Row gutter={[16, 16]}> |
||||||
|
{questions.map(question => ( |
||||||
|
<Col xs={24} lg={12}> |
||||||
|
<Card key={question.title}> |
||||||
|
<Meta avatar={question.icon} title={question.title} description={question.content} /> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
))} |
||||||
|
</Row> |
||||||
|
<Divider /> |
||||||
|
<Title level={2}>Other</Title> |
||||||
|
<Row gutter={[16, 16]}> |
||||||
|
{otherResources.map(question => ( |
||||||
|
<Col xs={24} lg={12}> |
||||||
|
<Card key={question.title}> |
||||||
|
<Meta avatar={question.icon} title={question.title} description={question.content} /> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
))} |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue