LogalDeveloper/owncast
0
Fork 0
Code Activity

Merge pull request #10 from thilobillerbeck/master

Browse Source 
Add help section to admin (see owncast/owncast#541)
This commit is contained in:
Gabe Kangas
2021-01-04 02:34:54 -08:00
committed by GitHub
parent f5f5939ce0 82bcff444a
commit 611b5dd9a2
2 changed files with 176 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/pages/components/main-layout.tsx
View File

@@ -13,7 +13,8 @@ import {
ToolOutlined,
PlayCircleFilled,
MinusSquareFilled,
MessageOutlined,
QuestionCircleOutlined,
MessageOutlined
} from '@ant-design/icons';
import classNames from 'classnames';
import { upgradeVersionAvailable } from "../../utils/apis";
@@ -149,6 +150,13 @@ export default function MainLayout(props) {
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item
key="help"
icon={<QuestionCircleOutlined />}
title="Help"
>
<Link href="/help">Help</Link>
</Menu.Item>
</Menu>
</Sider>

167
web/pages/help.tsx Normal file
View 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">&nbsp;latest&nbsp;</a>
or
<a href="https://owncast.online/api/development" target="_blank" rel="noopener noreferrer">&nbsp;development&nbsp;</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>
)
}