This is Next.js 13 blog with TypeScript, MDX, Prettier, and Tailwind CSS.
First, run the development server:
npm i && npm run dev
Open http://localhost:3000 with your browser to see the result.
To write a new post, create a new .mdx
file inside the posts
directory. The
file name should be the slug of the post.
For example, to create a post with the slug hello-world
, create a file called
hello-world.mdx
inside the posts
directory.
Inside the .mdx
file, you can write your post using Markdown syntax. You can
also use HTML tags inside MDX.
It's recommended to avoid putting an empty language code block in your post:
```
<code></code>
```
instead you can use:
```markdown
<code></code>
```
To run the unit tests with Vitest, run the following command:
npm run test
I also included Playwright for end-to-end testing. To run the end-to-end tests, run the following command:
npm run test:e2e
The color palette used in this project is from Evangelion anime. The colors can be found in here
Color Name | Hex Code |
---|---|
Dark Green | #3f6d4e |
Light Green | #8bd450 |
Dark Violet | #1d1a2f |
Medium Violet | #965fd4 |
Light Violet | #734f9a |
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- MDX Documentation - learn about MDX features and API.
- Tailwind CSS Documentation - learn about Tailwind CSS features and API.
- TypeScript Documentation - learn about TypeScript features and API.
- React Icons - learn about React Icons features and API.
- Vitest Documentation - learn about Vitest features and API.