Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

created help page, added help page to nav

Browse Source
This commit is contained in:
Thilo Billerbeck 2020-12-29 15:54:05 +01:00
parent 94395ed182
commit 2dfebd7915
2 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import {
ToolOutlined, ToolOutlined,
PlayCircleFilled, PlayCircleFilled,
MinusSquareFilled, MinusSquareFilled,
QuestionCircleOutlined
} 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";
@ -140,6 +141,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>

142
web/pages/help.tsx Normal file
View File

@ -0,0 +1,142 @@
import { Button, Card, Col, Divider, Row } from 'antd'
import Meta from 'antd/lib/card/Meta'
import Title from 'antd/lib/typography/Title'
import {
BugTwoTone,
CameraTwoTone,
DatabaseTwoTone,
DislikeTwoTone,
EditTwoTone,
FireFilled,
FireOutlined,
Html5TwoTone,
QuestionCircleFilled,
SettingTwoTone,
SlidersTwoTone,
VideoCameraTwoTone
} from '@ant-design/icons';
import React from 'react'
interface Props { }
export default function Help(props: Props) {
const questions = [
{
icon: <SettingTwoTone />,
title: "I want to configure my owncast instance",
content: (
<div>
<a href="https://owncast.online/docs/configuration/" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
)
},
{
icon: <CameraTwoTone />,
title: "I need help configuring my broadcasting software",
content: (
<div>
<a href="https://owncast.online/docs/broadcasting/" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
)
},
{
icon: <Html5TwoTone />,
title: "I want to embed my stream into another site",
content: (
<div>
<a href="https://owncast.online/docs/embed/" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
)
},
{
icon: <EditTwoTone />,
title: "I want to customize my website",
content: (
<div>
<a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
)
},
{
icon: <SlidersTwoTone />,
title: "I want to tweak my encoding",
content: (
<div>
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
)
},
{
icon: <DatabaseTwoTone />,
title: "I want to offload my video to an external storage provider",
content: (
<div>
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer">Learn more</a>
</div>
)
},
]
const otherResources = [
{
icon: <BugTwoTone />,
title: "I found a bug",
content: (
<div>
If you found a bug, then report it in our
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"> Github Issues</a>
</div>
)
}
]
return (
<div>
<Title>How can we help you?</Title>
<Row gutter={[16, 16]} justify="space-around" align="middle">
<Col span={12}>
<Title level={2}>Having issues with owncast?</Title>
<Button href="https://owncast.online/docs/troubleshooting/" icon={<FireFilled/>} type="primary">Try Troubleshooting</Button>
</Col>
<Col span={12}>
<Title level={2}>Having any questions about owncast?</Title>
<Button href="https://owncast.online/docs/faq/" icon={<QuestionCircleFilled/>} type="primary">Read our FAQ</Button>
</Col>
</Row>
<Divider />
<Title level={2}>Common tasks</Title>
<Row gutter={[16, 16]}>
{
questions.map(question => (
<Col span={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 span={12}>
<Card key={question.title}>
<Meta
avatar={question.icon}
title={question.title}
description={question.content}
/>
</Card>
</Col>
))
}
</Row>
</div>
)
}