Skip to content

Commit 644c0d8

Browse files
yulei-chenyulei-chen
committed
Update tutorial
1 parent 5dcc17c commit 644c0d8

File tree

11 files changed

+2866
-7
lines changed

11 files changed

+2866
-7
lines changed

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"semi": false,
3-
"singleQuote": true
3+
"singleQuote": true,
4+
"printWidth": 60
45
}

‎global.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
html {
2+
/* scroll-padding-top: 50vh; */
3+
scroll-behavior: smooth;
4+
5+
background: #0d1117;
6+
color: #c9d1d9;
7+
8+
color-scheme: dark;
9+
}
10+
11+
body {
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
a {
17+
color: #ff9bce;
18+
}
19+
20+
main {
21+
max-width: 1000px;
22+
margin: 0 auto;
23+
padding: 0 1rem;
24+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
25+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
26+
line-height: 1.6;
27+
}
28+
29+
.ch-scrollycoding-static {
30+
max-width: 620px;
31+
margin: 0 auto;
32+
}
33+
34+
@media (max-width: 1060px) {
35+
.ch-static-toggle {
36+
display: none;
37+
}
38+
}
39+
40+
section:not(.ch-scrollycoding-static) .ch-code-buttons {
41+
display: none;
42+
}
43+
44+
section:not(.ch-scrollycoding-static) nav {
45+
position: absolute;
46+
height: 100%;
47+
top: min(calc(50% - 50vh), -4px);
48+
width: 0;
49+
}
50+
51+
section.ch-scrollycoding-static nav {
52+
position: absolute;
53+
transform: translateY(-80px);
54+
width: 0;
55+
}
56+
57+
table {
58+
margin: 0 -1rem;
59+
background: #0d1117;
60+
width: calc(100% + 2rem);
61+
padding: 0 1rem;
62+
}
63+
64+
.custom-mark {
65+
background: rgba(210, 168, 255, 0.2) !important;
66+
}
67+
68+
/* code hike */
69+
70+
.ch-scrollycoding {
71+
flex-direction: row-reverse;
72+
margin: 0;
73+
--ch-scrollycoding-sticker-width: 550px;
74+
--ch-scrollycoding-code-min-height: 100vh;
75+
}
76+
77+
.ch-scrollycoding-static .ch-codeblock {
78+
box-shadow: 0 0 0 1px #fff1;
79+
}
80+
81+
.ch-code-scroll-parent {
82+
line-height: 20px;
83+
}
84+
85+
.ch-scrollycoding-step-content {
86+
position: relative;
87+
padding: 1rem 1rem;
88+
background: #0d1117;
89+
margin-bottom: 1rem;
90+
opacity: 0.65;
91+
-webkit-transition: background-color 400ms ease-in-out;
92+
-ms-transition: background-color 400ms ease-in-out;
93+
transition: background-color 400ms ease-in-out;
94+
}
95+
.ch-scrollycoding-step-content[data-selected='true'] {
96+
border: 1px solid #fff1;
97+
background: #161b22;
98+
opacity: 1;
99+
}
100+
101+
.ch-code-inline-link {
102+
text-decoration-style: dashed;
103+
text-decoration-color: #ff9bce;
104+
text-underline-offset: 3px;
105+
text-decoration-thickness: 1px;
106+
}
107+
108+
.ch-code-inline-link:hover * {
109+
color: #ffcee7 !important;
110+
}
111+
112+
.ch-scrollycoding-step-content:first-child {
113+
margin-top: max(calc(50vh - 247px), 1rem);
114+
}
115+
.ch-scrollycoding-step-content:last-child {
116+
margin-bottom: max(calc(50vh - 110px), 1rem);
117+
}
118+
119+
.ch-scrollycoding-content {
120+
padding-left: 1rem;
121+
min-width: 0;
122+
}
123+
.ch-scrollycoding-content .ch-codeblock {
124+
border-radius: 0;
125+
margin: 0 -1rem;
126+
}
127+
.ch-scrollycoding-sticker {
128+
top: 0;
129+
max-height: 100vh;
130+
}
131+
132+
.ch-codeblock,
133+
.ch-codegroup,
134+
.ch-preview {
135+
box-shadow: none;
136+
}
137+
138+
.ch-slideshow-slide {
139+
aspect-ratio: unset;
140+
}
141+
.ch-slideshow-notes {
142+
border: none;
143+
margin-top: 0 !important;
144+
padding-right: 0 !important;
145+
padding-left: 0 !important;
146+
}
147+
.ch-slideshow-note {
148+
display: none;
149+
}
150+
151+
.break-all .ch-inline-code > code > * {
152+
word-break: break-all;
153+
}

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@
1616
"@mdx-js/loader": "^3.0.1",
1717
"@mdx-js/react": "^3.0.1",
1818
"@next/mdx": "^14.1.3",
19+
"localforage": "^1.10.0",
20+
"match-sorter": "^6.3.4",
1921
"next": "^14.1.3",
2022
"react": "^18.2.0",
21-
"react-dom": "^18.2.0"
23+
"react-dom": "^18.2.0",
24+
"react-router-dom": "^6.22.3",
25+
"sort-by": "^1.2.0"
2226
}
2327
}

‎pages/_app.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import '@code-hike/mdx/dist/index.css'
2+
import '../global.css'
23

34
function App({ Component, pageProps }) {
45
return <Component {...pageProps} />

0 commit comments

Comments
 (0)