🫢Sử dụng contentlayer, ngôn ngữ mdx xây dựng 1 blog

https://github.com/UsmanHaider15/Knowledge-Base-Nextjs-13

Part 1

app\page.tsx

import Image from "next/image";
import Link from "next/link";
const categories = [
  {
    label: "Getting Started",
    slug: "posts/getting-started/pagination/1",
    description: "Learn how to get started with Next.js",
    image_url: "/icon-getting-started.png",
  },
  {
    label: "Integrations",
    slug: "posts/integrations/pagination/2",
    description: "Link Mind Map Pro to WordPress and Slack",
    image_url: "/icon-integration.png",
  },
  {
    label: "Tool Guides",
    slug: "posts/technical/pagination/3",
    description: "How to streamline workflow with integrated tools",
    image_url: "/icon-tools.png",
  },
  {
    label: "Task Management Guide",
    slug: "posts/getting-started/pagination/4",
    description: "Learn to stay on track and enhance productivity",
    image_url: "/icon-task.png",
  },
  {
    label: "Team Guides",
    slug: "posts/integrations/pagination/1",
    description: "Information about collaborating and chatting with your team",
    image_url: "/icon-team.png",
  },
  {
    label: "Admin Guide",
    slug: "posts/technical/pagination/1",
    description: "Documentation about managing settings and users",
    image_url: "/icon-admin.png",
  },
  {
    label: "What's New",
    slug: "posts/technical/pagination/2",
    description: "The latest features and updates at your fingertips",
    image_url: "/icon-whatsnew.png",
  },
];
const popularArticles = [
  {
    title: "Getting Started Article 1",
    slug: "/posts/getting-started/getting-started-article-1",
  },
  {
    title: "Getting Started Article 2",
    slug: "/posts/getting-started/getting-started-article-2",
  },
  {
    title: "Getting Started Article 3",
    slug: "/posts/getting-started/getting-started-article-3",
  },
  {
    title: "Getting Started Article 4",
    slug: "/posts/getting-started/getting-started-article-4",
  },
  {
    title: "Getting Started Article 5",
    slug: "/posts/getting-started/getting-started-article-5",
  },
];
export default function Home() {
  return (
    <div className="grid">
      <div className="col-span-3">
        <ul className="flex p-0 m-0 sm:-mx-3" style={{ flexFlow: "row wrap", listStyle: "none" }}>
          {categories.map((category) => (
            <li key={category.label} className="w-full text-left basis-auto sm:w-1/2 sm:px-2 sm:py-0">
              <div className="flex h-full">
                <Link className="flex py-6 px-2 w-full h-full bg-transparent border-b border-solid cursor-pointer border-neutral-200 hover:outline-0" href={category.slug}>
                  <div className="flex items-center my-0 mr-5 ml-0 text-center" style={{ flexBasis: 35, minWidth: 35, listStyle: "outside none none" }}>
                    <Image src={category.image_url} width={35} height={35} className="block my-0 mx-auto border-none" alt="" />
                  </div>
                  <div className="flex flex-wrap items-center w-full" style={{ listStyle: "outside none none" }}>
                    <h2 className="self-end m-0 w-full font-sans text-lg leading-tight normal-case" style={{ fontWeight: "bold", listStyle: "outside none none" }}>
                      {category.label}
                    </h2>
                    <div className="self-start mx-0 mt-2 mb-0 text-sm leading-5 text-zinc-500" style={{ listStyle: "outside none none" }}>
                      {category.description}
                    </div>
                  </div>
                </Link>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <aside className="col-span-3">
        <section
          id="ht-kb-articles-widget-1"
          className="block p-8 mx-0 mt-0 mb-5 text-sm rounded bg-gray-300 dark:bg-slate-900"
        >
          <h3
            className="mx-0 mt-0 mb-4 font-sans normal-case"
            style={{ fontWeight: "bold", lineHeight: "1.3" }}
          >
            Popular Articles
          </h3>
          <ul className="p-0 m-0 leading-5" style={{ listStyle: "none" }}>
            {popularArticles.map((article) => (
              <li className="relative mx-0 mt-0 mb-2 text-left" key={article.title}>
                <Link href={article.slug}>{article.title}</Link>
              </li>
            ))}
          </ul>
        </section>
      </aside>
    </div>
  )
}

app\layout.tsx

import './globals.css';
import { ThemeProvider } from "@/components/theme-provider";
import Link from "next/link";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          <div className="grid">
            <div className="w-full border-b border">
              <div className="flex items-center justify-between">
                <nav className="ml-auto text-sm font-medium space-x-6 py-10">
                  <Link href="/">Home</Link>
                  <Link href="/faq">FAQ</Link>
                  <Link href="/contact-us">Contact us</Link>
                </nav>
              </div>
            </div>
          </div>
          <div className="flex flex-col min-h-screen">
            {children}
          </div>
        </ThemeProvider>
      </body>
    </html>
  )
}

app\utils\humanify.tsx

export default function humanify(slug: string): string {
  const words = slug.split("-");
  const capitalizedWords = words.map(
    (word) => word.charAt(0).toUpperCase() + word.slice(1)
  );
  return capitalizedWords.join(" ");
}

app\posts\[category]\pagination\[pageNum]\page.tsx

import { notFound } from "next/navigation";
import { allPosts } from "contentlayer/generated";
import Link from "next/link";
import PageNavigation from "@/components/PageNavigation";
interface PageProps {
  params: {
    category: string;
    pageNum: string;
  };
}
const POSTS_PER_PAGE = 4;
function getPostsForPage(posts: any, pageNumber: any, postsPerPage: any) {
  // Calculate start and end index
  const start = (pageNumber - 1) * postsPerPage;
  const end = pageNumber * postsPerPage;
  // Slice the posts array to get posts for the given page
  const postsForPage = posts.slice(start, end);
  return postsForPage;
}
async function getPostFromParams(params: any) {
  var { pageNum, category } = await params;
  const filteredPosts = allPosts.filter((post: any) =>
    post.slugAsParams.startsWith(category)
  );
  // write a function that takes posts and page number and posts per page and returns the posts for that page
  const posts = getPostsForPage(filteredPosts, pageNum, POSTS_PER_PAGE);
  if (!posts) {
    null;
  }
  return posts;
}
export default async function Page({ params }: any) {
  const posts = await getPostFromParams(params);
  var { pageNum, category } = await params;
  const totalPages = Math.ceil(
    allPosts.filter((post: any) => post.slugAsParams.startsWith(category))
      .length / POSTS_PER_PAGE
  );
  if (!posts) {
    notFound();
  }
  return (
    <div>
      <div className="grid">
        <PageNavigation paths={[{path: `/posts/${category}/pagination/${pageNum}`,label: category}]}/>
        <div className="w-full">
          <div className="grid grid-cols-3">
            <div className="md:col-span-2 col-span-3">
              {posts.map((post: any,index:number) => (
                <Link href={post.slug} key={index}>
                  <article className="block">
                    <h2
                        className="m-0 font-sans text-base leading-normal normal-case"
                        itemProp="headline"
                      >
                        {post.title}
                      </h2>
                      <div
                        className="mx-0 mt-2 mb-0 text-sm leading-normal"
                      >
                        {post.description}
                      </div>
                  </article>
                </Link>
              ))}
              <div className="table clear-both mx-0 mt-0 mb-5 leading-7">
                {parseInt(pageNum) !== 1 && (
                  <span>
                    <Link
                      href={`posts/${category}/pagination/${parseInt(pageNum) - 1}`}
                      className="inline-block py-2 px-4 text-sm leading-none rounded-sm cursor-pointer bg-gray-300 dark:bg-slate-900 hover:outline-0"
                      style={{
                        textDecoration: "none",
                        transition: "all 0.1s ease-in-out 0s",
                      }}
                    >
                      Prev
                    </Link>
                  </span>
                )}
                {parseInt(pageNum) < totalPages && (
                  <span>
                    <Link
                      href={`posts/${category}/pagination/${parseInt(pageNum) + 1}`}
                      className="inline-block"
                      style={{
                        textDecoration: "none",
                        transition: "all 0.1s ease-in-out 0s",
                        content: '">"',
                      }}
                    >
                      Next
                    </Link>
                  </span>
                )}
              </div>
            </div>
            <aside className="md:col-span-1 col-span-3">
              <section className="block p-8 mx-0 mt-0 mb-5 text-sm rounded bg-gray-300 dark:bg-slate-900">
                <h3
                  className="mx-0 mt-0 mb-4 font-sans normal-case"
                  style={{ fontWeight: "bold", lineHeight: "1.3" }}
                >
                  Get started at NextJSTemplateStore.com
                </h3>
              </section>
              <section className="block p-8 m-0 text-sm rounded bg-gray-300 dark:bg-slate-900">
                <h3
                  className="mx-0 mt-0 mb-4 font-sans normal-case"
                  style={{ fontWeight: "bold", lineHeight: "1.3" }}
                >
                  Need support?
                </h3>
                <div className="mx-0 mt-0 mb-3 leading-5">
                  Can&apos;t find the answer you&apos;re looking for? We&apos;re
                  here to help!
                </div>
                <Link
                  className="inline-block py-3 px-4 text-xs font-semibold leading-none text-white uppercase bg-cyan-800 cursor-pointer hover:outline-0 rounded-full"
                  href="/contact-us"
                >
                  CONTACT SUPPORT
                </Link>
              </section>
            </aside>
          </div>
        </div>
      </div>
    </div>
  );
}

app\posts[category][slug]\page.tsx

import { notFound } from "next/navigation";
import { allPosts } from "contentlayer/generated";
import { Mdx } from "@/components/mdx-components";
import PageNavigation from "@/components/PageNavigation";
interface CategoryPostProps {
  params: {
    category: string;
    slug: string;
  };
}
export default async function PostPage(postProps: any) {
  var {category,slug} = await postProps.params;
  const post = await getPostFromParams(postProps);
  if (!post) {
    notFound();
  }
  return (
    <div className="grid p-4">
      <PageNavigation
        paths={[
          {
            path: `/posts/${category}/pagination/1`,
            label: category,
          },
          {
            path: `/posts/${category}/${slug}}`,
            label: slug,
          },
        ]}
      />
      <div></div>
      <div className="w-full sm:col-span-1 md:col-span-4 2xl:col-span-1">
        {" "}
        <article className="py-6 prose dark:prose-invert">
          <h1 className="mb-2">{post.title}</h1>
          {post.description && (
            <p className="text-xl mt-0 text-slate-700 dark:text-slate-200">
              {post.description}
            </p>
          )}
          <hr className="my-4" />
          <Mdx code={post.body.code} />
        </article>
      </div>
    </div>
  );
}
async function getPostFromParams(postProps : any) {
  var {category,slug} = await postProps.params;
  const post = allPosts.find((post) => {
    return (
      post.slugAsParams ===
      `${category}/${slug}`
    );
  });
  if (!post) {
    null;
  }
  return post;
}

components\mdx-components.tsx

import Image from "next/image";
import { useMDXComponent } from "next-contentlayer/hooks";
const components = {
  Image,
};
interface MdxProps {
  code: string;
}
export function Mdx({ code }: MdxProps) {
  const Component = useMDXComponent(code);
  return <Component components={components} />;
}

components\PageNavigation.tsx

import Link from "next/link";
import humanify from "@/app/utils/humanify";
const PageNavigation = ({
  paths,
}: {
  paths: { path: string; label: string }[];
}) => {
  return (
    <div className="sm:col-span-1">
      <div className="grid">
        <div className="w-full py-2">
          <div className="flex items-center">
              <Link href={"/"}>Home</Link>
              {paths.map(({ path, label }) => (
                <div key={label}>
                  <Link href={path}>{humanify(label)}</Link>
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
};
export default PageNavigation;

components\theme-provider.tsx

"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>;
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

content\pages\test\getting-started-test-1.mdx

---
title: Getting Started Test 1
date: "2023-04-09"
description: This article explains how you can write MDX and
---
# What is MDX?
This article explains what the MDX format is.
It shows how markdown, JSX, JavaScript expressions, and `import` and
`export` statements in ESM can be used inside MDX. {/* more */}
See [§ Getting started][start] for details on how to integrate MDX into your
project.
## Prerequisites
To write and enjoy MDX, you should be familiar with both markdown
(see this [cheat sheet and tutorial][commonmark-help] for help) and
JavaScript (specifically [JSX][jsx-spec]).
## Markdown for the component era
MDX allows you to use JSX in your markdown content.
You can import components, such as interactive charts or alerts, and embed them
within your content.
This makes writing long-form content with components a blast.
🚀
More practically MDX can be explained as a format that combines markdown with
JSX and looks as follows:
```mdx
# Hello, world!
<div className="note">> Some notable things in a block quote!</div>
```
The heading and block quote are markdown, while those _HTML-like tags_ are JSX.
Markdown often feels more natural to type than HTML or JSX for common things
like emphasis or headings.
JSX is an extension to JavaScript that _looks_ like HTML but makes it convenient
to use components (reusable things).
This example uses `className` on the `<div>`.
That’s because it was written for React and React expects classes that way.
Other frameworks, such as Vue and Preact, expect classes to be defined
differently, so note that there are some differences in how JSX has to be
authored depending on what tools it’s used with.
A few other features from JavaScript are supported in MDX as well: expressions
in braces (`{1 + 1}`) and ESM (`import` and `export`).
## MDX syntax
The MDX syntax combines markdown with JSX.
This gives us something along the lines of literate programming.
It also gives us an odd mix of two languages: markdown is **whitespace
sensitive** and **forgiving** (what you type may not exactly work but it
won’t crash) whereas JavaScript is **whitespace insensitive** and
**unforgiving** (it does crash on typos).
Weirdly enough we quite like how they combine!
### Markdown
Markdown often feels more natural to type than HTML or JSX for common things
like emphasis or headings.
Markdown typically looks more like what’s intended and is terser.
Instead of the following HTML:
```html
<blockquote>
  <p>A blockquote with <em>some</em> emphasis.</p>
</blockquote>
```
You can write the equivalent in markdown (or MDX) like so:
```md
> A blockquote with _some_ emphasis.
```
MDX supports standard markdown by default ([CommonMark][]):
````md
# Heading (rank 1)
## Heading 2
### 3
#### 4
##### 5
###### 6
> Block quote
- Unordered
- List
1. Ordered
2. List
A paragraph, introducing a thematic break:
---
```js
some.code();
```
a [link](https://example.com), an ![image](./image.png), some _emphasis_,
something **strong**, and finally a little `code()`.
````
Nonstandard markdown features (such as GFM, frontmatter, math, syntax
highlighting) can be enabled with plugins (see
[¶ Using plugins][using-plugins]).
Some markdown features don’t work in MDX:
- Indented code does not work in MDX:
  ```md
      console.log(1) // this is a paragraph in MDX!
  ```
  The reason for that is so you can nicely indent your components:
  ```html language="mdx"
  <main>
    <article># Hello!</article>
  </main>
  ```
- Autolinks do not work in MDX.
  The reason is that they can be indistinguishable from JSX (for example:
  `<svg:rect>`) and we prefer being explicit.
  If you want links, use full links:
  `[descriptive text](https://and-the-link-here.com)`
- HTML syntax doesn’t work in MDX as it’s replaced by JSX (`<img>` to
  `<img />`).
  Instead of HTML comments, you can use JavaScript comments in braces:
  `{/* comment! */}`
- Unescaped left angle bracket / less than (`<`) and left curly brace (`{`)
  have to be escaped: `\<` or `\{` (or use expressions: `{'<'}`, `{'{'}`)
More on how MDX differs from markdown is
[documented here](https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown).
### JSX
[JSX][] is an extension to JavaScript that _looks_ like HTML but makes it
convenient to use components (reusable things).
JSX is typically combined with a frontend framework like React, Preact, or Vue.
These frameworks add support for components, which let you change repeating
things like the following markup:
```html
<h2>Hello, Venus!</h2>
<h2>Hello, Mars!</h2>
```
…to JSX (or MDX) like this:
JSX is good for **components**.
It makes repeating things more clear and allows for separation of concerns.
MDX supports JSX syntax.
The following looks a lot like HTML:
```html language="mdx"
<h1>Heading!</h1>
<abbr title="HyperText Markup Language">HTML</abbr> is a lovely language.
<section>And here is *markdown* in **JSX**!</section>
```
But as previously mentioned you can use components too.
Note that components must be defined.
You can import them, define them locally, or pass them in later (see
[§ Using MDX][use]):
There are a few edge cases
[where MDX differs from JSX](https://github.com/micromark/mdx-state-machine#73-deviations-from-jsx).
### Expressions
MDX also supports JavaScript expressions inside curly braces:
```jsx language="mdx"
Two 🍰 is: {Math.PI * 2}
```
Expressions can contain whole JavaScript programs as long as they’re
(wrapped in) an expression that evaluates to something that can be rendered.
You can use an [IIFE][] like so:
```jsx language="mdx"
{
  (function () {
    const guess = Math.random();
    if (guess > 0.66) {
      return <span style={{ color: "tomato" }}>Look at us.</span>;
    }
    if (guess > 0.33) {
      return <span style={{ color: "violet" }}>Who would have guessed?!</span>;
    }
    return <span style={{ color: "goldenrod" }}>Not me.</span>;
  })();
}
```
Expressions can be empty or contain just a comment:
```mdx
{/* A comment! */}
```
### ESM
MDX supports `import` and `export` statements from JavaScript as well.
These ESM features can be used within MDX to define things:
```jsx language="mdx"
import {External} from './some/place.js'
export const Local = props => <span style={{color: 'red'}} {...props} />
An <External>external</External> component and a <Local>local one</Local>.
```
ESM can also be used for non-components (data):
### Interleaving
You can use markdown “inlines” but not “blocks” inside JSX if the text and tags
are on the same line:
```html language="mdx"
<div># this is not a heading but *this* is emphasis</div>
```
Text and tags on one line don’t produce blocks so they don’t produce `<p>`s
either.
On separate lines, they do:
```html language="mdx"
<div>This is a `p`.</div>
```
We differentiate using this rule (same line or not).
Not based on semantics of elements in HTML.
So you _can_ build incorrect HTML (which you shouldn’t):
```html language="mdx"
<h1 className="main">Don’t do this: it’s a `p` in an `h1`</h1>
<h1 className="main">Do this: an `h1` with `code`</h1>
```
It’s not possible to wrap “blocks” if text and tags are on the same line but the
corresponding tags are on different lines:
```html language="mdx"
Welcome! <a href="about.html"> This is home of... # The Falcons!</a>
```
That’s because to parse markdown, we first have to divide it into “blocks”.
So in this case two paragraphs and a heading.
Leaving an opening `a` tag in the first paragraph and a stray closing `a` tag in
the heading.
## Further reading
- If you want to use MDX in your project, see [§ Getting started][start]
- If you’re getting errors when working with the format, see
  [§ Troubleshooting MDX][trouble]
[commonmark]: https://commonmark.org
[commonmark-help]: https://commonmark.org/help/
[jsx]: https://reactjs.org/docs/introducing-jsx.html
[jsx-spec]: https://facebook.github.io/jsx/
[iife]: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

content\posts\getting-started\getting-started-article-1.mdx

---
title: Getting Started Article 1
date: "2023-04-09"
description: This article explains how you can write MDX and
---
# What is MDX?
This article explains what the MDX format is.
It shows how markdown, JSX, JavaScript expressions, and `import` and
`export` statements in ESM can be used inside MDX. {/* more */}
See [§ Getting started][start] for details on how to integrate MDX into your
project.
## Prerequisites
To write and enjoy MDX, you should be familiar with both markdown
(see this [cheat sheet and tutorial][commonmark-help] for help) and
JavaScript (specifically [JSX][jsx-spec]).
## Markdown for the component era
MDX allows you to use JSX in your markdown content.
You can import components, such as interactive charts or alerts, and embed them
within your content.
This makes writing long-form content with components a blast.
🚀
More practically MDX can be explained as a format that combines markdown with
JSX and looks as follows:
```mdx
# Hello, world!
<div className="note">> Some notable things in a block quote!</div>
```
The heading and block quote are markdown, while those _HTML-like tags_ are JSX.
Markdown often feels more natural to type than HTML or JSX for common things
like emphasis or headings.
JSX is an extension to JavaScript that _looks_ like HTML but makes it convenient
to use components (reusable things).
This example uses `className` on the `<div>`.
That’s because it was written for React and React expects classes that way.
Other frameworks, such as Vue and Preact, expect classes to be defined
differently, so note that there are some differences in how JSX has to be
authored depending on what tools it’s used with.
A few other features from JavaScript are supported in MDX as well: expressions
in braces (`{1 + 1}`) and ESM (`import` and `export`).
## MDX syntax
The MDX syntax combines markdown with JSX.
This gives us something along the lines of literate programming.
It also gives us an odd mix of two languages: markdown is **whitespace
sensitive** and **forgiving** (what you type may not exactly work but it
won’t crash) whereas JavaScript is **whitespace insensitive** and
**unforgiving** (it does crash on typos).
Weirdly enough we quite like how they combine!
### Markdown
Markdown often feels more natural to type than HTML or JSX for common things
like emphasis or headings.
Markdown typically looks more like what’s intended and is terser.
Instead of the following HTML:
```html
<blockquote>
  <p>A blockquote with <em>some</em> emphasis.</p>
</blockquote>
```
You can write the equivalent in markdown (or MDX) like so:
```md
> A blockquote with _some_ emphasis.
```
MDX supports standard markdown by default ([CommonMark][]):
````md
# Heading (rank 1)
## Heading 2
### 3
#### 4
##### 5
###### 6
> Block quote
- Unordered
- List
1. Ordered
2. List
A paragraph, introducing a thematic break:
---
```js
some.code();
```
a [link](https://example.com), an ![image](./image.png), some _emphasis_,
something **strong**, and finally a little `code()`.
````
Nonstandard markdown features (such as GFM, frontmatter, math, syntax
highlighting) can be enabled with plugins (see
[¶ Using plugins][using-plugins]).
Some markdown features don’t work in MDX:
- Indented code does not work in MDX:
  ```md
      console.log(1) // this is a paragraph in MDX!
  ```
  The reason for that is so you can nicely indent your components:
  ```html language="mdx"
  <main>
    <article># Hello!</article>
  </main>
  ```
- Autolinks do not work in MDX.
  The reason is that they can be indistinguishable from JSX (for example:
  `<svg:rect>`) and we prefer being explicit.
  If you want links, use full links:
  `[descriptive text](https://and-the-link-here.com)`
- HTML syntax doesn’t work in MDX as it’s replaced by JSX (`<img>` to
  `<img />`).
  Instead of HTML comments, you can use JavaScript comments in braces:
  `{/* comment! */}`
- Unescaped left angle bracket / less than (`<`) and left curly brace (`{`)
  have to be escaped: `\<` or `\{` (or use expressions: `{'<'}`, `{'{'}`)
More on how MDX differs from markdown is
[documented here](https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown).
### JSX
[JSX][] is an extension to JavaScript that _looks_ like HTML but makes it
convenient to use components (reusable things).
JSX is typically combined with a frontend framework like React, Preact, or Vue.
These frameworks add support for components, which let you change repeating
things like the following markup:
```html
<h2>Hello, Venus!</h2>
<h2>Hello, Mars!</h2>
```
…to JSX (or MDX) like this:
JSX is good for **components**.
It makes repeating things more clear and allows for separation of concerns.
MDX supports JSX syntax.
The following looks a lot like HTML:
```html language="mdx"
<h1>Heading!</h1>
<abbr title="HyperText Markup Language">HTML</abbr> is a lovely language.
<section>And here is *markdown* in **JSX**!</section>
```
But as previously mentioned you can use components too.
Note that components must be defined.
You can import them, define them locally, or pass them in later (see
[§ Using MDX][use]):
There are a few edge cases
[where MDX differs from JSX](https://github.com/micromark/mdx-state-machine#73-deviations-from-jsx).
### Expressions
MDX also supports JavaScript expressions inside curly braces:
```jsx language="mdx"
Two 🍰 is: {Math.PI * 2}
```
Expressions can contain whole JavaScript programs as long as they’re
(wrapped in) an expression that evaluates to something that can be rendered.
You can use an [IIFE][] like so:
```jsx language="mdx"
{
  (function () {
    const guess = Math.random();
    if (guess > 0.66) {
      return <span style={{ color: "tomato" }}>Look at us.</span>;
    }
    if (guess > 0.33) {
      return <span style={{ color: "violet" }}>Who would have guessed?!</span>;
    }
    return <span style={{ color: "goldenrod" }}>Not me.</span>;
  })();
}
```
Expressions can be empty or contain just a comment:
```mdx
{/* A comment! */}
```
### ESM
MDX supports `import` and `export` statements from JavaScript as well.
These ESM features can be used within MDX to define things:
```jsx language="mdx"
import {External} from './some/place.js'
export const Local = props => <span style={{color: 'red'}} {...props} />
An <External>external</External> component and a <Local>local one</Local>.
```
ESM can also be used for non-components (data):
### Interleaving
You can use markdown “inlines” but not “blocks” inside JSX if the text and tags
are on the same line:
```html language="mdx"
<div># this is not a heading but *this* is emphasis</div>
```
Text and tags on one line don’t produce blocks so they don’t produce `<p>`s
either.
On separate lines, they do:
```html language="mdx"
<div>This is a `p`.</div>
```
We differentiate using this rule (same line or not).
Not based on semantics of elements in HTML.
So you _can_ build incorrect HTML (which you shouldn’t):
```html language="mdx"
<h1 className="main">Don’t do this: it’s a `p` in an `h1`</h1>
<h1 className="main">Do this: an `h1` with `code`</h1>
```
It’s not possible to wrap “blocks” if text and tags are on the same line but the
corresponding tags are on different lines:
```html language="mdx"
Welcome! <a href="about.html"> This is home of... # The Falcons!</a>
```
That’s because to parse markdown, we first have to divide it into “blocks”.
So in this case two paragraphs and a heading.
Leaving an opening `a` tag in the first paragraph and a stray closing `a` tag in
the heading.
## Further reading
- If you want to use MDX in your project, see [§ Getting started][start]
- If you’re getting errors when working with the format, see
  [§ Troubleshooting MDX][trouble]
[commonmark]: https://commonmark.org
[commonmark-help]: https://commonmark.org/help/
[jsx]: https://reactjs.org/docs/introducing-jsx.html
[jsx-spec]: https://facebook.github.io/jsx/
[iife]: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

contentlayer.config.js

import { defineDocumentType, makeSource } from "contentlayer/source-files";
const computedFields = {
  slug: {
    type: "string",
    resolve: (doc) => `/${doc._raw.flattenedPath}`,
  },
  slugAsParams: {
    type: "string",
    resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
  },
};
export const Page = defineDocumentType(() => ({
  name: "Page",
  filePathPattern: `pages/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
  },
  computedFields,
}));
export const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `posts/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
    date: {
      type: "date",
      required: true,
    },
  },
  computedFields,
}));
export default makeSource({
  contentDirPath: "./content",
  documentTypes: [Post, Page],
});

next.config.ts

const { withContentlayer } = require("next-contentlayer");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};
module.exports = withContentlayer(nextConfig);

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./content/**/*.{md,mdx}",
  ],
  darkMode: ["class"],
  theme: {
    extend: {},
  },
  plugins: [],
};

PreviousVí dụ đơn giản dùng contentlayer, ngôn ngữ mdx xây dựng 1 blog (ok)NextTừ khóa use server, use client là gì

Last updated 1 month ago

Was this helpful?

import Image from "next/image"; import Link from "next/link"; const categories = [ { label: "Getting Started", slug: "posts/getting-started/pagination/1", description: "Learn how to get started with Next.js", image_url: "/icon-getting-started.png", }, { label: "Integrations", slug: "posts/integrations/pagination/2", description: "Link Mind Map Pro to WordPress and Slack", image_url: "/icon-integration.png", }, { label: "Tool Guides", slug: "posts/technical/pagination/3", description: "How to streamline workflow with integrated tools", image_url: "/icon-tools.png", }, { label: "Task Management Guide", slug: "posts/getting-started/pagination/4", description: "Learn to stay on track and enhance productivity", image_url: "/icon-task.png", }, { label: "Team Guides", slug: "posts/integrations/pagination/1", description: "Information about collaborating and chatting with your team", image_url: "/icon-team.png", }, { label: "Admin Guide", slug: "posts/technical/pagination/1", description: "Documentation about managing settings and users", image_url: "/icon-admin.png", }, { label: "What's New", slug: "posts/technical/pagination/2", description: "The latest features and updates at your fingertips", image_url: "/icon-whatsnew.png", }, ]; const popularArticles = [ { title: "Getting Started Article 1", slug: "/posts/getting-started/getting-started-article-1", }, { title: "Getting Started Article 2", slug: "/posts/getting-started/getting-started-article-2", }, { title: "Getting Started Article 3", slug: "/posts/getting-started/getting-started-article-3", }, { title: "Getting Started Article 4", slug: "/posts/getting-started/getting-started-article-4", }, { title: "Getting Started Article 5", slug: "/posts/getting-started/getting-started-article-5", }, ]; export default function Home() { return ( <div className="grid"> <div className="col-span-3"> <ul className="flex p-0 m-0 sm:-mx-3" style={{ flexFlow: "row wrap", listStyle: "none" }}> {categories.map((category) => ( <li key={category.label} className="w-full text-left basis-auto sm:w-1/2 sm:px-2 sm:py-0"> <div className="flex h-full"> <Link className="flex py-6 px-2 w-full h-full bg-transparent border-b border-solid cursor-pointer border-neutral-200 hover:outline-0" href={category.slug}> <div className="flex items-center my-0 mr-5 ml-0 text-center" style={{ flexBasis: 35, minWidth: 35, listStyle: "outside none none" }}> <Image src={category.image_url} width={35} height={35} className="block my-0 mx-auto border-none" alt="" /> </div> <div className="flex flex-wrap items-center w-full" style={{ listStyle: "outside none none" }}> <h2 className="self-end m-0 w-full font-sans text-lg leading-tight normal-case" style={{ fontWeight: "bold", listStyle: "outside none none" }}> {category.label} </h2> <div className="self-start mx-0 mt-2 mb-0 text-sm leading-5 text-zinc-500" style={{ listStyle: "outside none none" }}> {category.description} </div> </div> </Link> </div> </li> ))} </ul> </div> <aside className="col-span-3"> <section id="ht-kb-articles-widget-1" className="block p-8 mx-0 mt-0 mb-5 text-sm rounded bg-gray-300 dark:bg-slate-900" > <h3 className="mx-0 mt-0 mb-4 font-sans normal-case" style={{ fontWeight: "bold", lineHeight: "1.3" }} > Popular Articles </h3> <ul className="p-0 m-0 leading-5" style={{ listStyle: "none" }}> {popularArticles.map((article) => ( <li className="relative mx-0 mt-0 mb-2 text-left" key={article.title}> <Link href={article.slug}>{article.title}</Link> </li> ))} </ul> </section> </aside> </div> ) }

import './globals.css'; import { ThemeProvider } from "@/components/theme-provider"; import Link from "next/link"; export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" suppressHydrationWarning> <body> <ThemeProvider> <div className="grid"> <div className="w-full border-b border"> <div className="flex items-center justify-between"> <nav className="ml-auto text-sm font-medium space-x-6 py-10"> <Link href="/">Home</Link> <Link href="/faq">FAQ</Link> <Link href="/contact-us">Contact us</Link> </nav> </div> </div> </div> <div className="flex flex-col min-h-screen"> {children} </div> </ThemeProvider> </body> </html> ) }

export default function humanify(slug: string): string { const words = slug.split("-"); const capitalizedWords = words.map( (word) => word.charAt(0).toUpperCase() + word.slice(1) ); return capitalizedWords.join(" "); }

import { notFound } from "next/navigation"; import { allPosts } from "contentlayer/generated"; import Link from "next/link"; import PageNavigation from "@/components/PageNavigation"; interface PageProps { params: { category: string; pageNum: string; }; } const POSTS_PER_PAGE = 4; function getPostsForPage(posts: any, pageNumber: any, postsPerPage: any) { // Calculate start and end index const start = (pageNumber - 1) * postsPerPage; const end = pageNumber * postsPerPage; // Slice the posts array to get posts for the given page const postsForPage = posts.slice(start, end); return postsForPage; } async function getPostFromParams(params: any) { var { pageNum, category } = await params; const filteredPosts = allPosts.filter((post: any) => post.slugAsParams.startsWith(category) ); // write a function that takes posts and page number and posts per page and returns the posts for that page const posts = getPostsForPage(filteredPosts, pageNum, POSTS_PER_PAGE); if (!posts) { null; } return posts; } export default async function Page({ params }: any) { const posts = await getPostFromParams(params); var { pageNum, category } = await params; const totalPages = Math.ceil( allPosts.filter((post: any) => post.slugAsParams.startsWith(category)) .length / POSTS_PER_PAGE ); if (!posts) { notFound(); } return ( <div> <div className="grid"> <PageNavigation paths={[{path: `/posts/${category}/pagination/${pageNum}`,label: category}]}/> <div className="w-full"> <div className="grid grid-cols-3"> <div className="md:col-span-2 col-span-3"> {posts.map((post: any,index:number) => ( <Link href={post.slug} key={index}> <article className="block"> <h2 className="m-0 font-sans text-base leading-normal normal-case" itemProp="headline" > {post.title} </h2> <div className="mx-0 mt-2 mb-0 text-sm leading-normal" > {post.description} </div> </article> </Link> ))} <div className="table clear-both mx-0 mt-0 mb-5 leading-7"> {parseInt(pageNum) !== 1 && ( <span> <Link href={`posts/${category}/pagination/${parseInt(pageNum) - 1}`} className="inline-block py-2 px-4 text-sm leading-none rounded-sm cursor-pointer bg-gray-300 dark:bg-slate-900 hover:outline-0" style={{ textDecoration: "none", transition: "all 0.1s ease-in-out 0s", }} > Prev </Link> </span> )} {parseInt(pageNum) < totalPages && ( <span> <Link href={`posts/${category}/pagination/${parseInt(pageNum) + 1}`} className="inline-block" style={{ textDecoration: "none", transition: "all 0.1s ease-in-out 0s", content: '">"', }} > Next </Link> </span> )} </div> </div> <aside className="md:col-span-1 col-span-3"> <section className="block p-8 mx-0 mt-0 mb-5 text-sm rounded bg-gray-300 dark:bg-slate-900"> <h3 className="mx-0 mt-0 mb-4 font-sans normal-case" style={{ fontWeight: "bold", lineHeight: "1.3" }} > Get started at NextJSTemplateStore.com </h3> </section> <section className="block p-8 m-0 text-sm rounded bg-gray-300 dark:bg-slate-900"> <h3 className="mx-0 mt-0 mb-4 font-sans normal-case" style={{ fontWeight: "bold", lineHeight: "1.3" }} > Need support? </h3> <div className="mx-0 mt-0 mb-3 leading-5"> Can't find the answer you're looking for? We're here to help! </div> <Link className="inline-block py-3 px-4 text-xs font-semibold leading-none text-white uppercase bg-cyan-800 cursor-pointer hover:outline-0 rounded-full" href="/contact-us" > CONTACT SUPPORT </Link> </section> </aside> </div> </div> </div> </div> ); }

import { notFound } from "next/navigation"; import { allPosts } from "contentlayer/generated"; import { Mdx } from "@/components/mdx-components"; import PageNavigation from "@/components/PageNavigation"; interface CategoryPostProps { params: { category: string; slug: string; }; } export default async function PostPage(postProps: any) { var {category,slug} = await postProps.params; const post = await getPostFromParams(postProps); if (!post) { notFound(); } return ( <div className="grid p-4"> <PageNavigation paths={[ { path: `/posts/${category}/pagination/1`, label: category, }, { path: `/posts/${category}/${slug}}`, label: slug, }, ]} /> <div></div> <div className="w-full sm:col-span-1 md:col-span-4 2xl:col-span-1"> {" "} <article className="py-6 prose dark:prose-invert"> <h1 className="mb-2">{post.title}</h1> {post.description && ( <p className="text-xl mt-0 text-slate-700 dark:text-slate-200"> {post.description} </p> )} <hr className="my-4" /> <Mdx code={post.body.code} /> </article> </div> </div> ); } async function getPostFromParams(postProps : any) { var {category,slug} = await postProps.params; const post = allPosts.find((post) => { return ( post.slugAsParams === `${category}/${slug}` ); }); if (!post) { null; } return post; }

import Image from "next/image"; import { useMDXComponent } from "next-contentlayer/hooks"; const components = { Image, }; interface MdxProps { code: string; } export function Mdx({ code }: MdxProps) { const Component = useMDXComponent(code); return <Component components={components} />; }

import Link from "next/link"; import humanify from "@/app/utils/humanify"; const PageNavigation = ({ paths, }: { paths: { path: string; label: string }[]; }) => { return ( <div className="sm:col-span-1"> <div className="grid"> <div className="w-full py-2"> <div className="flex items-center"> <Link href={"/"}>Home</Link> {paths.map(({ path, label }) => ( <div key={label}> <Link href={path}>{humanify(label)}</Link> </div> ))} </div> </div> </div> </div> ); }; export default PageNavigation;

"use client"; import * as React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>; export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return <NextThemesProvider {...props}>{children}</NextThemesProvider>; }

--- title: Getting Started Test 1 date: "2023-04-09" description: This article explains how you can write MDX and --- # What is MDX? This article explains what the MDX format is. It shows how markdown, JSX, JavaScript expressions, and `import` and `export` statements in ESM can be used inside MDX. {/* more */} See [§ Getting started][start] for details on how to integrate MDX into your project. ## Prerequisites To write and enjoy MDX, you should be familiar with both markdown (see this [cheat sheet and tutorial][commonmark-help] for help) and JavaScript (specifically [JSX][jsx-spec]). ## Markdown for the component era MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀 More practically MDX can be explained as a format that combines markdown with JSX and looks as follows: ```mdx # Hello, world! <div className="note">> Some notable things in a block quote!</div> ``` The heading and block quote are markdown, while those _HTML-like tags_ are JSX. Markdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. JSX is an extension to JavaScript that _looks_ like HTML but makes it convenient to use components (reusable things). This example uses `className` on the `<div>`. That’s because it was written for React and React expects classes that way. Other frameworks, such as Vue and Preact, expect classes to be defined differently, so note that there are some differences in how JSX has to be authored depending on what tools it’s used with. A few other features from JavaScript are supported in MDX as well: expressions in braces (`{1 + 1}`) and ESM (`import` and `export`). ## MDX syntax The MDX syntax combines markdown with JSX. This gives us something along the lines of literate programming. It also gives us an odd mix of two languages: markdown is **whitespace sensitive** and **forgiving** (what you type may not exactly work but it won’t crash) whereas JavaScript is **whitespace insensitive** and **unforgiving** (it does crash on typos). Weirdly enough we quite like how they combine! ### Markdown Markdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. Markdown typically looks more like what’s intended and is terser. Instead of the following HTML: ```html <blockquote> <p>A blockquote with <em>some</em> emphasis.</p> </blockquote> ``` You can write the equivalent in markdown (or MDX) like so: ```md > A blockquote with _some_ emphasis. ``` MDX supports standard markdown by default ([CommonMark][]): ````md # Heading (rank 1) ## Heading 2 ### 3 #### 4 ##### 5 ###### 6 > Block quote - Unordered - List 1. Ordered 2. List A paragraph, introducing a thematic break: --- ```js some.code(); ``` a [link](https://example.com), an ![image](./image.png), some _emphasis_, something **strong**, and finally a little `code()`. ```` Nonstandard markdown features (such as GFM, frontmatter, math, syntax highlighting) can be enabled with plugins (see [¶ Using plugins][using-plugins]). Some markdown features don’t work in MDX: - Indented code does not work in MDX: ```md console.log(1) // this is a paragraph in MDX! ``` The reason for that is so you can nicely indent your components: ```html language="mdx" <main> <article># Hello!</article> </main> ``` - Autolinks do not work in MDX. The reason is that they can be indistinguishable from JSX (for example: `<svg:rect>`) and we prefer being explicit. If you want links, use full links: `[descriptive text](https://and-the-link-here.com)` - HTML syntax doesn’t work in MDX as it’s replaced by JSX (`<img>` to `<img />`). Instead of HTML comments, you can use JavaScript comments in braces: `{/* comment! */}` - Unescaped left angle bracket / less than (`<`) and left curly brace (`{`) have to be escaped: `\<` or `\{` (or use expressions: `{'<'}`, `{'{'}`) More on how MDX differs from markdown is [documented here](https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown). ### JSX [JSX][] is an extension to JavaScript that _looks_ like HTML but makes it convenient to use components (reusable things). JSX is typically combined with a frontend framework like React, Preact, or Vue. These frameworks add support for components, which let you change repeating things like the following markup: ```html <h2>Hello, Venus!</h2> <h2>Hello, Mars!</h2> ``` …to JSX (or MDX) like this: JSX is good for **components**. It makes repeating things more clear and allows for separation of concerns. MDX supports JSX syntax. The following looks a lot like HTML: ```html language="mdx" <h1>Heading!</h1> <abbr title="HyperText Markup Language">HTML</abbr> is a lovely language. <section>And here is *markdown* in **JSX**!</section> ``` But as previously mentioned you can use components too. Note that components must be defined. You can import them, define them locally, or pass them in later (see [§ Using MDX][use]): There are a few edge cases [where MDX differs from JSX](https://github.com/micromark/mdx-state-machine#73-deviations-from-jsx). ### Expressions MDX also supports JavaScript expressions inside curly braces: ```jsx language="mdx" Two 🍰 is: {Math.PI * 2} ``` Expressions can contain whole JavaScript programs as long as they’re (wrapped in) an expression that evaluates to something that can be rendered. You can use an [IIFE][] like so: ```jsx language="mdx" { (function () { const guess = Math.random(); if (guess > 0.66) { return <span style={{ color: "tomato" }}>Look at us.</span>; } if (guess > 0.33) { return <span style={{ color: "violet" }}>Who would have guessed?!</span>; } return <span style={{ color: "goldenrod" }}>Not me.</span>; })(); } ``` Expressions can be empty or contain just a comment: ```mdx {/* A comment! */} ``` ### ESM MDX supports `import` and `export` statements from JavaScript as well. These ESM features can be used within MDX to define things: ```jsx language="mdx" import {External} from './some/place.js' export const Local = props => <span style={{color: 'red'}} {...props} /> An <External>external</External> component and a <Local>local one</Local>. ``` ESM can also be used for non-components (data): ### Interleaving You can use markdown “inlines” but not “blocks” inside JSX if the text and tags are on the same line: ```html language="mdx" <div># this is not a heading but *this* is emphasis</div> ``` Text and tags on one line don’t produce blocks so they don’t produce `<p>`s either. On separate lines, they do: ```html language="mdx" <div>This is a `p`.</div> ``` We differentiate using this rule (same line or not). Not based on semantics of elements in HTML. So you _can_ build incorrect HTML (which you shouldn’t): ```html language="mdx" <h1 className="main">Don’t do this: it’s a `p` in an `h1`</h1> <h1 className="main">Do this: an `h1` with `code`</h1> ``` It’s not possible to wrap “blocks” if text and tags are on the same line but the corresponding tags are on different lines: ```html language="mdx" Welcome! <a href="about.html"> This is home of... # The Falcons!</a> ``` That’s because to parse markdown, we first have to divide it into “blocks”. So in this case two paragraphs and a heading. Leaving an opening `a` tag in the first paragraph and a stray closing `a` tag in the heading. ## Further reading - If you want to use MDX in your project, see [§ Getting started][start] - If you’re getting errors when working with the format, see [§ Troubleshooting MDX][trouble] [commonmark]: https://commonmark.org [commonmark-help]: https://commonmark.org/help/ [jsx]: https://reactjs.org/docs/introducing-jsx.html [jsx-spec]: https://facebook.github.io/jsx/ [iife]: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

--- title: Getting Started Article 1 date: "2023-04-09" description: This article explains how you can write MDX and --- # What is MDX? This article explains what the MDX format is. It shows how markdown, JSX, JavaScript expressions, and `import` and `export` statements in ESM can be used inside MDX. {/* more */} See [§ Getting started][start] for details on how to integrate MDX into your project. ## Prerequisites To write and enjoy MDX, you should be familiar with both markdown (see this [cheat sheet and tutorial][commonmark-help] for help) and JavaScript (specifically [JSX][jsx-spec]). ## Markdown for the component era MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀 More practically MDX can be explained as a format that combines markdown with JSX and looks as follows: ```mdx # Hello, world! <div className="note">> Some notable things in a block quote!</div> ``` The heading and block quote are markdown, while those _HTML-like tags_ are JSX. Markdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. JSX is an extension to JavaScript that _looks_ like HTML but makes it convenient to use components (reusable things). This example uses `className` on the `<div>`. That’s because it was written for React and React expects classes that way. Other frameworks, such as Vue and Preact, expect classes to be defined differently, so note that there are some differences in how JSX has to be authored depending on what tools it’s used with. A few other features from JavaScript are supported in MDX as well: expressions in braces (`{1 + 1}`) and ESM (`import` and `export`). ## MDX syntax The MDX syntax combines markdown with JSX. This gives us something along the lines of literate programming. It also gives us an odd mix of two languages: markdown is **whitespace sensitive** and **forgiving** (what you type may not exactly work but it won’t crash) whereas JavaScript is **whitespace insensitive** and **unforgiving** (it does crash on typos). Weirdly enough we quite like how they combine! ### Markdown Markdown often feels more natural to type than HTML or JSX for common things like emphasis or headings. Markdown typically looks more like what’s intended and is terser. Instead of the following HTML: ```html <blockquote> <p>A blockquote with <em>some</em> emphasis.</p> </blockquote> ``` You can write the equivalent in markdown (or MDX) like so: ```md > A blockquote with _some_ emphasis. ``` MDX supports standard markdown by default ([CommonMark][]): ````md # Heading (rank 1) ## Heading 2 ### 3 #### 4 ##### 5 ###### 6 > Block quote - Unordered - List 1. Ordered 2. List A paragraph, introducing a thematic break: --- ```js some.code(); ``` a [link](https://example.com), an ![image](./image.png), some _emphasis_, something **strong**, and finally a little `code()`. ```` Nonstandard markdown features (such as GFM, frontmatter, math, syntax highlighting) can be enabled with plugins (see [¶ Using plugins][using-plugins]). Some markdown features don’t work in MDX: - Indented code does not work in MDX: ```md console.log(1) // this is a paragraph in MDX! ``` The reason for that is so you can nicely indent your components: ```html language="mdx" <main> <article># Hello!</article> </main> ``` - Autolinks do not work in MDX. The reason is that they can be indistinguishable from JSX (for example: `<svg:rect>`) and we prefer being explicit. If you want links, use full links: `[descriptive text](https://and-the-link-here.com)` - HTML syntax doesn’t work in MDX as it’s replaced by JSX (`<img>` to `<img />`). Instead of HTML comments, you can use JavaScript comments in braces: `{/* comment! */}` - Unescaped left angle bracket / less than (`<`) and left curly brace (`{`) have to be escaped: `\<` or `\{` (or use expressions: `{'<'}`, `{'{'}`) More on how MDX differs from markdown is [documented here](https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown). ### JSX [JSX][] is an extension to JavaScript that _looks_ like HTML but makes it convenient to use components (reusable things). JSX is typically combined with a frontend framework like React, Preact, or Vue. These frameworks add support for components, which let you change repeating things like the following markup: ```html <h2>Hello, Venus!</h2> <h2>Hello, Mars!</h2> ``` …to JSX (or MDX) like this: JSX is good for **components**. It makes repeating things more clear and allows for separation of concerns. MDX supports JSX syntax. The following looks a lot like HTML: ```html language="mdx" <h1>Heading!</h1> <abbr title="HyperText Markup Language">HTML</abbr> is a lovely language. <section>And here is *markdown* in **JSX**!</section> ``` But as previously mentioned you can use components too. Note that components must be defined. You can import them, define them locally, or pass them in later (see [§ Using MDX][use]): There are a few edge cases [where MDX differs from JSX](https://github.com/micromark/mdx-state-machine#73-deviations-from-jsx). ### Expressions MDX also supports JavaScript expressions inside curly braces: ```jsx language="mdx" Two 🍰 is: {Math.PI * 2} ``` Expressions can contain whole JavaScript programs as long as they’re (wrapped in) an expression that evaluates to something that can be rendered. You can use an [IIFE][] like so: ```jsx language="mdx" { (function () { const guess = Math.random(); if (guess > 0.66) { return <span style={{ color: "tomato" }}>Look at us.</span>; } if (guess > 0.33) { return <span style={{ color: "violet" }}>Who would have guessed?!</span>; } return <span style={{ color: "goldenrod" }}>Not me.</span>; })(); } ``` Expressions can be empty or contain just a comment: ```mdx {/* A comment! */} ``` ### ESM MDX supports `import` and `export` statements from JavaScript as well. These ESM features can be used within MDX to define things: ```jsx language="mdx" import {External} from './some/place.js' export const Local = props => <span style={{color: 'red'}} {...props} /> An <External>external</External> component and a <Local>local one</Local>. ``` ESM can also be used for non-components (data): ### Interleaving You can use markdown “inlines” but not “blocks” inside JSX if the text and tags are on the same line: ```html language="mdx" <div># this is not a heading but *this* is emphasis</div> ``` Text and tags on one line don’t produce blocks so they don’t produce `<p>`s either. On separate lines, they do: ```html language="mdx" <div>This is a `p`.</div> ``` We differentiate using this rule (same line or not). Not based on semantics of elements in HTML. So you _can_ build incorrect HTML (which you shouldn’t): ```html language="mdx" <h1 className="main">Don’t do this: it’s a `p` in an `h1`</h1> <h1 className="main">Do this: an `h1` with `code`</h1> ``` It’s not possible to wrap “blocks” if text and tags are on the same line but the corresponding tags are on different lines: ```html language="mdx" Welcome! <a href="about.html"> This is home of... # The Falcons!</a> ``` That’s because to parse markdown, we first have to divide it into “blocks”. So in this case two paragraphs and a heading. Leaving an opening `a` tag in the first paragraph and a stray closing `a` tag in the heading. ## Further reading - If you want to use MDX in your project, see [§ Getting started][start] - If you’re getting errors when working with the format, see [§ Troubleshooting MDX][trouble] [commonmark]: https://commonmark.org [commonmark-help]: https://commonmark.org/help/ [jsx]: https://reactjs.org/docs/introducing-jsx.html [jsx-spec]: https://facebook.github.io/jsx/ [iife]: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

import { defineDocumentType, makeSource } from "contentlayer/source-files"; const computedFields = { slug: { type: "string", resolve: (doc) => `/${doc._raw.flattenedPath}`, }, slugAsParams: { type: "string", resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"), }, }; export const Page = defineDocumentType(() => ({ name: "Page", filePathPattern: `pages/**/*.mdx`, contentType: "mdx", fields: { title: { type: "string", required: true, }, description: { type: "string", }, }, computedFields, })); export const Post = defineDocumentType(() => ({ name: "Post", filePathPattern: `posts/**/*.mdx`, contentType: "mdx", fields: { title: { type: "string", required: true, }, description: { type: "string", }, date: { type: "date", required: true, }, }, computedFields, })); export default makeSource({ contentDirPath: "./content", documentTypes: [Post, Page], });

/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./content/**/*.{md,mdx}", ], darkMode: ["class"], theme: { extend: {}, }, plugins: [], };