user content general layout

webroot/index.html

@@ -36,7 +36,7 @@ GW TODO:
       <header class="flex border-b border-gray-900 border-solid shadow-md">
         <h1 v-cloak class="flex text-gray-400">
           <span id="logo-container" class="rounded-full bg-white mx-2 px-1 py-1">
-            <img class="logo" src="./img/logo128.png">
+            <img class="logo" v-bind:src="logo">
           </span>
           <span>{{title}}</span>
         </h1>
@@ -90,14 +90,22 @@ GW TODO:
      </main>
 
       <section id="user-content" class="user-content">
-        <social-list v-bind:platforms="socialHandles"></social-list>
+        <div class="user-image rounded-full bg-white">
-        
+          <img class="logo" v-bind:src="logo">            
-
+        </div>
-        <!-- USER CONTENT... -->
+        <div class="">
-        <div v-html="description"></div>
+          <div class="user-content-header border-b border-gray-500 border-solid">
-
+            <h2 class="font-semibold">About <span class="streamer-name text-indigo-600">{{streamerName}}</span></h2>
-        <owncast-footer></owncast-footer>
+            <social-list v-bind:platforms="socialHandles"></social-list>
+            <div class="stream-summary" v-html="summary"></div>
+            <stream-tags v-bind:tags="tags"></stream-tags>
+          </div>
+          <!-- USER CONTENT... -->
+          <div class="extra-user-content" v-html="extraUserContent"></div>
+        </div>
       </section>
+      <owncast-footer></owncast-footer>
+
     </div>
 
 
@@ -106,7 +114,7 @@ GW TODO:
         <social-list v-bind:platforms="socialHandles"></social-list>
 
         <!-- USER CONTENT... -->
-        <div v-html="description"></div>
+        <div v-html="extraUserContent"></div>
 
         <owncast-footer></owncast-footer>
        

webroot/js/app.js

@@ -9,10 +9,16 @@ async function setupApp() {
       sessionMaxViewerCount: 0,
       overallMaxViewerCount: 0,
       messages: [],
-      description: "",
+      extraUserContent: "",
-      title: "",
       isOnline: false,
+      // from config
+      logo: null,
       socialHandles: [],
+      streamerName: "",
+      summary: "",
+      tags: [],
+      title: "",
+
     },
     watch: {
       messages: {
@@ -33,8 +39,12 @@ async function setupApp() {
   appMessaging.init();
 
   const config = await new Config().init();
-  app.title = config.title;
+  app.logo = config.logo;
   app.socialHandles = config.socialHandles;
+  app.streamerName = config.name;
+  app.summary = config.summary && addNewlines(config.summary);
+  app.tags =  config.tags;
+  app.title = config.title;
 
   // const configFileLocation = "../js/config.json";
 
@@ -43,7 +53,7 @@ async function setupApp() {
     const response = await fetch(pageContentFile);
     const descriptionMarkdown = await response.text()
     const descriptionHTML = new showdown.Converter().makeHtml(descriptionMarkdown);
-    app.description = descriptionHTML;
+    app.extraUserContent = descriptionHTML;
     return this;
   } catch (error) {
     console.log(error);

webroot/js/config.json

@@ -1,7 +1,10 @@
 {
+  "name": "gabek",
   "title": "Owncast Demo Server",
   "logo": "/img/logo128.png",
-  "description": "This is a demo server for Owncast.  You can read more about it at owncast.online.  You can edit this description in your web config file.  <br><br>Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.",
+
+  "summary": "This is brief summary of whom you are or what your stream is. demo server for Owncast.  You can read more about it at owncast.online.  You can edit this description in your web config file.\n\nBlathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature.",
+
   "tags": [
     "music",
     "software",

webroot/js/footer.js

@@ -7,3 +7,21 @@ Vue.component('owncast-footer', {
     </footer>
   `,
 });
+
+
+Vue.component('stream-tags', {
+  props: ['tags'],
+  template: `
+    <ul
+      class="tag-list flex"
+      v-if="this.tags.length"
+    >
+      <li class="tag rounded-sm text-gray-100 bg-gray-700" 
+        v-for="tag in this.tags"
+        v-bind:key="tag"
+      >
+        {{tag}}
+      </li>
+    </ul>
+  `,
+});

webroot/js/social.js

@@ -91,7 +91,7 @@ Vue.component('social-list', {
   props: ['platforms'],
 
   template: `
-    <div class="social-list flex">
+    <ul class="social-list flex">
       <span v-if="this.platforms.length" class="follow-label">Follow me: </span>
       <user-social-icon 
         v-for="(item, index) in this.platforms"
@@ -100,7 +100,7 @@ Vue.component('social-list', {
         v-bind:platform="item.platform"
         v-bind:username="item.handle"
       />
-    </div>
+    </ul>
   `,
 
 });
@@ -130,13 +130,15 @@ Vue.component('user-social-icon', {
     };
   },
   template: `
-    <a
+    <li>
-      v-bind:class="itemClass"
+      <a
-      target="_blank"
+        v-bind:class="itemClass"
-      :href="link"
+        target="_blank"
-    >
+        :href="link"
-      <span class="platform-icon rounded-lg" :style="style" />
+      >
-      <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
+        <span class="platform-icon rounded-lg" :style="style" />
-    </a>
+        <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
+      </a>
+    </li>
   `,
 });

webroot/styles/layout.css

@@ -4,20 +4,13 @@
   --right-col-width: 24em;
   --video-container-height: 50vh;
   --header-bg-color: rgba(20,0,40,1);
+  --user-image-width: 10em;
 }
 
 body {
   font-size: 14px;
 }
 
-/* Tailwind sets list styles to none.  I don't know why. */
-ol {
-  list-style: decimal;
-}
-
-ul {
-  list-style: unset;
-}
 
 a:hover {
   text-decoration: underline;
@@ -121,13 +114,58 @@ footer {
 
 
 .user-content {
-  padding: 2em;
+  padding: 3em;
+}
+
+#user-content {
+  display: flex;
+  flex-direction: row;
+}
+.user-content .user-image {
+  padding: 1em;
+  margin-right: 2em;
+  min-width: var(--user-image-width);
+  width: var(--user-image-width);
+  height: var(--user-image-width);
+  max-height: var(--user-image-width);
+}
+
+.user-image img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.stream-summary {
+  margin: 1em 0;
+}
+.extra-user-content {
+  margin: 1em 0;
 }
 
+h2 {
+  font-size: 3em; 
+}
+.user-content-header {
+  margin-bottom: 2em;
+}
+
+.tag-list {
+  flex-direction: row;
+  margin: 1em 0;
+}
+.tag-list li {
+  font-size: .75em;
+  text-transform: uppercase;
+  margin-right: .75em;
+  padding: .5em;
+}
+
+
 .social-list {
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
+  flex-wrap: wrap;
 }
 .social-list .follow-label {
   font-weight: bold;
@@ -164,6 +202,14 @@ footer {
   max-width: 10em;
 }
 
+.extra-user-content ol {
+  list-style: decimal;
+}
+
+.extra-user-content ul {
+  list-style: unset;
+}
+
 
 /* ************************************************8 */
 
@@ -365,6 +411,7 @@ footer {
 @media screen and (max-width: 860px) {
   :root {
     --right-col-width: 20em;
+    --user-image-width: 6em;
   }
   
   #chat-container {