From ac641ee7d6fa90e9504196285b644935a7a8b406 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 3 Nov 2020 17:09:11 -0800
Subject: [PATCH] Start some home screen instructions

---
 web/pages/index.tsx | 54 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 43693a123..1b7077f0e 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -8,7 +8,7 @@ TODO: Link each overview value to the sub-page that focuses on it.
 */
 
 import React, { useState, useEffect, useContext } from "react";
-import { Row, Skeleton, Empty, Typography } from "antd";
+import { Row, Skeleton, Result, List, Typography, Card } from "antd";
 import { UserOutlined, ClockCircleOutlined } from "@ant-design/icons";
 import { formatDistanceToNow, formatRelative } from "date-fns";
 import { BroadcastStatusContext } from "../utils/broadcast-status-context";
@@ -28,16 +28,54 @@ import OwncastLogo from "./components/logo"
 const { Title } = Typography;
 
 function Offline() {
+  const data = [
+    {
+      title: "Send some test content",
+      content: (
+        <div>
+          With any video you have around you can pass it to the test script and start streaming it.
+          <blockquote>
+            <em>./test/ocTestStream.sh yourVideo.mp4</em>
+          </blockquote>
+        </div>
+      ),
+    },
+    {
+      title: "Use your broadcasting software",
+      content: (
+        <div>
+          <a href="https://owncast.online/docs/broadcasting/">Learn how to point your existing software to your new server and start streaming your content.</a>
+        </div>
+      )
+    },
+    {
+      title: "Something else",
+    },
+  ];
   return (
     <div>
-      <Empty
-        image={<OwncastLogo />}
-        imageStyle={{
-          height: 60,
+      <Result
+        icon={<OwncastLogo />}
+        title="No stream is active."
+        subTitle="You should start one."
+      />
+
+      <List
+        grid={{
+          gutter: 16,
+          xs: 1,
+          sm: 2,
+          md: 4,
+          lg: 4,
+          xl: 6,
+          xxl: 3,
         }}
-        description={
-          <span>There is no stream currently active. Start one.</span>
-        }
+        dataSource={data}
+        renderItem={(item) => (
+          <List.Item>
+            <Card title={item.title}>{item.content}</Card>
+          </List.Item>
+        )}
       />
     </div>
   );