feat: 渲染文档

loader/md-vue/card-wrapper.js

@@ -10,7 +10,7 @@ module.exports = function cardWrapper(html) {
   return group
     .map(fragment => {
       if (fragment.indexOf('<h3') !== -1) {
-        return `<div class="card my-card">${fragment}</div>`;
+        return `<div>${fragment}</div>`;
       }
 
       return fragment;

loader/md-vue/code-wrapper.js

@@ -0,0 +1,15 @@
+/*
+处理code
+*/
+module.exports = function codeWrapper(html) {
+  const group = html.replace(/<\/pre>/g, '</pre>:::').split(':::');
+  const codeOnline = `<div class="handle-part"><a href="https://gitpod.io/#https://github.com/jdf2e/nutui.git" target="_blank" class="online-btn">在线运行</a></div>`;
+  return group
+    .map(fragment => {
+      if (fragment.indexOf('</div>demo') !== -1) {
+        return fragment.replace('<p></div>demo</p>', '') + codeOnline;
+      }
+      return fragment;
+    })
+    .join('');
+};

loader/md-vue/index.js

@@ -5,10 +5,13 @@ const frontMatter = require('front-matter'); //就是md文档最上面的内容
 const highlight = require('./highlight');
 const linkOpen = require('./link-open');
 const cardWrapper = require('./card-wrapper');
+const codeWrapper = require('./code-wrapper');
+
 const { slugify } = require('transliteration');
 
 function wrapper(content) {
   content = cardWrapper(content);
+  content = codeWrapper(content);
   content = escape(content);
 
   return `

package.json

@@ -109,4 +109,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/packages/cell/doc.md

@@ -22,7 +22,7 @@ app.use(Cell);
 Cell `to` 有值的时候，跳转路由，`click-cell` 点击 `cell`触发事件
 
 ``` javascript
-111
+console.log('');
 ```
 
 ### 单元格大小

src/sites/assets/styles/reset.scss

@@ -51,48 +51,48 @@ section,
 time,
 audio,
 video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    -webkit-overflow-scrolling: touch;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ios默认文本框阴影 */
 
-input[type="text"],
+input[type='text'],
 textarea {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 /* 低版本安卓文本框层级问题 */
 
 input:focus {
-    -webkit-user-modify: read-write-plaintext-only;
+  -webkit-user-modify: read-write-plaintext-only;
 }
 
 // 清除谷歌浏览器下的 search 叉号
 input::-webkit-search-cancel-button {
-    display: none;
+  display: none;
 }
 
 ol,
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 * {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html,
@@ -100,21 +100,22 @@ body,
 a,
 button,
 input {
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
+  outline: 0 none;
+  border: 0;
+  text-decoration: none;
 }
 
 img {
-    border: 0 none;
-    vertical-align: bottom;
-    -ms-interpolation-mode: bicubic;
+  border: 0 none;
+  vertical-align: bottom;
+  -ms-interpolation-mode: bicubic;
 }
 [v-cloak] {
-    display: none;
+  display: none;
 }
 html,
 body {
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
+  background: #fff;
 }

src/sites/doc/App.vue

@@ -15,7 +15,7 @@ export default defineComponent({
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: none;
   -ms-text-size-adjust: 100%;
-  background: #f7f8fa;
+  background: #fff;
   height: 100%;
   width: 100%;
   display: flex;

src/styles/md-style.scss

@@ -1,8 +1,12 @@
 @import 'highlight.scss';
+
 .doc-content-document {
   position: relative;
   margin: 10px;
   width: 800px;
+  background: #fff;
+  border-left: 1px solid #eee;
+  padding-left: 58px;
   .card {
     margin-bottom: 24px;
     padding: 24px;
@@ -32,7 +36,7 @@
   h5,
   h6 {
     color: $nutui-doc-black;
-    font-weight: normal;
+    font-weight: bold;
     line-height: 1.5;
 
     &[id] {
@@ -43,18 +47,31 @@
   h1 {
     margin: 0 0 30px;
     font-size: 30px;
-    cursor: default;
+    cursor: #1a1a1a;
+    font-weight: bold;
+    position: relative;
+    margin-bottom: 56px;
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -26px;
+      left: 43px;
+      width: 44px;
+      height: 17px;
+      background: url('https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png');
+      background-size: 100% 100%;
+    }
   }
 
   h2 {
     margin: 45px 0 20px;
-    font-size: 25px;
+    font-size: 24px;
   }
 
   h3 {
     margin-bottom: 16px;
     font-weight: 600;
-    font-size: 18px;
+    font-size: 20px;
   }
 
   h4 {
@@ -71,10 +88,15 @@
 
   p {
     color: $nutui-doc-text-color;
-    font-size: 15px;
-    line-height: 26px;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  strong {
+    margin: 24px 0 12px;
+    font-weight: bold;
+    font-size: 14px;
+    color: #333;
   }
-
   table {
     width: 100%;
     margin-top: 12px;
@@ -82,15 +104,16 @@
     font-size: 14px;
     line-height: 1.5;
     border-collapse: collapse;
-
+    border: 1px solid #eee;
     th {
-      padding: 8px 10px;
+      padding: 8px 20px;
       font-weight: 600;
       text-align: left;
-
-      &:first-child {
-        padding-left: 0;
-      }
+      border-left: 1px solid #e9e9e9;
+      background-color: #f7f8fa;
+      // &:first-child {
+      //   padding-left: 0;
+      // }
 
       &:last-child {
         padding-right: 0;
@@ -98,12 +121,12 @@
     }
 
     td {
-      padding: 8px;
+      padding: 8px 20px;
       border-top: 1px solid $nutui-doc-code-background-color;
-
+      border-left: 1px solid #e9e9e9;
       &:first-child {
-        padding-left: 0;
-
+        // padding-left: 0;
+        border-left: 0px;
         // version tag
         code {
           margin: 0;
@@ -183,10 +206,13 @@
   }
 
   blockquote {
-    margin: 16px 0 0;
+    margin: 16px 0px;
     padding: 16px;
-    background-color: #ecf9ff;
-    border-radius: $nutui-doc-border-radius;
+    background-color: #fff4f0;
+    border-left: 6px solid #fa192c;
+    p {
+      color: #1a1a1a;
+    }
   }
 
   img {
@@ -215,4 +241,21 @@
       }
     }
   }
+  .handle-part {
+    height: 50px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .online-btn {
+      display: block;
+      color: #5555e2;
+      background-color: #fff;
+      font-size: 14px;
+      cursor: pointer;
+      &:hover {
+        color: blue;
+        text-decoration: underline;
+      }
+    }
+  }
 }

src/styles/variables.scss

@@ -93,7 +93,7 @@ $nutui-doc-blue: #1989fa;
 $nutui-doc-purple: #8080ff;
 $nutui-doc-fuchsia: #a7419e;
 $nutui-doc-green: #4fc08d;
-$nutui-doc-text-color: #34495e;
+$nutui-doc-text-color: #666666;
 $nutui-doc-text-light-blue: rgba(69, 90, 100, 0.6);
 $nutui-doc-background-color: #f7f8fa;
 $nutui-doc-grey: #999;