From afa427a4666b14073ec92ff17ba2f2dcbcb46ea6 Mon Sep 17 00:00:00 2001
From: kitian616 <kitian616@outlook.com>
Date: Sat, 13 Oct 2018 17:03:51 +0800
Subject: [PATCH] feat: add media plugins (Netease Cloud Music, YouTube and
 bilibili)

---
 _includes/plugins/bilibili.html            |  5 ++
 _includes/plugins/netease-cloud-music.html |  4 ++
 _includes/plugins/youtube.html             |  5 ++
 _sass/components/_plugins.scss             | 22 ++++++++
 assets/css/main.scss                       |  2 +
 docs/_posts/2017-08-01-media.md            | 61 ++++++++++++++++++++++
 6 files changed, 99 insertions(+)
 create mode 100644 _includes/plugins/bilibili.html
 create mode 100644 _includes/plugins/netease-cloud-music.html
 create mode 100644 _includes/plugins/youtube.html
 create mode 100644 _sass/components/_plugins.scss
 create mode 100644 docs/_posts/2017-08-01-media.md

diff --git a/_includes/plugins/bilibili.html b/_includes/plugins/bilibili.html
new file mode 100644
index 00000000000..f09fd5198dc
--- /dev/null
+++ b/_includes/plugins/bilibili.html
@@ -0,0 +1,5 @@
+<div class="plugin plugin--video">
+  <iframe src="//player.bilibili.com/player.html?aid={{ include.id }}&page=1"
+    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
+  </iframe>
+</div>
\ No newline at end of file
diff --git a/_includes/plugins/netease-cloud-music.html b/_includes/plugins/netease-cloud-music.html
new file mode 100644
index 00000000000..a9f6c975580
--- /dev/null
+++ b/_includes/plugins/netease-cloud-music.html
@@ -0,0 +1,4 @@
+<iframe class="plugin--audio" width="330" height="86"
+  src="//music.163.com/outchain/player?type=2&id={{ include.id }}&auto=1&height=66"
+  frameborder="no" border="0" marginwidth="0" marginheight="0">
+</iframe>
\ No newline at end of file
diff --git a/_includes/plugins/youtube.html b/_includes/plugins/youtube.html
new file mode 100644
index 00000000000..135ef4df25a
--- /dev/null
+++ b/_includes/plugins/youtube.html
@@ -0,0 +1,5 @@
+<div class="plugin plugin--video">
+<iframe class="plugin-iframe plugin-iframe--video"
+  src="https://www.youtube.com/embed/{{ include.id }}?showinfo=0"
+  frameborder="0" allowfullscreen></iframe>
+</div>
\ No newline at end of file
diff --git a/_sass/components/_plugins.scss b/_sass/components/_plugins.scss
new file mode 100644
index 00000000000..c37f05faf2f
--- /dev/null
+++ b/_sass/components/_plugins.scss
@@ -0,0 +1,22 @@
+.plugin {
+  margin: map-get($base, vertical-space-lg) 0;
+}
+
+.plugin--video {
+  position: relative;
+  width: 100%;
+  padding: 0;
+  padding-top: 56.25%;
+  & > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.plugin--audio {
+  display: block;
+  max-width: 100% !important;
+}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index c1d0a4eeb1b..966b990c82b 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -49,6 +49,8 @@
     "components/main",
     "components/tags",
     "components/search",
+    "components/plugins",
+
 
     "additional/alert",
     "additional/tag",
diff --git a/docs/_posts/2017-08-01-media.md b/docs/_posts/2017-08-01-media.md
new file mode 100644
index 00000000000..25c26ad6b44
--- /dev/null
+++ b/docs/_posts/2017-08-01-media.md
@@ -0,0 +1,61 @@
+---
+title: TeXt - Media
+key: 20170802
+tags: TeXt
+toc: true
+category: post
+---
+
+With the help of plugins for media, you can easily add **audio** and **video** in your posts.
+
+<div>{%- include plugins/youtube.html id='wbY97-hdD5c' -%}</div>
+
+<!--more-->
+
+## Audio
+
+### Netease Cloud Music (网易云音乐)
+
+Available in Chinese mainland.
+
+<div>{%- include plugins/netease-cloud-music.html id='413812448' -%}</div>
+
+{% raw %}
+```html
+{%- include plugins/netease-cloud-music.html id='413812448' -%}
+```
+
+```
+<div>{%- include plugins/netease-cloud-music.html id='413812448' -%}</div>
+```
+{% endraw %}
+
+## Video
+
+### YouTube
+
+<div>{%- include plugins/youtube.html id='wbY97-hdD5c' -%}</div>
+
+{% raw %}
+```html
+{%- include plugins/youtube.html id='wbY97-hdD5c' -%}
+```
+
+```
+<div>{%- include plugins/youtube.html id='wbY97-hdD5c' -%}</div>
+```
+{% endraw %}
+
+### Bilibili (哔哩哔哩)
+
+<div>{%- include plugins/bilibili.html id='6890938' -%}</div>
+
+{% raw %}
+```html
+{%- include plugins/bilibili.html id='6890938' -%}
+```
+
+```
+<div>{%- include plugins/bilibili.html id='6890938' -%}</div>
+```
+{% endraw %}
\ No newline at end of file