From 93127899ec6ce5a3765fd3cfd32b3af5d7532f4f Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sat, 7 Dec 2024 12:30:08 +0100 Subject: [PATCH 01/11] doc: fill defining-routes page --- .../documentation/routing/defining-routes.mdx | 64 ++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 4000519f..5f85168e 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -11,4 +11,66 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs' # Defining routes -Todo +Tuono has a file-system based router built on the concept of routes. + +When a file is added to the `src/routes` directory, it's automatically available as a route. + +In Tuono, a page is a [React Component](https://react.dev/learn/your-first-component) exported from a `.tsx` file in the `src/routes` directory. +Each page is associated with a route based on its file name. + +Every page is server side rendered by default. + +Example: If you create `src/routes/about.tsx` that exports a React component like below, it will be accessible at /about. + +```tsx +export default function About() { + return
About
+} +``` + +## Index routes + +The router will automatically route files named `index` to the root of the directory. + +- `src/routes/index.tsx` → `/` +- `src/routes/blog/index.tsx`→ `/blog` + +## Nested routes + +The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still. + +- `src/routes/blog/first-post.tsx` → `/blog/first-post` +- `src/routes/dashboard/settings/username.tsx` → `/dashboard/settings/username` + +## Pages with Dynamic Routes + +Tuono supports pages with dynamic routes. For example, if you create a file called `src/routes/posts/[id].tsx`, +then it will be accessible at `posts/1`, `posts/2`, etc. + +## The Root route + +Tuono allows you to have a layout component to wrap all the routes included within the same folder. +To define such component you will have to create a `__root.tsx` file (is allowed only a single `__root` file per folder). + +This file won't generate any route. + +The following example will wrap all the routes defined in the project. + +```tsx +// src/routes/__root.tsx +export default function RootLayout({ children }) { + return
{children}
+} +``` + +The following example wraps only the routes defined within the `src/routes/posts` folder. + +```tsx +// src/routes/posts/__root.tsx +export default function PostRootLayout({ children }) { + return
{children}
+} +``` + +With such examples a `/posts/examples-post` route will be wrapper by both layouts while a +generic `/about` route will just have the first `RootLayout` as wrapper. From b36620907ec892e57cea375aea931125eb00ff52 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sat, 7 Dec 2024 12:39:16 +0100 Subject: [PATCH 02/11] fix: mobile sidebar close button --- apps/documentation/src/components/sidebar/sidebar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx index ad89569c..46ec2fbe 100644 --- a/apps/documentation/src/components/sidebar/sidebar.tsx +++ b/apps/documentation/src/components/sidebar/sidebar.tsx @@ -21,7 +21,7 @@ interface SidebarProps { close: () => void } -function SidebarHeader(): JSX.Element { +function SidebarHeader({ close }: SidebarProps): JSX.Element { const isSm = useMediaQuery('(min-width: 48em)') return ( @@ -99,7 +99,7 @@ function SidebarElements({ close }: SidebarProps): JSX.Element { export default function Sidebar({ close }: SidebarProps): JSX.Element { return ( - + ) From da59a71a73e3cfa2c319be616b2f04db19a31e1b Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:52:18 +0100 Subject: [PATCH 03/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 5f85168e..3287f331 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -18,7 +18,7 @@ When a file is added to the `src/routes` directory, it's automatically available In Tuono, a page is a [React Component](https://react.dev/learn/your-first-component) exported from a `.tsx` file in the `src/routes` directory. Each page is associated with a route based on its file name. -Every page is server side rendered by default. +Every page is rendered server side by default. Example: If you create `src/routes/about.tsx` that exports a React component like below, it will be accessible at /about. From f01c4dc88d8347531f6ce82ffe8aa5b519b50ef3 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:52:32 +0100 Subject: [PATCH 04/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 3287f331..c87e78c9 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -37,7 +37,7 @@ The router will automatically route files named `index` to the root of the direc ## Nested routes -The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still. +You can also create a nested folder structure, and files will still be routed in the same way. - `src/routes/blog/first-post.tsx` → `/blog/first-post` - `src/routes/dashboard/settings/username.tsx` → `/dashboard/settings/username` From 3b76ca4e6cafc23cbc7cc75f4bf8a237297ea2bb Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:53:42 +0100 Subject: [PATCH 05/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index c87e78c9..4ad641ab 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -44,7 +44,8 @@ You can also create a nested folder structure, and files will still be routed in ## Pages with Dynamic Routes -Tuono supports pages with dynamic routes. For example, if you create a file called `src/routes/posts/[id].tsx`, +Tuono supports pages with dynamic routes segments. +For example, if you create a file called `src/routes/posts/[id].tsx`, then it will be accessible at `posts/1`, `posts/2`, etc. ## The Root route From ba8510f4f881757b28530296ca785f62e3535629 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:53:49 +0100 Subject: [PATCH 06/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../routes/documentation/routing/defining-routes.mdx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 4ad641ab..7c746a7e 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -20,13 +20,12 @@ Each page is associated with a route based on its file name. Every page is rendered server side by default. -Example: If you create `src/routes/about.tsx` that exports a React component like below, it will be accessible at /about. +Example: +If you create `src/routes/about.tsx` that exports a React component like: -```tsx -export default function About() { - return
About
-} -``` +CODE + +The `About` component will be rendered when loading /about route. ## Index routes From f785cca402271f868a1421d36c96f4bc1c7da30b Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:53:56 +0100 Subject: [PATCH 07/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 7c746a7e..2a7dcc88 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -47,7 +47,7 @@ Tuono supports pages with dynamic routes segments. For example, if you create a file called `src/routes/posts/[id].tsx`, then it will be accessible at `posts/1`, `posts/2`, etc. -## The Root route +## The Root route (Layout components) Tuono allows you to have a layout component to wrap all the routes included within the same folder. To define such component you will have to create a `__root.tsx` file (is allowed only a single `__root` file per folder). From 2bad3e1d4a7deda55aca84ca20f73ade62e0d9d8 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:54:16 +0100 Subject: [PATCH 08/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 2a7dcc88..30d1d8b2 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -72,5 +72,6 @@ export default function PostRootLayout({ children }) { } ``` -With such examples a `/posts/examples-post` route will be wrapper by both layouts while a -generic `/about` route will just have the first `RootLayout` as wrapper. +Referring to the two examples above consider that: +- `/posts/examples-post` → will be wrapped by both `RootLayout` and `PostRootLayout` +- `/about` → will be wrapped only by `RootLayout` From 7d551b5b277de3ef3072f597252457e482edc614 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:54:22 +0100 Subject: [PATCH 09/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 30d1d8b2..010283d7 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -63,7 +63,9 @@ export default function RootLayout({ children }) { } ``` -The following example wraps only the routes defined within the `src/routes/posts` folder. +### Layout component for specific routes + +A file created in this location will wrap **only** the routes defined within the `src/routes/posts` folder. ```tsx // src/routes/posts/__root.tsx From 35beea7ab238e268bf5c85b9eef34bd3667c12a3 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 7 Dec 2024 13:54:29 +0100 Subject: [PATCH 10/11] Update apps/documentation/src/routes/documentation/routing/defining-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/defining-routes.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index 010283d7..a684eec6 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -54,7 +54,9 @@ To define such component you will have to create a `__root.tsx` file (is allowed This file won't generate any route. -The following example will wrap all the routes defined in the project. +### Layout component for all routes + +A file created in this location will wrap all project route. ```tsx // src/routes/__root.tsx From d8292a3adf56fb33431701ae1f91bea476abdbe6 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sat, 7 Dec 2024 14:03:29 +0100 Subject: [PATCH 11/11] fix: add layout pseudocode --- .../documentation/routing/defining-routes.mdx | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx index a684eec6..c9c25c60 100644 --- a/apps/documentation/src/routes/documentation/routing/defining-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/defining-routes.mdx @@ -23,9 +23,13 @@ Every page is rendered server side by default. Example: If you create `src/routes/about.tsx` that exports a React component like: -CODE +``` +export default function About() { + return
About
+} +``` -The `About` component will be rendered when loading /about route. +The `About` component will be rendered when loading `/about` route. ## Index routes @@ -43,7 +47,7 @@ You can also create a nested folder structure, and files will still be routed in ## Pages with Dynamic Routes -Tuono supports pages with dynamic routes segments. +Tuono supports pages with dynamic routes segments. For example, if you create a file called `src/routes/posts/[id].tsx`, then it will be accessible at `posts/1`, `posts/2`, etc. @@ -77,5 +81,21 @@ export default function PostRootLayout({ children }) { ``` Referring to the two examples above consider that: -- `/posts/examples-post` → will be wrapped by both `RootLayout` and `PostRootLayout` -- `/about` → will be wrapped only by `RootLayout` + +- `/posts/examples-post` → will be wrapped by: + +```tsx + + + + + +``` + +- `/about` → will be wrapped by: + +```tsx + + + +```