Skip to content

Commit 15e262b

Browse files
QuilljouQuilljou
committed
feat: ✨finish md-loader demo
1 parent 3a3570a commit 15e262b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+692
-13692
lines changed

‎.eslintrc

+8-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"parser": "@typescript-eslint/parser",
33
"env": {
44
"jest": true,
5-
"node": true
5+
"node": true,
6+
"browser": true
67
},
78
"extends": ["airbnb-typescript", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "prettier", "prettier/react", "prettier/@typescript-eslint"],
89
"plugins": ["@typescript-eslint", "react"],
@@ -13,8 +14,13 @@
1314
}
1415
},
1516
"rules": {
17+
"jsx-a11y": 0,
1618
"react/prefer-stateless-function": 0,
1719
"react/button-has-type": 0,
18-
"import/no-extraneous-dependencies": 0
20+
"react/no-danger": 0,
21+
"import/no-extraneous-dependencies": 0,
22+
"import/no-dynamic-require": 0,
23+
"global-require": 0,
24+
"@typescript-eslint/no-var-requires": 0
1925
}
2026
}

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,5 @@ lib
125125
.fusebox/
126126

127127
# End of https://www.gitignore.io/api/macos,node
128+
129+
package-lock.json

‎babel.config.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
const basic = {
22
"presets": [
33
["@babel/preset-env", {
4-
"debug": true,
5-
"modules": false
4+
"modules": "cjs"
65
}],
76
["@babel/preset-react"],
87
["@babel/preset-typescript"]
@@ -15,8 +14,8 @@ const basic = {
1514
}
1615

1716
module.exports = function babel(api) {
18-
if(api.env('test')) {
19-
basic.presets[0][1].modules = 'cjs'
17+
if(api.env('production')) {
18+
basic.presets[0][1].modules = false
2019
}
2120
return basic;
2221
}

‎docs/App.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3+
4+
// import Home from '../scripts/docs/render';
5+
// import Document from './pages/Documents';
6+
// import NotFound from './pages/404';
7+
8+
import 'normalize.css';
9+
import 'github-markdown-css';
10+
import './index.styl';
11+
12+
import Document from './pages/Document/Document';
13+
14+
export default class App extends React.Component {
15+
public render(): React.ReactNode {
16+
return (
17+
<Router>
18+
<Switch>
19+
<Route exact path="/" component={Document} />
20+
{/* <Route path="/docs/:component" component={Document} />
21+
<Route path="*" component={NotFound} /> */}
22+
</Switch>
23+
</Router>
24+
);
25+
}
26+
}

‎docs/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# DOCS
2+
3+
## URLS
4+
5+
文档 #/docs/xxx
6+
Example #/examples/xxx

‎docs/assets/style/base.styl

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@require "~@/common/stylus/variable.styl"
2+
3+
html, body
4+
width: 100%
5+
height: 100%
6+
color: $color-dark-grey
7+
background: white
8+
font-family -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif
9+
-webkit-font-smoothing antialiased
10+
input
11+
outline: 0

‎docs/assets/style/index.styl

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@require '~@/common/stylus/reset.styl'
2+
@require "./base.styl"
3+
@require "./md.styl"

‎docs/assets/style/md.styl

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
@require "~@/common/stylus/variable.styl"
2+
3+
.md-body
4+
font-size: $fontsize-medium
5+
line-height: 1.6
6+
color: $color-grey
7+
p
8+
margin: 1.2em 0
9+
.anchor
10+
display: inline-block
11+
h2
12+
margin-top: 1.2em
13+
margin-bottom: .8em
14+
font-size: 2em
15+
font-weight: 600
16+
color: $color-dark-grey
17+
h3
18+
margin: 1em 0 1em
19+
font-size: 1.4em
20+
font-weight: 600
21+
h4
22+
margin: 0.8em 0 0.8em
23+
font-size: 1.1em
24+
font-weight: 600
25+
blockquote
26+
padding: 0 1em
27+
color: $color-grey
28+
border-left: .25em solid $color-light-grey-s
29+
table
30+
// margin 0.8em 1em 0.8em 1em
31+
width: 100%
32+
box-sizing: border-box
33+
table-layout: fixed
34+
border-collapse: separate
35+
border: 1px solid #E7E7E7
36+
border-width: 1px 0 0 1px
37+
border-radius: 4px
38+
th, td
39+
padding: 6px 13px
40+
border: 1px solid #E7E7E7
41+
border-width: 0 1px 1px 0
42+
vertical-align: middle
43+
text-align: left
44+
word-wrap: break-word
45+
word-break: break-word
46+
tr
47+
th
48+
font-weight: 600
49+
background-color: #F9F8F8
50+
&:first-child
51+
border-top-left-radius: 4px
52+
&:last-child
53+
border-top-right-radius: 4px
54+
tr
55+
&:last-child
56+
td
57+
&:first-child
58+
border-bottom-left-radius: 4px
59+
&:last-child
60+
border-bottom-right-radius: 4px
61+
ul, ol, li
62+
line-height: 20px
63+
li
64+
list-style: inherit
65+
margin: 1em 0
66+
ul
67+
padding-left: 20px
68+
h1, h2, h3, h4
69+
.anchor
70+
display: none
71+
h1:hover, h2:hover, h3:hover, h4:hover
72+
.anchor
73+
display: inline-block
74+
float: left
75+
margin-left: -20px
76+
position relative
77+
top: 6px
78+
padding-right: 4px
79+
line-height: 1
80+
img
81+
max-width: 100%
82+
.hljs
83+
border: 1px solid #E7E7E7
84+
color: #666
85+
background-color: #F9F8F8
86+
border-radius: 4px
87+
.hljs-variable,
88+
.hljs-template-variable,
89+
.hljs-attribute,
90+
.hljs-tag,
91+
.hljs-name,
92+
.hljs-regexp,
93+
.hljs-link,
94+
.hljs-name,
95+
.hljs-selector-id,
96+
.hljs-selector-class
97+
color: #3CA0E6
98+
.hljs-string,
99+
.hljs-symbol,
100+
.hljs-bullet
101+
color: #3FB374
102+
.hljs-tag
103+
color: #666
104+
.hljs-attr
105+
.hljs-tag
106+
color: #fc9153
107+
.hljs-attr
108+
color: #fc9153
109+
pre
110+
margin: 1em 0
111+
font-size: 12px
112+
code
113+
font-family: monaco
114+
line-height: 1.4
115+
color: rgb(199, 37, 78)
116+
background: rgb(249, 242, 244)
117+
padding: 2px 4px
118+
box-sizing: border-box
119+
font-size: 0.93em
120+
strong
121+
margin: 1em 0 1em
122+
font-weight: bold
123+
a
124+
text-decoration: none
125+
color:#3CA0E6
126+
&:hover
127+
color: #137DC6
128+
sup
129+
position: absolute
130+
margin: -10px 0 0 -4px
131+
padding: 2px
132+
transform: scale(0.6) translateZ(0)
133+
border: 1px solid #ccc
134+
border-radius: 4px
135+
table
136+
i[class^="cubeic-"]
137+
&::before
138+
font-size: 20px
139+
&::after
140+
content: attr(class)
141+
display: block
142+
margin: -6px 0 8px 0

‎site/components/Header/index.styl renamed to ‎docs/components/Header/index.styl

File renamed without changes.

‎site/components/Header/index.tsx renamed to ‎docs/components/Header/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { Link } from 'react-router-dom';
33
import './index.styl';
44

5-
const PureComponent = React.PureComponent;
5+
const {PureComponent} = React;
66

77
export default class Header extends PureComponent {
88
render() {

‎docs/components/SideNav/SideNav.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { Fragment } from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
import './index.styl';
5+
6+
interface SideNavProps {
7+
data: any[]
8+
}
9+
10+
export default class SideNav extends React.Component<SideNavProps> {
11+
public derial(nav: object): void {
12+
console.log(this, nav)
13+
}
14+
15+
public render(): React.ReactNode {
16+
const { data } = this.props;
17+
return (
18+
<ul className="nav-ul">
19+
{data.map(nav => {
20+
return (
21+
<li className="nav-li" key={nav.name}>
22+
{
23+
nav.subs
24+
?
25+
<Fragment>
26+
<p className="nav-li" onClick={nav => this.derial(nav)}>{nav.name}</p>
27+
<SideNav data={nav.subs} />
28+
</Fragment>
29+
:
30+
<Link to={nav.key}></Link>
31+
}
32+
{nav.angle && <span className="angle">{ nav.angle }</span>}
33+
{nav.angle && <div className="arrow"></div>}
34+
</li>
35+
)
36+
})}
37+
</ul>
38+
);
39+
}
40+
}
41+
42+
43+
// <ul className="nav-ul">
44+
// <li className="nav-li" v-for="(item, key) in data" :className="{'nav-li_open': item.isRootActive, 'nav-li_active': item.hasActived}" :key="key">
45+
// <template v-if="item.name">
46+
// <p className="nav-name" @click="derail(item)">{{item.name}}</p>
47+
// <side-nav :data="item.subList"></side-nav>
48+
// </template>
49+
// <router-link
50+
// active-className="nav-active"
51+
// :to="{path: key}"
52+
// v-else
53+
// >{{item}}</router-link>
54+
// <span v-if="item.angle" className="angle">{{item.angle}}</span>
55+
// <div v-if="item.angle" className="arrow" :className="{rotate: item.isRootActive}"></div>
56+
// </li>
57+
// </ul>

0 commit comments

Comments
 (0)