CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Development Commands
Build and Development
npm run docs:dev
- Start VitePress development servernpm run docs:build
- Build the static site for productionnpm run docs:preview
- Preview the built site locally
No Additional Tools
This project does not include linting, testing, or other development tools. The codebase focuses solely on content generation and site building.
Project Architecture
Technology Stack
- VitePress: Static site generator for documentation
- TypeScript: Configuration and utility files
- Markdown: Content files with frontmatter
Site Structure
This is a multilingual SMS verification service documentation site with the following structure:
- Root (
/
): Chinese (Simplified) - Default locale - Localized versions:
zh-TW/
,en/
,ja/
,ru/
,ko/
,id/
- Content categories:
encyclopedia/
- Educational articles about SMS verificationpopular-services/
- Service-specific guides- Static pages:
intro.md
,faq.md
,tutorial.md
, etc.
Configuration Architecture
The site uses a centralized configuration system:
Main config: .vitepress/config.mts
- Defines locale configurations for 7 languages
- Shared navigation and footer settings
- SEO optimization with structured data
- Dynamic sidebar generation
Utility functions: .vitepress/utils/sidebar.ts
generateEncyclopediaItems()
- Dynamically generates sidebar items from encyclopedia markdown filesgeneratePopularServicesItems()
- Dynamically generates sidebar items from popular services markdown files- Both functions read filesystem and extract titles from markdown headers
Data loaders: *.data.js
files
- VitePress content loaders that transform markdown files into structured data
- Used for dynamic content generation in each locale
Content Management Pattern
Content Structure:
- Each locale maintains identical file structure
- Articles are mirrored across all supported languages
- Sidebar navigation is auto-generated from actual files
Dynamic Navigation:
- Sidebar items are generated at build time by reading directory contents
- Article titles are extracted from markdown
# Header
content - Localized navigation labels based on language codes
SEO Optimization:
- Structured data (JSON-LD) for organization and services
- Canonical URLs with proper hreflang tags
- Dynamic meta tags and Open Graph properties
- Optimized image loading with preload hints
Key Files and Directories
Configuration:
.vitepress/config.mts
- Main VitePress configuration.vitepress/utils/sidebar.ts
- Sidebar generation utilitiespackage.json
- Project dependencies and scripts
Content:
index.md
- Homepage with hero section and features[locale]/encyclopedia/
- Educational content directories[locale]/popular-services/
- Service-specific guides*.data.js
- VitePress data loaders for dynamic content
Assets:
public/
- Static assets (images, fonts, scripts)/logo.svg
,/homeImg.svg
- Key branding assets
Development Guidelines
Adding New Content
- Create markdown files in the appropriate language directories
- Use consistent frontmatter structure with title and description
- Sidebar navigation will auto-generate from file structure
- Ensure all locales maintain parallel content structure
Sidebar Management
- DO NOT manually edit sidebar items in config
- Add new articles by creating markdown files in the appropriate directories
- The
generateEncyclopediaItems()
andgeneratePopularServicesItems()
functions will automatically include them
Multi-language Support
- Maintain identical file structures across all locale directories
- Use the locale parameter in utility functions for language-specific content
- Keep navigation labels consistent with the established pattern
SEO Considerations
- The site implements comprehensive SEO optimization
- Meta tags and structured data are auto-generated
- Focus on content quality as technical SEO is handled by the configuration
Common Patterns
Adding New Encyclopedia Articles
- Create markdown file in
encyclopedia/
directory - Start with
# Article Title
as the first header - The title will be automatically extracted for sidebar navigation
- Replicate across all locale directories for consistency
Adding New Service Guides
- Create markdown file in
popular-services/
directory - Follow the same title extraction pattern
- Use consistent naming conventions across locales
Content Frontmatter Structure
yaml
---
title: "Page Title"
description: "Page description for SEO"
# Additional frontmatter as needed
---
This architecture prioritizes content management efficiency while maintaining comprehensive SEO optimization and multi-language support.