From cda62e28d1b71ce4018301aacf93532230aa2b3b Mon Sep 17 00:00:00 2001
From: Alexander Fuks <kungfux@users.noreply.github.com>
Date: Mon, 8 Sep 2025 23:45:20 +0400
Subject: [PATCH] feat: add support for embed spotify (#2515)

---
 _includes/embed/audio.html            |  2 +-
 _includes/embed/spotify.html          | 22 +++++++++++++++++++++
 _posts/2019-08-08-write-a-new-post.md | 28 +++++++++++++++------------
 _sass/base/_base.scss                 |  9 ++++++++-
 4 files changed, 47 insertions(+), 14 deletions(-)
 create mode 100644 _includes/embed/spotify.html

diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html
index cf928a7f8..bb20688e4 100644
--- a/_includes/embed/audio.html
+++ b/_includes/embed/audio.html
@@ -9,7 +9,7 @@
 {% endunless %}
 
 <p>
-  <audio class="embed-audio" controls>
+  <audio class="embed-audio file" controls>
     {% assign extension = src | split: '.' | last %}
     {% assign types = extension | concat: types %}
 
diff --git a/_includes/embed/spotify.html b/_includes/embed/spotify.html
new file mode 100644
index 000000000..4e0a848d5
--- /dev/null
+++ b/_includes/embed/spotify.html
@@ -0,0 +1,22 @@
+{% assign size = 352 %}
+{% assign theme = '' %}
+
+{% if include.compact %}
+  {% assign size = 152 %}
+{% endif %}
+
+{% if include.dark %}
+  {% assign theme = '?theme=0' %}
+{% endif %}
+
+<iframe
+  class="embed-audio spotify"
+  src="https://open.spotify.com/embed/track/{{ include.id | append: theme }}"
+  height="{{ size }}"
+  frameBorder="0"
+  allowfullscreen=""
+  allowtransparency="true"
+  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+  loading="lazy"
+>
+</iframe>
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 102016552..f048f013c 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -256,11 +256,9 @@ For normal images:
 ```
 {: .nolineno }
 
-### Video
+### Social Media Platforms
 
-#### Social Media Platform
-
-You can embed videos from social media platforms with the following syntax:
+You can embed video/audio from social media platforms with the following syntax:
 
 ```liquid
 {% include embed/{Platform}.html id='{ID}' %}
@@ -268,15 +266,21 @@ You can embed videos from social media platforms with the following syntax:
 
 Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
 
-The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
+The following table shows how to get the two parameters we need in a given video/audio URL, and you can also know the currently supported video platforms.
 
-| Video URL                                                                                          | Platform   | ID             |
-| -------------------------------------------------------------------------------------------------- | ---------- | :------------- |
-| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube`  | `H-B46URT4mg`  |
-| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`   | `1634779211`   |
-| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
+| Video URL                                                                                                                  | Platform   | ID                       |
+| -------------------------------------------------------------------------------------------------------------------------- | ---------- | :----------------------- |
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg)                         | `youtube`  | `H-B46URT4mg`            |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)                                 | `twitch`   | `1634779211`             |
+| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf)                         | `bilibili` | `BV1Q44y1B7Wf`           |
+| [https://www.open.**spotify**.com/track/**3OuMIIFP5TxM8tLXMWYPGV**](https://open.spotify.com/track/3OuMIIFP5TxM8tLXMWYPGV) | `spotify`  | `3OuMIIFP5TxM8tLXMWYPGV` |
 
-#### Video Files
+Spotify supports some additional parameters:
+
+- `compact` - to display compact player instead (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' compact=1 %}`);
+- `dark` - to force dark theme (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' dark=1 %}`).
+
+### Video Files
 
 If you want to embed a video file directly, use the following syntax:
 
@@ -310,7 +314,7 @@ Consider an example using all of the above:
 %}
 ```
 
-### Audios
+### Audio Files
 
 If you want to embed an audio file directly, use the following syntax:
 
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
index 46e9eb6e8..b512a484c 100644
--- a/_sass/base/_base.scss
+++ b/_sass/base/_base.scss
@@ -314,7 +314,14 @@ main {
 
 .embed-audio {
   width: 100%;
-  display: block;
+
+  &.file {
+    display: block;
+  }
+
+  &.spotify {
+    border-radius: 14px;
+  }
 
   @extend %img-caption;
 }