Add ability to populate the content area in the page with a markdown file

webroot/index.html

@@ -11,7 +11,7 @@
   <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet">
   <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
   <script src="//vjs.zencdn.net/7.8.2/video.js"></script>
-
+  <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
   <script src="vendor/autolink.js"></script>
   <link href="./styles/layout.css" rel="stylesheet" />
 </head>

webroot/js/app.js

@@ -25,8 +25,20 @@ async function setupApp() {
   appMessagingMisc.init();
 
   const config = await new Config().init();
-  app.description = autoLink(config.description, { embed: false });
   app.title = config.title;
+
+  const configFileLocation = "./js/config.json";
+
+  try {
+    const pageContentFile = "/static/content.md"
+    const response = await fetch(pageContentFile);
+    const descriptionMarkdown = await response.text()
+    const descriptionHTML = new showdown.Converter().makeHtml(descriptionMarkdown);
+    app.description = descriptionHTML;
+    return this;
+  } catch (error) {
+    console.log(error);
+  }
 }
 
 var websocketReconnectTimer;

webroot/static/content.md

@@ -0,0 +1,4 @@
+# Stream description and content can go here.
+
+1. Edit `content.md` in markdown.
+1. And it'll go here.

webroot/styles/layout.css

@@ -407,3 +407,12 @@ header h1 {
     display: none;
   }
 }
+
+/* Tailwind sets list styles to none.  I don't know why. */
+ol {
+  list-style: decimal;
+}
+
+ul {
+  list-style: unset;
+}