npx create-next-app@latest

What is your project named? mdx-blog
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for `next dev`?  No
Would you like to customize the import alias (`@/*` by default)? No

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx gray-matter remark-frontmatter remark-mdx-frontmatter

npm install @tailwindcss/typography

{
  "frontmatter": {
    "title": "Meu Primeiro Post",
    "abstract": "resumo do conteúdo para mostrar na listagem de posts",
    "publishedOn": "2024-04-01T12:00:00-0400"
  },
  "content": "Esse é o conteúdo do post em **Markdown**."
}

import createMDX from "@next/mdx";
import remarkFrontmatter from "remark-frontmatter";
import remarkMDXFrontmatter from "remark-mdx-frontmatter";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkFrontmatter, remarkMDXFrontmatter],
  },
});

export default withMDX(nextConfig);

import fs from "fs/promises";
import path from "path";
import matter from "gray-matter";

type BlogPost = {
  slug: string;
  title: string;
  abstract: string;
  publishedOn: string; // Pode ser `Date` se preferir trabalhar com objetos de data
};

/**
 * Retorna a lista de posts do blog ordenada pela data de publicação (mais recentes primeiro).
 */
export async function getBlogPostList(): Promise<BlogPost[]> {
  const fileNames = await readDirectory("posts"); // Obtém a lista de arquivos na pasta `posts/`
  const blogPosts: BlogPost[] = [];

  for (const fileName of fileNames) {
    const rawContent = await readFile(`posts/${fileName}`);
    const { data: frontmatter } = matter(rawContent); // Extrai os metadados (frontmatter)

    blogPosts.push({
      ...(frontmatter as Omit<BlogPost, "slug">),
      slug: fileName.replace(".mdx", ""), // O slug é o nome do arquivo sem a extensão
    });
  }

  // Ordena os posts da data mais recente para a mais antiga
  return blogPosts.sort((a, b) => (a.publishedOn < b.publishedOn ? 1 : -1));
}

/**
 * Carrega o conteúdo de um post específico com base no `slug`.
 */
export async function loadBlogPost(slug: string) {
  const rawContent = await readFile(`posts/${slug}.mdx`);
  const { data: frontmatter, content } = matter(rawContent);

  return { frontmatter, content };
}

/**
 * Lê o conteúdo de um arquivo dentro da estrutura do projeto.
 */
async function readFile(localPath: string) {
  return fs.readFile(path.join(process.cwd(), localPath), "utf8");
}

/**
 * Lê os nomes dos arquivos dentro de um diretório.
 */
async function readDirectory(localPath: string) {
  return fs.readdir(path.join(process.cwd(), localPath));
}

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  try {
    // Importa dinamicamente o post com base no slug da URL
    const { default: Post } = await import(
      `../../../../posts/${params.slug}.mdx`
    );

    return (
      <article>
        <div>
          <span>{/* Title */}</span>
          <span>{/* PublishedOn */}</span>
        </div>

        <Post />
      </article>
    );
  } catch (error) {
    // Se o arquivo não for encontrado, retorna uma página 404
    notFound();
  }
}

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  try {
    const { default: Post } = await import(`../../../../posts/${params.slug}.mdx`);
    const { frontmatter } = await loadBlogPost(params.slug);

    return (
      <article>
	    <div>
	      <span>{frontmatter.title}</span>
	      <span>{frontmatter.publishedOn}</span>
	    </div>
        <Post />
      </article>
    );
  } catch (error) {
    notFound();
  }
}

import { getBlogPostList } from "@/utils/functions/posts-helpers";

export default async function BlogPage() {
  const blogPosts = await getBlogPostList();

  return (
    <div>
      <h1>Meu MDX-Blog</h1>

      <div>
        {blogPosts.map(({ slug, title, abstract, publishedOn }) => (
          <Link href={`/blog/${slug}`}>
		    <div>
			  <h2>{title}</h2>
			  <time dateTime={publishedOn}>
			    {new Date(publishedOn).toLocaleDateString()}
			  </time>
			</div>

			<p>{abstract}</p>
			<span>Continue lendo →</span>
		  </Link>
        ))}
      </div>
    </div>
  );
}

interface MDXLayoutPropsProps {
  children: React.ReactNode;
}

export default function MDXLayout({ children }: MDXLayoutPropsProps) {
  return (
    <section className="prose prose-a:text-white prose-headings:text-start prose-strong:text-white text-text-dark prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-text-dark prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white">
      {children}
    </section>
  );
}

import MDXLayout from "@/components/mdx-layout";

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  try {
    const { default: Post } = await import(`../../../../posts/${params.slug}.mdx`);
    const { frontmatter } = await loadBlogPost(params.slug);

    return (
      <article>
	      <div>
	        <span>{frontmatter.title}</span>
	        <span>{frontmatter.publishedOn}</span>
	      </div>
          <MDXLayout>
	        <Post />
	      </MDXLayout>
      </article>
    );
  } catch (error) {
    notFound();
  }
}

import type { MDXComponents } from "mdx/types";

import ChromaticCircle from "@/widgets/chromatic-circle";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    ChromaticCircle // Disponibiliza o componente dentro dos arquivos MDX
  };
}

@import "tailwindcss";

@plugin "@tailwindcss/typography";

---
title: "Meu Primeiro Post"
abstract: "resumo do conteúdo para mostrar na listagem de posts"
publishedOn: "2024-04-01T12:00:00-0400"
---

Esse é o conteúdo do post em **Markdown**.

## Círculo Cromático

Uma ferramenta fundamental para qualquer ...

<ChromaticCircle type="selector" />

📂 src/
┣ 📂 components/
┣ 📂 widgets/ <-- Componentes para MDX
┃ ┗ 📜 chromatic-circle.tsx
┗ 📜 mdx-components.tsx

┣ 📂 public/
┣ 📂 posts/ #posts e páginas escritas em MDX
┃ ┣ exemple.mdx
┣ 📂 src/
┃ ┣ 📂 app/
┃ ┃ ┣ 📂 blog/ #página principal do blog (lista de posts)
┃ ┃ ┃ ┣ 📂 [slug]/ #rota dinâmina para exibir posts individuais
┃ ┃ ┃ ┃ ┣ page.tsx
┃ ┃ ┃ ┣ page.tsx
┃ ┃ ┣ globals.css
┃ ┃ ┣ layout.tsx
┃ ┃ ┣ page.tsx
┃ ┣ 📂 components/
┃ ┣ 📂 widgets/ #componentes que serão utilizados dentro do MDX
┃ ┣ 📂 utils/ #funções auxiliares, como processamento de frontmatter
┃ ┣ 📂 lib/ #configurações de MDX, carregamento de arquivos, etc.
┃ ┣ mdx-components.tsx #falaremos sobre esse carinha depois
┣ .gitignore #arquivos e pastas ignoradas no git
┣ package.json #dependências e scripts do projeto
┣ next.config.js #configuração do Next.js, incluindo suporte a MDX
┣ README.md #documentação do projeto