https://github.com/gah-code/my-mdx-starter
Gatsby MDX Prisma Blog Starter - Development Notes that supports dynamic MDX pages, category filtering, and pagination.
https://github.com/gah-code/my-mdx-starter
gatsby mdx prisma template
Last synced: 8 months ago
JSON representation
Gatsby MDX Prisma Blog Starter - Development Notes that supports dynamic MDX pages, category filtering, and pagination.
- Host: GitHub
- URL: https://github.com/gah-code/my-mdx-starter
- Owner: gah-code
- License: mit
- Created: 2024-12-31T11:46:23.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-08T03:51:25.000Z (about 1 year ago)
- Last Synced: 2025-01-08T04:30:01.445Z (about 1 year ago)
- Topics: gatsby, mdx, prisma, template
- Language: JavaScript
- Homepage:
- Size: 118 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby MDX Prisma Blog Starter - Development Notes
This project is a **Gatsby MDX Prisma Blog Starter** that supports dynamic MDX pages, category filtering, and pagination. It leverages **Gatsby** and **MDX** to create a modern, component-driven blog with optimized image handling and syntax highlighting.
---
## 🚀 Features
- **MDX Support**: Write Markdown with embedded React components.
- **Dynamic Pages**: Automatically generates pages for posts and categories.
- **Filter by Category**: Posts can be filtered by category via dynamic tag pages (e.g., `/tags/featured/`).
- **Pagination**: Paginated category pages make browsing large datasets seamless.
- **Optimized Images**: Uses `gatsby-plugin-image` for responsive, optimized images.
- **Syntax Highlighting**: Code blocks use **PrismJS** for styling.
- **Layouts**: Shared layouts for consistent design.
- **Sidebar Menu:**
- Opens and closes using a smooth transition.
- Includes an overlay that closes the menu when clicked outside.
- **Reusable Components:**
- Organized components such as `Header`, `Footer`, `MobileNav`, `HamburgerButton`, and `Overlay`.
- Styled components with Emotion for consistent styling.
- **Accessibility Enhancements:**
- Focusable and clickable elements for keyboard and mouse interaction.
---
## 📂 Folder Structure
```
my-mdx-starter
├── gatsby-config.mjs # Gatsby configuration
├── gatsby-node.mjs # Dynamic page creation for posts and categories
├── gatsby-browser.js # Global styles and PrismJS theme imports
├── package.json # Dependencies and scripts
├── src
│ ├── components
│ ├── layout/
│ │ ├── Layout.jsx # Shared layout for pages and posts
│ │ ├── Header.jsx
│ │ ├── Navigation.jsx
│ │ ├── MobileNav.jsx
│ │ ├── Footer.jsx
│ │ ├── HamburgerButton.jsx
│ │ └── Overlay.jsx
│ ├── common/
│ │ ├── StyledComponents.jsx # Shared styled components
│ │ └── GlobalStyles.jsx # Global styles
│ ├── pages
│ │ ├── index.js # Homepage
│ │ ├── about.js # About page
│ │ ├── blog.js # Blog index with category filtering
│ ├── posts
│ │ ├── example-post
│ │ │ ├── index.mdx # Example MDX post with frontmatter
│ │ │ └── example-image.png
│ └── templates
│ ├── post-template.jsx # Template for individual posts
│ └── tag-template.jsx # Template for paginated category pages
└── README.md
```
---
## 🛠️ Setup Instructions
### 1. Install Dependencies
```bash
npm install
```
### 2. Start Development Server
```bash
npm run develop
```
### 3. View in Browser
```bash
http://localhost:8000
```
---
## 📖 Writing Posts
### Add a New Post
1. Create a new folder inside `src/posts/`.
2. Add an `index.mdx` file and optional images.
3. Include frontmatter:
```mdx
---
title: "New Features"
slug: "/new-features"
date: "2024-12-31"
excerpt: "Discover the latest updates and improvements..."
category: "Featured"
author: "Jane Doe"
image: "example-image.png"
imageAlt: "Feature Image"
---
# Introducing New Features
Discover the latest updates.
```javascript
const greet = (name) => `Hello, ${name}!`
console.log(greet("Gatsby"))
```
```
4. Access the post:
```
```
---
## ✨ Plugins Used
- **gatsby-plugin-mdx** - MDX support.
- **gatsby-source-filesystem** - Sources content.
- **gatsby-plugin-page-creator** - Generates pages from MDX files.
- **rehype-prism-plus** - Syntax highlighting.
- **gatsby-plugin-image** - Optimized images.
- **gatsby-plugin-sharp** - Image processing.
- **gatsby-transformer-sharp** - Image queries.
---
## 🌟 Customization
### Syntax Highlighting Theme
```javascript
import "prismjs/themes/prism-tomorrow.css"
```
### MDX Plugins
```javascript
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [rehypePrism],
}
```
---
## 🚧 Development Notes
- Use **ESM Syntax** (`import/export`).
- Restart server after changes:
```bash
gatsby clean
gatsby develop
```
- Test GraphQL Queries:
```bash
http://localhost:8000/___graphql
```
---
## 📜 License
Licensed under the [MIT License](LICENSE).
---
## 📧 Contact
Created by **Gilbert Haro** - [GitHub](https://github.com/gah-code).