Skip to content

Commit d4a88e6

Browse files
pomberpomber
authored
Merge pull request #223 from code-hike/static-scrollycoding
Static scrollycoding
2 parents a93193d + a764fa2 commit d4a88e6

15 files changed

+746
-58
lines changed

‎packages/mdx/dev/content/scrollycoding-preview-jsx.mdx

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
_Based on [Next.js official docs](https://nextjs.org/docs/advanced-features/using-mdx)._
2+
3+
Start by installing next and react on an empty directory:
4+
5+
```bash
6+
npm install next react react-dom
7+
```
8+
9+
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.
10+
11+
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.
12+
13+
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.
14+
15+
<CH.Scrollycoding>
16+
17+
### Step 1
18+
19+
Create a `next.config.js` file at the root of your project.
20+
21+
Here we use the [_`require("@next/mdx")`_](focus://1,6,8) plugin to set up MDX imports.
22+
23+
<CH.Preview>
24+
<div>Step 1</div>
25+
<div>Step 1</div>
26+
<div>Step 1</div>
27+
<div>Step 1</div>
28+
<div>Step 1</div>
29+
<div>Step 1</div>
30+
<div>Step 1</div>
31+
<div>Step 1</div>
32+
<div>Step 1</div>
33+
<div>Step 1</div>
34+
<div>Step 1</div>
35+
</CH.Preview>
36+
37+
Also, make sure you include `"md"` and `"mdx"` on the _`pageExtensions`_ setting.
38+
39+
After this step, you can use MDX files in your project, but you can't use Code Hike yet.
40+
41+
<CH.Code>
42+
43+
{/* prettier-ignore */}
44+
```js next.config.js
45+
const withMDX = require("@next/mdx")({
46+
extension: /\.mdx?$/,
47+
options: {
48+
remarkPlugins: [],
49+
},
50+
})
51+
52+
module.exports = withMDX({
53+
pageExtensions: [
54+
"ts", "tsx", "js",
55+
"jsx", "md", "mdx"
56+
],
57+
})
58+
```
59+
60+
```js foo.js
61+
const foo = 2
62+
```
63+
64+
```js barbarbar.js
65+
const bar = 3
66+
```
67+
68+
```js bax.js
69+
const vax = 3
70+
```
71+
72+
---
73+
74+
```css index.css
75+
.scrollycoding {
76+
overflow: auto;
77+
max-height: calc(100vh - 100px);
78+
}
79+
```
80+
81+
</CH.Code>
82+
83+
---
84+
85+
### Step 3
86+
87+
To set up Code Hike you need to [import the <CH.InlineCode>@code-hike/mdx</CH.InlineCode> plugin](focus://1,6[1:6]), and add it to the remarkPlugins array in the next.config.js file.
88+
89+
You will also want to import a theme. You can import one from shiki, or make a custom one.
90+
91+
Pass the theme into Code Hike's config object, there are a few more settings you can use, like lineNumbers for example.
92+
93+
---
94+
95+
### Step 4
96+
97+
Then you need to create a `pages/_app.js` file if you don't have one.
98+
99+
You can find more information about the `_app.js` file in the [Next.js official docs](https://nextjs.org/docs/advanced-features/custom-app).
100+
101+
<CH.Code show={["pages/_app.js"]}>
102+
103+
{/* prettier-ignore */}
104+
```js pages/_app.js
105+
function MyApp({ Component, pageProps }) {
106+
return <Component {...pageProps} />
107+
}
108+
109+
export default MyApp
110+
```
111+
112+
</CH.Code>
113+
114+
---
115+
116+
### Step 5
117+
118+
The pages/\_app.js file is where you add global stylesheets in Next.js.
119+
120+
Here we need to import Code Hike's CSS.
121+
122+
<CH.Preview>
123+
<div>Step 5</div>
124+
</CH.Preview>
125+
126+
If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
127+
128+
<CH.Code show={["next.config.js", "pages/_app.js"]}>
129+
130+
```js next.config.js
131+
132+
```
133+
134+
{/* prettier-ignore */}
135+
```js pages/_app.js focus=1 active
136+
import "@code-hike/mdx/dist/index.css"
137+
138+
function MyApp({ Component, pageProps }) {
139+
return <Component {...pageProps} />
140+
}
141+
142+
export default MyApp
143+
```
144+
145+
</CH.Code>
146+
147+
---
148+
149+
### Step 6
150+
151+
Now you can create mdx files using codehike.
152+
153+
Markdown (.md) files should also work.
154+
155+
<CH.Code show={["next.config.js","pages/my.mdx"]}>
156+
157+
{/* prettier-ignore */}
158+
~~~md pages/my.mdx
159+
# Hello
160+
161+
Lorem ipsum dolor sit amet.
162+
163+
```python hello.py
164+
print("Rendered with Code Hike")
165+
```
166+
167+
Lorem ipsum dolor sit amet.
168+
~~~
169+
170+
</CH.Code>
171+
172+
</CH.Scrollycoding>
173+
174+
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.
175+
176+
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.
177+
178+
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.
179+
180+
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.
181+
182+
<div style={{ height: "8em" }} />

‎packages/mdx/dev/content/scrollycoding-preview.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue q
4747

4848
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
4949

50+
<CH.Preview />
51+
5052
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.
5153

5254
Morbi quis commodo.

0 commit comments

Comments
 (0)