-
-
-
-
- On this page
-
-
-
- {headings.slice(1).map((heading, index) => (
-
- {heading.content}
-
- ))}
-
- Loading...
,
-})
-
-function App() {
- return (
-
-
- )
-}
-```
-
-> ⚠️ Note that the first argument must be a function that returns a promise (e.g., `() => import('./MyComponent')`), not a direct call to `import('./MyComponent')`, which would execute immediately instead of lazily loading.
-
-> 💡 It’s good practice to ensure that your fallback component matches the dimensions of the actual component. This helps prevent layout shifts and the ugly resizing of modals as their content loads.
-
-## Options
-
-| Name | Type | Default value | Description |
-| -------------- | ------------------------------------------------------------------------ | ------------- | ------------------------------------------------------------------------------ |
-| `importFn` | `() => PromiseWelcome
-pathname: {router.pathname}
- - - ) -} -``` - -## `useRouter` result - -- `pathname`: `string` - Returns the current path name -- `query`: `RecordAbout
-}
-```
-
-The `About` component will be rendered when loading `/about` route.
-
-## 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
-
-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`
-
-## Pages with Dynamic Routes
-
-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 (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 `__layout.tsx` file (is allowed only a single `__layout` file per folder).
-
-This file won't generate any route.
-
-### Layout component for all routes
-
-`src/routes/__layout.tsx` is a required file that defines the layout component that wraps the entire application.
-
-```tsx
-// src/routes/__layout.tsx
-import { TuonoScripts } from 'tuono'
-
-export default function RootLayout({ children }) {
- return (
-
-
- {children}
- Post: {router.pathname}
-} -``` - -## Catch all segments - -Dynamic Segments can be extended to catch-all subsequent segments by adding -an ellipsis inside the brackets `[...segmentName]`. - -Given the following `src/routes/shop/[...slug].tsx`, -the following paths will be matched: - -- `/shop/clothes` -- `/shop/clothes/tops` -- `/shop` -- `/shop/clothes/tops/t-shirts` -- and so on. diff --git a/apps/documentation/src/routes/documentation/routing/index.mdx b/apps/documentation/src/routes/documentation/routing/index.mdx deleted file mode 100644 index 367c38f6..00000000 --- a/apps/documentation/src/routes/documentation/routing/index.mdx +++ /dev/null @@ -1,14 +0,0 @@ -import MetaTags from '@/components/MetaTags' - --
-
- - Home - -
- - About Us - -
- - Blog Post - -
-
- )
-}
-```
diff --git a/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx b/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
deleted file mode 100644
index 14ea0c35..00000000
--- a/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
-import MetaTags from '@/components/MetaTags'
-
-ExampleComponent
- Tuono + Tailwind CSS!
-} -``` diff --git a/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx b/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx deleted file mode 100644 index 808b9140..00000000 --- a/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx +++ /dev/null @@ -1,191 +0,0 @@ -import MetaTags from '@/components/MetaTags' - -
-
- - TUONO -
-
- 
- 
-
-
-
- -
- {data.results.map((pokemon, i) => (
-
- {pokemon.name} - ))} -
-
- )
-}
-```
-
-Now that the link is done, let’s import it into the `index.tsx` file
-
-```diff
-// src/routes/index.tsx
-
-++ import PokemonLink from '../components/PokemonLink'
-
-// ...
- -
- {pokemons.map((pokemon, i) => (
---
- {pokemon.name} -++
-
- )
-}
-```
-
-import NavigationButtons from '../../../components/NavigationButtons'
-
-
- Back
-
- {isLoading && (
- <>
-
- )
-}
-```
-
-The browser should complain that the component `PokemonView` does not exist. Let’s create it then!
-
-```tsx
-// src/components/PokemonView.tsx
-import type { JSX } from 'react'
-
-import styles from './PokemonView.module.css'
-
-interface Pokemon {
- id: number
- name: string
- weight: number
- height: number
-}
-
-interface PokemonViewProps {
- pokemon: Pokemon
-}
-
-export default function PokemonView({
- pokemon,
-}: PokemonViewProps): JSX.Element {
- return (
- Loading...
-
- )}
-
- {data?.id && (
- <>
-
- 
-
- )
-}
-```
-
-To have the proper style consider adding a new css module file:
-
-```css
-/* src/components/PokemonView.module.css */
-.pokemon {
- display: flex;
- justify-content: space-between;
- margin-top: 20px;
-}
-
-.name {
- font-size: 50px;
- font-weight: 700;
-}
-
-.pokemon img {
- width: 400px;
-}
-
-.spec {
- display: flex;
- font-size: 18px;
- margin-top: 10px;
-}
-
-.label {
- font-weight: 700;
-}
-```
-
-import NavigationButtons from '../../../components/NavigationButtons'
-
-
-
- {pokemon.name}
--
-
- Weight: -
- {pokemon.weight}lbs -
-
-
- Height: -
- {pokemon.height}ft -
- - -```diff -// src/routes/index.rs -use serde::{Deserialize, Serialize}; --- use reqwest::Client; -++ use reqwest::{Client, StatusCode}; -use tuono_lib::{Props, Request, Response}; - -const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151"; - -#[derive(Debug, Serialize, Deserialize)] -struct Pokemons { - results: Vec
-
-++
-
- - TUONO -
-
-
-
-
-
-
- -
-
- -```diff -// src/routes/pokemons/[pokemon].tsx -import type { JSX } from 'react' -import type { TuonoProps } from 'tuono' -import { Link } from 'tuono' - -import PokemonView from '../../components/PokemonView' - -interface Pokemon { - id: number - name: string - weight: number - height: number -} - -export default function PokemonPage({ - isLoading, - data, -}: TuonoProps
- Back
-
- {isLoading && (
- <>
-++ Pokemon: loading...
- {`Pokemon: ${data.name}`}
-
- )
-}
-
-```
-
-import NavigationButtons from '../../../components/NavigationButtons'
-
-Loading...
-
- )}
-
- {data?.id && (
- <>
-++