diff --git a/README.md b/README.md index 00c3c68..7673a60 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,38 @@ # GlyphDiff -A modern, high-performance font exploration tool for browsing and comparing fonts from Google Fonts and Fontshare. +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 +## 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 +- **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 +## 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) +- **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) -## ๐Ÿ“ Architecture +## Project Structure ``` 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 +โ”œโ”€โ”€ 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 +## Quick Start ```bash # Install dependencies @@ -40,81 +41,38 @@ 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 - -```bash -yarn check # Single run -yarn check:watch # Watch mode -``` - -### Testing - -```bash -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 - -```bash -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 - -```bash +# Build for production yarn build + +# Preview production build yarn preview ``` -## ๐Ÿ“š Learn More +## Available Scripts -- [Svelte 5 Documentation](https://svelte-5-preview.vercel.app/docs) -- [Feature-Sliced Design](https://feature-sliced.design) -- [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha) -- [shadcn-svelte](https://www.shadcn-svelte.com) +| 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 | -## ๐Ÿ“„ License +## 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