Add readme content

dtedesco1 · Nov 4, 2024 · 0bc827e · 0bc827e
1 parent 5dfa4f0
commit 0bc827e
Showing 1 changed file with 59 additions and 83 deletions.
diff --git a/README b/README
@@ -2,126 +2,102 @@
 
 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 (
-    <html lang="en">
-      <body>
-        <main className="max-w-4xl mx-auto px-4 py-8">
-          {children}
-        </main>
-      </body>
-    </html>
-  )
-}
+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;
+<MyComponent />
 ```
 
-## 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
 ```
 
 Visit <http://localhost:3000>
 
-### 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