Merge pull request #10 from thilobillerbeck/master
Add help section to admin (see owncast/owncast#541)
This commit is contained in:
Gabe Kangas
@@ -13,7 +13,8 @@ import {
|
|||||||
ToolOutlined,
|
ToolOutlined,
|
||||||
PlayCircleFilled,
|
PlayCircleFilled,
|
||||||
MinusSquareFilled,
|
MinusSquareFilled,
|
||||||
MessageOutlined,
|
QuestionCircleOutlined,
|
||||||
|
MessageOutlined
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { upgradeVersionAvailable } from "../../utils/apis";
|
import { upgradeVersionAvailable } from "../../utils/apis";
|
||||||
@@ -149,6 +150,13 @@ export default function MainLayout(props) {
|
|||||||
</Link>
|
</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
|
<Menu.Item
|
||||||
|
key="help"
|
||||||
|
icon={<QuestionCircleOutlined />}
|
||||||
|
title="Help"
|
||||||
|
>
|
||||||
|
<Link href="/help">Help</Link>
|
||||||
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
</Sider>
|
</Sider>
|
||||||
|
|
||||||
|
|||||||
167
web/pages/help.tsx
Normal file
167
web/pages/help.tsx
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
import { Button, Card, Col, Divider, Result, Row } from 'antd'
|
||||||
|
import Meta from 'antd/lib/card/Meta'
|
||||||
|
import Title from 'antd/lib/typography/Title'
|
||||||
|
import {
|
||||||
|
AlertOutlined,
|
||||||
|
ApiTwoTone,
|
||||||
|
BookOutlined,
|
||||||
|
BugTwoTone,
|
||||||
|
CameraTwoTone,
|
||||||
|
DatabaseTwoTone,
|
||||||
|
EditTwoTone,
|
||||||
|
Html5TwoTone,
|
||||||
|
LinkOutlined,
|
||||||
|
QuestionCircleTwoTone,
|
||||||
|
SettingTwoTone,
|
||||||
|
SlidersTwoTone,
|
||||||
|
} from '@ant-design/icons'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
interface Props { }
|
||||||
|
|
||||||
|
export default function Help(props: Props) {
|
||||||
|
const questions = [
|
||||||
|
{
|
||||||
|
icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I want to configure my owncast instance",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<a href="https://owncast.online/docs/configuration/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <CameraTwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I need help configuring my broadcasting software",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<a href="https://owncast.online/docs/broadcasting/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Html5TwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I want to embed my stream into another site",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<a href="https://owncast.online/docs/embed/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <EditTwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I want to customize my website",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <SlidersTwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I want to tweak my encoding",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DatabaseTwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I want to offload my video to an external storage provider",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
<a href="https://owncast.online/docs/s3/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const otherResources = [
|
||||||
|
{
|
||||||
|
icon: <BugTwoTone style={{ fontSize: '24px' }} />,
|
||||||
|
title: "I found a bug",
|
||||||
|
content: (
|
||||||
|
<div>
|
||||||
|
If you found a bug, then report it in our
|
||||||
|
<a href="https://github.com/owncast/owncast/" target="_blank" rel="noopener noreferrer"> Github Issues</a>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user