Skip to content

Commit

Permalink
Correct documentation spelling (#68)
Browse files Browse the repository at this point in the history
* fix: documentation/index spelling

* fix: documentation/development-setup spelling

* fix: documentation/api-fetching spelling

* fix: documentation/components spelling

* fix: documentation/dynamic-routes spelling

* feat: add correct tutorial link to README.md

* chore: remove legacy  folder

* fix: formatting

* fix: documentation/error-handling spelling

* fix: documentation/seo spelling

* fix: documentation/redirections spelling

* fix: documentation/production spelling

* fix: documentation/conclusion spelling

* feat: update version to v0.10.4

* fix: redirections spelling

* fix: API fetching spelling

* feat: create CLI doc page

* fix: correct CLI spelling

* fix: update CLI output spelling
  • Loading branch information
Valerioageno authored Oct 17, 2024
1 parent 93b4408 commit ea82d2b
Show file tree
Hide file tree
Showing 24 changed files with 76 additions and 792 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
[Documentation](https://tuono.dev) | [Tutorial](https://github.com/Valerioageno/tuono/blob/main/docs/tutorial.md) |
[Documentation](https://tuono.dev) | [Tutorial](https://tuono.dev/documentation/tutorial) |
[✨Contributing](https://tuono.dev/documentation/contributing)

# Tuono
Expand Down
8 changes: 2 additions & 6 deletions apps/documentation/src/components/sidebar/sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Sidebar({ close }: { close: () => void }): JSX.Element {
onClick={close}
>
<SidebarLink
href="/documentation/tutorial/overview"
href="/documentation/tutorial/development-setup"
label="Development setup"
onClick={close}
/>
Expand Down Expand Up @@ -62,11 +62,7 @@ export default function Sidebar({ close }: { close: () => void }): JSX.Element {
onClick={close}
/>
</SidebarLink>
<SidebarLink
href="/documentation/getting-started"
label="Getting started"
onClick={close}
/>
<SidebarLink href="/documentation/cli" label="CLI" onClick={close} />
<SidebarLink
label="Routing"
href="/documentation/routing"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { Head } from 'tuono'

<Head>
<title>Tuono - Getting started</title>
<title>Tuono - CLI</title>
</Head>

import Breadcrumbs, { Element } from '../../components/breadcrumbs'

<Breadcrumbs>
<Element label="Getting started" />
<Element label="CLI" />
</Breadcrumbs>

# Getting started

## The CLI
# CLI

Tuono is the CLI that provides all the needed commands to handle the full-stack project.

Expand All @@ -21,6 +19,22 @@ Tuono is the CLI that provides all the needed commands to handle the full-stack
To list all the available commands, run `tuono -h`.

```bash
The React/Rust full-stack framework

Usage: tuono <COMMAND>

Commands:
dev Start the development environment
build Build the production assets
new Scaffold a new project
help Print this message or the help of the given subcommand(s)

Options:
-h, --help Print help
-V, --version Print version
```

To create a new project, run `tuono new [NAME]` (optionally you can pass the --template (or -t) flag - check the examples' folder).

Then to run the local development environment run inside the project folder `tuono dev`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ tuono --version
Run `tuono -h` to see all the available commands.

```bash
The react/rust fullstack framework
The React/Rust full-stack framework

Usage: tuono <COMMAND>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# API fetching

The goal is to use the [PokeAPI](https://pokeapi.co/docs/v2) to list all the pokemons of the first generation (the best one btw) and then reserve a \_\_ page for each one separately.
The goal is to use the [PokeAPI](https://pokeapi.co/docs/v2) to list all the Pokémon of the first generation (the best one, btw) and then reserve a dynamic page for each one separately.

## Fetch all the pokemons
## Fetch all the Pokémon

To start let’s fetch all of them in the root page; since we want to render them on the server side we gonna need to implement the logic in the `index.rs` file.
To start, let’s fetch all of them from the root page. Since we want to render them on the server side, we are going to need to implement the logic in the `index.rs` file.

Clear the `index.rs` file and paste:

Expand Down Expand Up @@ -52,7 +52,7 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
}
```

Now the pokemons are correctly fetched and hydrated on the client side so we can actually use them. Clear the `index.tsx` file and paste:
Now the Pokémon are correctly fetched and hydrated on the client side, so we can actually use them. Clear the `index.tsx` file and paste:

```tsx
// src/routes/index.tsx
Expand Down Expand Up @@ -102,4 +102,4 @@ export default function IndexPage({
}
```

Refresh now the browser! A bit ugly but all the pokemons are finally printed on screen!
Refresh the browser now! A bit ugly, but all the Pokémon are finally printed on screen!
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

## Creating a stand-alone component

Let’s then create the button needed for displaying the list of pokemons.
Let’s then create the button needed for displaying the list of Pokémon.

Create the following file `src/components/PokemonLink.tsx` and fill the content with:

Expand Down Expand Up @@ -45,7 +45,7 @@ export default function PokemonLink({
}
```

Now that the link is done let’s import it in the `index.tsx` file
Now that the link is done, let’s import it into the `index.tsx` file

```diff
// src/routes/index.tsx
Expand All @@ -63,8 +63,8 @@ Now that the link is done let’s import it in the `index.tsx` file
// ...
```

Now the links work. Clicking on any of them we get redirected to the 404 page because we haven’t yet implemented the `pokemons/[pokemon]` page.
As previously said CSS modules are enabled out of the box so let’s make those links a little bit nicer.
Now the links work. Clicking on any of them, we get redirected to the 404 page because we haven’t yet implemented the `pokemons/[pokemon]` page.
As previously said, CSS modules are enabled out of the box, so let’s make those links a little bit nicer.

Create alongside the `PokemonLink.tsx` component the CSS module `PokemonLink.module.css` and copy the following content into it:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# Conclusion

That’s it! You just created a multi thread full stack application with rust and react.
That’s it! You just created a multi thread full stack application with Rust and React.

The project is still under heavy development and many features are not ready yet but
The project is still under heavy development and many features are not ready yet, but
I hope you got the taste of what is like working with rust and react in the same stack.

As I mentioned in the introduction I'd love to hear what you thought about the framework and the tutorial - feel free to reach me
As I mentioned in the introduction, I'd love to hear what you thought about the framework and the tutorial - feel free to reach me
at [[email protected]](mailto:[email protected]) or in Twitter (X) DMs [@valerioageno](https://twitter.com/valerioageno).

Ciao
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Head } from 'tuono'

<Head>
<title>Tutorial - Scaffold new project</title>
<title>Tutorial - Development setup</title>
</Head>

import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
Expand All @@ -15,7 +15,7 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

## Scaffold a new project

To setup a new fresh project you just need to run the following command:
To set up a new fresh project you just need to run the following command:

```
$ tuono new tuono-tutorial
Expand All @@ -27,7 +27,7 @@ Get into the project folder and install the dependencies with:
$ npm install
```

Open it with your favourite code editor.
Open it with your favorite code editor.

The project will have the following structure:

Expand All @@ -45,20 +45,20 @@ The project will have the following structure:
`public/`: put here all the files you want to be public

`src/routes/`: All the files in this folder are considered routes. All the routes are server side rendered out of the box.
To add server side capabilities just create a rust file with the same name as the route (i.e. `about.tsx``about.rs`).
To add server side capabilities, just create a Rust file with the same name as the route (i.e. `about.tsx``about.rs`).

`src/styles/`: In this folder there is the `global.css` file that stores all the global styles. For the rest of the project you can use
`src/styles/`: In this folder there is the `global.css` file that stores all the global styles. For the rest of the project, you can use
CSS modules.

## Start the dev environment

To start the development environment you just need to run the following command within the project folder:
To start the development environment, you just need to run the following command within the project folder:

```
$ tuono dev
```

The first time might take a little bit because it will install all the rust’s dependencies. All the other execution will be pretty quick!
The first time might take a little bit because it will install all the Rust’s dependencies. All the other execution will be pretty quick!

> 💡 The tuono dev development script is currently under strong optimization improvements.
> In case you face any error delete the cache `.tuono` folder and run it again!
Expand Down
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { Head } from 'tuono'

<Head>
<title>Tutorial - __ routes</title>
<title>Tutorial - Dynamic routes</title>
</Head>

import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

<Breadcrumbs>
<Element label="Tutorial" href="/documentation/tutorial" />
<Element label="__ routes" />
<Element label="Dynamic routes" />
</Breadcrumbs>

# \_\_ routes
# Dynamic routes

## Create the pokemon route
## Create the Pokémon route

The homepage is ready. We have the full list of pokemons and they are all links. Great!
The homepage is ready. We have the full list of Pokémon and they are all links. Great!

Now we want to make those links actually pointing to a real page. Let’s create the \_\_ route.
Now we want to make those links actually point to a real page. Let’s create the \_\_ route.

Create the folder `routes/pokemons` and then create the two files `[pokemon].tsx` and `[pokemon].rs`.

These two will handle every requests that points to `http://localhost:3000/pokemons/bulbasaur..mew`.
These two will handle every request that points to `http://localhost:3000/pokemons/bulbasaur..mew`.

Let’s first work on the server side file. Paste into the new `[pokemon].rs` file the following code:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# Error handling

With the current setup all the routes always return a `200 Success` http status no matter the response type.
With the current setup, all the routes always return a `200 Success` HTTP status, no matter the response type.

In order to return a more meaningful status code to the browser the `Props` struct can be initialized with also the
In order to return a more meaningful status code to the browser, the `Props` struct can also be initialized with the
`Props::new_with_status()` method.

Let's see how it works!
Expand Down Expand Up @@ -98,5 +98,5 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
}
```

If you now try to load a not existing pokemon (`http://localhost:3000/pokemons/tuono-pokemon`) you will
If you now try to load a not-existing Pokémon (`http://localhost:3000/pokemons/tuono-pokemon`) you will
correctly receive a 404 status code in the console.
23 changes: 4 additions & 19 deletions apps/documentation/src/routes/documentation/tutorial/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,17 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# Tutorial

This tutorial is meant for giving you a sneak peek of the framework and is intended to evolve during the
This tutorial is meant to give you a sneak peek at the framework and is intended to evolve during the
development - be sure to have [installed](/documentation/installation) the [latest version](https://crates.io/crates/tuono).

This tutorial is not meant for people that don't know React - in that case I suggest you to first read the
[React doc](https://react.dev/); Typescript and Rust knowledge is not a requirement though!
This tutorial is not meant for people who don't know React - in that case, I suggest you first read the
[React Doc](https://react.dev/); Typescript and Rust knowledge is not a requirement though!

If you prefer to just read the code rather than writing it you can download the finished tutorial project with:
If you prefer to just read the code rather than write you can download the finished tutorial project with:

```bash
$ tuono new tutorial --template tutorial
```

> I'd love to hear your thoughts about the framework and the tutorial - feel free to reach me at [[email protected]](mailto:[email protected])
> or on Twitter (X) DM [@valerioageno](https://twitter.com/valerioageno)
## Table of contents

- Project scaffold
- Start the dev environment
- The “/” route
- Tutorial introduction
- Fetch all the pokemons
- Create a stand-alone component
- Create the /pokemons/[pokemon] route
- Error handling
- Seo and meta tags
- Handle redirections
- Building for production
- Conclusion
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# Production build

The source now is ready to be released. Both server and client have been managed in a unoptimized way
to easy the development experience. To build the project to the production state just run:
The source is now ready to be released. Both server and client have been managed in an unoptimized way
to ease the development experience. To build the project to the production state, just run:

```shell
$ tuono build
```

This command just created the final assets within the `out` directory. To run then the prodiction server
This command just created the final assets within the `out` directory. To run the production server,
run:

```shell
$ cargo run --release
```

Check again [`http://localhost:3000/`](http://localhost:3000/) - This environment now has all the
optimizations ready to unleash the power of a rust server that seamessly renders a React application!🚀
Check again [`http://localhost:3000/`](http://localhost:3000/) This environment now has all the
optimizations ready to unleash the power of a rust server that seamlessly renders a React application!🚀

> Note: The `out` directory is not standalone. You can't rely just on it to run the production server.
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,11 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# Redirections

## Handle redirections

What if there is a pokemon among all of them that should be considered the GOAT? What
What if there is a Pokémon among all of them that should be considered the GOAT? What
we are going to do right now is creating a new route `/pokemons/GOAT` that points to the best
pokemon of the first generation.
Pokémon of the first generation.

First let's create a new route by just creating an new file `/pokemons/GOAT.rs` and pasting the following code:
First, let's create a new route by just creating a new file `/pokemons/GOAT.rs` and pasting the following code:

```rs
// src/routes/pokemons/GOAT.rs
Expand All @@ -45,5 +43,5 @@ Now let's create the button in the home page to actually point to it!
</ul>
```

Now at [http://localhost:3000/](http:/localhost:3000/) you will find a new link at the beginning of the list.
Now at [http://localhost:3000/](http:/localhost:3000/) You will find a new link at the beginning of the list.
Click on it and see the application automatically redirecting you to your favourite pokemon's route!
4 changes: 2 additions & 2 deletions apps/documentation/src/routes/documentation/tutorial/seo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ import Breadcrumbs, { Element } from '../../../components/breadcrumbs'

# SEO and meta tags

The website now works and the http errors are meaningful but we should also take care to be meaningful
The website now works and the HTTP errors are meaningful, but we should also take care to be meaningful
for the web crawlers. The best way to do it is to enrich the meta tags like the `<title>` and the
`<description>`.

To do so `tuono` exposes also the `<Head />` component useful exactly for handling this scenario. Let's update the `/` and the
To do so `tuono` also exposes the `<Head />` component useful exactly for handling this scenario. Let's update the `/` and the
`/pokemons/[pokemon]` routes with this.

```diff
Expand Down
2 changes: 1 addition & 1 deletion crates/tuono/Cargo.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "tuono"
version = "0.10.3"
version = "0.10.4"
edition = "2021"
authors = ["V. Ageno <[email protected]>"]
description = "The react/rust fullstack framework"
Expand Down
2 changes: 1 addition & 1 deletion crates/tuono/src/cli.rs
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ enum Actions {
}

#[derive(Parser, Debug)]
#[command(version, about = "The react/rust fullstack framework")]
#[command(version, about = "The React/Rust full-stack framework")]
struct Args {
#[command(subcommand)]
action: Actions,
Expand Down
4 changes: 2 additions & 2 deletions crates/tuono_lib/Cargo.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "tuono_lib"
version = "0.10.3"
version = "0.10.4"
edition = "2021"
authors = ["V. Ageno <[email protected]>"]
description = "The react/rust fullstack framework"
Expand Down Expand Up @@ -33,7 +33,7 @@ either = "1.13.0"
tower-http = {version = "0.6.0", features = ["fs"]}
colored = "2.1.0"

tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.10.3"}
tuono_lib_macros = {path = "../tuono_lib_macros", version = "0.10.4"}
# Match the same version used by axum
tokio-tungstenite = "0.24.0"
futures-util = { version = "0.3", default-features = false, features = ["sink", "std"] }
Expand Down
Loading

0 comments on commit ea82d2b

Please sign in to comment.