Merge pull request #179 from code-hike/hide-tabs

Hide tabs

Author: pomber

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).

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")
+```

examples/contentlayer/posts/post-one.mdx

@@ -0,0 +1,9 @@
+---
+title: Post two
+---
+
+This is the second post.
+
+```js foo.js
+const x = 2
+```

examples/contentlayer/posts/post-two.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" }} />

examples/contentlayer/posts/two.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>

packages/mdx/dev/content/scrollycoding.mdx

@@ -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/dev/content/section.mdx

@@ -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
+  }
+}

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

@@ -138,6 +138,10 @@ function getExistingCode(
   return undefined
 }
 
+/**
+ * Slice a line of tokens from a given index to a given length
+ * Turns ("[abc][de][fgh]", 2, 4) into "[c][de][f]")
+ */
 function sliceTokens(
   line: Code["lines"][0],
   start: number,
@@ -148,44 +152,62 @@ function sliceTokens(
 
   let headTokens = [] as Code["lines"][0]["tokens"]
 
-  for (let i = 0; i < tokens.length; i++) {
+  // this for loop remove the unwanted prefix tokens and put the rest in headTokens
+  for (
+    let tokenIndex = 0;
+    tokenIndex < tokens.length;
+    tokenIndex++
+  ) {
     if (currentLength === start) {
-      headTokens = tokens.slice(i)
+      headTokens = tokens.slice(tokenIndex)
       break
     }
-    if (currentLength + tokens[i].content.length > start) {
+    if (
+      currentLength + tokens[tokenIndex].content.length >
+      start
+    ) {
       const newToken = {
-        ...tokens[i],
-        content: tokens[i].content.slice(
+        ...tokens[tokenIndex],
+        content: tokens[tokenIndex].content.slice(
           start - currentLength
         ),
       }
-      headTokens = [newToken].concat(tokens.slice(i + 1))
+      headTokens = [newToken].concat(
+        tokens.slice(tokenIndex + 1)
+      )
       break
     }
-    currentLength += tokens[i].content.length
+    currentLength += tokens[tokenIndex].content.length
   }
-
+  // headTokens is now "[c][de][fgh]" (from the example above)
   currentLength = 0
-  for (let i = 0; i < headTokens.length; i++) {
-    if (currentLength === length) {
-      return headTokens.slice(0, i)
+  // this for loop remove the unwanted suffix tokens from headTokens
+  for (
+    let headTokenIndex = 0;
+    headTokenIndex <= headTokens.length;
+    headTokenIndex++
+  ) {
+    if (currentLength >= length) {
+      return headTokens.slice(0, headTokenIndex)
     }
+    const currentToken = headTokens[headTokenIndex]
     if (
-      currentLength + headTokens[i].content.length >
+      currentLength + currentToken.content.length >
       length
     ) {
       const newToken = {
-        ...headTokens[i],
-        content: headTokens[i].content.slice(
+        ...currentToken,
+        content: currentToken.content.slice(
           0,
           length - currentLength
         ),
       }
 
-      return headTokens.slice(0, i).concat([newToken])
+      return headTokens
+        .slice(0, headTokenIndex)
+        .concat([newToken])
     }
-    currentLength += headTokens[i].content.length
+    currentLength += currentToken.content.length
   }
   return []
 }