https://github.com/RyanWarner/next-mdx-digital-garden-starter

An opinionated starting point for Digital Garden content authoring.
https://github.com/RyanWarner/next-mdx-digital-garden-starter

digital-garden mdx nextjs starter

Last synced: 3 months ago
JSON representation

An opinionated starting point for Digital Garden content authoring.

• Host: GitHub
• URL: https://github.com/RyanWarner/next-mdx-digital-garden-starter
• Owner: RyanWarner
• Created: 2020-07-19T14:09:19.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-12-14T07:32:16.000Z (almost 2 years ago)
• Last Synced: 2024-07-29T19:23:44.584Z (3 months ago)
• Topics: digital-garden, mdx, nextjs, starter
• Language: JavaScript
• Homepage: https://next-mdx.warner.codes/
• Size: 842 KB
• Stars: 58
• Watchers: 4
• Forks: 6
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• jimsghstars - RyanWarner/next-mdx-digital-garden-starter - An opinionated starting point for Digital Garden content authoring. (JavaScript)

README

        
# 🌱 Next + MDX Digital Garden Starter

An opinionated starting point for Digital Garden content authoring.

Note: This setup does not handle code-splitting. I tried switching to `mdx-bundler` but could not get it to work.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2FRyanWarner%2Fnext-mdx-digital-garden-starter)

## Getting started

```

npm install

npm run dev

```

## Use

- Write MDX in the `content` directory.

- Put components in the `components` directory.

- Use components in MDX (without imports).

## Goals

Statically generated pages from MDX files that are not tied to the filesystem path

## How it works

- `[slug].js` generates static paths using `getStaticPaths` from all `.mdx` files located in the specified directory (`content/` by default).

- The `getStaticProps` NextJS method passes the MDX content including front-matter (parsed with gray-matter) to the `` component to be rendered.

- The index or home page uses similar logic to generate a list of posts sorted by date.

## TODO

- [ ] Support filesystem-based routing as an option

- [ ] Add some batteries-included examples

- [ ] Write a tutorial