#515 switched to SVG icons, #525 added Ko-Fi platform (#528)

* #515 switched to SVG icons, #525 added Ko-Fi platform

* fixes #515, fixes #525 - added color to the SVGs directly

* Removed `color` from config for socialHandles, not required anymore

webroot/js/components/platform-logos-list.js

@@ -1,10 +1,50 @@
-import { h, Component } from '/js/web_modules/preact.js';
+import {h} from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
+import {SOCIAL_PLATFORMS} from '../utils/platforms.js';
+import {classNames} from '../utils/helpers.js';
+
 const html = htm.bind(h);
 
-import { SOCIAL_PLATFORMS } from '../utils/platforms.js';
-import { classNames } from '../utils/helpers.js';
+function SocialIcon(props) {
+  const {platform, icon, url} = props;
+  const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
+  const inList = !!platformInfo;
+  const iconSupplied = !!icon
+  const name = inList ? platformInfo.name : platform;
 
+  const finalIcon = iconSupplied ? icon : (inList ? platformInfo.icon : '/img/socialhandles/default.svg')
+
+  const style = `background-image: url(${finalIcon});`
+
+  const itemClass = classNames({
+    "user-social-item": true,
+    "flex": true,
+    "justify-start": true,
+    "items-center": true,
+    "-mr-1": true,
+    "use-default": !inList,
+  });
+  const labelClass = classNames({
+    "platform-label": true,
+    "visually-hidden": !!finalIcon,
+    "text-indigo-800": true,
+    "text-xs": true,
+    "uppercase": true,
+    "max-w-xs": true,
+    "inline-block": true,
+  });
+
+  return (
+    html`
+      <a class=${itemClass} target="_blank" href=${url}>
+        <span class="platform-icon rounded-lg bg-no-repeat"
+              style=${style} title="Find me on ${name}"></span>
+        <span class=${labelClass}>Find me on ${name}</span>
+      </a>
+    `);
+}
+
+/*
 function SocialIcon(props) {
   const { platform, url } = props;
   const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
@@ -40,24 +80,27 @@ function SocialIcon(props) {
         <span class=${labelClass}>Find me on ${name}</span>
       </a>
   `);
-}
+}*/
 
 export default function (props) {
-  const { handles } = props;
+  const {handles} = props;
   if (handles == null) {
     return null;
   }
 
   const list = handles.map((item, index) => html`
     <li key="social${index}">
-      <${SocialIcon} platform=${item.platform} url=${item.url} />
+      <${SocialIcon} platform=${item.platform} icon=${item.icon}
+                     url=${item.url}/>
     </li>
   `);
 
-  return html`<ul
+  return html`
+    <ul
       id="social-list"
       class="social-list flex flex-row items-center justify-start flex-wrap">
-    <span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
-    ${list}
-  </ul>`;
+      <span
+        class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
+      ${list}
+    </ul>`;
 }

webroot/js/utils/platforms.js

@@ -2,71 +2,79 @@
 export const SOCIAL_PLATFORMS = {
   default: {
     name: "default",
-    imgPos: [0,0], // [row,col]
+    icon: '/img/socialhandles/default.svg',
   },
 
   facebook: {
     name: "Facebook",
-    imgPos: [0,1],
+    icon: '/img/socialhandles/facebook.svg',
   },
   twitter: {
     name: "Twitter",
-    imgPos: [0,2],
+    icon: '/img/socialhandles/twitter.svg',
   },
   instagram: {
     name: "Instagram",
-    imgPos: [0,3],
+    icon: '/img/socialhandles/instagram.svg',
   },
   snapchat: {
     name: "Snapchat",
-    imgPos: [0,4],
+    icon: '/img/socialhandles/snapchat.svg',
   },
   tiktok: {
     name: "TikTok",
-    imgPos: [0,5],
+    icon: '/img/socialhandles/tiktok.svg',
   },
   soundcloud: {
     name: "Soundcloud",
-    imgPos: [0,6],
+    icon: '/img/socialhandles/soundcloud.svg',
   },
   bandcamp: {
     name: "Bandcamp",
-    imgPos: [0,7],
+    icon: '/img/socialhandles/bandcamp.svg',
   },
   patreon: {
     name: "Patreon",
-    imgPos: [0,1],
+    icon: '/img/socialhandles/patreon.svg',
   },
   youtube: {
     name: "YouTube",
-    imgPos: [0,9 ],
+    icon: '/img/socialhandles/youtube.svg',
   },
   spotify: {
     name: "Spotify",
-    imgPos: [0,10],
+    icon: '/img/socialhandles/spotify.svg',
   },
   twitch: {
     name: "Twitch",
-    imgPos: [0,11],
+    icon: '/img/socialhandles/twitch.svg',
   },
   paypal: {
     name: "Paypal",
-    imgPos: [0,12],
+    icon: '/img/socialhandles/paypal.svg',
   },
   github: {
     name: "Github",
-    imgPos: [0,13],
+    icon: '/img/socialhandles/github.svg',
   },
   linkedin: {
     name: "LinkedIn",
-    imgPos: [0,14],
+    icon: '/img/socialhandles/linkedin.svg',
   },
   discord: {
     name: "Discord",
-    imgPos: [0,15],
+    icon: '/img/socialhandles/discord.svg',
   },
   mastodon: {
     name: "Mastodon",
-    imgPos: [0,16],
+    icon: '/img/socialhandles/mastodon.svg',
+  },
+  gitlab: {
+    name: "Gitlab",
+    icon: '/img/socialhandles/gitlab.svg',
+  },
+  kofi: {
+    name: "Ko-Fi",
+    icon: '/img/socialhandles/ko-fi.svg',
   },
 };