Skip to content

Commit 4660d37

Browse files
pomberpomber
committed
Add bundle-test
1 parent 3e82231 commit 4660d37

File tree

10 files changed

+298
-0
lines changed

10 files changed

+298
-0
lines changed

‎examples/bundle-test/.gitignore

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

‎examples/bundle-test/next.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const { remarkCodeHike } = require("@code-hike/mdx")
2+
const theme = require("shiki/themes/nord.json")
3+
4+
const withMDX = require("@next/mdx")({
5+
extension: /\.mdx?$/,
6+
options: {
7+
remarkPlugins: [[remarkCodeHike, { theme }]],
8+
},
9+
})
10+
11+
module.exports = withMDX({
12+
pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
13+
})

‎examples/bundle-test/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "bundle-test",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"build": "next build"
7+
},
8+
"dependencies": {
9+
"@code-hike/mdx": "^0.3.0",
10+
"@mdx-js/loader": "^2.0.0",
11+
"@next/mdx": "^12.1.0",
12+
"next": "^12.1.0",
13+
"react": "^17.0.2",
14+
"react-dom": "^17.0.2"
15+
},
16+
"nextBundleAnalysis": {
17+
"budget": 358400,
18+
"budgetPercentIncreaseRed": 20,
19+
"showDetails": true
20+
}
21+
}

‎examples/bundle-test/pages/_app.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import "@code-hike/mdx/styles"
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />
5+
}
6+
7+
export default MyApp

‎examples/bundle-test/pages/js-page.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Page() {
2+
return (
3+
<div>
4+
<h1>Hello</h1>
5+
Lorem ipsum dolor sit amet.
6+
</div>
7+
)
8+
}

‎examples/bundle-test/pages/just-code.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Hello world
2+
3+
```js focus=2,4[10:13]
4+
function lorem(ipsum, dolor = 1) {
5+
const sit = ipsum == null ? 0 : ipsum.sit
6+
dolor = sit - amet(dolor)
7+
return sit ? consectetur(ipsum) : []
8+
}
9+
```

‎examples/bundle-test/pages/no-ch-mdx.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Hello
2+
3+
Lorem ipsum dolor sit amet.

‎examples/bundle-test/pages/scrollycoding-preview.mdx

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# Scrollycoding with preview
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 preset="https://codesandbox.io/s/w5wfe">
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+
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
18+
19+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
20+
21+
```jsx src/App.js
22+
import { motion } from "framer-motion"
23+
24+
export default function App() {
25+
const bg = "hsl(20, 100%, 50%)"
26+
return (
27+
<motion.div
28+
className="swatch"
29+
animate={{ backgroundColor: bg }}
30+
transition={{ duration: 1 }}
31+
/>
32+
)
33+
}
34+
```
35+
36+
---
37+
38+
## Step 2
39+
40+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
41+
42+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
43+
44+
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.
45+
46+
Morbi quis commodo.
47+
48+
```jsx src/App.js focus=1,4,6:10
49+
import { motion } from "framer-motion"
50+
51+
export default function App() {
52+
const bg = "hsl(110, 100%, 50%)"
53+
return (
54+
<motion.div
55+
className="swatch"
56+
animate={{ backgroundColor: bg }}
57+
transition={{ duration: 1 }}
58+
/>
59+
)
60+
}
61+
```
62+
63+
---
64+
65+
## Step 3
66+
67+
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.
68+
69+
- Nisi lacus sed viverra tellus in
70+
- Nibh cras pulvinar mattis nunc sed
71+
- Luctus accumsan tortor posuere ac
72+
73+
Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
74+
75+
```jsx src/App.js focus=1,4,6:10
76+
import { motion } from "framer-motion"
77+
78+
export default function App() {
79+
const bg = "hsl(200, 100%, 50%)"
80+
return (
81+
<motion.div
82+
className="swatch"
83+
animate={{ backgroundColor: bg }}
84+
transition={{ duration: 1 }}
85+
/>
86+
)
87+
}
88+
```
89+
90+
---
91+
92+
## Step 4
93+
94+
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.
95+
96+
Sed blandit libero volutpat sed cras.
97+
98+
- Nisi lacus sed viverra tellus in
99+
- Nibh cras pulvinar mattis nunc sed
100+
101+
Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
102+
103+
```jsx src/App.js focus=1,4,6:10
104+
import { motion } from "framer-motion"
105+
106+
export default function App() {
107+
const bg = "hsl(290, 100%, 50%)"
108+
return (
109+
<motion.div
110+
className="swatch"
111+
animate={{ backgroundColor: bg }}
112+
transition={{ duration: 1 }}
113+
/>
114+
)
115+
}
116+
```
117+
118+
---
119+
120+
## Step 5
121+
122+
Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
123+
124+
Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
125+
126+
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.
127+
128+
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.
129+
130+
- Fringilla ut morbi tincidunt augue interdum velit euismod.
131+
- Luctus accumsan tortor posuere ac ut consequat semper viverra.
132+
133+
Morbi quis commodo.
134+
135+
```jsx src/App.js focus=1,4,6:10
136+
import { motion } from "framer-motion"
137+
138+
export default function App() {
139+
const bg = "hsl(10, 100%, 50%)"
140+
return (
141+
<motion.div
142+
className="swatch"
143+
animate={{ backgroundColor: bg }}
144+
transition={{ duration: 1 }}
145+
/>
146+
)
147+
}
148+
```
149+
150+
</CH.Scrollycoding>
151+
152+
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.
153+
154+
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/bundle-test/pages/spotlight.mdx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Spotlight
2+
3+
This is how to use the `<CH.Spotlight>` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
4+
5+
<CH.Spotlight>
6+
7+
```js app.js
8+
function lorem(ipsum, dolor = 1) {
9+
const sit = ipsum == null && 0
10+
dolor = sit - amet(dolor)
11+
return sit ? consectetur(ipsum) : []
12+
}
13+
```
14+
15+
---
16+
17+
Change focus
18+
19+
```js app.js focus=2:4
20+
21+
```
22+
23+
---
24+
25+
Or change the code
26+
27+
```js app.js focus=6:10
28+
function lorem(ipsum, dolor = 1) {
29+
const sit = ipsum == null && 0
30+
dolor = sit - amet(dolor)
31+
return sit ? consectetur(ipsum) : []
32+
}
33+
34+
function adipiscing(...elit) {
35+
console.log(elit)
36+
return elit.map((ipsum) => ipsum.sit)
37+
}
38+
```
39+
40+
---
41+
42+
Or change the file
43+
44+
<CH.Code>
45+
46+
```js app.js focus=1:4
47+
function adipiscing(...elit) {
48+
console.log(elit)
49+
return elit.map((ipsum) => ipsum.sit)
50+
}
51+
```
52+
53+
---
54+
55+
```css styles.css
56+
.lorem {
57+
color: #fff;
58+
padding: 10px;
59+
background: #000;
60+
}
61+
```
62+
63+
</CH.Code>
64+
65+
---
66+
67+
### By the way
68+
69+
- you can
70+
- put any
71+
- markdown
72+
- here
73+
74+
👍
75+
76+
```js app.js
77+
78+
```
79+
80+
</CH.Spotlight>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
},
1010
"scripts": {
1111
"build": "lerna run --stream build",
12+
"build:lib": "lerna run --stream --scope @*/mdx build",
1213
"test": "lerna run --stream test",
1314
"dev": "lerna run --stream --scope @*/mdx dev",
1415
"storybook": "lerna run --scope storybook start --stream",

0 commit comments

Comments
 (0)