Blog with Next.js, ShadCN, Tailwind, Pieces, Remark & Rehype

This project is a Markdown-based blog built using Next.js, ShadCN, Tailwind CSS, Pieces for code sharing, and the Remark & Rehype libraries for processing markdown. This blog features dynamic blog pages, a responsive design, and various UI components powered by ShadCN. It also includes a top-loading bar, code syntax highlighting, and a dark mode theme.

Project Setup and Features

Setup and Integrations

• Next.js Setup: Basic Next.js project setup with essential configurations.
• ShadCN Setup: Setting up ShadCN for UI components.
• Pieces AI Assistant Setup: Integrating Pieces for sharing and managing code snippets.

Core Features

• About Page & Basic Environment Setup: Initial setup of the environment and the About page.
• NavBar Explanation: Details on the structure and functionality of the navigation bar.
• Table Example: Example of how to create a table using markdown.
• Global Theme Setup with Pieces: Managing global themes with Pieces.
• Login & Signup Buttons: Adding authentication buttons for login and signup.

Responsive Design and Mobile Optimization

• Media Queries: Optimizing for mobile devices with media queries.
• Hamburger Menu with ShadCN Sheet: Implementing a hamburger menu for smaller screens.

Dark Mode and Animations

• Dark Mode Theme Setup: Adding dark mode support with Tailwind and ShadCN.
• NavBar Animations: Animating the navigation bar for enhanced user interaction.

Homepage Features

• Tailwind-Assisted Homepage: Building the homepage using Tailwind CSS.
• Pricing Section: Adding a pricing section to the homepage.
• Top Blogs Section: Displaying a list of top blogs on the homepage.

Blog Pages

• All Blogs Page: Creating a page to display all available blogs.
• Individual Blog Pages: Setting up dynamic individual blog pages with Markdown content.
• Dynamic Blog Integration: Fully integrating dynamic blog functionality.

Additional Features

• Content Process Setup: Managing blog content with markdown processing.
• About Page Revamp: Revising the About page with enhanced content and styling.
• Top Loading Bar: Adding a loading bar for page transitions.
• Line Numbering on Code: Showing line numbers for code snippets.
• Sharing Code via Pieces: Enabling code sharing through Pieces integration.
• OnThisPage Component: Adding an "On This Page" component for easy navigation.

Libraries and Tools Used

• Next.js - React framework for production-ready apps.
• ShadCN - UI components and utilities.
• Tailwind CSS - Utility-first CSS framework.
• Pieces - Code sharing tool.
• Remark & Rehype - Markdown and HTML processing libraries.

Future Enhancements

• SEO Optimizations
• Commenting System
• User Authentication with JWT
• Additional Blog Features like Tags, Categories

Contributing

Feel free to contribute by creating issues or submitting pull requests. Contributions are always welcome!

How to Run the Project

1. Clone the Repository:

   git clone https://github.com/yourusername/markdown-blog-nextjs.git
   cd markdown-blog-nextjs
   
   
   

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.