created help page, added help page to nav

web/pages/components/main-layout.tsx

@@ -13,6 +13,7 @@ import {
   ToolOutlined,
   PlayCircleFilled,
   MinusSquareFilled,
+  QuestionCircleOutlined
 } from '@ant-design/icons';
 import classNames from 'classnames';
 import { upgradeVersionAvailable } from "../../utils/apis";
@@ -140,6 +141,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>
 

web/pages/help.tsx

@@ -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>
+    )
+}