Skip to content

Commit 652f3db

Browse files
pomberpomber
authored
Merge pull request #274 from code-hike/next
v0.7.4
2 parents 0d599ae + 69fa122 commit 652f3db

Some content is hidden

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

60 files changed

+5742
-6242
lines changed

‎examples/gatsby/.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules/
2+
.cache/
3+
public
4+
5+
6+
# Contentlayer
7+
.contentlayer

‎examples/gatsby/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Gatsby + Code Hike
2+
3+
See [this guide](https://codehike.org/docs/installation/gatsby) or try it on [CodeSandbox](https://codesandbox.io/s/github/code-hike/codehike/tree/main/examples/gatsby).
4+
5+
Gatsby + MDX docs: https://www.gatsbyjs.com/docs/how-to/routing/mdx/

‎examples/gatsby/gatsby-browser.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "@code-hike/mdx/styles.css"

‎examples/gatsby/gatsby-config.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const { remarkCodeHike } = require("@code-hike/mdx")
2+
const theme = require("shiki/themes/nord.json")
3+
4+
module.exports = {
5+
siteMetadata: {
6+
title: `codehike-gatsby`,
7+
},
8+
plugins: [
9+
{
10+
resolve: `gatsby-plugin-mdx`,
11+
options: {
12+
extensions: [`.mdx`, `.md`],
13+
mdxOptions: {
14+
remarkPlugins: [[remarkCodeHike, { theme }]],
15+
},
16+
},
17+
},
18+
{
19+
resolve: "gatsby-source-filesystem",
20+
options: {
21+
name: "pages",
22+
path: "./src/pages/",
23+
},
24+
__key: "pages",
25+
},
26+
],
27+
}

‎examples/gatsby/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "codehike-gatsby",
3+
"version": "0.7.3",
4+
"private": true,
5+
"scripts": {
6+
"develop": "gatsby develop",
7+
"start": "gatsby develop",
8+
"build": "gatsby build",
9+
"serve": "gatsby serve",
10+
"clean": "gatsby clean"
11+
},
12+
"dependencies": {
13+
"@code-hike/mdx": "^0.7.3",
14+
"@mdx-js/react": "^2.1.3",
15+
"gatsby": "^4.21.1",
16+
"gatsby-plugin-mdx": "^4.0.0",
17+
"gatsby-source-filesystem": "^4.21.1",
18+
"react": "^18.1.0",
19+
"react-dom": "^18.1.0"
20+
}
21+
}

‎examples/gatsby/src/pages/index.mdx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
slug: /index
3+
---
4+
5+
# Hello
6+
7+
Lorem ipsum dolor sit amet.
8+
9+
```python hello.py mark=1[22:30]
10+
print("Rendered with Code Hike")
11+
```
12+
13+
Lorem ipsum dolor sit amet.
14+
15+
See also [Scrollycoding page](/scrollycoding).

‎examples/gatsby/src/pages/scrollycoding.mdx

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

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

+19
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,22 @@ console.log(7)
6565
```
6666

6767
</CH.Code>
68+
69+
<CH.Code rows={[2, "focus"]} lineNumbers >
70+
71+
```js foo.js
72+
console.log(2)
73+
```
74+
75+
---
76+
77+
```js bar.js focus=3:4
78+
console.log(1)
79+
console.log(2)
80+
console.log(3)
81+
console.log(4)
82+
console.log(5)
83+
console.log(7)
84+
```
85+
86+
</CH.Code>

‎packages/mdx/src/mini-editor/editor-shift.tsx

+26-6
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,26 @@ type Snapshot = {
5656
southTabs: TabsSnapshot | null
5757
}
5858

59+
function northConfig(codeConfig: CodeConfig) {
60+
if (Array.isArray(codeConfig.rows)) {
61+
return {
62+
...codeConfig,
63+
rows: codeConfig.rows[0],
64+
}
65+
}
66+
return codeConfig
67+
}
68+
69+
function southConfig(codeConfig: CodeConfig) {
70+
if (Array.isArray(codeConfig.rows)) {
71+
return {
72+
...codeConfig,
73+
rows: codeConfig.rows[1],
74+
}
75+
}
76+
return codeConfig
77+
}
78+
5979
export function useTransition(
6080
ref: React.RefObject<HTMLDivElement>,
6181
prev: EditorStep,
@@ -119,7 +139,7 @@ export function useTransition(
119139
style: northStyle,
120140
children: (
121141
<CodeTransition
122-
codeConfig={codeConfig}
142+
codeConfig={northConfig(codeConfig)}
123143
prevFile={prevNorthFile}
124144
nextFile={nextNorthFile}
125145
t={t}
@@ -136,7 +156,7 @@ export function useTransition(
136156
style: southStyle!,
137157
children: (
138158
<CodeTransition
139-
codeConfig={codeConfig}
159+
codeConfig={southConfig(codeConfig)}
140160
prevFile={prevSouthFile!}
141161
nextFile={nextSouthFile!}
142162
t={t}
@@ -180,7 +200,7 @@ function startingPosition(
180200
},
181201
children: (
182202
<CodeTransition
183-
codeConfig={codeConfig}
203+
codeConfig={northConfig(codeConfig)}
184204
prevFile={prevNorthFile}
185205
nextFile={prevNorthFile}
186206
t={0}
@@ -201,7 +221,7 @@ function startingPosition(
201221
},
202222
children: (
203223
<CodeTransition
204-
codeConfig={codeConfig}
224+
codeConfig={southConfig(codeConfig)}
205225
prevFile={prevSouthFile!}
206226
nextFile={prevSouthFile!}
207227
t={0}
@@ -249,7 +269,7 @@ function endingPosition(
249269
},
250270
children: (
251271
<CodeTransition
252-
codeConfig={codeConfig}
272+
codeConfig={northConfig(codeConfig)}
253273
prevFile={nextNorthFile}
254274
nextFile={nextNorthFile}
255275
t={1}
@@ -270,7 +290,7 @@ function endingPosition(
270290
},
271291
children: (
272292
<CodeTransition
273-
codeConfig={codeConfig}
293+
codeConfig={southConfig(codeConfig)}
274294
prevFile={nextSouthFile!}
275295
nextFile={nextSouthFile!}
276296
t={1}

‎packages/mdx/src/smooth-code/code-tween.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export type CodeConfig = {
4848
showCopyButton?: boolean
4949
showExpandButton?: boolean
5050
staticMediaQuery?: string
51-
rows?: number | "focus"
51+
rows?: number | "focus" | (number | "focus")[]
5252
debug?: boolean
5353
}
5454

@@ -86,7 +86,7 @@ export function CodeTween({
8686
map(tween, tween => tween.focus),
8787
config.minColumns || DEFAULT_MIN_COLUMNS,
8888
config.lineNumbers || false,
89-
config.rows,
89+
config.rows as number | "focus",
9090
[config.parentHeight]
9191
)
9292

@@ -192,13 +192,16 @@ function Wrapper({
192192
}) {
193193
return (
194194
<div
195+
className="ch-code-wrapper"
195196
{...htmlProps}
196197
style={{
197198
margin: 0,
198199
padding: 0,
199200
position: "relative",
200201
// using this instead of <pre> because https://github.com/code-hike/codehike/issues/120
201202
whiteSpace: "pre",
203+
// to avoid resets using "border-box" that break the scrollbar https://github.com/code-hike/codehike/issues/240
204+
boxSizing: "content-box",
202205
...style,
203206
...htmlProps?.style,
204207
}}

‎packages/mdx/src/smooth-code/splitter.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,17 @@ export function splitByFocus(
8989
>
9090
): FocusedCode {
9191
const { lines, ...mergedCodeRest } = mergedCode
92-
const focusByLineNumber = map(focus, focus =>
93-
mapFocusToLineNumbers(focus, lines)
94-
)
92+
93+
const focusByLineNumber = map(focus, (focus, key) => {
94+
// we need to filter the lines that don't belong to the step
95+
// for the case where focus == ""
96+
const stepLines =
97+
key === "prev"
98+
? lines.filter(l => l.move !== "enter")
99+
: lines.filter(l => l.move !== "exit")
100+
101+
return mapFocusToLineNumbers(focus, stepLines)
102+
})
95103

96104
const splittedLines = lines.map(line => {
97105
const { tokens, ...rest } = line

‎packages/storybook/public/codehike.png

-35 KB
Binary file not shown.

‎packages/storybook/public/favicon-16x16.png

-1.18 KB
Binary file not shown.

‎packages/storybook/public/favicon-32x32.png

-2.6 KB
Binary file not shown.

‎packages/storybook/public/favicon-96x96.png

-7.54 KB
Binary file not shown.

‎packages/storybook/public/favicon.ico

-1.12 KB
Binary file not shown.

‎packages/storybook/public/logo.png

-17.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)