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

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>
   `,