79 lines
2.8 KiB
Markdown
79 lines
2.8 KiB
Markdown
# 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 shadcn components and 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**: shadcn-svelte (via bits-ui)
|
|
- **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
|
|
|
|
```bash
|
|
# 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
|