header adjustments for small screens; adjust to new config structure;

webroot/js/app.js

@@ -12,6 +12,7 @@ async function setupApp() {
       extraUserContent: "",
       isOnline: false,
       layout: "desktop",
+
       // from config
       logo: null,
       socialHandles: [],
@@ -20,7 +21,6 @@ async function setupApp() {
       tags: [],
       title: "",
       appVersion: "",
-
     },
     watch: {
       messages: {
@@ -41,24 +41,24 @@ async function setupApp() {
   appMessaging.init();
 
   const config = await new Config().init();
-  app.logo = config.logo;
+  app.logo = config.logo.small;
   app.socialHandles = config.socialHandles;
   app.streamerName = config.name;
   app.summary = config.summary && addNewlines(config.summary);
   app.tags =  config.tags;
   app.title = config.title;
+  app.appVersion = config.appVersion;
 
-  // const configFileLocation = "../js/config.json";
 
   try {
-    const pageContentFile = "../static/content.md"
+    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);
+    console.log("Error",error);
   }
 }
 

webroot/js/components.js

@@ -35,11 +35,17 @@ Vue.component('stream-tags', {
 });
 
 Vue.component('user-details', {
-  props:  ['logo', 'platforms', 'summary', 'tags', 'extraContent'],
+  props:  ['logo', 'platforms', 'summary', 'tags'],
   template: `
     <div class="user-content">
-      <div class="user-image rounded-full bg-white">
-        <img class="logo" alt="Logo" v-bind:src="logo">            
+      <div
+        class="user-image rounded-full bg-white"
+        v-bind:style="{ backgroundImage: 'url(' + logo + ')' }"
+      >
+        <img
+          class="logo visually-hidden" 
+          alt="Logo" 
+          v-bind:src="logo">            
       </div>
       <div class="user-content-header border-b border-gray-500 border-solid">
         <h2 class="font-semibold">
@@ -51,9 +57,6 @@ Vue.component('user-details', {
         <div class="stream-summary" v-html="summary"></div>
         <stream-tags v-bind:tags="tags"></stream-tags>
       </div>
-
-      <div v-html="extraContent"></div>
-
     </div>
   `,
 });

webroot/js/config.js

@@ -1,7 +1,7 @@
 // add more to the promises later.
 class Config {
   async init() {
-    const configFileLocation = "/config";
+    const configFileLocation = "https://goth.land/config";
     
     try {
       const response = await fetch(configFileLocation);

webroot/js/message.js

@@ -138,10 +138,17 @@ class Messaging {
 	handleShowChangeNameForm() {
 		this.textUserInfoDisplay.style.display = "none";
 		this.tagUserInfoChanger.style.display = "flex";
+		if (document.body.clientWidth < 640) {
+			this.tagChatToggle.style.display = "none";
+		}
 	}
 	handleHideChangeNameForm() {
 		this.textUserInfoDisplay.style.display = "flex";
 		this.tagUserInfoChanger.style.display = "none";
+		if (document.body.clientWidth < 640) {
+			this.tagChatToggle.style.display = "inline-block";
+
+		}
 	}
 	handleUpdateUsername() {
 		var newValue = this.inputChangeUserName.value;

webroot/js/social.js

@@ -1,88 +1,71 @@
-const SOCIAL_PLATFORMS_URLS = {
+const SOCIAL_PLATFORMS = {
   default: {
     name: "default",
-    urlPrefix: "",
     imgPos: [0,0], // [row,col]
   },
 
   facebook: {
     name: "Facebook",
-    urlPrefix: "http://www.facebook.com/",
     imgPos: [0,1],
   },
   twitter: {
     name: "Twitter",
-    urlPrefix: "http://www.twitter.com/",
     imgPos: [0,2],
   },
   instagram: {
     name: "Instagram",
-    urlPrefix: "http://www.instagram.com/",
     imgPos: [0,3],
   },
   snapchat: {
     name: "Snapchat",
-    urlPrefix: "http://www.snapchat.com/",
     imgPos: [0,4],
   },
   tiktok: {
     name: "TikTok",
-    urlPrefix: "http://www.tiktok.com/",
     imgPos: [0,5],
   },
   soundcloud: {
     name: "Soundcloud",
-    urlPrefix: "http://www.soundcloud.com/",
     imgPos: [0,6],
   },
   bandcamp: {
     name: "Bandcamp",
-    urlPrefix: "http://www.basecamp.com/",
     imgPos: [0,7],
   },
   patreon: {
     name: "Patreon",
-    urlPrefix: "http://www.patreon.com/",
     imgPos: [0,1],
   },
   youtube: {
     name: "YouTube",
-    urlPrefix: "http://www.youtube.com/",
     imgPos: [0,9 ],
   },
   spotify: {
     name: "Spotify",
-    urlPrefix: "http://www.spotify.com/",
     imgPos: [0,10],
   },
   twitch: {
     name: "Twitch",
-    urlPrefix: "http://www.twitch.com/",
     imgPos: [0,11],
   },
   paypal: {
     name: "Paypal",
-    urlPrefix: "http://www.paypal.com/",
     imgPos: [0,12],
   },
   github: {
     name: "Github",
-    urlPrefix: "http://www.github.com/",
     imgPos: [0,13],
   },
   linkedin: {
     name: "LinkedIn",
-    urlPrefix: "http://www.linkedin.com/",
     imgPos: [0,14],
   },
   discord: {
     name: "Discord",
-    urlPrefix: "http://www.discord.com/",
     imgPos: [0,15],
   },
   mastadon: {
     name: "Mastadon",
-    urlPrefix: "http://www.mastadon.com/",
     imgPos: [0,16],
   },
 };
@@ -98,7 +81,7 @@ Vue.component('social-list', {
         v-if="item.platform && item.handle"
         v-bind:key="index"
         v-bind:platform="item.platform"
-        v-bind:username="item.handle"
+        v-bind:url="item.url"
       />
     </ul>
   `,
@@ -106,25 +89,27 @@ Vue.component('social-list', {
 });
 
 Vue.component('user-social-icon', {
-  props: ['platform', 'username'],
+  props: ['platform', 'url'],
   data: function() {
-    const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
+    const platformInfo = SOCIAL_PLATFORMS[this.platform.toLowerCase()];
+    const inList = !!platformInfo;
     const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
     const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
-    const useDefault = platformInfo.name === "default";
+    c
     return {
-      name: platformInfo.name,
-      link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
+      name: inList ? platformInfo.name : this.platform,
+      link: url,
+
       style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
       itemClass: {
         "user-social-item": true,
         "flex": true,
-        "rounded": useDefault,
-        "use-default": useDefault,        
+        "rounded": inList,
+        "use-default": inList,        
       },
       labelClass: {
         "platform-label": true,
-        "visually-hidden": !useDefault,
+        "visually-hidden": !inList,
         "text-indigo-800": true,
       },
     };
@@ -137,7 +122,7 @@ Vue.component('user-social-icon', {
         :href="link"
       >
         <span class="platform-icon rounded-lg" :style="style" />
-        <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
+        <span v-bind:class="labelClass">Find me on {{platform}}</span>
       </a>
     </li>
   `,