feat: edit readme.md

2026-02-09 09:57:41 +03:00
parent d64de6f06b
commit fc5a5c44e7
1 changed files with 49 additions and 91 deletions
--- 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)
+├── 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
+# Build for production
+yarn build
+
+# Preview production build
+yarn preview
 ```

-## 📦 Available Scripts
+## 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 format`       | Format code with dprint    |
+| `yarn test:unit`    | Run unit tests             |
+| `yarn test:unit:ui` | Run Vitest UI              |
 | `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
+## Code Style

 - **Path Aliases**: Use `$app/`, `$shared/`, `$features/`, `$entities/`, `$widgets/`, `$routes/`
- **Components**: PascalCase (e.g., `CheckboxFilter.svelte`)
+- **Components**: PascalCase (e.g., `ComparisonSlider.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
+- **Type Safety**: Strict TypeScript with JSDoc comments for public APIs

-## 🏗️ Building for Production
+## Architecture Notes

-```bash
-yarn build
-yarn preview
-```
+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.

-## 📚 Learn More
-
- [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)
-
-## 📄 License
+## License

 MIT