clean up social code

webroot/index.html

@@ -90,40 +90,25 @@ GW TODO:
      </main>
 
       <section id="user-content" class="user-content">
-        <div class="social-list flex">
+        <social-list v-bind:platforms="socialHandles"></social-list>
-          <user-social-icon 
-            v-for="(item, index) in socialHandles"
-            v-if="item.platform && item.handle"
-            v-bind:key="index"
-            v-bind:platform="item.platform"
-            v-bind:username="item.handle"
-          />
-        </div>
         
 
         <!-- USER CONTENT... -->
         <div v-html="description"></div>
 
-        <owncast-footer />
+        <owncast-footer></owncast-footer>
       </section>
     </div>
 
 
     <section id="chat-container-wrap" class="flex">
       <div id="user-content-touch" class="user-content">
-        <div class="social-list flex">
+        <social-list v-bind:platforms="socialHandles"></social-list>
-          <user-social-icon 
+
-            v-for="(item, index) in socialHandles"
-            v-if="item.platform && item.handle"
-            v-bind:key="index"
-            v-bind:platform="item.platform"
-            v-bind:username="item.handle"
-          />
-        </div>
         <!-- USER CONTENT... -->
         <div v-html="description"></div>
 
-        <owncast-footer />
+        <owncast-footer></owncast-footer>
        
       </div>
 
@@ -180,6 +165,7 @@ GW TODO:
   <script src="js/config.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/message.js"></script>
+  <script src="js/social.js"></script>
   <script src="js/footer.js"></script>
   <script src="js/app.js"></script>
   <script src="js/player/airplay.js"></script>

webroot/js/footer.js

@@ -7,132 +7,3 @@ Vue.component('owncast-footer', {
     </footer>
   `,
 });
-
-
-const SOCIAL_PLATFORMS_URLS = {
-  default: {
-    name: "default",
-    urlPrefix: "",
-    imgPos: [0,0], // [row,col]
-  },
-
-  facebook: {
-    name: "Facebook",
-    urlPrefix: "http://www.facebook.com/",
-    imgPos: [0,1], // [row,col]
-  },
-  twitter: {
-    name: "Twitter",
-    urlPrefix: "http://www.twitter.com/",
-    imgPos: [0,2], // [row,col]
-  },
-  instagram: {
-    name: "Instagram",
-    urlPrefix: "http://www.instagram.com/",
-    imgPos: [0,3], // [row,col]
-  },
-  instagram: {
-    name: "Snapchat",
-    urlPrefix: "http://www.snapchat.com/",
-    imgPos: [0,4], // [row,col]
-  },
-  tiktok: {
-    name: "TikTok",
-    urlPrefix: "http://www.tiktok.com/",
-    imgPos: [0,5], // [row,col]
-  },
-  soundcloud: {
-    name: "Soundcloud",
-    urlPrefix: "http://www.soundcloud.com/",
-    imgPos: [0,6], // [row,col]
-  },
-  basecamp: {
-    name: "Base Camp",
-    urlPrefix: "http://www.basecamp.com/",
-    imgPos: [0,7], // [row,col]
-  },
-  patreon: {
-    name: "Patreon",
-    urlPrefix: "http://www.patreon.com/",
-    imgPos: [0,1], // [row,col]
-  },
-  youtube: {
-    name: "YouTube",
-    urlPrefix: "http://www.youtube.com/",
-    imgPos: [0,9 ], // [row,col]
-  },
-  spotify: {
-    name: "Spotify",
-    urlPrefix: "http://www.spotify.com/",
-    imgPos: [0,10], // [row,col]
-  },
-  twitch: {
-    name: "Twitch",
-    urlPrefix: "http://www.twitch.com/",
-    imgPos: [0,11], // [row,col]
-  },
-  paypal: {
-    name: "Paypal",
-    urlPrefix: "http://www.paypal.com/",
-    imgPos: [0,12], // [row,col]
-  },
-  github: {
-    name: "Github",
-    urlPrefix: "http://www.github.com/",
-    imgPos: [0,13], // [row,col]
-  },
-  linkedin: {
-    name: "LinkedIn",
-    urlPrefix: "http://www.linkedin.com/",
-    imgPos: [0,14], // [row,col]
-  },
-  discord: {
-    name: "Discord",
-    urlPrefix: "http://www.discord.com/",
-    imgPos: [0,15], // [row,col]
-  },
-  mastadon: {
-    name: "Mastadon",
-    urlPrefix: "http://www.mastadon.com/",
-    imgPos: [0,16], // [row,col]
-  },
-};
-
-Vue.component('user-social-icon', {
-  props: ['platform', 'username'],
-  data: function() {
-    const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
-    const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
-    const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
-    const useDefault = platformInfo.name === "default";
-    return {
-      name: platformInfo.name,
-      link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
-      style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
-      itemClass: {
-        "user-social-item": true,
-        "flex": true,
-        "rounded": useDefault,
-        "use-default": useDefault,        
-      },
-      labelClass: {
-        "platform-label": true,
-        "visually-hidden": !useDefault,
-        "text-indigo-800": true,
-      },
-    };
-  },
-  template: `
-    <a
-      v-bind:class="itemClass"
-      target="_blank"
-      :href="link"
-    >
-      <span 
-        class="platform-icon rounded-lg"
-        :style="style"
-      />
-      <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
-    </a>
-  `,
-});

webroot/js/social.js

@@ -0,0 +1,142 @@
+const SOCIAL_PLATFORMS_URLS = {
+  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],
+  },
+  instagram: {
+    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],
+  },
+  basecamp: {
+    name: "Base Camp",
+    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],
+  },
+};
+
+Vue.component('social-list', {
+  props: ['platforms'],
+
+  template: `
+    <div 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"
+        v-if="item.platform && item.handle"
+        v-bind:key="index"
+        v-bind:platform="item.platform"
+        v-bind:username="item.handle"
+      />
+    </div>
+  `,
+
+});
+
+Vue.component('user-social-icon', {
+  props: ['platform', 'username'],
+  data: function() {
+    const platformInfo = SOCIAL_PLATFORMS_URLS[this.platform.toLowerCase()] || SOCIAL_PLATFORMS_URLS["default"];
+    const imgRow = platformInfo.imgPos && platformInfo.imgPos[0] || 0;
+    const imgCol = platformInfo.imgPos && platformInfo.imgPos[1] || 0;
+    const useDefault = platformInfo.name === "default";
+    return {
+      name: platformInfo.name,
+      link: platformInfo.name !== "default" ? `${platformInfo.urlPrefix}/${this.username}` : '#',
+      style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
+      itemClass: {
+        "user-social-item": true,
+        "flex": true,
+        "rounded": useDefault,
+        "use-default": useDefault,        
+      },
+      labelClass: {
+        "platform-label": true,
+        "visually-hidden": !useDefault,
+        "text-indigo-800": true,
+      },
+    };
+  },
+  template: `
+    <a
+      v-bind:class="itemClass"
+      target="_blank"
+      :href="link"
+    >
+      <span class="platform-icon rounded-lg" :style="style" />
+      <span v-bind:class="labelClass">Find @{{username}} on {{platform}}</span>
+    </a>
+  `,
+});

webroot/styles/layout.css

@@ -126,19 +126,21 @@ footer {
 
 .social-list {
   flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
 }
-.user-social-item:first-of-type::before {
+.social-list .follow-label {
-  content: 'FOLLOW ME: ';
   font-weight: bold;
   font-size: .75em;
   margin-right: .5em;
+  text-transform: uppercase;
 }
 
 .user-social-item {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  margin-right: 0em;
+  margin-right: -.25em;
 }
 .user-social-item .platform-icon {
   --icon-width: 40px;