abelcastro.dev

This is the source code of my home page and blog currently hosted in https://abelcastro.dev.

Features:

• Next.js
• Tailwind CSS
• dotenv

This project was bootstrapped with create-next-app.

Getting Started

Provide somehow an Rest-API that returns blog posts as defined in definitions.ts.

Create a .env file based on the .env.template

Install dependencies:

pnpm i

Run the development server:

pnpm dev

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

Tests

Unit tests

This project provides unit tests with vitest.

Run:

pnpm test

With coverage:

pnpm test:coverage

End to end tests

This project provides e2e test with playwright.

Headless run:

pnpm exec playwright test

Run with UI:

pnpm exec playwright test --ui

Ressources

Render Markdwon with MDX

https://nextjs.org/docs/pages/building-your-application/configuring/mdx#remote-mdx

Highlight markdown content

https://gaudion.dev/blog/mdx-syntax-highlighting

Tailwind colors

https://tailwindcss.com/docs/background-color

Next.js metadata

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Run playwright on Gitlab

https://playwright.dev/docs/ci-intro#on-deployment https://cushionapp.com/journal/how-to-use-playwright-with-github-actions-for-e2e-testing-of-vercel-preview

Testing async react server components

testing-library/react-testing-library#1209 (comment)

How to mock useRouter from next/navigation? #48937

vercel/next.js#48937