Code Monkey home page Code Monkey logo

nextjs-mdx-blog's Introduction

NextJS - MDX - shadcn-ui - Tailwind - Blog

UPDATED on 2023-08-22 to use Next.js App Router!

A Next.js starter template for your next blog or personal site. Built with:

This Starter is heavily inspired by Lee Robinson.

๐Ÿ‘€ View the Live Demo

Getting Started

git clone https://github.com/ChangoMan/nextjs-mdx-blog.git
cd nextjs-typescript-mdx-blog

npm install

npm run dev

Your new site will be up at http://localhost:3000/

Blog posts can be added to the posts directory, in the root folder.

Update the WEBSITE_HOST_URL when taking your site live. This lives in /src/lib/constants.ts

Make sure to update the sitemap.ts file, specifically the const routes if you add more pages to the website.

nextjs-mdx-blog's People

Contributors

changoman avatar ysuzuki19 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

nextjs-mdx-blog's Issues

Page jitter/shake issue

At first load, content appears on the screen after a jittery shake. The issue can be reproduced by reloading the page, also sometimes by going to a different route.

I'm trying to fix it. However, I still need to find the cause of the issue.

Unexpected token '.'

Right from the get started

git clone https://github.com/ChangoMan/nextjs-typescript-mdx-blog.git
cd nextjs-typescript-mdx-blog

npm install
npm run dev

this exception happens when opening any of the posts pages

"
Server Error
SyntaxError: Unexpected token '.'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Loader.moduleStrategy
internal/modules/esm/translators.js (133:18)
"

npm version
{
  'nextjs-typescript-mdx-blog': '1.0.0',
  npm: '8.5.1',
  node: '12.22.9',
  v8: '7.8.279.23-node.56',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '72',
  nghttp2: '1.43.0',
  napi: '8',
  llhttp: '2.1.4',
  http_parser: '2.9.4',
  openssl: '1.1.1m',
  cldr: '40.0',
  icu: '70.1',
  tz: '2022a',
  unicode: '14.0'
}
cat package.json
{
  "name": "nextjs-typescript-mdx-blog",
  "author": "@hunterhchang",
  "license": "MIT",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --pretty --noEmit",
    "format": "prettier --write .",
    "lint": "eslint . --ext ts --ext tsx --ext js",
    "test": "jest",
    "test-all": "yarn lint && yarn type-check && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn run type-check"
    }
  },
  "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
  },
  "dependencies": {
    "@tailwindcss/typography": "^0.5.7",
    "date-fns": "^2.29.2",
    "gray-matter": "^4.0.3",
    "mdx-prism": "^0.3.4",
    "next": "^12.3.0",
    "next-mdx-remote": "^4.1.0",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.0.1",
    "@types/node": "^18.7.17",
    "@types/react": "^18.0.19",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "autoprefixer": "^10.4.9",
    "babel-jest": "^29.0.3",
    "eslint": "^8.23.1",
    "eslint-config-next": "^12.3.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.31.8",
    "husky": "^8.0.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.0.3",
    "jest-watch-typeahead": "^2.2.0",
    "lint-staged": "^13.0.3",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
    "rehype": "^12.0.1",
    "rehype-autolink-headings": "6.1.1",
    "rehype-code-titles": "1.1.0",
    "rehype-prism-plus": "^1.5.0",
    "rehype-slug": "5.0.1",
    "remark-gfm": "^3.0.1",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.8.3"
  }
}

update Tailwind to 3.00^ version

The current template has 2.2^ version as of now the 3rd version has been released which has a lots of breaking changes comapred to previous version.

Update Other package versions too.

Multilingual

HIi, can I make it multilingual? I mean the markdown blog.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.