An awesome blog system based on Next.js.

• Great landing page.
• Typing effect for landing page title.
• Great fluid of post card.
• Great tags cloud page: separate page for posts under each tag.
• Great GitHub information card.
• Social share buttons.
• Full-featured MDX support:
  • Optimized vertical rhythm for headings and paragraphs.
  • Custom almost all Markdown built-in components.
  • GFM syntax support.
  • Katex math support.
  • Admonition container support.
  • Emoji short code support.
  • Image preview card support.
  • Pretty code blocks support:
    • Syntax highlight using PrismJS.
    • macOS style code box.
    • Line number support.
    • Lines highlight support.
    • Custom code title support.
    • Quick code copy support.
  • Out of box support for live code editor.
  • Automatically generated sidebar navigation, table of contents, previous and next post navigation links.
• Nice animation for page transitions and dynamic routing.
• Motion almost everything.
• Disqus comments system.
• Customized 404 not found page.
• Dark mode support.
• ...and more.

• Lightning fast HMR.
• Dynamic route generation for Markdown posts.
• Optimized build using Rust compiler.
• TypeScript static type checking.
• ESLint, StyleLint and Prettier style checking.
• Out of box support for tailwind.css.
• Fully customizable styles through tailwind.css.
• Mobile-first approach in development.
• Out of box support for Vercel deployment.
• Separate components for everything.
• Complete React components testing using Jest and Testing Library.
• E2E visual testing using Cypress for Chrome and Firefox.
• Optimization for SEO: meta heading, sitemap and robots.txt support.
• Progressive web app (PWA): offline support and webapp manifest support.
• ...and more.

Yaml Front + Markdown Body:

---
layout: post
title: 'React Redux Basic Notes'
subtitle: 'Daily I learned'
author: 'sabertaz'
date: 2022-02-03
tags:
  - Redux
  - React
  - JavaScript
  - Frontend Development
  - Web Development
---

# React Redux Basic Notes

## Introduction

<... more contents>

git clone --depth=1 https://github.com/sabertazimi/blog
cd blog
pnpm install

# http://localhost:3000
pnpm start

Open the source code and start editing!

Your site is now running at http://localhost:3000!

Build for / path:

# Deploy to Vercel.
pnpm run build

A quick look at the top-level files and directories you'll see in a Next.js project.

.
├── node_modules
├── app
├── components
├── config
├── contents
├── cypress
├── hooks
├── layouts
├── lib
├── mocks
├── public
├── styles
├── types
├── .gitignore
├── .tokeignore
├── .prettierrc.json
├── .stylelintrc.json
├── .versionrc.json
├── codecov.yml
├── cypress.config.ts
├── eslint.config.mjs
├── jest.config.js
├── jest.setup.js
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── sitemap.config.js
├── tailwind.config.ts
├── tsconfig.json
├── LICENSE
└── README.md

1. /node_modules: This directory contains all of the modules of code.
2. app: Pages components (SSG) based on Next.js App Router.
3. components: React components building block.
4. config: Blog site configuration (color/metadata/etc.).
5. contents: Blog posts (.md/.mdx).
6. cypress: Cypress E2E testing files.
7. hooks: Hooks for shared logic.
8. layouts: Layouts components.
9. lib: Data fetching helper functions.
10. mocks: Mock API for 3rd-party libraries for Jest testing.
11. public: Static assets.
12. styles: CSS stylesheets files.
13. types: TypeScript shared type definition.
14. .gitignore: This file tells git which files it should not track.
15. .tokeignore: Code Lines configuration file.
16. .prettierrc.json: Prettier configuration file.
17. .stylelintrc.json: StyleLint configuration file.
18. .versionrc.json: Standard Version configuration file.
19. codecov.yml: Codecov CI configuration file.
20. cypress.config.ts: Cypress E2E testing configuration file.
21. eslint.config.mjs: ESLint Flat configuration file.
22. jest.config.js: Jest configuration file.
23. jest.setup.js: Jest basic setup script (after environment setup).
24. next-env.d.ts: Next.js internal type definition.
25. next.config.mjs: Next.js configuration file.
26. package.json: A manifest file for Node.js projects.
27. postcss.config.mjs: PostCSS configuration file.
28. sitemap.config.js: next-sitemap configuration file.
29. tailwind.config.ts: Tailwind.css configuration file.
30. tsconfig.json: TypeScript configuration file.
31. LICENSE: This Next.js starter is licensed under the MIT license.
32. README.md: A text file containing useful reference information.

import and export statements cannot be used inside an MDX file. If you need to use components in your MDX files, they should be provided to /components/MDX/index.ts.

See reason here and explanation here.