feat: add demo plugins (CodePen)

varunkuntal · Nov 11, 2018 · 8b54d71 · 8b54d71
1 parent 93bf6d8
commit 8b54d71
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 11 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -23,7 +23,7 @@ TeXt 是针对个人或团队网站、博客、项目、文档等的一款高度
 - 目录
 - 作者（电子邮件，Facebook，Twitter，领英，微博，知乎等。支持多作者配置）
 - 附加样式（提示，标签，图片，图标，按钮，栅格等）
-- 扩展（音频，视频，幻灯片）
+- 扩展（音频，视频，幻灯片，在线示例）
 - Markdown 增强（[MathJax](https://www.mathjax.org/)，[mermaid](https://mermaidjs.github.io/)，[chartjs](http://www.chartjs.org/)）
 - 分享（[AddToAny](https://www.addtoany.com/)，[AddThis](https://www.addthis.com/)）
 - 评论（[Disqus](https://disqus.com/)，[Gitalk](https://gitalk.github.io/)）

diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ TeXt is a super customizable Jekyll theme for personal site, team site, blog, pr
 - Table of contents
 - Authors (Email, Facebook, Twitter, Linkedin, Weibo, Zhihu, etc)
 - Additional styles (alert, tag, image, icon, button, grid, etc)
-- Extensions (audios, videos, slides)
+- Extensions (audios, videos, slides, demos)
 - Markdown enhancements ([MathJax](https://www.mathjax.org/), [mermaid](https://mermaidjs.github.io/), [chartjs](http://www.chartjs.org/))
 - Sharing ([AddToAny](https://www.addtoany.com/), [AddThis](https://www.addthis.com/))
 - Comments ([Disqus](https://disqus.com/), [Gitalk](https://gitalk.github.io/))

diff --git a/_includes/extensions/codepen.html b/_includes/extensions/codepen.html
@@ -0,0 +1,4 @@
+<div class="extensions extensions--demo">
+<iframe src='//codepen.io/{{ include.user }}/embed/{{ include.hash }}/?theme-id=0&default-tab={{ include.default_tab | default: result }}'
+  frameborder="0" scrolling="no" allowfullscreen></iframe>
+</div>
diff --git a/_includes/extensions/youtube.html b/_includes/extensions/youtube.html
@@ -1,4 +1,4 @@
 <div class="extensions extensions--video">
-  <iframe src="https://www.youtube.com/embed/{{ include.id }}?showinfo=0"
+  <iframe src="https://www.youtube.com/embed/{{ include.id }}?rel=0&showinfo=0"
     frameborder="0" scrolling="no" allowfullscreen></iframe>
 </div>
diff --git a/_sass/components/_extensions.scss b/_sass/components/_extensions.scss
@@ -3,7 +3,7 @@
   @extend .d-print-none;
 }
 
-.extensions--video, .extensions--slide {
+.extensions--video, .extensions--slide, .extensions--demo {
   position: relative;
   width: 100%;
   padding: 0;
@@ -24,6 +24,11 @@
   padding-top: percentage(487 / 599);
 }
 
+.extensions--demo {
+  min-height: 340px;
+  padding-top: percentage(315 / 560);
+}
+
 .extensions--audio {
   display: block;
   max-width: 100% !important;

diff --git a/_sass/custom.scss b/_sass/custom.scss
diff --git a/about.md b/about.md
@@ -27,7 +27,7 @@ TeXt is a super customizable Jekyll theme for personal site, team site, blog, pr
 - Table of contents
 - Authors (Email, Facebook, Twitter, Linkedin, Weibo, Zhihu, etc)
 - Additional styles (alert, tag, image, icon, button, grid, etc)
-- Extensions (audios, videos, slides)
+- Extensions (audios, videos, slides, demos)
 - Markdown enhancements ([MathJax](https://www.mathjax.org/), [mermaid](https://mermaidjs.github.io/), [chartjs](http://www.chartjs.org/))
 - Sharing ([AddToAny](https://www.addtoany.com/), [AddThis](https://www.addthis.com/))
 - Comments ([Disqus](https://disqus.com/), [Gitalk](https://gitalk.github.io/))

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -66,5 +66,7 @@
     "layout/archive",
     "layout/home",
     "layout/landing",
-    "layout/404"
+    "layout/404",
+
+    "custom"
 ;
diff --git a/docs/_docs/en/3.4-extensions.md b/docs/_docs/en/3.4-extensions.md
@@ -4,7 +4,7 @@ permalink: /docs/en/extensions
 key: docs-extensions
 ---
 
-# Audio
+## Audio
 
 ### SoundCloud
 
@@ -155,3 +155,29 @@ Available in Chinese mainland.
 <div>{%- include extensions/slideshare.html id='u9L9zDsqEWNKE1' -%}</div>
 ```
 {% endraw %}
+
+## Demos
+
+### CodePen
+
+<div>{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}</div>
+
+---
+
+**user & hash:**
+
+![extensions-codepen](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/extensions-codepen.jpg){:style="max-height:100px"}{:.border}
+
+**html:**
+
+{% raw %}
+```html
+{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}
+```
+
+**markdown:**
+
+```
+<div>{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}</div>
+```
+{% endraw %}
diff --git a/docs/_docs/zh/3.4-extensions.md b/docs/_docs/zh/3.4-extensions.md
@@ -4,7 +4,7 @@ permalink: /docs/zh/extensions
 key: docs-extensions-zh
 ---
 
-# 音频
+## 音频
 
 ### SoundCloud
 
@@ -155,3 +155,29 @@ Available in Chinese mainland.
 <div>{%- include extensions/slideshare.html id='u9L9zDsqEWNKE1' -%}</div>
 ```
 {% endraw %}
+
+## 在线示例
+
+### CodePen
+
+<div>{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}</div>
+
+---
+
+**user & hash:**
+
+![extensions-codepen](https://raw.githubusercontent.com/kitian616/jekyll-TeXt-theme/master/docs/assets/images/extensions-codepen.jpg){:style="max-height:100px"}{:.border}
+
+**html:**
+
+{% raw %}
+```html
+{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}
+```
+
+**markdown:**
+
+```
+<div>{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}</div>
+```
+{% endraw %}
diff --git a/docs/_posts/2017-08-02-extensions.md b/docs/_posts/2017-08-02-extensions.md
@@ -4,7 +4,7 @@ key: 20170802
 tags: TeXt
 ---
 
-With the help of extensions, you can easily add **audios**, **videos** and **slides** in your posts.
+With the help of extensions, you can easily add **audios**, **videos**, **slides** and **demos** in your posts.
 
 <div>{%- include extensions/ted.html id='emily_esfahani_smith_there_s_more_to_life_than_being_happy' -%}</div>
 
@@ -38,8 +38,15 @@ Available in Chinese mainland.
 
 <div>{%- include extensions/bilibili.html id='11091080' -%}</div>
 
+
 ## Slide
 
 ### SlideShare
 
-<div>{%- include extensions/slideshare.html id='u9L9zDsqEWNKE1' -%}</div>
+<div>{%- include extensions/slideshare.html id='u9L9zDsqEWNKE1' -%}</div>
+
+## Demos
+
+### CodePen
+
+<div>{%- include extensions/codepen.html user='kitian616' hash='aQmWZG' default_tab='html,result' -%}</div>
diff --git a/docs/assets/images/extensions-codepen.jpg b/docs/assets/images/extensions-codepen.jpg
diff --git a/docs/landing.html b/docs/landing.html
@@ -54,7 +54,7 @@
             - text: Learn More
               url: /docs/en/additional-styles
         - title: Extensions
-          excerpt: Adding audios, videos and slides to your page.
+          excerpt: Adding audios, videos, slides and demos to your page.
           actions:
             - text: Learn More
               url: /docs/en/extensions