Skip to content

Commit fd9c291

Browse files
pomberpomber
authoredAug 8, 2022
Merge pull request #263 from code-hike/next
v0.7.3
2 parents f8d2164 + e3e0771 commit fd9c291

27 files changed

+1802
-271
lines changed
 

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules
2+
.DS_Store
23
.next
34
todo.md
45
current.md
@@ -10,6 +11,7 @@ yarn-error.log
1011
storybook-static
1112
packages/playground/out
1213
packages/starter
14+
packages/mdx/components.d.ts
1315

1416
# Contentlayer
1517
.contentlayer

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.14

‎examples/docusaurus/docs/intro.md

+2
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ print("Rendered with Code Hike")
1212
```
1313

1414
Lorem ipsum dolor sit amet.
15+
16+
See also [Scrollycoding page](scrollycoding).

‎examples/docusaurus/docs/scrollycoding.mdx

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Scrollycoding
2+
3+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
4+
5+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
6+
7+
<CH.Scrollycoding>
8+
9+
## Step 1
10+
11+
Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
12+
13+
> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
14+
> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
15+
> eripuit, qua fistula haec partus; serpens, negat.
16+
17+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
18+
19+
```js app.js focus=3:10
20+
const { lorem, ipsum } = dolor({
21+
sit: {
22+
amet: 1,
23+
consectetur: 2,
24+
adipiscing: (elit) => ({
25+
sed: elit,
26+
}),
27+
eiusmod: (tempor) => ({
28+
incididunt: tempor,
29+
}),
30+
ut: (labore) => ({
31+
et: labore,
32+
dolore: labore + 1,
33+
}),
34+
magna: (aliqua) => ({
35+
ut: aliqua,
36+
}),
37+
nostrud: (elit) => ({
38+
exercitation: elit,
39+
ullamco: elit,
40+
}),
41+
laboris: (elit) => ({
42+
nisi: elit,
43+
}),
44+
},
45+
})
46+
```
47+
48+
---
49+
50+
## Step 2
51+
52+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
53+
54+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
55+
56+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
57+
58+
Morbi quis commodo.
59+
60+
```js app.js focus=11:17
61+
62+
```
63+
64+
---
65+
66+
## Step 3
67+
68+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
69+
70+
- Nisi lacus sed viverra tellus in
71+
- Nibh cras pulvinar mattis nunc sed
72+
- Luctus accumsan tortor posuere ac
73+
74+
Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
75+
76+
```js app.js focus=11:14
77+
const { lorem, ipsum } = dolor({
78+
sit: {
79+
amet: 1,
80+
consectetur: 2,
81+
adipiscing: (elit) => ({
82+
sed: elit,
83+
}),
84+
eiusmod: (tempor) => ({
85+
incididunt: tempor,
86+
}),
87+
ut: (labore) => ({
88+
et: lorem(labore * ipsum),
89+
dolore: lorem(labore + 1),
90+
}),
91+
nostrud: (elit) => ({
92+
exercitation: elit,
93+
ullamco: elit,
94+
}),
95+
laboris: (elit) => ({
96+
nisi: elit,
97+
}),
98+
},
99+
})
100+
```
101+
102+
---
103+
104+
## Step 4
105+
106+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
107+
108+
Sed blandit libero volutpat sed cras.
109+
110+
- Nisi lacus sed viverra tellus in
111+
- Nibh cras pulvinar mattis nunc sed
112+
113+
Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
114+
115+
```js app.js focus=15:21
116+
117+
```
118+
119+
---
120+
121+
## Step 5
122+
123+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
124+
125+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
126+
127+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
128+
129+
Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
130+
131+
- Fringilla ut morbi tincidunt augue interdum velit euismod.
132+
- Luctus accumsan tortor posuere ac ut consequat semper viverra.
133+
134+
Morbi quis commodo.
135+
136+
```js app.js
137+
138+
```
139+
140+
</CH.Scrollycoding>
141+
142+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
143+
144+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

‎examples/docusaurus/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
},
1616
"dependencies": {
1717
"@code-hike/mdx": "^0.7.2",
18-
"@docusaurus/core": "2.0.0-rc.1",
19-
"@docusaurus/preset-classic": "2.0.0-rc.1",
18+
"@docusaurus/core": "2.0.1",
19+
"@docusaurus/preset-classic": "2.0.1",
2020
"@mdx-js/react": "^2.1.1",
21-
"clsx": "^1.1.1",
21+
"clsx": "^1.2.1",
2222
"docusaurus-theme-mdx-v2": "^0.1.2",
23-
"prism-react-renderer": "^1.3.1",
23+
"prism-react-renderer": "^1.3.5",
2424
"react": "^17.0.2",
2525
"react-dom": "^17.0.2"
2626
},

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
"build:playground": "lerna run --stream --scope playground build",
1616
"test": "lerna run --stream test",
1717
"dev": "lerna run --stream --scope @*/mdx dev",
18-
"release": "auto shipit"
18+
"release": "auto shipit",
19+
"postinstall": "yarn build:lib"
1920
},
2021
"devDependencies": {
2122
"auto": "^10.18.7",

‎packages/mdx/dev/content/rows.mdx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<CH.Code rows={4} showCopyButton={false}>
2+
3+
```js
4+
console.log(2)
5+
```
6+
7+
</CH.Code>
8+
9+
<CH.Code rows={4} showCopyButton={false} lineNumbers >
10+
11+
```js
12+
console.log(1)
13+
console.log(2)
14+
console.log(3)
15+
console.log(4)
16+
console.log(5)
17+
console.log(6)
18+
console.log(7)
19+
```
20+
21+
</CH.Code>
22+
23+
<CH.Code rows="focus" showCopyButton={false} lineNumbers >
24+
25+
```js focus=3:4,6[1:11]
26+
console.log(1)
27+
console.log(2)
28+
console.log(3)
29+
console.log(4)
30+
console.log(5)
31+
console.log(6)
32+
console.log(7)
33+
```
34+
35+
</CH.Code>
36+
37+
<CH.Code rows={4} style={{width: 200 }} lineNumbers >
38+
39+
```js
40+
console.log(1)
41+
console.log(2)
42+
console.log(3)
43+
console.log(4)
44+
console.log(5)
45+
// focus
46+
console.log(600000)
47+
console.log(7)
48+
```
49+
50+
</CH.Code>
51+
52+
<CH.Code rows={6} lineNumbers >
53+
54+
```js foo.js
55+
console.log(1)
56+
```
57+
58+
```js bar.js
59+
console.log(1)
60+
console.log(2)
61+
console.log(3)
62+
console.log(4)
63+
console.log(5)
64+
console.log(7)
65+
```
66+
67+
</CH.Code>

‎packages/mdx/dev/content/slideshow-autofocus.mdx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# Slideshow with controls autofocus
2+
3+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
4+
5+
<CH.Slideshow preset="https://codesandbox.io/s/w5wfe" autoFocus={true}>
6+
7+
Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
8+
9+
```jsx src/App.js
10+
import { motion } from "framer-motion"
11+
12+
const transition = { duration: 1 }
13+
14+
export default function App() {
15+
const bg = "hsl(20, 100%, 50%)"
16+
return (
17+
<div className="container">
18+
<motion.div
19+
className="swatch"
20+
animate={{
21+
backgroundColor: bg,
22+
}}
23+
transition={transition}
24+
/>
25+
</div>
26+
)
27+
}
28+
```
29+
30+
---
31+
32+
## Step 2
33+
34+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
35+
36+
```jsx src/App.js focus=1,6,9:15
37+
import { motion } from "framer-motion"
38+
39+
const transition = { duration: 1 }
40+
41+
export default function App() {
42+
const bg = "hsl(110, 100%, 50%)"
43+
return (
44+
<div className="container">
45+
<motion.div
46+
className="swatch"
47+
animate={{
48+
backgroundColor: bg,
49+
}}
50+
transition={transition}
51+
/>
52+
</div>
53+
)
54+
}
55+
```
56+
57+
---
58+
59+
## Step 3
60+
61+
Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras.
62+
63+
```jsx src/App.js focus=1,6,9:15
64+
import { motion } from "framer-motion"
65+
66+
const transition = { duration: 1 }
67+
68+
export default function App() {
69+
const bg = "hsl(200, 100%, 50%)"
70+
return (
71+
<div className="container">
72+
<motion.div
73+
className="swatch"
74+
animate={{
75+
backgroundColor: bg,
76+
}}
77+
transition={transition}
78+
/>
79+
</div>
80+
)
81+
}
82+
```
83+
84+
---
85+
86+
## Step 4
87+
88+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
89+
90+
```jsx src/App.js focus=1,6,9:15
91+
import { motion } from "framer-motion"
92+
93+
const transition = { duration: 1 }
94+
95+
export default function App() {
96+
const bg = "hsl(290, 100%, 50%)"
97+
return (
98+
<div className="container">
99+
<motion.div
100+
className="swatch"
101+
animate={{
102+
backgroundColor: bg,
103+
}}
104+
transition={transition}
105+
/>
106+
</div>
107+
)
108+
}
109+
```
110+
111+
</CH.Slideshow>

0 commit comments

Comments
 (0)