mirror of
https://github.com/prdlk/website.git
synced 2026-08-02 17:31:41 +00:00
98 lines
3.2 KiB
Markdown
98 lines
3.2 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is a personal portfolio/blog website built with Next.js 13.4.16 (App Router), TypeScript, and Tailwind CSS. It's based on the Tailwind UI "Spotlight" template and features a modern, responsive design with dark mode support.
|
|
|
|
## Essential Commands
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Run development server (http://localhost:3000)
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Start production server
|
|
npm start
|
|
|
|
# Run linting
|
|
npm run lint
|
|
|
|
# Type checking (via build process)
|
|
npm run build
|
|
```
|
|
|
|
## Architecture & Key Patterns
|
|
|
|
### Directory Structure
|
|
- **`/src/app/`** - Next.js App Router pages and layouts
|
|
- Each page is in its own directory with `page.tsx` or `page.mdx`
|
|
- Articles are MDX files in subdirectories under `/articles/`
|
|
- RSS feed generation at `/feed.xml/`
|
|
|
|
- **`/src/components/`** - Reusable React components
|
|
- Layout components extend from `Layout.tsx`
|
|
- All components use TypeScript with proper type definitions
|
|
- Components use Tailwind CSS classes for styling
|
|
|
|
- **`/src/lib/`** - Utility functions
|
|
- `articles.ts` - Functions for loading and managing MDX articles
|
|
- `formatDate.ts` - Date formatting utilities
|
|
|
|
### Content Management
|
|
- Articles are written in MDX format in `/src/app/articles/[slug]/page.mdx`
|
|
- Each article directory can contain images alongside the MDX file
|
|
- Article metadata is defined in the MDX frontmatter
|
|
- The `ArticleLayout` component wraps all article content
|
|
|
|
### Styling Approach
|
|
- Tailwind CSS utility classes for all styling
|
|
- Dark mode support via `next-themes` package
|
|
- Typography plugin for prose content styling
|
|
- Custom Tailwind configuration in `tailwind.config.js`
|
|
- Code syntax highlighting with Prism CSS
|
|
|
|
### TypeScript Configuration
|
|
- Strict mode enabled
|
|
- Path alias `@/*` maps to `./src/*`
|
|
- All components and utilities should have proper TypeScript types
|
|
|
|
### Important Files
|
|
- `next.config.mjs` - Next.js configuration with MDX support
|
|
- `tailwind.config.js` - Tailwind CSS customization
|
|
- `.env.local` - Must set `NEXT_PUBLIC_SITE_URL` for production
|
|
|
|
## Development Guidelines
|
|
|
|
### Adding New Pages
|
|
1. Create a new directory under `/src/app/`
|
|
2. Add a `page.tsx` file with proper TypeScript types
|
|
3. Use the `SimpleLayout` or custom layout components
|
|
4. Follow existing page patterns for consistency
|
|
|
|
### Adding New Articles
|
|
1. Create a new directory under `/src/app/articles/[article-name]/`
|
|
2. Add a `page.mdx` file with frontmatter including title, description, author, and date
|
|
3. Place any images in the same directory
|
|
4. Articles automatically appear in the articles list and RSS feed
|
|
|
|
### Component Development
|
|
- Always use TypeScript with proper type definitions
|
|
- Follow existing component patterns for props and structure
|
|
- Use Tailwind CSS classes; avoid inline styles
|
|
- Components should be reusable and properly abstracted
|
|
|
|
### Environment Setup
|
|
Before running the project, create a `.env.local` file:
|
|
```
|
|
NEXT_PUBLIC_SITE_URL=https://your-domain.com
|
|
```
|
|
|
|
## No Testing Framework
|
|
This project does not currently have a testing framework configured. Consider adding Jest and React Testing Library if test coverage is needed. |