Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

sabertazimi/blog

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Next.js

Next.js Blog Starter

Author LICENSE

Code Lines Top Language

CI CodeQL Jest Coverage

An awesome blog system based on Next.js.

✨ Features

Visual Features

  • 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.

Development Features

  • 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.

πŸ“‘ Post Template

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>

πŸš€ Quick start

Installation

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

Development

# http://localhost:3000
pnpm start

Open the source code and start editing!

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

🌠 Deployment

Deploy to Vercel

Build for / path:

# Deploy to Vercel.
pnpm run build

πŸ“‚ Fold Structure

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.

🚧 Caveats

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.

πŸ”– Contact

Email Twitter GitHub

Morty Proxy This is a proxified and sanitized view of the page, visit original site.