From 1e6c55c660369632a10ef3c22dec98bcc4e7feb5 Mon Sep 17 00:00:00 2001
From: Jakob Meier <comcloudway@ccw.icu>
Date: Mon, 26 Aug 2024 21:56:45 +0200
Subject: [PATCH] Add simple audio player shortcode

The shortcode accepts four arguments: title, by, cover and link.

NOTE: the cover image will automatically be loaded from the cover url
---
 layouts/partials/music.html    | 14 ++++++++++++
 layouts/shortcodes/music.html  |  1 +
 static/base.css                | 40 ++++++++++++++++++++++++++++++++++
 static/play-large-symbolic.svg |  2 ++
 4 files changed, 57 insertions(+)
 create mode 100644 layouts/partials/music.html
 create mode 100644 layouts/shortcodes/music.html
 create mode 100644 static/play-large-symbolic.svg

diff --git a/layouts/partials/music.html b/layouts/partials/music.html
new file mode 100644
index 0000000..2460a3c
--- /dev/null
+++ b/layouts/partials/music.html
@@ -0,0 +1,14 @@
+<div>
+  <a class="music-player" href="{{ .link }}" target="_blank">
+
+    <img class="player-cover" src="{{ .cover }}">
+
+    <div class="player-meta">
+      <h4 class="player-title">{{ .title }}</h4>
+      <p class="player-by">by <b>{{ .by }}</b></p>
+    </div>
+
+    <i class="player-play"></i>
+
+  </a>
+</div>
diff --git a/layouts/shortcodes/music.html b/layouts/shortcodes/music.html
new file mode 100644
index 0000000..dd5c912
--- /dev/null
+++ b/layouts/shortcodes/music.html
@@ -0,0 +1 @@
+{{ partial "music.html" .Params }}
diff --git a/static/base.css b/static/base.css
index 8805dcb..51ffdd8 100644
--- a/static/base.css
+++ b/static/base.css
@@ -433,3 +433,43 @@ footer * {
 .pad01 {
 	padding: 0.1rem;
 }
+
+/* MUSIC PLAYER */
+.music-player {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	background: var(--color-text-dark);
+	border-radius: 0.8rem;
+	width: fit-content;
+	filter: brightness(100%);
+	transition: filter .4s ease-in-out;
+}
+.music-player:hover {
+	filter: brightness(110%);
+}
+.music-player .player-cover {
+	width: 6rem;
+}
+.music-player .player-meta {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+.music-player .player-play {
+	margin: 0.8rem;
+	margin-left: 2.4rem;
+    mask: url("/play-large-symbolic.svg");
+	mask-repeat: no-repeat;
+	mask-size: cover;
+	background: var(--color-text);
+	opacity: 0.8;
+	width: 8rem;
+	max-width: 6vmin;
+	aspect-ratio: 1/1;
+	transition: filter .4s ease-in-out;
+	filter: brightness(100%);
+}
+.music-player:hover .player-play {
+	filter: brightness(110%);
+}
diff --git a/static/play-large-symbolic.svg b/static/play-large-symbolic.svg
new file mode 100644
index 0000000..5210a7e
--- /dev/null
+++ b/static/play-large-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 2.003906 13.492188 v -11 c 0 -1.5 1.265625 -1.492188 1.265625 -1.492188 h 0.132813 c 0.246094 0 0.484375 0.054688 0.699218 0.175781 l 9.796876 5.597657 c 0.433593 0.238281 0.65625 0.730468 0.65625 1.222656 c 0 0.492187 -0.222657 0.984375 -0.65625 1.226562 l -9.796876 5.597656 c -0.214843 0.121094 -0.453124 0.175782 -0.699218 0.171876 h -0.132813 s -1.265625 0 -1.265625 -1.5 z m 0 0" fill="#222222"/></svg>
-- 
2.38.5