Package Exports

@cieloazul310/regista
@cieloazul310/regista/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cieloazul310/regista) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Regista

Simple and type-safe Markdown/MDX content management tool for Next.js App Router.

https://github.com/cieloazul310/regista

Usage

Example project structure (Next.js App Router)

.
├── content
│   ├── author
│   ├── post
│   └── categories.yml
├── public
│   └── assets
├── src
│   ├── app
│   └── content
├── next.config.mjs
├── package.json
└── tsconfig.json

Directories and files

content/author: Directory where author data are stored
content/post: Directory where Markdown/MDX contents are stored
content/categories.yml: Filepath where categories data is stored
src/content/index.ts: Content definition file

You can change the location of stored content and data definitions as you like.

Getting started

1. Installation

npm install @cieloazul310/regista

npm install --save-dev @mdx-js/mdx

2. Set up

// src/content.index.ts
import * as path from "path";
import { z, defineMdx } from "@cieloazul310/regista";

export const post = defineMdx({
  contentPath: path.resolve(process.cwd(), "content/post"),
  basePath: "/post",
  schema: {
    author: z.string().optional(),
  },
});
export type PostFrontmatter = z.infer<typeof post.schema>;
export type PostMetadata = z.infer<typeof post.metadataSchema>;

3. Using with Dynamic routes

// src/app/post/[...slug].tsx
import NextLink from "next/link";
import type { Metadata } from "next";
import { post } from "@/content";

export async function generateStaticParams() {
  const allPosts = await post.getAll(); // => PostMetadata[]
  return allPosts;
}

async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
  const { slug } = await params;
  const item = await post.useMdx(slug);
  if (!item) return null;
  const { content, frontmatter, context } = item;
  const { title, date, lastmod, author } = frontmatter;
  const { older, newer } = context;

  return (
    <>
      <article>
        <header>
          <h1>{title}</h1>
          <small>
            <time>{date.toDateString()}</time>
          </small>
        </header>
        <section>{content}</section>
      </article>
      <nav>
        {older && (
          <div>
            <p>Older post</p>
            <NextLink href={older.href}>{older.frontmatter.title}</NextLink>
          </div>
        )}
        {newer && (
          <div>
            <p>Newer post</p>
            <NextLink href={newer.href}>{newer.frontmatter.title}</NextLink>
          </div>
        )}
      </nav>
    </>
  );
}

export default Page;

Dynamic Routes https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

JSPM

@cieloazul310/regista