feat: revamp 'Uses' page with blockchain and dev tools

2026-08-02 17:31:41 +00:00 · 2025-07-14 11:34:01 +08:00
parent 4c261f07a8
commit 2d260ac894
15 changed files with 595 additions and 437 deletions
@@ -0,0 +1,98 @@
+# 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.