Add icons to known links (#6).

source/scss/pages/_release.scss

@@ -45,9 +45,10 @@
 
 .release-link {
   a {
+    align-items: center;
     background-color: var(--background-1);
     border-radius: var(--border-radius);
-    display: block;
+    display: flex;
     padding: 1rem;
     text-decoration: none;
 
@@ -55,4 +56,10 @@
       background-color: var(--foreground-1);
     }
   }
+
+  img {
+    border-radius: var(--border-radius);
+    height: 3rem;
+    margin-right: 1rem;
+  }
 }

source/ts/pages/release.ts

@@ -71,14 +71,20 @@ export default class ReleasePage extends Component<Props, State> {
           ? undefined
           : html`<img class="cover-art" src="${release.image}" />`;
 
-      const urls = release.links.map(
-        (link) =>
-          html`
-            <li class="release-link">
-              <${ExternalAnchor} url="${link.original}" text="${link.text}" />
-            </li>
-          `,
-      );
+      const urls = release.links.map((link) => {
+        let linkImage;
+        if (link.icon !== undefined) {
+          linkImage = html`<img src="/assets/icons/${link.icon}" />`;
+        }
+
+        return html`
+          <li class="release-link">
+            <a href="${link.original}" rel="noopener noreferrer">
+              ${linkImage} ${link.text}
+            </a>
+          </li>
+        `;
+      });
 
       const releaseUrl = `https://musicbrainz.org/release/${mbid}`;
       if (urls.length === 0) {

source/ts/utilities/known-links.json

@@ -1,57 +1,71 @@
 [
   {
+    "icon": "7digital.png",
     "regex": "7digital\\.com$",
     "text": "7digital"
   },
   {
+    "icon": "amazon.png",
     "regex": "amazon\\.com$",
     "text": "Amazon"
   },
   {
+    "icon": "apple-music.png",
     "regex": "(itunes|music)\\.apple\\.com$",
     "text": "Apple Music"
   },
   {
+    "icon": "bandcamp.png",
     "regex": "bandcamp\\.com$",
     "text": "Bandcamp"
   },
   {
+    "icon": "beatport.png",
     "regex": "beatport\\.com$",
     "text": "Beatport"
   },
   {
+    "icon": "deezer.png",
     "regex": "deezer\\.com$",
     "text": "Deezer"
   },
   {
+    "icon": "discogs.png",
     "regex": "discogs\\.com$",
     "text": "Discogs"
   },
   {
+    "icon": "monstercat-music.jpg",
     "regex": "music\\.monstercat\\.com$",
     "text": "Monstercat Music"
   },
   {
+    "icon": "qobuz.png",
     "regex": "qobuz\\.com$",
     "text": "Qobuz"
   },
   {
+    "icon": "soundcloud.png",
     "regex": "soundcloud\\.com$",
     "text": "SoundCloud"
   },
   {
+    "icon": "spotify.png",
     "regex": "spotify\\.com$",
     "text": "Spotify"
   },
   {
+    "icon": "tidal.png",
     "regex": "tidal\\.com$",
     "text": "Tidal"
   },
   {
+    "icon": "youtube-music.png",
     "regex": "music\\.youtube\\.com$",
     "text": "YouTube Music"
   },
   {
+    "icon": "youtube.png",
     "__comment": "Make sure we don't match the YouTube Music sub-domain",
     "regex": "^(www\\.)?(youtu\\.be|youtube\\.com)$",
     "text": "YouTube"

source/ts/utilities/relation-link.ts

@@ -8,16 +8,19 @@
 import knownLinks from './known-links.json';
 
 type KnownLink = {
+  icon: string | undefined;
   regex: RegExp;
   text: string;
 };
 
 const known: KnownLink[] = knownLinks.map((data: Record<string, unknown>) => ({
+  icon: data.icon as string | undefined,
   regex: new RegExp(data.regex as string),
   text: data.text as string,
 }));
 
 export default class RelationLink {
+  public readonly icon: string | undefined;
   public readonly isKnown: boolean;
   public readonly link: URL;
   public readonly original: string;
@@ -28,6 +31,7 @@ export default class RelationLink {
     this.link = new URL(relationUrl);
 
     const knownLink = known.find(({regex}) => regex.test(this.link.host));
+    this.icon = knownLink?.icon;
     this.isKnown = knownLink !== undefined;
     this.text = knownLink?.text ?? this.link.host;
   }