refactor(shortcode): DRY music component

1 files changed, 27 insertions, 41 deletions

diff --git a/layouts/_shortcodes/music.html b/layouts/_shortcodes/music.html
index 45230a48..de144f39 100644
--- a/layouts/_shortcodes/music.html
+++ b/layouts/_shortcodes/music.html
@@ -1,55 +1,41 @@
+{{ $title := .Get "title" }}
+{{ $cover := .Get "cover" }}
+{{ $artist := .Get "artist" }}
+{{ $platforms := slice "bandcamp" "apple" "spotify" "netease" }}
+{{ $page := . }}
+
 <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-2">
     <!-- Cover, title, artist -->
     <div class="flex gap-5 items-center">
         <img class="w-15 h-15 rounded-lg shadow-lg m-0!"
-            alt="{{ .Get "title" }} music cover"
-            src="{{ .Get "cover" }}" loading="lazy" />
+            alt="{{ $title }} music cover"
+            src="{{ $cover }}" loading="lazy" />
         <div>
-            <h4 class="m-0 text-size-base">{{ .Get "title" }}</h4>
-            <p class="m-0 text-size-sm text-secondary">{{ .Get "artist" }}</p>
+            <h4 class="m-0 text-size-base">{{ $title }}</h4>
+            <p class="m-0 text-size-sm text-secondary">{{ $artist }}</p>
         </div>
     </div>
     <!-- Links -->
     {{ $aTagClasses := "block rounded-full px-3 md:p-4 bg-neutral-200/50 dark:bg-neutral-600/50 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors no-underline! text-size-xs inline-flex gap-1 items-center" }}
     {{ $imageClasses := "block w-3 h-3 md:w-5 md:h-5 m-0!" }}
     <div class="flex gap-2 items-center">
-        {{ with .Get "apple" }}
-        <a href="{{ . }}"
-            class="{{ $aTagClasses }}"
-            target="_blank"
-            title="{{ T "music.openIn" "Apple Music" }}"
-            alt="Apple Music"
-            data-tooltip
-        >
-            <img src="/img/apple-music.png" loading="lazy" class="{{ $imageClasses }}" />
-            <span class="md:hidden">Apple Music</span>
-        </a>
-        {{ end }}
-
-        {{ with .Get "netease" }}
-        <a href="{{ . }}"
-            class="{{ $aTagClasses }}"
-            target="_blank"
-            title="{{ T "music.openIn" (T "music.netease") }}"
-            alt="Netease Cloud Music"
-            data-tooltip
-        >
-            <img src="/img/netease-music.png" loading="lazy" class="{{ $imageClasses }}" />
-            <span class="md:hidden">{{ T "music.netease" }}</span>
-        </a>
-        {{ end }}
-
-        {{ with .Get "spotify" }}
-        <a href="{{ . }}"
-            class="{{ $aTagClasses }}"
-            target="_blank"
-            title="{{ T "music.openIn" "Spotify" }}"
-            alt="Spotify"
-            data-tooltip
-        >
-            <img src="/img/spotify.png" loading="lazy" class="{{ $imageClasses }}" />
-            <span class="md:hidden">Spotify</span>
-        </a>
+        {{ range $platforms }}
+            {{ $code := . }}
+            {{ $langcode := (printf "music.%s" $code) }}
+            {{ $name := T $langcode }}
+            {{ with $page.Get . }}
+            <a href="{{ . }}"
+                class="{{ $aTagClasses }}"
+                target="_blank"
+                title="{{ T "music.openIn" $name }}"
+                alt="{{ $name }}"
+                data-tooltip
+            >
+                <img src="{{ printf "/icons/music/%s.png" $code }}"
+                    loading="lazy" class="{{ $imageClasses }}" />
+                <span class="md:hidden">{{ $name }}</span>
+            </a>
+            {{ end }}
         {{ end }}
     </div>
 </div>