From 2aff72942c1ead43d76aac448e9a93108c9f98d8 Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com>
Date: Tue, 4 Feb 2025 09:18:03 +0100
Subject: [PATCH] docs: add getting-started/setup-project (#488)

---
 .../src/components/EditPage/EditPage.tsx      |  1 -
 .../src/components/Sidebar/sidebarElements.ts |  7 +-
 .../src/routes/documentation/__layout.tsx     |  2 +-
 .../{ => getting-started}/installation.mdx    |  2 +-
 .../getting-started/setup-project.mdx         | 73 +++++++++++++++++++
 5 files changed, 81 insertions(+), 4 deletions(-)
 rename apps/documentation/src/routes/documentation/{ => getting-started}/installation.mdx (95%)
 create mode 100644 apps/documentation/src/routes/documentation/getting-started/setup-project.mdx

diff --git a/apps/documentation/src/components/EditPage/EditPage.tsx b/apps/documentation/src/components/EditPage/EditPage.tsx
index 87491f76..f0576258 100644
--- a/apps/documentation/src/components/EditPage/EditPage.tsx
+++ b/apps/documentation/src/components/EditPage/EditPage.tsx
@@ -12,7 +12,6 @@ export default function EditPage(): JSX.Element {
   return (
     <Button
       p={0}
-      mt={30}
       component="a"
       variant="transparent"
       leftSection={<IconEdit />}
diff --git a/apps/documentation/src/components/Sidebar/sidebarElements.ts b/apps/documentation/src/components/Sidebar/sidebarElements.ts
index 8e87ffef..05deae21 100644
--- a/apps/documentation/src/components/Sidebar/sidebarElements.ts
+++ b/apps/documentation/src/components/Sidebar/sidebarElements.ts
@@ -33,7 +33,12 @@ export const sidebarElements: Array<SidebarElement> = [
       {
         type: 'element',
         label: 'Installation',
-        href: '/documentation/installation',
+        href: '/documentation/getting-started/installation',
+      },
+      {
+        type: 'element',
+        label: 'Setup project',
+        href: '/documentation/getting-started/setup-project',
       },
     ],
   },
diff --git a/apps/documentation/src/routes/documentation/__layout.tsx b/apps/documentation/src/routes/documentation/__layout.tsx
index 2b5bb3a0..2e5e1597 100644
--- a/apps/documentation/src/routes/documentation/__layout.tsx
+++ b/apps/documentation/src/routes/documentation/__layout.tsx
@@ -14,7 +14,7 @@ export default function DocumentationLayout({
     <>
       {children}
 
-      <Divider />
+      <Divider mt={20} mb={10} />
 
       <EditPage />
     </>
diff --git a/apps/documentation/src/routes/documentation/installation.mdx b/apps/documentation/src/routes/documentation/getting-started/installation.mdx
similarity index 95%
rename from apps/documentation/src/routes/documentation/installation.mdx
rename to apps/documentation/src/routes/documentation/getting-started/installation.mdx
index a02b78bf..3512c36b 100644
--- a/apps/documentation/src/routes/documentation/installation.mdx
+++ b/apps/documentation/src/routes/documentation/getting-started/installation.mdx
@@ -2,7 +2,7 @@ import MetaTags from '@/components/MetaTags'
 
 <MetaTags
   title="Tuono - Installation"
-  canonical="https://tuono.dev/documentation/installation"
+  canonical="https://tuono.dev/documentation/getting-started/installation"
   description="Tuono is a development environment built with Rust and TypeScript that generates a website using both languages"
 />
 
diff --git a/apps/documentation/src/routes/documentation/getting-started/setup-project.mdx b/apps/documentation/src/routes/documentation/getting-started/setup-project.mdx
new file mode 100644
index 00000000..12fc9ff3
--- /dev/null
+++ b/apps/documentation/src/routes/documentation/getting-started/setup-project.mdx
@@ -0,0 +1,73 @@
+import MetaTags from '@/components/MetaTags'
+
+<MetaTags
+  title="Tuono - Setup project"
+  canonical="https://tuono.dev/documentation/setup-project"
+  description="Follow these steps to quickly create your first Tuono project"
+/>
+
+import Breadcrumbs from '@/components/Breadcrumbs'
+
+<Breadcrumbs breadcrumbs={[{ label: 'Setup project' }]} />
+
+# Setup project
+
+## Create project folder
+
+Tuono supports creating a new project from scratch using the `tuono new` CLI command.
+
+```sh
+tuono new my-first-tuono-app
+```
+
+> 💡 You can optionally pass the --template (or -t) flag to directly start from a [template](https://github.com/tuono-labs/tuono/tree/main/examples)
+
+Once the `tuono new` command finishes, move into the newly created folder.
+
+```sh
+cd my-first-tuono-app
+```
+
+## Install dependencies
+
+Now you can install the required dependencies.
+
+```sh
+npm install
+```
+
+> 💡 You can use another NodeJS package manager like `yarn` or `pnpm`
+
+## Run dev server
+
+Now you can run the dev server for the first time from using:
+
+```sh
+tuono dev
+```
+
+> ⏰ The first time, the process takes a bit longer to start because it needs to compile all of Rust's dependencies.
+> Subsequent executions will be much quicker!
+
+Once it's ready, a message will be displayed in the terminal.
+
+You can now open [http://localhost:3000/](http://localhost:3000) on the browser.
+
+## Build and test production build
+
+To build the project using production mode, simply run:
+
+```sh
+tuono build
+```
+
+The above command has created the final assets in the `out` directory.
+
+To run the production server, run:
+
+```sh
+cargo run --release
+```
+
+Again, you can access the website in production mode
+by going to [http://localhost:3000/](http://localhost:3000) in your browser.