Expand button

packages/mdx/dev/content/expand.mdx

@@ -0,0 +1,41 @@
+<CH.Code>
+
+```json package.json
+{
+  "name": "package.json"
+}
+```
+
+```js pages/index.js
+function IndexPage() {
+  return 1
+}
+```
+
+```js pages/post/[slug].js
+function PostPage() {
+  return 1
+}
+```
+
+---
+
+```js pages/alpha.ts
+function AlphaPage() {
+  return 1
+}
+```
+
+```css src/styles.css
+.alpha {
+  color: red;
+}
+```
+
+```js src/comp.js
+function AlphaPage() {
+  return <div className="alpha">1</div>
+}
+```
+
+</CH.Code>

packages/mdx/dev/content/scrollycoding.mdx

@@ -8,6 +8,10 @@ npm install next react react-dom
 
 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.
 
+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.
+
+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.
+
 <CH.Scrollycoding>
 
 Create a `next.config.js` file at the root of your project.
@@ -37,6 +41,18 @@ module.exports = withMDX({
 })
 ```
 
+```js foo.js
+
+```
+
+```js barbarbar.js
+
+```
+
+```js bax.js
+
+```
+
 ---
 
 ```css index.css

packages/mdx/dev/files.ts

@@ -1,7 +1,7 @@
 import fs from "fs"
 import { remarkCodeHike } from "../src/index"
 import { compile } from "@mdx-js/mdx"
-import theme from "shiki/themes/github-light.json"
+import theme from "shiki/themes/nord.json"
 import { withDebugger } from "mdx-debugger"
 
 export async function getFiles() {

packages/mdx/package.json

@@ -57,7 +57,7 @@
     "@types/diff": "^5.0.2",
     "@types/node": "^17.0.21",
     "@types/node-fetch": "^2.6.1",
-    "@types/react": "^17.0.39",
+    "@types/react": "17.0.45",
     "autoprefixer": "^9.8.2",
     "click-to-react-component": "^1.0.8",
     "cssnano": "^4.1.10",