My Blog

A modern, multilingual blog built with Next.js, featuring a beautiful dark mode, MDX support, and internationalization.

Features

• 🌐 Internationalization (i18n)

  • Support for multiple languages (currently English and Portuguese)
  • Easy language switching with URL-based routing
  • Seamless content translation management

• 🌙 Dark Mode

  • Beautiful dark/light theme switching
  • System preference detection
  • Persistent theme selection

• 📝 MDX Support

  • Write posts in MDX format
  • Code syntax highlighting
  • Support for React components in markdown
  • Automatic slug generation

• 🎨 Modern Design

  • Clean and responsive layout
  • Tailwind CSS for styling
  • Custom components for consistent UI
  • Smooth animations and transitions

• 🧪 Testing

  • Comprehensive test suite with Vitest
  • Component testing with React Testing Library
  • High test coverage

Getting Started

Prerequisites

• Node.js (v18 or higher)
• Yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/dennercodes/blog.git
cd blog

2. Install dependencies:

yarn install

3. Start the development server:

yarn dev

The blog will be available at http://localhost:3000.

Project Structure

├── src/
│   ├── app/                 # Next.js app router pages
│   ├── components/          # React components
│   ├── content/
│   │   └── blog/           # MDX blog posts by language
│   ├── i18n/               # Internationalization setup
│   ├── messages/           # Translation messages
│   ├── providers/          # React context providers
│   └── utils/              # Utility functions
├── public/                 # Static assets
├── messages/              # Translation files
└── tests/                 # Test files

Writing Posts

1. Create a new MDX file in src/content/blog/[language]/ directory
2. Add frontmatter with required fields:

---
title: Your Post Title
description: A brief description
date: '2024-03-23'
tags: ['tag1', 'tag2']
locale: 'en'
originalTitle: 'Original Title' # For translations
---

3. Write your content in MDX format
4. The post will automatically appear in the blog list

Translation

1. Create corresponding MDX files in each language directory
2. Use the same originalTitle to link translations
3. Update translation messages in messages/[lang].json

Available Scripts

• yarn dev - Start development server
• yarn build - Build for production
• yarn start - Start production server
• yarn test - Run tests
• yarn lint - Run ESLint
• yarn type-check - Run TypeScript type checking

Technologies

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• next-intl - Internationalization
• MDX - Markdown with JSX
• Vitest - Testing framework
• React Testing Library - Component testing
• Radix UI - Accessible components

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Denner Rondinely - GitHub

Acknowledgments

• Next.js Documentation
• next-intl Documentation
• Tailwind CSS Documentation
• MDX Documentation