- Next.js 16 (App Router), React 19
- Tailwind CSS v4
- TypeScript
- Vercel Analytics + Speed Insights
- Bun
- Formatting: Prettier +
prettier-plugin-tailwindcss(class sorting), runs in CI with--write. - Linting: ESLint flat config (Next core-web-vitals + TS);
eslint-plugin-simple-import-sortgroups imports;eslint-plugin-tailwindcssenforces class order/syntax (v4 aware). - Imports: Ordered react/next/external → hooks → components → lib → types → alias → relative via simple-import-sort.
- Styles: Color tokens live in
styles/globals.css(light/dark via CSS vars); no prose plugin. - Content: TSX in
src/content/blog; metadata exported per file.
Skipped @tailwindcss/typography to keep output lean and predictable. Text/UI primitives live in src/components/typography.tsx. Posts are plain TSX files in src/content/blog, so no MDX pipeline is required; code highlighting now uses Bright (server-rendered, dual-theme aware).
- Headings add hash anchors via
next/linkand respect our spacing tokens. - Text primitives:
Text,Lead,Small,Quote,List(as="ol"for ordered),CodeInline,Surface(card),Prose(wrapper spacing). - Tables:
Table,Tr,Th,Tdkeep borders/padding consistent. - Code:
CodeBlock(Bright),CodeInline. - Images:
imgmaps tonext/imagewith rounding/default sizing (remote allowed). - Why: One place for spacing and color decisions, no prose defaults, no scattered
dark:utilities. Theme tokens stay instyles/globals.css; typography handles layout.
Content lives in src/content/blog/*.tsx; blog/[slug]/page.tsx dynamically imports each post component and its meta.
bun run dev— start dev serverbun run build— production buildbun run build:verify— test → typecheck → prettier → lint → build (mutating)bun run test— bun tests intests/bun run lint— eslint with auto-fixbun run prettier— format all files
- Routes:
/,/blog,/blog/:slug - SEO helpers:
robots.ts,sitemap.ts, metadata inlayout.tsx
| Category | Packages |
|---|---|
| Core | next 16.0.7, react 19.2.1, react-dom 19.2.1, @radix-ui/react-icons 1.3.2 |
| Code | bright ^1.0.0 |
| Styling | tailwindcss 4.1.17, prettier-plugin-tailwindcss 0.7.2, @tailwindcss/postcss 4.1.17 |
| Lint/Type | eslint 9.39.1, eslint-config-next 16.0.7, eslint-plugin-simple-import-sort 12.1.1, eslint-plugin-tailwindcss 4.0.0-beta.0, typescript 5.9.3, @types/node 24.10.1, @types/react 19.2.7, @types/react-dom 19.2.3 |
| Analytics | @vercel/analytics 1.6.1, @vercel/speed-insights 1.3.1 |
| Runtime | bun 1.2.21 |
- Scaffolded core routes (home/index, blog index/detail)
- SEO helpers wired (metadata, robots, sitemap with lastModified)
- ESLint + Prettier configured (Tailwind/import sorting)
- Tailwind v4 tokens/theme set up
- Blog rendering pipeline (TSX posts + dynamic import) and listing
- Write tests for posts parsing, sitemap/robots output, and button variants
- Theme-aware components; consider light toggle
- Code highlight refinements and code block components
- Unified button/badge/callout variants with shared color tokens
- Per-post OG image generation (shared generator for /blog)
- Replace placeholder page content with real sections/components
- SEO generation extracted from post meta
- Portfolio detail page (architecture, patterns, etc.)
- Blog rich layout enhancements - tags, filtering blogs, next/previous blog, further reading, image captions underneath blog, blog author with social links, blog footer cta?)
- Per-post OG image generation
- Navigation/footer wired to
NAV_LINKS/FOOTER_LINKS - Deploy to Vercel and verify analytics
- Post-launch performance and accessibility optimizations