Assembling Fumadocs version 13

[donghhan]

Code reproduction: Stackblitz

I am trying to configure codehike with Fumadocs version 13. On the page of /docs, I created new code block example called borderHandler just for testing and configured into my Code.

export async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-from-css");

  return (
    <Pre
      code={highlighted}
      handlers={[borderHandler, bgHandler]}
      className="border bg-card"
    />
  );
}

const borderHandler: AnnotationHandler = {
  name: "border",
  Block: ({ annotation, children }) => {
    const borderColor = annotation.query || "red";
    return <div style={{ border: "1px solid", borderColor }}>{children}</div>;
  },
};

However, effect does not work as below image.

Any idea?

[pomber]

look that fumadocs changed how to set up mdx in the latest release

you now have to

• define the remark plugins in source.config.ts (instead of next.config.mjs)
• pass the custom components in your page (app/docs/[[slug]]/page.tsx), not sure why mdx-components.tsx is ignored

// source.config.ts
import { defineDocs, defineConfig } from "fumadocs-mdx/config";
import { remarkCodeHike, recmaCodeHike } from "codehike/mdx";

export const { docs, meta } = defineDocs();

/** @type {import('codehike/mdx').CodeHikeConfig} */
const chConfig = {
  components: { code: "Code" },
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [[remarkCodeHike, chConfig]],
    recmaPlugins: [[recmaCodeHike, chConfig]],
    jsx: true,
  },
});

// app/docs/[[slug]]/page.tsx

import { Code } from "@/components/code";

...
<MDX components={{ ...defaultMdxComponents, Code }} />

[donghhan]

@pomber
Actually there seems to be another problem while I use <Scrollycoding /> custom component. I don't know why but at this point I cannot access to Stackblitz as well as Vercel, so I am just pasting my code here. It seems my <Scrollycoding /> code cannot read MDX component contents

Error that I got:

Error: at root
Error for `steps`: Required
{
  "expected": "array",
  "received": "undefined"
}

Custom <Scrollycoding /> component

// src/components/scrollycoding.tsx

import { z } from "zod";
import {
  Selection,
  Selectable,
  SelectionProvider,
} from "codehike/utils/selection";
import { Block, CodeBlock, parseProps } from "codehike/blocks";
import { Pre, RawCode, highlight } from "codehike/code";

import { tokenTransitions } from "@/components/annotations/token-transitions";
import { wordWrap } from "./annotations/word-wrap";

const Schema = Block.extend({
  steps: z.array(Block.extend({ code: CodeBlock })),
});

export function Scrollycoding(props: unknown) {
  const { steps } = parseProps(props, Schema);
  return (
    <SelectionProvider className="flex gap-4">
      <div className="flex-1 mt-32 mb-[90vh] ml-2 prose">
        {steps.map((step, i) => (
          <Selectable
            key={i}
            index={i}
            selectOn={["click", "scroll"]}
            className="border-l-4 data-[selected=true]:border-blue-400 px-5 py-2 mb-24 rounded bg-card"
          >
            <h2 className="mt-4 text-xl">{step.title}</h2>
            <div>{step.children}</div>
          </Selectable>
        ))}
      </div>
      <div className="w-[40vw] max-w-xl bg-card">
        <div className="top-16 sticky overflow-auto">
          <Selection
            from={steps.map((step) => (
              <Code codeblock={step.code} />
            ))}
          />
        </div>
      </div>
    </SelectionProvider>
  );
}

export async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-from-css");
  return (
    <Pre
      code={highlighted}
      handlers={[tokenTransitions, wordWrap]}
      className="min-h-[40rem]"
    />
  );
}

MDX file that I tried to attach

import { Scrollycoding } from "@/components/scrollycoding";

<Scrollycoding>

###!!hi

``ts // Forget about code block format. I do know I need to use ``` here but just for formatting.
const a = 1;
``

###!!hello

``ts
const b = 1;
``

</Scrollycoding>

Just in case, I also exported Code in scollycoding.tsx file and pass it to the page.tsx inside of src/app/docs/[[...slug]]/page.tsx route.

import { Code as ScrollycodingCode } from "@/components/scrollycoding";

export default async function Page({
  params,
}: {
  params: { slug?: string[] };
}) {
  // ... omitted

  return (
      // ...
      <DocsBody>
        <MDX
          components={{
            ...defaultMdxComponents,
            Code,
            ScrollycodingCode,
          }}
        />
      </DocsBody>
    </DocsPage>
  );
}

[pomber]

the error means that the parseProps expects the blocks with !!steps decoration:

<Scrollycoding>

### !!steps hi

foo

### !!steps xx

xx

</Scrollycoding>

[donghhan]

@pomber

Still it was no help even while I am doing like this

<Scrollycoding>

### !!steps Hi

``ts // Again, ignore syntax for markdown codeblock. 
const a = 1;
``

### !!steps Hello

``ts
const b = 1;
``

</Scrollycoding>

However when I added the file name as your documentation advised. It seems to be work.

<Scrollycoding>

### !!steps Hi

``ts ! example.ts
const a = 1;
``

### !!steps Hello

``ts ! example.ts
const b = 1;
``

</Scrollycoding>

Which is kinda weird. Do we even need to specify the random file name everytime we adapt Scrollycoding?

Also, as we need to put !!steps syntax to alert that is section breakpoint, my menu is showing the redundant !!steps in front of the menu as picture below:

Will there be any hacks to avoid this?

[pomber]

you don't need the filename, try reading the docs on blocks

[donghhan]

@pomber Finally StackBlitz is on. Here is my Stackblitz reproduction code.

In the line of 162 in jwt-authentication.mdx in content/docs/jwt-authentication.mdx has a problem. I will not commit any new changes just for debugging.

Your documentation on blocks is just explaining about syntax of using blocks in mdx files, not configuring how to do so in actual component code. Maybe your "Components blocks" could help resolve issue on this, which is unfortunately not ready yet.

[pomber]

Don't worry about "Component blocks" that's a different thing.

If the docs aren't enough maybe you can try putting the markdown from the docs inside your Scrollycoding component and console logging it to understand how the markdown is transformed to props.