👋 Welcome! We're thrilled you want to help improve LexiconForge.
🚀 New to the project? Check out our Newcomer Onboarding Guide for a step-by-step walkthrough of the codebase and your first contribution.
- Node 18+ recommended
npm installnpm run dev(Vite)
Understanding where things live helps you contribute effectively. Here's the organized structure:
LexiconForge/
├── config/ # 📋 Configuration files (edit here to change defaults!)
│ ├── app.json # Main app config: default models, AI parameters, image settings
│ ├── costs.ts # Model pricing data for cost estimation
│ ├── constants.ts # Available models, websites, abbreviations
│ └── prompts.json # AI system prompts and translation instructions
│
├── components/ # 🎨 React UI components
│ ├── icons/ # SVG icon components (used in selection/feedback controls)
│ │ ├── SettingsIcon.tsx
│ │ ├── TrashIcon.tsx
│ │ └── ... # Add your custom emoji icons here
│ ├── ChapterView.tsx # Main reader/translation view
│ ├── InputBar.tsx # URL input with website suggestions
│ ├── SettingsModal.tsx # Settings UI (model selection, API keys)
│ ├── FeedbackPopover.tsx # Selection feedback controls (👍 👎 ? 🎨)
│ └── ...
│
├── services/ # 🔧 Business logic and external integrations
│ ├── aiService.ts # Translation API calls (Gemini, OpenAI, DeepSeek, Claude)
│ ├── imageService.ts # Image generation (Imagen, Flux)
│ ├── audio/ # Audio generation services
│ ├── db/ # Database operations (IndexedDB)
│ ├── epub/ # EPUB export functionality
│ ├── adapters.ts # Website content extractors
│ └── ...
│
├── store/ # 📦 Zustand state management
│ ├── index.ts # Main store setup
│ └── slices/ # Feature-specific state slices
│ ├── settingsSlice.ts # App settings & prompt templates
│ ├── translationsSlice.ts # Translation state & history
│ ├── chaptersSlice.ts # Chapter data & navigation
│ └── ...
│
├── adapters/ # 🔌 Translation provider adapters
│ └── providers/ # Provider adapters + registration
│
├── types.ts # 📝 TypeScript type definitions
├── utils/ # 🛠️ Helper functions
├── hooks/ # ⚛️ Custom React hooks
├── tests/ # 🧪 Test files
├── docs/ # 📚 Documentation
│ ├── adr/ # Architecture Decision Records
│ ├── WORKLOG.md # Development log
│ └── ...
└── archive/ # 🗄️ Deprecated code (kept for reference)
Want to add custom emojis to the toolbar?
- Add your SVG icon component to
components/icons/ - Import and use it in
components/FeedbackPopover.tsx
Want to change default models or AI parameters?
- Edit
config/app.json→defaultModelssection
Want to add a new translation provider?
- Create adapter in
adapters/providers/ - Follow the
TranslationProviderinterface - Register it in
adapters/providers/index.ts(seedocs/META_ADAPTER.md)
Want to add support for a new website?
- Create adapter class in
services/adapters.ts - Add website config to
config/constants.ts→SUPPORTED_WEBSITES_CONFIG - Follow
docs/META_ADAPTER.mdfor structure
Want to modify AI prompts?
- Edit
config/prompts.json(all translation instructions live here)
Want to adjust pricing?
- Edit
config/costs.ts→COSTS_PER_MILLION_TOKENSorIMAGE_COSTS
- Run all:
npm test - Coverage:
npm run test:coverage - UI runner:
npm run test:ui
- See
docs/anddocs/adr/for architecture. - Update
docs/WORKLOG.mdwith a timestamped summary for non‑trivial changes.
- Conventional commits (e.g.,
feat:,fix:,docs:,refactor:) - One logical change per commit; keep diffs focused.
- Services ≤ 200 LOC; Components ≤ 250 LOC (see ADR‑005)
- Prefer extracting helpers and modules instead of growing files
- Website adapters: follow
docs/META_ADAPTER.md - Translation providers: implement
TranslationProviderand register inadapters/providers/index.ts
- See
docs/Debugging.mdfor flags and safety notes