feat: add media plugins (Netease Cloud Music, YouTube and bilibili)

varunkuntal · Oct 13, 2018 · afa427a · afa427a
1 parent bf1b9ee
commit afa427a
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 0 deletions.
diff --git a/_includes/plugins/bilibili.html 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>
diff --git a/_includes/plugins/netease-cloud-music.html 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>
diff --git a/_includes/plugins/youtube.html 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>
diff --git a/_sass/components/_plugins.scss 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;
+}
diff --git 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
@@ -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 %}