MDX files are not parsed correctly

[alamenai]

Hi everyone,

I started using content layer for my side project and I'm struggling to solve that issue of parsing my mdx files correctly.

I have this content structure

content
           |---chapters
                             |----chapter-01.mdx
                             |----chapter-02.mdx
          |---introduction.mdx

chapter-01.mdx

-------
title: Chapter 01
type: Chapter
date: 2021-12-24
---

# Chapter 01

import { Button } from "@/components/ui/button.tsx"

<Button >Click</Button>

Contentlayer.config.ts

import { defineDocumentType, makeSource } from "contentlayer/source-files"
import remarkGfm from "remark-gfm"

export const Chapter = defineDocumentType(() => ({
  name: "Chapter",
  filePathPattern: `chapters/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: { type: "string", required: true },
    date: { type: "date", required: true },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (chapter) => {
        return `/chapters/${chapter._raw.flattenedPath.split("/").pop()}`
      },
    },
  },
}))

export const Introduction = defineDocumentType(() => ({
  name: "Introduction",
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: { type: "string", required: true },
    date: { type: "date", required: true },
  },
  computedFields: {
    url: {
      type: "string",
      resolve: (introduction) => {
        console.log(introduction._raw.flattenedPath) // Debugging
        return `/introduction/${introduction._raw.flattenedPath
          .split("/")
          .pop()}`
      },
    },
  },
}))

export default makeSource({
  contentDirPath: "content",
  documentTypes: [Chapter, Introduction],
  mdx: {
    remarkPlugins: [remarkGfm],
  },
})

Pages structrures

Chapter page

import { allChapters } from 'contentlayer/generated';
import { useMDXComponent } from 'next-contentlayer/hooks';
import { notFound } from 'next/navigation';

export async function generateStaticParams() {
  return allChapters.map((chapter) => ({
    slug: chapter._raw.flattenedPath.split("/").pop(),
  }));
}

const getChapter = (slug: string) => {
  return allChapters.find((chapter) => chapter._raw.flattenedPath.split("/").pop() === slug);
};

const ChapterPage = async ({ params }: { params: { slug: string } }) => {
  const chapter = getChapter(params.slug);
  if (!chapter) notFound();

  const Component = useMDXComponent(chapter.body.code);
  
  return (
    <div>
      <Component />
    </div>
  );
};

export default ChapterPage;

Current

Expected

I expect the title Chapter 01 to be bold and large because it starts with #.

[Zer0xxxx]

Is "Chapter 01" surrounded by the <h1> tag in your DOM?

[alamenai]

I figured out that I have to create independent mdx.css for styling them.

[Zer0xxxx]

I figured out that I have to create independent mdx.css for styling them.

You can also give a look to https://github.com/shadcn-ui/taxonomy

• https://github.com/shadcn-ui/taxonomy/blob/main/components/mdx-components.tsx

[alamenai]

Thank you @Zer0xxxx , yes I guess this what I want exactly.

[Zer0xxxx]

Thank you @Zer0xxxx , yes I guess this what I want exactly.

I don't know if it is exactly what you want, but happy to feel helpful! 🧡

[Zer0xxxx]

@alamenai You could also give a look to this, which is also inspired from Taxonomy: https://www.youtube.com/watch?v=YC6LqIYVHxI

This might be helpful to you as well ~

[gustaveWPM]

Hi there!
I thought you might like to have a look at the repo I've been working on to get a ridiculously over-engineered codebase.

• https://github.com/Tirraa/dashboard_rtm

I did it mainly to progress in programming. Not everything in this project is perfect. I still have major performance problems in some places, and my breadcrumbs generated on the client side were actually a very bad idea. It is flexible but should be static and well-defined instead to properly be rendered on server-side and stop to be a performance footgun.

(It increases the bundle size considerably and I suspect my performance problems are largely related to that, so it'll be one of the first things I change when I get a moment).

I don't have much time at the moment to improve this repo as we've been working with @Zer0xxxx on other projects atm. You can still try to get inspired by it and see if there's anything that interests you in this mountain of complexity. Don't be afraid to cherry-pick a bit if that helps.