feat(umi-plugin): add styles for content area (#12)

packages/umi-plugin-father-doc/src/themes/default/layout.less

@@ -1,7 +1,7 @@
-@import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.css';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css';
+@import './markdown.less';
 
-@menu-width: 300px;
+@s-menu-width: 300px;
+@s-content-margin: 64px;
 
 body {
   margin: 0;
@@ -15,15 +15,14 @@ body {
 
 .wrapper {
   min-height: 100vh;
-  padding-left: @menu-width + 32px;
-  padding-right: 32px;
+  padding: 16px @s-content-margin 50px @s-menu-width + @s-content-margin;
 
   .menu {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
-    width: @menu-width;
+    width: @s-menu-width;
     border-right: 1px solid #eee;
     box-sizing: border-box;
   }

packages/umi-plugin-father-doc/src/themes/default/layout.tsx

@@ -4,6 +4,7 @@
 
 import React, { Component, MouseEvent } from 'react';
 import { IMenuItem } from '../../routes/getMenuFromRoutes';
+import 'prismjs/themes/prism.css';
 import styles from './layout.less';
 
 export interface ILayoutProps {

packages/umi-plugin-father-doc/src/themes/default/markdown.less

@@ -0,0 +1,147 @@
+@import (reference) './variables.less';
+@import '~prismjs/themes/prism.css';
+
+:global {
+  .markdown {
+    color: @c-text;
+    font-size: 14px;
+    line-height: 1.40625;
+
+    // titles
+    h1, h2, h3, h4, h5, h6 {
+      margin: 32px 0 16px;
+      color: @c-heading;
+      font-weight: 500;
+      line-height: 1.40625;
+
+      // anchor link
+      &:hover > a[aria-hidden] {
+        float: left;
+        margin-top: 0.06em;
+        margin-left: -20px;
+        width: 20px;
+        padding-right: 4px;
+        line-height: 1;
+
+        &::after {
+          content: '#';
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 20px;
+        }
+
+        span {
+          display: none;
+        }
+      }
+
+      + h1, + h2, + h3, + h4, + h5, + h6 {
+        margin-top: 16px;
+      }
+    }
+
+    h1 {
+      font-size: 32px;
+    }
+
+    h2 {
+      font-size: 24px;
+    }
+
+    h3 {
+      font-size: 20px;
+    }
+
+    h4 {
+      font-size: 18px;
+    }
+
+    h5 {
+      font-size: 16px;
+    }
+
+    h6 {
+      font-size: 14px;
+    }
+
+    // paragraph
+    p {
+      margin: 16px 0;
+    }
+
+    // inline code
+    *:not(pre) code {
+      padding: 2px 5px;
+      color: #D56161;
+      background: darken(@c-light-bg, 1%);
+    }
+
+    // code block
+    pre {
+      background: darken(@c-light-bg, 1%);
+
+      &:not([class^='language-']) {
+        padding: 1em;
+      }
+    }
+
+    // horizontal line
+    hr {
+      margin: 16px 0;
+      border: 0;
+      border-top: 1px solid @c-border;
+    }
+
+    // blockquote
+    blockquote {
+      margin: 16px 0;
+      padding: 0 24px;
+      border-left: 4px solid @c-border;
+      overflow: hidden;
+    }
+
+    // list
+    ul,
+    ol {
+      margin: 8px 0 8px 32px;
+      padding: 0;
+    }
+
+    // table
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      border: 1px solid @c-border;
+
+      th, td {
+        padding: 10px 24px;
+        border: 1px solid @c-border;
+      }
+
+      th {
+        font-weight: 600;
+        background: @c-light-bg;
+      }
+
+      td:first-child {
+        font-weight: 500;
+      }
+    }
+
+    // links
+    a {
+      color: @c-link;
+      text-decoration: none;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.7;
+        text-decoration: underline;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+    }
+  }
+}

packages/umi-plugin-father-doc/src/themes/default/variables.less

@@ -0,0 +1,8 @@
+/* 颜色表 */
+@c-primary: #4668AE;
+@c-heading: #454D64;
+@c-text: #454D64;
+@c-secondary: #7B7F8D;
+@c-link: #3F78EE;
+@c-border: #E3E6EF;
+@c-light-bg: #F9FAFB;

packages/umi-plugin-father-doc/src/transformer/remark/index.ts

@@ -19,17 +19,9 @@ export default (raw: string, fileAbsDir: string) => {
     .use(yaml)
     .use(externalDemo)
     .use(rehype)
-    .use(stringify, { allowDangerousHTML: true })
+    .use(stringify, { allowDangerousHTML: true, closeSelfClosing: true })
     .use(slug)
-    .use(headings, {
-      content: {
-        type: 'element',
-        tagName: 'span',
-        properties: { className: ['octicon', 'octicon-link'] },
-        children: [{ type: 'text', value: '#' }]
-      },
-      properties: { className: 'anchor' },
-    })
+    .use(headings)
     .use(prism)
     .use(previewer)
     .use(jsx)