From 107e213553c97230d2b7e9464ec947573c5baf97 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Fri, 8 Jun 2018 15:27:32 +0800
Subject: [PATCH] Supports codesandbox.io

---
 templates/default/introduce/guides/link.md | 10 +++++++++-
 theme/default/component/Header/index.js    |  2 +-
 theme/default/lib/markdown/Link.js         |  8 ++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/templates/default/introduce/guides/link.md b/templates/default/introduce/guides/link.md
index 4352d53..2150f23 100644
--- a/templates/default/introduce/guides/link.md
+++ b/templates/default/introduce/guides/link.md
@@ -38,7 +38,7 @@ sort: 7
 
 ## 内嵌代码编辑器支持
 
-目前编辑器支持 [codepen.io](https://codepen.io/)、[jsfiddle.net](https://jsfiddle.net/)、[runjs.cn](http://runjs.cn) 三个网站，其中 runjs.cn 因为不是 `https` 站点，当你的 rdoc 生成的网站是 `https` 浏览器会屏蔽 http 的 runjs.cn 站点嵌入。
+目前编辑器支持 [codepen.io](https://codepen.io/)、[jsfiddle.net](https://jsfiddle.net/)、[runjs.cn](http://runjs.cn) 三个网站。
 
 ### 编辑器 codepen.io 展示效果
 
@@ -46,6 +46,12 @@ sort: 7
 
 https://codepen.io/jaywcjlove/pen/ZWJVKy
 
+### 编辑器 codesandbox.io 展示效果
+
+直接将网址 `https://codesandbox.io/s/jlomy0xoo5` 贴入 Markdown 中，出如下预览效果。
+
+https://codesandbox.io/embed/jlomy0xoo5
+
 ### 编辑器 jsfiddle.net 展示效果
 
 直接将网址 `https://jsfiddle.net/jaywcjlove/sxx57x6m/` 贴入 Markdown 中，出如下预览效果。
@@ -56,5 +62,7 @@ https://jsfiddle.net/jaywcjlove/sxx57x6m/
 
 直接将网址 `http://runjs.cn/code/yzfkxts2` 贴入 Markdown 中，出如下预览效果。
 
+> runjs.cn 因为不是 `https` 站点，当你的 rdoc 生成的网站如果是 `https` 站点，浏览器会屏蔽 http 的 runjs.cn 站点嵌入 
+
 http://runjs.cn/code/yzfkxts2
 
diff --git a/theme/default/component/Header/index.js b/theme/default/component/Header/index.js
index 07be6b9..6b8fd91 100644
--- a/theme/default/component/Header/index.js
+++ b/theme/default/component/Header/index.js
@@ -28,7 +28,7 @@ export default class Header extends PureComponent {
       const url = item.mdconf && (item.mdconf.github || item.mdconf.url);
       if (url) {
         return (
-          <a key={index} target="_blank" href={url}>
+          <a key={index} target="_blank" rel="noopener noreferrer" href={url}>
             {item.mdconf.github && SVGGithub}{item.mdconf.title && <span>{item.mdconf.title}</span>}
           </a>
         );
diff --git a/theme/default/lib/markdown/Link.js b/theme/default/lib/markdown/Link.js
index 51e42e4..e27eb6d 100644
--- a/theme/default/lib/markdown/Link.js
+++ b/theme/default/lib/markdown/Link.js
@@ -4,17 +4,21 @@ import styles from './Link.less';
 export default ({ title, href, children }) => {
   let link = href.replace(/(\/|\/show\/|\/show)$/g, '');
   if (
-    /^(http(?:|s):)\/\/(jsfiddle.net|runjs.cn|codepen.io)/.test(link) &&
-    !/^(https|http):\/\/(jsfiddle.net|runjs.cn|codepen.io)(?:|\/)$/.test(link)
+    /^(http(?:|s):)\/\/(jsfiddle.net|runjs.cn|codepen.io|codesandbox.io)/.test(link) &&
+    !/^(https|http):\/\/(jsfiddle.net|runjs.cn|codepen.io|codesandbox.io)(?:|\/)$/.test(link)
   ) {
     const regexRunjs = /(https|http):\/\/runjs.cn\/code\/(.*)/gi;
     const regexCodepen = /(https|http):\/\/codepen.io\/(.*)\/pen\/(.*)/gi;
+    const regexCodesandbox = /(https|http):\/\/codesandbox.io\/(s|embed)\/(.*)/gi;
     const runjs = regexRunjs.exec(link);
     const codepen = regexCodepen.exec(link);
+    const codesandbox = regexCodesandbox.exec(link);
     if (runjs && runjs.length > 2) {
       link = `http://sandbox.runjs.cn/show/${runjs[2]}`;
     } else if (codepen && codepen.length === 4) {
       link = `https://codepen.io/${codepen[2]}/embed/${codepen[3]}?height=400`;
+    } else if (codesandbox && codesandbox.length === 4) {
+      link = `https://codesandbox.io/embed/${codesandbox[3]}`;
     } else {
       link = `${link}/show/`;
     }