Ilia Mashkov
724b00d3d5
The "defaults to list mode when localStorage has invalid data" test feeds invalid JSON on purpose; createPersistentStore logs and swallows the parse error, so its warning (with stack) was polluting CI output. Spy on console.warn to silence it and assert it fired, matching the equivalent test in createPersistentStore.test.ts.
GlyphDiff
A modern font exploration and comparison tool for browsing fonts from Google Fonts and Fontshare with real-time visual comparisons, advanced filtering, and customizable typography.
Features
- Multi-Provider Catalog: Browse fonts from Google Fonts and Fontshare in one place
- Side-by-Side Comparison: Compare up to 4 fonts simultaneously with customizable text, size, and typography settings
- Advanced Filtering: Filter by category, provider, character subsets, and weight
- Virtual Scrolling: Fast, smooth browsing of thousands of fonts
- Responsive UI: Beautiful interface built with Tailwind CSS
- Type-Safe: Full TypeScript coverage with strict mode enabled
Tech Stack
- Framework: Svelte 5 with reactive primitives (runes)
- Styling: Tailwind CSS v4
- Components: Bits UI primitives
- State Management: TanStack Query for async data
- Architecture: Feature-Sliced Design (FSD)
- Quality: oxlint (linting), dprint (formatting), lefthook (git hooks)
Project Structure
src/
├── app/ # App shell, layout, providers
├── widgets/ # Composed UI blocks (ComparisonSlider, SampleList, FontSearch)
├── features/ # Business features (filters, search, display)
├── entities/ # Domain models and stores (Font, Breadcrumb)
├── shared/ # Reusable utilities, UI components, helpers
└── routes/ # Page-level components
Quick Start
# Install dependencies
yarn install
# Start development server
yarn dev
# Build for production
yarn build
# Preview production build
yarn preview
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 code with dprint |
yarn test:unit |
Run unit tests |
yarn test:unit:ui |
Run Vitest UI |
yarn storybook |
Start Storybook dev server |
Code Style
- Path Aliases: Use
$app/,$shared/,$features/,$entities/,$widgets/,$routes/ - Components: PascalCase (e.g.,
ComparisonSlider.svelte) - Formatting: 100 char line width, 4-space indent, single quotes
- Type Safety: Strict TypeScript with JSDoc comments for public APIs
Architecture Notes
This project follows the Feature-Sliced Design (FSD) methodology for clean separation of concerns. The application uses Svelte 5's new runes system ($state, $derived, $effect) for reactive state management.
License
MIT