Skip to content

Commit 5c00da6

Browse files
pomberpomber
committed
Add content and styles
1 parent cb6ff2e commit 5c00da6

File tree

7 files changed

+1346
-2
lines changed

7 files changed

+1346
-2
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules
2+
.next

‎next.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const withMDX = require("@next/mdx")()
2+
3+
module.exports = withMDX()

‎package.json

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
11
{
2+
"name": "react-tutorial-demo",
3+
"version": "0.2.1",
24
"dependencies": {
5+
"@code-hike/mini-browser": "0.2.1",
6+
"@code-hike/mini-editor": "0.2.1",
7+
"@emotion/core": "10.0.7",
8+
"@mdx-js/loader": "^1.6.5",
9+
"@mdx-js/react": "^1.0.6",
10+
"@next/mdx": "^9.4.4",
311
"next": "^9.5.3",
12+
"raw-loader": "^4.0.1",
413
"react": "^16.13.1",
5-
"react-dom": "^16.13.1"
14+
"react-dom": "^16.13.1",
15+
"theme-ui": "0.2.31",
16+
"use-spring": "^0.2.3"
17+
},
18+
"scripts": {
19+
"dev": "next",
20+
"build": "next build",
21+
"start": "next start",
22+
"export": "next build && next export"
623
}
724
}

‎pages/index.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Page } from "../src/page"
2+
3+
export default function Index() {
4+
return (
5+
<>
6+
<style jsx global>
7+
{`
8+
html {
9+
line-height: 1.15;
10+
-webkit-text-size-adjust: 100%;
11+
box-sizing: border-box;
12+
font-family: -apple-system, BlinkMacSystemFont,
13+
Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
14+
Fira Sans, Droid Sans, Helvetica Neue,
15+
sans-serif;
16+
font-weight: 400;
17+
font-style: normal;
18+
-webkit-font-smoothing: antialiased;
19+
-moz-osx-font-smoothing: grayscale;
20+
}
21+
22+
body {
23+
margin: 0;
24+
overflow-x: hidden;
25+
position: relative;
26+
}
27+
28+
* {
29+
margin: 0;
30+
padding: 0;
31+
}
32+
33+
*,
34+
:after,
35+
:before {
36+
box-sizing: inherit;
37+
}
38+
39+
a {
40+
color: inherit;
41+
text-decoration: none;
42+
}
43+
44+
ol,
45+
ul {
46+
list-style: none;
47+
}
48+
49+
img {
50+
display: inline-block;
51+
vertical-align: top;
52+
}
53+
`}
54+
</style>
55+
<Page />
56+
</>
57+
)
58+
}

‎src/page.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import s from "./page.module.css"
2+
import Content from "./tutorial.mdx"
3+
4+
export { Page }
5+
6+
function Page() {
7+
return (
8+
<article className={s.article}>
9+
<header>
10+
<h1>Tutorial: Intro to React</h1>
11+
</header>
12+
<main>
13+
<Content />
14+
</main>
15+
</article>
16+
)
17+
}

‎src/page.module.css

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
.article {
2+
width: 820px;
3+
margin: 0 auto;
4+
}
5+
6+
.article header {
7+
display: flex;
8+
flex-direction: row;
9+
flex: 0 1 auto;
10+
justify-content: space-between;
11+
align-items: baseline;
12+
}
13+
14+
.article h1 {
15+
color: rgb(40, 44, 52);
16+
margin-bottom: 0px;
17+
margin-top: 100px;
18+
font-size: 40px;
19+
line-height: 45px;
20+
font-weight: 700;
21+
}
22+
23+
.article main {
24+
margin-top: 50px;
25+
}
26+
27+
.article main > p:first-child {
28+
font-size: 18px;
29+
font-weight: 300;
30+
color: #6d6d6d;
31+
}
32+
33+
.article h2 {
34+
font-size: 20px;
35+
line-height: 1.2;
36+
}
37+
38+
.article h2::before {
39+
content: " ";
40+
display: block;
41+
border-bottom: 1px solid #ececec;
42+
padding-top: 44px;
43+
margin-bottom: 40px;
44+
}
45+
46+
.article h3::before {
47+
content: " ";
48+
display: block;
49+
padding-top: 90px;
50+
margin-top: -45px;
51+
}
52+
53+
.article h4 {
54+
font-size: 20px;
55+
color: #6d6d6d;
56+
line-height: 1.3;
57+
font-weight: 400;
58+
}
59+
60+
.article h4::before {
61+
content: " ";
62+
display: block;
63+
padding-top: 100px;
64+
margin-top: -50px;
65+
}
66+
67+
.article p {
68+
font-size: 16px;
69+
margin-top: 25px;
70+
line-height: 1.7;
71+
max-width: 42em;
72+
}
73+
74+
.article blockquote {
75+
background-color: rgba(255, 229, 100, 0.3);
76+
border-left-color: #ffe564;
77+
border-left-width: 9px;
78+
border-left-style: solid;
79+
padding: 20px 45px 20px 26px;
80+
margin-bottom: 30px;
81+
margin-top: 20px;
82+
margin-left: -30px;
83+
margin-right: -30px;
84+
}
85+
86+
.article blockquote p:first-of-type {
87+
font-weight: 700;
88+
margin-top: 0;
89+
}
90+
91+
.article blockquote p:nth-of-type(2) {
92+
margin-top: 0;
93+
}
94+
95+
.article ul {
96+
margin-top: 20px;
97+
font-size: 16px;
98+
color: #1a1a1a;
99+
padding-left: 20px;
100+
list-style: disc;
101+
}
102+
103+
.article li {
104+
margin-top: 10px;
105+
}
106+
107+
.article a {
108+
background-color: rgba(187, 239, 253, 0.3);
109+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
110+
color: #1a1a1a;
111+
}
112+
113+
.article a:hover {
114+
background-color: #bbeffd;
115+
border-bottom-color: #1a1a1a;
116+
}
117+
118+
.article code {
119+
padding: 0 3px;
120+
font-size: 0.94em;
121+
word-break: break-word;
122+
font-family: source-code-pro, Menlo, Monaco, Consolas,
123+
Courier New, monospace;
124+
}
125+
126+
.article p > code,
127+
.article li > code {
128+
background: rgba(255, 229, 100, 0.2);
129+
color: #1a1a1a;
130+
}

0 commit comments

Comments
 (0)