docs: complete readme (#38)

Author: colinlienard

README.md

@@ -1,3 +1,37 @@
+<div align="center">
+
+<img src="./docs/public/logo.svg" alt="" height="128px">
+
 # sv-router
 
-https://www.npmjs.com/package/sv-router
+[![npm](https://badgen.net/npm/v/sv-router)](https://www.npmjs.com/package/sv-router)
+[![install size](https://packagephobia.com/badge?p=sv-router)](https://packagephobia.com/result?p=sv-router)
+
+A feature-rich yet intuitive routing library for Svelte single-page apps.
+
+[Documentation](https://sv-router.vercel.app/) • [Getting Started](https://sv-router.vercel.app/guide/getting-started) • [Reference](https://sv-router.vercel.app/reference)
+
+</div>
+
+---
+
+## Features
+
+- 🔒 **Typesafe navigation**: Get autocomplete and type checking for your routes.
+- 🗂️ **File-based routing (optional)**: Enjoy the DX of a meta-framework-like approach.
+- 🌿 **Nested routes**: Create complex layouts with ease.
+- ⚡ **Performance**: Optimized for speed with built-in code splitting and preloading.
+- 🧩 **Familiar API**: Follows established conventions from popular meta frameworks
+- 🚀 **Made for Svelte 5**: Benefit from faster performance and smaller bundle size.
+
+## Installation
+
+Add it to an existing Svelte project:
+
+```bash
+npm install sv-router
+```
+
+## License
+
+[MIT](./LICENSE) © Colin Lienard

docs/guide/common/active-route.md

@@ -19,7 +19,7 @@ When applied to an anchor tag, this action automatically adds a CSS class when t
 
 ## Programmatically
 
-For more complex scenarios, check if a route is active using the `isActive` function:
+For more complex scenarios, check if a route is active using the `isActive` function, which provides auto-complete and type checking for your routes:
 
 ::: code-group
 

docs/guide/common/navigation.md

@@ -8,7 +8,7 @@ Similar to SvelteKit, standard anchor tags provide basic navigation between page
 <a href="/about">About</a>
 ```
 
-For enhanced type safety, use the `p` function:
+To leverage type-safe navigation, use the `p` function, which provides auto-complete and type checking for your routes.
 
 ::: code-group
 
@@ -44,7 +44,7 @@ You can also pass parameters and additional options:
 
 ## Programmatic Navigation
 
-For navigation triggered by JavaScript events, use the `navigate` function:
+For navigation triggered by JavaScript events, use the `navigate` function, which also provides auto-complete and type checking for your routes:
 
 ::: code-group
 
@@ -53,15 +53,15 @@ For navigation triggered by JavaScript events, use the `navigate` function:
 	import { navigate } from '../router';
 </script>
 
-<button on:click={() => navigate('/about')}>About</button>
+<button onclick={() => navigate('/about')}>About</button>
 ```
 
 ```svelte [File-based]
 <script lang="ts">
 	import { navigate } from 'sv-router/generated';
 </script>
 
-<button on:click={() => navigate('/about')}>About</button>
+<button onclick={() => navigate('/about')}>About</button>
 ```
 
 :::

docs/guide/getting-started.md

@@ -25,6 +25,10 @@ yarn add sv-router
 bun add sv-router
 ```
 
+```sh [deno]
+deno add npm:sv-router
+```
+
 :::
 
 ## Setup

docs/guide/why.md

@@ -12,3 +12,11 @@ sv-router is a feature-rich yet intuitive routing library for Svelte SPAs. It pr
 - **🔌 No Backend Required**: Works perfectly for purely client-side SPAs
 
 Whether you're building a small project or a complex application, sv-router provides the tools you need without the overhead of a full-stack framework.
+
+## Acknowledgements
+
+sv-router draws inspiration from:
+
+- [TanStack Router](https://tanstack.com/router/latest)
+- [Vue Router](https://router.vuejs.org/)
+- [Solid Router](https://docs.solidjs.com/solid-router)