From 97b66c7a2460bb81dd4e74c34d7c9ac4fa95eda3 Mon Sep 17 00:00:00 2001
From: Valerio Ageno <valerio.ageno@qonto.com>
Date: Sat, 7 Dec 2024 20:56:26 +0100
Subject: [PATCH 1/6] docs: add link and navigation page content

---
 .../src/components/sidebar/config.ts          | 10 ++--
 .../routing/link-and-navigation.mdx           | 52 ++++++++++++++++++-
 spelling_global.txt                           |  1 +
 3 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 spelling_global.txt

diff --git a/apps/documentation/src/components/sidebar/config.ts b/apps/documentation/src/components/sidebar/config.ts
index 58367e01..ad8cd663 100644
--- a/apps/documentation/src/components/sidebar/config.ts
+++ b/apps/documentation/src/components/sidebar/config.ts
@@ -111,6 +111,11 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'Defining routes',
         href: '/documentation/routing/defining-routes',
       },
+      {
+        type: 'element',
+        label: 'Link and navigation',
+        href: '/documentation/routing/link-and-navigation',
+      },
       {
         type: 'element',
         label: 'Pages',
@@ -131,11 +136,6 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'Layouts',
         href: '/documentation/routing/layouts',
       },
-      {
-        type: 'element',
-        label: 'Link and navigation',
-        href: '/documentation/routing/link-and-navigation',
-      },
       {
         type: 'element',
         label: 'Redirecting',
diff --git a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
index 35c07f1c..f0f89070 100644
--- a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
+++ b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
@@ -11,4 +11,54 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs'
 
 # Link and navigation
 
-Todo
+The Tuono router allows you to do client-side route transitions between pages, similar to a single-page application.
+
+A React component called `Link` is provided to do this client-side route transition.
+
+```tsx
+import { Link } from 'tuono'
+
+export default function HomePage() {
+  return (
+    <ul>
+      <li>
+        <Link href="/">Home</Link>
+      </li>
+      <li>
+        <Link href="/about">About Us</Link>
+      </li>
+      <li>
+        <Link href="/blog/hello-world">Blog Post</Link>
+      </li>
+    </ul>
+  )
+}
+```
+
+The example above uses multiple links. Each one maps a path (`href`) to a known route:
+
+- `/` → `src/routes/index.tsx`
+- `/about` → `src/routes/about.tsx`
+- `/blog/hello-world` → `src/routes/blog/[slug].tsx`
+
+Any `<Link />` in the viewport will be prefetched by default when it will appear within the viewport.
+The corresponding data for server-rendered routes is fetched only when the `<Link />` is clicked.
+
+## The useRouter hook
+
+The `Link` component should be able to cover most of your routing needs,
+but you can also do client-side navigations without it using the `useRouter` hook.
+
+```tsx
+import { useRouter } from 'tuono'
+
+export default function GoToAboutPage() {
+  const router = useRouter()
+
+  return (
+    <button onClick={() => router.push('/about')}>
+      Click here to check out the about page
+    </button>
+  )
+}
+```
diff --git a/spelling_global.txt b/spelling_global.txt
new file mode 100644
index 00000000..5f18fbb4
--- /dev/null
+++ b/spelling_global.txt
@@ -0,0 +1 @@
+Tuono tuono tsx

From 2c30fce2bac24eae79f1566a0192f252b63405f9 Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <marco.pasqualetti@live.com>
Date: Sun, 8 Dec 2024 07:42:09 +0100
Subject: [PATCH 2/6] docs(link-and-navigation): improve main section

---
 .../documentation/routing/link-and-navigation.mdx   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
index f0f89070..a6d9fb1b 100644
--- a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
+++ b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
@@ -11,9 +11,10 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs'
 
 # Link and navigation
 
-The Tuono router allows you to do client-side route transitions between pages, similar to a single-page application.
+The Tuono router features client-side route transitions when navigating between pages.
+This could be useful in SPA (single page applications).
 
-A React component called `Link` is provided to do this client-side route transition.
+How? Use the `Link` component provided from Tuono exports:
 
 ```tsx
 import { Link } from 'tuono'
@@ -41,10 +42,12 @@ The example above uses multiple links. Each one maps a path (`href`) to a known
 - `/about` → `src/routes/about.tsx`
 - `/blog/hello-world` → `src/routes/blog/[slug].tsx`
 
-Any `<Link />` in the viewport will be prefetched by default when it will appear within the viewport.
-The corresponding data for server-rendered routes is fetched only when the `<Link />` is clicked.
+> Additional considerations:
+>
+> - Any `<Link />` in the viewport is prefetched by default when it appears within the viewport.
+> - The corresponding data for server-rendered routes is fetched only when the `<Link />` is clicked.
 
-## The useRouter hook
+## The `useRouter` hook
 
 The `Link` component should be able to cover most of your routing needs,
 but you can also do client-side navigations without it using the `useRouter` hook.

From 6260a7b0bb5ac4ae5d19377d09a5dcdbaa9f230a Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <marco.pasqualetti@live.com>
Date: Sun, 8 Dec 2024 07:56:34 +0100
Subject: [PATCH 3/6] docs(link-and-navigation): rewrite useRouter

---
 .../routing/link-and-navigation.mdx              | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
index a6d9fb1b..be0c73fc 100644
--- a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
+++ b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
@@ -49,8 +49,10 @@ The example above uses multiple links. Each one maps a path (`href`) to a known
 
 ## The `useRouter` hook
 
-The `Link` component should be able to cover most of your routing needs,
-but you can also do client-side navigations without it using the `useRouter` hook.
+The Link component is not suitable for programmatic navigation.
+To handle this, the library provides the `useRouter` hook.
+
+For example, after a user submits a form and the API request succeeds, they can be redirected to another page.
 
 ```tsx
 import { useRouter } from 'tuono'
@@ -59,9 +61,13 @@ export default function GoToAboutPage() {
   const router = useRouter()
 
   return (
-    <button onClick={() => router.push('/about')}>
-      Click here to check out the about page
-    </button>
+    <ProfileForm
+      onUpdateSuccess={() => {
+        router.push('/profile')
+      }}
+    />
   )
 }
 ```
+
+> For more information about this hook visit the [dedicated API reference page](/documentation/hooks/use-router).

From 05af91c950429df940e2d6605ca1c170d6b3a4fd Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <marco.pasqualetti@live.com>
Date: Sun, 8 Dec 2024 07:56:50 +0100
Subject: [PATCH 4/6] chore: remove spelling_global.txt

---
 spelling_global.txt | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 spelling_global.txt

diff --git a/spelling_global.txt b/spelling_global.txt
deleted file mode 100644
index 5f18fbb4..00000000
--- a/spelling_global.txt
+++ /dev/null
@@ -1 +0,0 @@
-Tuono tuono tsx

From db6e221d162a03fd43124af736cd5860b18ca14a Mon Sep 17 00:00:00 2001
From: Valerio Ageno <valerioageno@yahoo.it>
Date: Sun, 8 Dec 2024 09:54:22 +0100
Subject: [PATCH 5/6] fix: code block font size

---
 .../src/components/mdx-provider/mdx-code/mdx-code.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/documentation/src/components/mdx-provider/mdx-code/mdx-code.tsx b/apps/documentation/src/components/mdx-provider/mdx-code/mdx-code.tsx
index cf7a9525..0a3d5a57 100644
--- a/apps/documentation/src/components/mdx-provider/mdx-code/mdx-code.tsx
+++ b/apps/documentation/src/components/mdx-provider/mdx-code/mdx-code.tsx
@@ -4,5 +4,5 @@ import { Code } from '@mantine/core'
 export default function MdxCode(
   props: HTMLAttributes<HTMLPreElement>,
 ): JSX.Element {
-  return <Code {...props} style={{ fontSize: 14 }} />
+  return <Code {...props} style={{ fontSize: 'inherit' }} />
 }

From a643d9dbb3087bf3843dc63487427848907df47e Mon Sep 17 00:00:00 2001
From: Valerio Ageno <valerioageno@yahoo.it>
Date: Sun, 8 Dec 2024 10:11:17 +0100
Subject: [PATCH 6/6] docs: update link and navigation intro sentence

---
 .../routes/documentation/routing/link-and-navigation.mdx  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
index be0c73fc..86c4a1e5 100644
--- a/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
+++ b/apps/documentation/src/routes/documentation/routing/link-and-navigation.mdx
@@ -11,10 +11,12 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs'
 
 # Link and navigation
 
-The Tuono router features client-side route transitions when navigating between pages.
-This could be useful in SPA (single page applications).
+The Tuono router facilitates client-side route transitions between pages, enhancing the user experience by:
 
-How? Use the `Link` component provided from Tuono exports:
+- Enabling smooth navigation in single-page applications (SPAs)
+- Preventing page reloads during site navigation
+
+How? Using the `Link` component provided from Tuono exports:
 
 ```tsx
 import { Link } from 'tuono'