This commit is contained in:
Ilia Mashkov
140
README.md
140
README.md
@@ -1,37 +1,38 @@
|
|||||||
# GlyphDiff
|
# 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
|
- **Multi-Provider Catalog**: Browse fonts from Google Fonts and Fontshare in one place
|
||||||
- **Fast Virtual Scrolling**: Handles thousands of fonts smoothly with custom virtualization
|
- **Side-by-Side Comparison**: Compare up to 4 fonts simultaneously with customizable text, size, and typography settings
|
||||||
- **Advanced Filtering**: Filter by category, provider, and character subsets
|
- **Advanced Filtering**: Filter by category, provider, character subsets, and weight
|
||||||
- **Responsive Design**: Beautiful UI built with shadcn components and Tailwind CSS
|
- **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
|
- **Type-Safe**: Full TypeScript coverage with strict mode enabled
|
||||||
|
|
||||||
## 🛠️ Tech Stack
|
## Tech Stack
|
||||||
|
|
||||||
- **Frontend**: Svelte 5 with runes (reactive primitives)
|
- **Framework**: Svelte 5 with reactive primitives (runes)
|
||||||
- **Styling**: Tailwind CSS v4 + shadcn-svelte components
|
- **Styling**: Tailwind CSS v4
|
||||||
- **Data Fetching**: TanStack Query for caching and state management
|
- **Components**: shadcn-svelte (via bits-ui)
|
||||||
- **Architecture**: Feature-Sliced Design (FSD) methodology
|
- **State Management**: TanStack Query for async data
|
||||||
- **Testing**: Playwright (E2E), Vitest (unit), Storybook (components)
|
- **Architecture**: Feature-Sliced Design (FSD)
|
||||||
- **Quality**: Oxlint (linting), Dprint (formatting), Lefthook (git hooks)
|
- **Quality**: oxlint (linting), dprint (formatting), lefthook (git hooks)
|
||||||
|
|
||||||
## 📁 Architecture
|
## Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
src/
|
src/
|
||||||
├── app/ # App shell, layout, providers
|
├── app/ # App shell, layout, providers
|
||||||
├── widgets/ # Composed UI blocks
|
├── widgets/ # Composed UI blocks (ComparisonSlider, SampleList, FontSearch)
|
||||||
├── features/ # Business features (filters, search)
|
├── features/ # Business features (filters, search, display)
|
||||||
├── entities/ # Domain entities (Font models, stores)
|
├── entities/ # Domain models and stores (Font, Breadcrumb)
|
||||||
├── shared/ # Reusable utilities, UI components, helpers
|
├── shared/ # Reusable utilities, UI components, helpers
|
||||||
└── routes/ # Page-level components
|
└── routes/ # Page-level components
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🚀 Quick Start
|
## Quick Start
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Install dependencies
|
# Install dependencies
|
||||||
@@ -40,81 +41,38 @@ yarn install
|
|||||||
# Start development server
|
# Start development server
|
||||||
yarn dev
|
yarn dev
|
||||||
|
|
||||||
# Open in browser
|
# Build for production
|
||||||
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
|
|
||||||
yarn build
|
yarn build
|
||||||
|
|
||||||
|
# Preview production build
|
||||||
yarn preview
|
yarn preview
|
||||||
```
|
```
|
||||||
|
|
||||||
## 📚 Learn More
|
## Available Scripts
|
||||||
|
|
||||||
- [Svelte 5 Documentation](https://svelte-5-preview.vercel.app/docs)
|
| Command | Description |
|
||||||
- [Feature-Sliced Design](https://feature-sliced.design)
|
| ------------------- | -------------------------- |
|
||||||
- [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha)
|
| `yarn dev` | Start development server |
|
||||||
- [shadcn-svelte](https://www.shadcn-svelte.com)
|
| `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
|
MIT
|
||||||
|
|||||||
Reference in New Issue
Block a user