feat(shortcode): new music display component

Former-commit-id: 2788405462518cf57fe29f7aa7fc3d747236d5c9

1 files changed, 51 insertions, 0 deletions

diff --git a/layouts/_shortcodes/music.html b/layouts/_shortcodes/music.html
new file mode 100644
index 00000000..4deb6a50
--- /dev/null
+++ b/layouts/_shortcodes/music.html
@@ -0,0 +1,51 @@
+<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!"
+            src="{{ .Get "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>
+        </div>
+    </div>
+    <!-- Links -->
+    {{ $aTagClasses := "block rounded-full px-3 md:p-4 bg-neutral-200/50 hover:bg-neutral-200 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="在 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="在网易云音乐中打开"
+            data-tooltip
+        >
+            <img src="/img/netease-music.png" loading="lazy" class="{{ $imageClasses }}" />
+            <span class="md:hidden">网易云</span>
+        </a>
+        {{ end }}
+
+        {{ with .Get "spotify" }}
+        <a href="{{ . }}"
+            class="{{ $aTagClasses }}"
+            target="_blank"
+            title="在 Spotify 中打开"
+            data-tooltip
+        >
+            <img src="/img/spotify.png" loading="lazy" class="{{ $imageClasses }}" />
+            <span class="md:hidden">Spotify</span>
+        </a>
+        {{ end }}
+    </div>
+</div>