Wolfremium's Blog

This is Next.js 13 blog with TypeScript, MDX, Prettier, and Tailwind CSS.

🖥 Getting Started

First, run the development server:

npm i && npm run dev

Open http://localhost:3000 with your browser to see the result.

Configure Firebase Admin SDK:

Transform it into an environment variable:

cat serviceAccountKey.json | jq -c

Then, create a .env.local file in the root directory and add the following environment variables:

FIREBASE_SERVICE_ACCOUNT=<serviceAccountKey.json>

📝 Writing Posts

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>
```

🧪 Testing

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

🎨 Color Palette

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

📔 Learn More

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.