low hanging cleanup for extrauser content

webroot/index.html

@@ -101,7 +101,7 @@ GW TODO:
           v-bind:tags="tags"
         >{{streamerName}}</user-details>
 
-        <div v-html="extraUserContent">{{extraUserContent}}</div>
+        <div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
 
       </section>
 
@@ -120,7 +120,7 @@ GW TODO:
           v-bind:tags="tags"
         >{{streamerName}}</user-details>
 
-        <div v-html="extraUserContent">{{extraUserContent}}</div>
+        <div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
 
         <owncast-footer v-bind:app-version="appVersion"></owncast-footer>       
         

webroot/js/app.js

@@ -50,17 +50,7 @@ async function setupApp() {
   app.title = config.title;
   window.document.title = config.title;
 
-
-  try {
-    const pageContentFile = config.extraUserInfoFileName;
-    const response = await fetch(pageContentFile);
-    const descriptionMarkdown = await response.text()
-    const descriptionHTML = new showdown.Converter().makeHtml(descriptionMarkdown);
-    app.extraUserContent = descriptionHTML;
-    return this;
-  } catch (error) {
-    console.log("Error", error);
-  }
+  getExtraUserContent(`${URL_PREFIX}${config.extraUserInfoFileName}`);
 }
 
 var websocketReconnectTimer;

webroot/js/components.js

@@ -9,7 +9,7 @@ Vue.component('owncast-footer', {
   template: `
     <footer class="flex">
       <span>
-        <a href="https://github.com/gabek/owncast" target="_blank">About Owncast</a>
+        <a href="${URL_OWNCAST}" target="_blank">About Owncast</a>
       </span>
       <span>Version {{appVersion}}</span>
     </footer>

webroot/js/utils.js

@@ -6,8 +6,9 @@ const URL_PREFIX = 'https://goth.land';
 const URL_STATUS = `${URL_PREFIX}/status`;
 const URL_STREAM = `${URL_PREFIX}/hls/stream.m3u8`;
 
-const URL_WEBSOCKET = 'wss://goth.land/entry';
-// const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
+const URL_WEBSOCKET = URL_PREFIX 
+  ? 'wss://goth.land/entry'
+  : `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
 
 const POSTER_DEFAULT = `${URL_PREFIX}/img/logo.png`;
 const POSTER_THUMB = `${URL_PREFIX}/thumbnail.jpg`;
@@ -23,6 +24,8 @@ const KEY_CHAT_DISPLAYED = 'owncast_chat';
 
 const VIDEO_ID = 'video';
 
+const URL_OWNCAST = 'https://github.com/gabek/owncast';
+
 
 function getLocalStorage(key) {
   try {
@@ -120,3 +123,20 @@ function setVideoPoster(online) {
   const poster = online ? POSTER_THUMB : POSTER_DEFAULT;
   player.poster(poster);
 }
+
+function getExtraUserContent(path) {
+  fetch(path)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Network response was not ok ${response.ok}`);
+      }
+      return response.text();
+    })
+    .then(text => {
+      const descriptionHTML = new showdown.Converter().makeHtml(text);
+      app.extraUserContent = descriptionHTML;
+    })
+    .catch(error => {
+      console.log("Error", error);
+    });
+}

webroot/styles/layout.css

@@ -155,8 +155,8 @@ footer span {
   margin: 1em 0;
 }
 .extra-user-content {
-  margin: 1em 0;
-}
+  padding: 1em 3em 3em 3em;
+  }
 
 h2 {
   font-size: 3em;