dc72b9e048
Summary of all phases implemented: Phase 1 - Proxy API Client (Days 1-2) ✓ Created src/entities/Font/api/proxy/proxyFonts.ts ✓ Implemented fetchProxyFonts with pagination support ✓ Implemented fetchProxyFontById convenience function ✓ Added TypeScript interfaces: ProxyFontsParams, ProxyFontsResponse Phase 2 - Unified Font Store (Days 3-4) ✓ Implemented UnifiedFontStore extending BaseFontStore ✓ Added pagination support with derived metadata ✓ Added provider-specific shortcuts (setProvider, setCategory, etc.) ✓ Added pagination methods (nextPage, prevPage, goToPage) ✓ Added category getter shortcuts (sansSerifFonts, serifFonts, etc.) Phase 3 - Filter Mapper (Day 5) ✓ Updated mapManagerToParams to return Partial<ProxyFontsParams> ✓ Map providers array to single provider value ✓ Map categories array to single category value ✓ Map subsets array to single subset value Phase 4 - UI Components (Days 6-7) ✓ Replaced fontshareStore with unifiedFontStore in FontSearch.svelte ✓ Replaced fontshareStore with unifiedFontStore in SuggestedFonts.svelte ✓ Updated entity exports to include unifiedFontStore ✓ Updated model exports to include unified store exports Phase 5 - Integration Testing (Days 8-9) ✓ Verified type checking with no new errors ✓ Verified linting with no new issues ✓ All code compiles correctly Phase 6 - Cleanup and Removal (Days 10-11) ✓ Deleted googleFontsStore.svelte.ts ✓ Deleted fontshareStore.svelte.ts ✓ Deleted fetchGoogleFonts.svelte.ts ✓ Deleted fetchFontshareFonts.svelte.ts ✓ Deleted services/index.ts ✓ Removed deprecated exports from Font entity ✓ Removed deprecated exports from model index Phase 7 - Final Verification (Day 12) ✓ Type checking passes (7 pre-existing errors in shadcn) ✓ Linting passes (3 pre-existing warnings) ✓ No remaining references to old stores ✓ All code compiles correctly Architecture Changes: - Single unified font store replacing separate Google/Fontshare stores - Proxy API handles provider aggregation and normalization - Simplified parameter mapping to single values - TanStack Query caching maintained - Backward compatibility preserved for API functions Benefits: - Reduced code duplication - Single source of truth for font data - Easier to maintain and extend - Provider-agnostic UI components
GlyphDiff
A modern, high-performance font exploration tool for browsing and comparing fonts from Google Fonts and Fontshare.
✨ Features
- Multi-Provider Support: Access fonts from Google Fonts and Fontshare in one place
- Fast Virtual Scrolling: Handles thousands of fonts smoothly with custom virtualization
- Advanced Filtering: Filter by category, provider, and character subsets
- Responsive Design: Beautiful UI built with shadcn components and Tailwind CSS
- Type-Safe: Full TypeScript coverage with strict mode enabled
🛠️ Tech Stack
- Frontend: Svelte 5 with runes (reactive primitives)
- Styling: Tailwind CSS v4 + shadcn-svelte components
- Data Fetching: TanStack Query for caching and state management
- Architecture: Feature-Sliced Design (FSD) methodology
- Testing: Playwright (E2E), Vitest (unit), Storybook (components)
- Quality: Oxlint (linting), Dprint (formatting), Lefthook (git hooks)
📁 Architecture
src/
├── app/ # App shell, layout, providers
├── widgets/ # Composed UI blocks
├── features/ # Business features (filters, search)
├── entities/ # Domain entities (Font models, stores)
├── shared/ # Reusable utilities, UI components, helpers
└── routes/ # Page-level components
🚀 Quick Start
# Install dependencies
yarn install
# Start development server
yarn dev
# Open in browser
yarn dev -- --open
📦 Available Scripts
| Command | Description |
|---|---|
yarn dev |
Start development server |
yarn build |
Build for production |
yarn preview |
Preview production build |
yarn check |
Run Svelte type checking |
yarn lint |
Run oxlint |
yarn format |
Format with dprint |
yarn test |
Run all tests (E2E + unit) |
yarn test:e2e |
Run Playwright E2E tests |
yarn test:unit |
Run Vitest unit tests |
yarn storybook |
Start Storybook dev server |
🧪 Development
Type Checking
yarn check # Single run
yarn check:watch # Watch mode
Testing
yarn test:unit # Unit tests
yarn test:unit:watch # Watch mode
yarn test:unit:ui # Vitest UI
yarn test:e2e # E2E tests with Playwright
yarn test:e2e --ui # Interactive test runner
Code Quality
yarn lint # Lint code
yarn format # Format code
yarn format:check # Check formatting
🎯 Key Components
- VirtualList: Custom high-performance list virtualization using Svelte 5 runes
- FontList: Displays fonts with loading, empty, and error states
- FilterControls: Multi-filter system for category, provider, and subsets
- TypographyControl: Dynamic typography adjustment controls
📝 Code Style
- Path Aliases: Use
$app/,$shared/,$features/,$entities/,$widgets/,$routes/ - Components: PascalCase (e.g.,
CheckboxFilter.svelte) - Formatting: 100 char line width, 4-space indent, single quotes
- Imports: Auto-sorted by dprint, separated by blank line
- Type Safety: Strict TypeScript, JSDoc comments for public APIs
🏗️ Building for Production
yarn build
yarn preview
📚 Learn More
📄 License
MIT