Add show prop to CH.Code

Author: pomber

packages/mdx/dev/content/scrollycoding.mdx

@@ -6,17 +6,7 @@ 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
-```
-
-</CH.Section>
-
-<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 +18,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")({
@@ -47,6 +39,17 @@ module.exports = withMDX({
 
 ---
 
+```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.
 
 You will also want to import a theme. You can import one from shiki, or make a custom one.
@@ -81,6 +84,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 +95,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 +105,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 +122,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 +145,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" }} />

packages/mdx/src/remark/code-files-reducer.tsx

@@ -4,24 +4,41 @@ import { EditorStep, CodeFile } from "../mini-editor"
 
 export function reduceSteps(
   baseStep: EditorStep,
-  extraStep: EditorStep
+  extraStep: EditorStep,
+  filter?: string[]
 ): EditorStep {
   let files = reduceFiles(baseStep.files, extraStep.files)
 
+  const newNorthPanel = reducePanel(
+    baseStep.northPanel,
+    extraStep.northPanel,
+    extraStep.southPanel
+  )!
+
+  const newSouthPanel = reducePanel(
+    baseStep.southPanel,
+    extraStep.southPanel,
+    extraStep.northPanel
+  )
+
+  if (filter) {
+    newNorthPanel.tabs = newNorthPanel.tabs.filter(
+      filename => filter.includes(filename)
+    )
+
+    if (newSouthPanel) {
+      newNorthPanel.tabs = newNorthPanel.tabs.filter(
+        filename => filter.includes(filename)
+      )
+    }
+  }
+
   return {
     ...baseStep,
     ...extraStep,
     files: files,
-    northPanel: reducePanel(
-      baseStep.northPanel,
-      extraStep.northPanel,
-      extraStep.southPanel
-    )!,
-    southPanel: reducePanel(
-      baseStep.southPanel,
-      extraStep.southPanel,
-      extraStep.northPanel
-    ),
+    northPanel: newNorthPanel,
+    southPanel: newSouthPanel,
   }
 }
 

packages/mdx/src/remark/steps.tsx

@@ -35,6 +35,8 @@ export async function extractStepsInfo(
         config
       )
 
+      const filter = getFilterFromEditorNode(child)
+
       if (stepIndex === 0) {
         // for the header props, keep it as it is
         step.editorStep = editorStep
@@ -45,7 +47,11 @@ export async function extractStepsInfo(
             ? steps[0].editorStep
             : steps[stepIndex - 1].editorStep
 
-        step.editorStep = reduceSteps(baseStep, editorStep)
+        step.editorStep = reduceSteps(
+          baseStep,
+          editorStep,
+          filter
+        )
       }
     } else {
       step.children.push(child)
@@ -62,3 +68,18 @@ export async function extractStepsInfo(
 
   return steps.map(step => step.editorStep)
 }
+
+/**
+ * Extracts the `show` prop from <CH.Code show={["foo.js", "bar.html"]} />
+ */
+function getFilterFromEditorNode(node: any) {
+  const value = node.attributes?.find(
+    a => a.name === "show"
+  )?.value?.value
+
+  if (value) {
+    return JSON.parse(value)
+  } else {
+    return undefined
+  }
+}