code-hike · pomber · May 19, 2022 · May 10, 2022 · May 14, 2022 · May 14, 2022
diff --git a/examples/contentlayer/README.md b/examples/contentlayer/README.md
@@ -1,3 +1,3 @@
 # Next.js + Contentlayer + Code Hike
 
-See [this guide](https://codehike.org/docs/installation/contentlayer).
+See [this guide](https://codehike.org/docs/installation/contentlayer) or try it on [Stackblitz](https://stackblitz.com/github/code-hike/codehike/tree/main/examples/contentlayer).
diff --git a/examples/contentlayer/posts/one.mdx b/examples/contentlayer/posts/one.mdx
@@ -0,0 +1,10 @@
+---
+title: Post one
+---
+
+This is the first post.
+
+```python hello.py
+# mark[16:24]
+print("This is Code Hike")
+```
diff --git a/examples/contentlayer/posts/post-one.mdx b/examples/contentlayer/posts/post-one.mdx
diff --git a/examples/contentlayer/posts/post-two.mdx b/examples/contentlayer/posts/post-two.mdx
diff --git a/examples/contentlayer/posts/two.mdx b/examples/contentlayer/posts/two.mdx
@@ -0,0 +1,9 @@
+---
+title: Post two
+---
+
+This is the second post.
+
+```js foo.js
+const x = 2
+```
diff --git a/packages/mdx/dev/content/expand.mdx b/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>
diff --git a/packages/mdx/dev/content/scrollycoding.mdx b/packages/mdx/dev/content/scrollycoding.mdx
@@ -6,17 +6,11 @@ Start by installing next and react on an empty directory:
 npm install next react react-dom
 ```
 
-<CH.Section>
-
-Then also install the [mdx plugin for next](focus://1[13:21]), the [mdx loader](focus://1[23:36]), and [Code Hike](focus://1[38:56]).
-
-```bash
-npm install @next/mdx @mdx-js/loader @code-hike/mdx@next
-```
+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.Section>
+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.
 
-<div style={{ height: "0.5em" }} />
+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>
 
@@ -28,6 +22,8 @@ Also, make sure you include `"md"` and `"mdx"` on the _`pageExtensions`_ setting
 
 After this step, you can use MDX files in your project, but you can't use Code Hike yet.
 
+<CH.Code>
+
 {/* prettier-ignore */}
 ```js next.config.js
 const withMDX = require("@next/mdx")({
@@ -45,6 +41,29 @@ module.exports = withMDX({
 })
 ```
 
+```js foo.js
+
+```
+
+```js barbarbar.js
+
+```
+
+```js bax.js
+
+```
+
+---
+
+```css index.css
+.scrollycoding {
+  overflow: auto;
+  max-height: calc(100vh - 100px);
+}
+```
+
+</CH.Code>
+
 ---
 
 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.
@@ -81,6 +100,8 @@ Then you need to create a `pages/_app.js` file if you don't have one.
 
 You can find more information about the `_app.js` file in the [Next.js official docs](https://nextjs.org/docs/advanced-features/custom-app).
 
+<CH.Code show={["pages/_app.js"]}>
+
 {/* prettier-ignore */}
 ```js pages/_app.js
 function MyApp({ Component, pageProps }) {
@@ -90,6 +111,8 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+</CH.Code>
+
 ---
 
 The pages/\_app.js file is where you add global stylesheets in Next.js.
@@ -98,8 +121,14 @@ Here we need to import Code Hike's CSS.
 
 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.
 
+<CH.Code show={["next.config.js", "pages/_app.js"]}>
+
+```js next.config.js
+
+```
+
 {/* prettier-ignore */}
-```js pages/_app.js focus=1
+```js pages/_app.js focus=1 active
 import "@code-hike/mdx/dist/index.css"
 
 function MyApp({ Component, pageProps }) {
@@ -109,12 +138,16 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+</CH.Code>
+
 ---
 
 Now you can create mdx files using codehike.
 
 Markdown (.md) files should also work.
 
+<CH.Code show={["next.config.js","pages/my.mdx"]}>
+
 {/* prettier-ignore */}
 ~~~md pages/my.mdx
 # Hello
@@ -128,8 +161,16 @@ print("Rendered with Code Hike")
 Lorem ipsum dolor sit amet.
 ~~~
 
+</CH.Code>
+
 </CH.Scrollycoding>
 
 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.
+
 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.
+
+<div style={{ height: "8em" }} />
diff --git a/packages/mdx/dev/content/section.mdx b/packages/mdx/dev/content/section.mdx
@@ -4,8 +4,8 @@ Lorem ipsum dolor sit amet.
 
 <CH.Section>
 
-Consectetur adipiscing elit, sed do eiusmod tempor [incididunt](focus://4:7) ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
-_`orem`_, _`sum`_
+Consectetur adipiscing elit, sed do eiusmod tempor [incididunt](focus://4:7) ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. _`rem(ipsum, dol`_ xxx
+_`orem`_, xxx _`sum`_
 
 ```js
 function lorem(ipsum, dolor) {
@@ -49,3 +49,26 @@ function lorem(ipsum, dolor) {
 _`ackground-color: va`_
 
 </CH.Section>
+
+## Issue #117
+
+<CH.Section>
+
+{/* prettier-ignore */}
+```js 
+const PostLayout = ({ post }) => {
+  const MDXContent = useMDXComponent(
+    post.body.code
+  )
+  return (
+    <article style={{ width: 600 }}>
+      <h1>{post.title}</h1>
+      <MDXContent />
+    </article>
+  )
+}
+```
+
+It transforms the _`post.body.code`_ into a React component.
+
+</CH.Section>
diff --git a/packages/mdx/dev/files.ts b/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() {

diff --git a/packages/mdx/package.json b/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",