diff --git a/source/assets/icons/7digital.png b/source/assets/icons/7digital.png new file mode 100644 index 0000000..809ed4e Binary files /dev/null and b/source/assets/icons/7digital.png differ diff --git a/source/assets/icons/amazon.png b/source/assets/icons/amazon.png new file mode 100644 index 0000000..5b36b03 Binary files /dev/null and b/source/assets/icons/amazon.png differ diff --git a/source/assets/icons/apple-music.png b/source/assets/icons/apple-music.png new file mode 100644 index 0000000..2d84a3d Binary files /dev/null and b/source/assets/icons/apple-music.png differ diff --git a/source/assets/icons/bandcamp.png b/source/assets/icons/bandcamp.png new file mode 100644 index 0000000..9cc5aee Binary files /dev/null and b/source/assets/icons/bandcamp.png differ diff --git a/source/assets/icons/beatport.png b/source/assets/icons/beatport.png new file mode 100644 index 0000000..5863e67 Binary files /dev/null and b/source/assets/icons/beatport.png differ diff --git a/source/assets/icons/deezer.png b/source/assets/icons/deezer.png new file mode 100644 index 0000000..93de88f Binary files /dev/null and b/source/assets/icons/deezer.png differ diff --git a/source/assets/icons/discogs.png b/source/assets/icons/discogs.png new file mode 100644 index 0000000..56d8c3d Binary files /dev/null and b/source/assets/icons/discogs.png differ diff --git a/source/assets/icons/monstercat-music.jpg b/source/assets/icons/monstercat-music.jpg new file mode 100644 index 0000000..5c13f94 Binary files /dev/null and b/source/assets/icons/monstercat-music.jpg differ diff --git a/source/assets/icons/qobuz.png b/source/assets/icons/qobuz.png new file mode 100644 index 0000000..5112ef9 Binary files /dev/null and b/source/assets/icons/qobuz.png differ diff --git a/source/assets/icons/soundcloud.png b/source/assets/icons/soundcloud.png new file mode 100644 index 0000000..da3a072 Binary files /dev/null and b/source/assets/icons/soundcloud.png differ diff --git a/source/assets/icons/spotify.png b/source/assets/icons/spotify.png new file mode 100755 index 0000000..30314f8 Binary files /dev/null and b/source/assets/icons/spotify.png differ diff --git a/source/assets/icons/tidal.png b/source/assets/icons/tidal.png new file mode 100644 index 0000000..3791c27 Binary files /dev/null and b/source/assets/icons/tidal.png differ diff --git a/source/assets/icons/youtube-music.png b/source/assets/icons/youtube-music.png new file mode 100644 index 0000000..49698ca Binary files /dev/null and b/source/assets/icons/youtube-music.png differ diff --git a/source/assets/icons/youtube.png b/source/assets/icons/youtube.png new file mode 100644 index 0000000..2985834 Binary files /dev/null and b/source/assets/icons/youtube.png differ diff --git a/source/scss/pages/_release.scss b/source/scss/pages/_release.scss index 0ddd50c..d04d264 100644 --- a/source/scss/pages/_release.scss +++ b/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; + } } diff --git a/source/ts/pages/release.ts b/source/ts/pages/release.ts index eeaa4ac..9d6840d 100644 --- a/source/ts/pages/release.ts +++ b/source/ts/pages/release.ts @@ -71,14 +71,20 @@ export default class ReleasePage extends Component { ? undefined : html``; - const urls = release.links.map( - (link) => - html` - - `, - ); + const urls = release.links.map((link) => { + let linkImage; + if (link.icon !== undefined) { + linkImage = html``; + } + + return html` + + `; + }); const releaseUrl = `https://musicbrainz.org/release/${mbid}`; if (urls.length === 0) { diff --git a/source/ts/utilities/known-links.json b/source/ts/utilities/known-links.json index eb7a2d6..a9aad51 100644 --- a/source/ts/utilities/known-links.json +++ b/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" diff --git a/source/ts/utilities/relation-link.ts b/source/ts/utilities/relation-link.ts index a9b28d1..54f6bee 100644 --- a/source/ts/utilities/relation-link.ts +++ b/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) => ({ + 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; }