diff --git a/README b/README index 038dd63..237ddb1 100644 --- a/README +++ b/README @@ -2,94 +2,61 @@ A minimal Next.js 15 application that renders content from Markdown files, styled with Tailwind CSS. -## Requirements +It's just markdown files in a `app/content` directory. The file name becomes the URL path. You can add React components to the markdown directly. -- Node.js 18+ -- npm 9+ +## Features -## Project Structure +- Render Markdown files as pages +- Add React components anywhere in the Markdown +- Global styles using Tailwind CSS and DaisyUI -``` -my-markdown-app/ -├── app/ -│ ├── globals.css # Global styles and Tailwind imports -│ ├── layout.tsx # Root layout with shared styling -│ ├── page.mdx # Home page content -│ └── about.mdx # About page content -├── tailwind.config.js -├── next.config.mjs -├── package.json -└── tsconfig.json -``` +## How to use it -## Core Files Explained +I'm lazy, so I made this extremely simple. -### 1. `app/globals.css` +### Pages -```css -@tailwind base; -@tailwind components; -@tailwind utilities; +Just write some markdown in a `.mdx` file. -/* Add any custom global styles below */ -``` +```mdx +# My Page -### 2. `app/layout.tsx` - -```tsx -import './globals.css' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - -
- {children} -
- - - ) -} +This is my page. ``` -### 3. Example MDX page (`app/page.mdx`) +### Routing -```mdx -# Welcome -This is a markdown page. -``` +Add new pages by creating `.mdx` files in the `app/content` directory. The file name becomes the URL path: + +- `app/content/index.mdx` → `/` +- `app/content/a-beautiful-page.mdx` → `/a-beautiful-page` +- `app/content/more-content/another-page.mdx` → `/more-content/another-page` -### 4. `next.config.mjs` +### React Components -```javascript -/** @type {import('next').NextConfig} */ -const nextConfig = { - pageExtensions: ['mdx', 'tsx'], -}; +Add custom React components to the `components` directory. Then, import them at the top of an MDX file and use them like any other React component. + +```mdx +import MyComponent from '../components/my-component' -export default nextConfig; + ``` -## Setup +## Requirements -### 1. Install dependencies +- Node.js 18+ +- npm 9+ +- TypeScript -```bash -npm install next@15 react react-dom typescript @types/react @types/node tailwindcss postcss autoprefixer @next/mdx @mdx-js/loader daisyui -npm install -D @tailwindcss/typography -``` +## Setup -### 2. Initialize Tailwind CSS +### Install dependencies ```bash -npx tailwindcss init -p +npm install ``` -### 3. Run development server +### Run development server ```bash npm run dev @@ -97,31 +64,40 @@ npm run dev Visit -### 4. Build for production +### Build for production ```bash npm run build npm start ``` -## Creating Content - -Add new pages by creating `.mdx` files in the `app` directory. The file name becomes the URL path: - -- `app/page.mdx` → `/` -- `app/about.mdx` → `/about` - -## Available Scripts +## Project Structure -- `npm run dev`: Start development server -- `npm run build`: Build for production -- `npm run start`: Start production server +I tried to make this as simple as possible, given the constraints of modern web development. -This setup works because: +``` +my-markdown-app/ +. +├── README +├── app +│ ├── [...slug] # Dynamic route for all pages +│ │ └── page.tsx # Page component +│ ├── content # **This is the only folder you need to worry about.** +│ │ ├── more-content # Example of a nested folder +│ │ │ └── another-page.mdx # Another page, routes to /more-content/another-page +│ │ └── index.mdx # Home page content +│ ├── globals.css # Global styles and Tailwind imports +│ ├── layout.tsx # Root layout with shared styling +│ └── page.mdx # Home page content +├── components # Add custom React components here +├── mdx-components.tsx # Sets up MDX components +├── next.config.mjs # Next.js configuration +├── package.json # Project dependencies +├── postcss.config.js # PostCSS configuration +├── tailwind.config.js # Tailwind CSS configuration +└── tsconfig.json # TypeScript configuration +``` -- Next.js 15 has built-in MDX support -- The root layout (`layout.tsx`) handles all page structure and styling -- Tailwind provides utility classes that can be used directly in MDX files -- Each MDX file automatically becomes a route in your application +## License -This boilerplate provides everything needed for a Markdown-based Next.js site with zero unnecessary complexity. +MIT