feat: create overview and getting started pages

tuono-labs · Aug 15, 2024 · 3ca24ec · 3ca24ec
1 parent b2940d9
commit 3ca24ec
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 6 deletions.
diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -15,7 +15,13 @@ export default function TuonoBreadcrumbs({
       mb="md"
       mt="md"
     >
-      <Button href="/" component={Link} variant="subtle" radius="xl" p={5}>
+      <Button
+        href="/documentation"
+        component={Link}
+        variant="subtle"
+        radius="xl"
+        p={5}
+      >
         <IconBolt />
       </Button>
       {children}

diff --git a/apps/documentation/src/components/hero/hero.tsx b/apps/documentation/src/components/hero/hero.tsx
@@ -25,7 +25,7 @@ export default function Hero(): JSX.Element {
       </Center>
       <Center mt={50}>
         <Group>
-          <Button component={Link} href="/documentation/installation" size="lg">
+          <Button component={Link} href="/documentation" size="lg">
             Get Started
           </Button>
           <CopyButton value="cargo install tuono">

diff --git a/apps/documentation/src/components/mdx-provider/mdx-bold/mdx-bold.tsx b/apps/documentation/src/components/mdx-provider/mdx-bold/mdx-bold.tsx
@@ -0,0 +1,5 @@
+import { Text, type TextProps } from '@mantine/core'
+
+export default function MdxBold(props: TextProps): JSX.Element {
+  return <Text fw={700} {...props} />
+}
diff --git a/apps/documentation/src/components/mdx-provider/mdx-link/mdx-link.tsx b/apps/documentation/src/components/mdx-provider/mdx-link/mdx-link.tsx
@@ -27,7 +27,6 @@ export default function MdxLink(
       component={Link}
       {...props}
       target="_blank"
-      rightSection={<IconExternalLink size="16px" style={{ marginLeft: -5 }} />}
       variant="transparent"
       style={{ height: '20px' }}
       mt={-2}

diff --git a/apps/documentation/src/components/mdx-provider/mdx-provider.tsx b/apps/documentation/src/components/mdx-provider/mdx-provider.tsx
@@ -6,6 +6,7 @@ import MdxPre from './mdx-pre'
 import MdxQuote from './mdx-quote'
 import MdxCode from './mdx-code'
 import MdxTitle from './mdx-title'
+import MdxBold from './mdx-bold/mdx-bold'
 import MdxH2 from './mdx-h2/mdx-h2'
 
 interface MdxProviderProps {
@@ -25,6 +26,7 @@ export default function MdxProvider({
         code: MdxCode,
         h1: MdxTitle,
         h2: MdxH2,
+        strong: MdxBold,
       }}
     >
       {children}

diff --git a/apps/documentation/src/components/mdx-provider/mdx-quote/mdx-quote.tsx b/apps/documentation/src/components/mdx-provider/mdx-quote/mdx-quote.tsx
@@ -8,7 +8,7 @@ export default function MdxQuote(
     <>
       <Blockquote
         color="violet"
-        p={8}
+        py={1}
         px={20}
         mt={30}
         iconSize={30}

diff --git a/apps/documentation/src/components/navbar/actions.tsx b/apps/documentation/src/components/navbar/actions.tsx
@@ -7,7 +7,7 @@ export default function Actions(): JSX.Element {
   return (
     <Flex gap={8}>
       <Button
-        href="/documentation/installation"
+        href="/documentation"
         component={Link}
         size="compact-lg"
         rightSection={<IconBook />}

diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx
@@ -11,11 +11,17 @@ export default function Sidebar({ close }: { close: () => void }): JSX.Element {
         onClick={close}
       />
       <h3>Documentation</h3>
+      <SidebarLink href="/documentation" label="Overview" onClick={close} />
       <SidebarLink
         href="/documentation/installation"
         label="Installation"
         onClick={close}
       />
+      <SidebarLink
+        href="/documentation/getting-started"
+        label="Getting started"
+        onClick={close}
+      />
       <SidebarLink label="Routing" href="/documentation/routing" defaultOpened>
         <SidebarLink
           href="/documentation/routing/intro"

diff --git a/apps/documentation/src/routes/documentation/contributing.mdx b/apps/documentation/src/routes/documentation/contributing.mdx
@@ -7,7 +7,7 @@ import { Head } from 'tuono'
 import Breadcrumbs, { Element } from '../../components/breadcrumbs'
 
 <Breadcrumbs>
-		<Element label="Contributing"/>
+		<Element label="✨ Contributing"/>
 </Breadcrumbs>
 
 # How to contribute

diff --git a/apps/documentation/src/routes/documentation/getting-started.mdx b/apps/documentation/src/routes/documentation/getting-started.mdx
@@ -0,0 +1,29 @@
+import { Head } from 'tuono'
+
+<Head>
+  <title>Tuono - Getting started</title>
+</Head>
+
+import Breadcrumbs, { Element } from '../../components/breadcrumbs'
+
+<Breadcrumbs>
+		<Element label="Getting started"/>
+</Breadcrumbs>
+
+# Getting started
+
+
+Tuono is the CLI that provides all the needed commands to handle the fullstack project. 
+
+> ☝️ Check the [installation](/documentation/installation) page if you haven't installed the
+`tuono` CLI yet.
+
+To list all the available commands run `tuono -h`.
+
+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`
+
+Finally when the project will be ready to be deployed just run `tuono build` to create the final React assets and to set the server project in the production mode.
+
+Now to execute it just run `cargo run --release`.
diff --git a/apps/documentation/src/routes/documentation/index.mdx b/apps/documentation/src/routes/documentation/index.mdx
@@ -0,0 +1,50 @@
+import { Head } from 'tuono'
+
+<Head>
+  <title>Tuono - Documentation</title>
+</Head>
+
+import Breadcrumbs from '../../components/breadcrumbs'
+
+<Breadcrumbs>
+</Breadcrumbs>
+
+# Tuono
+
+**Tuono is a fullstack framework for building React applications using Rust as
+backend.**
+
+Tuono (Italian word for "thunder", pronounced /2 Oh No/). Why Tuono? Just a badass name.
+
+## Introduction
+
+**NodeJs/Deno/Bun are the only runtimes that allow a React app to be fullstack right? (no)**
+
+Tuono is a fullstack React framework with the server side written in Rust. 
+Because of this Tuono is extremely fast and the requests are handled by multithreaded Rust server. 
+React is still React - it is just superpowered.
+
+**Rust is an hard language then writing server side code is hard as well right? (no again)**
+
+Tuono provides a collection of utilities to handle the server side code seamlessly with 
+the React code. Each server side route is managed with a separate file alongside the React route.
+The routing is handled by Tuono based on the files defined within the `./src/routes` directory.
+
+
+## Features 
+Some of its features include:
+
+- 🟦 Full typescript support
+- 🌐 File system based routing
+- 🔥 Hot Module Reload
+- 🍭 SCSS/CSS modules
+- 🧬 Server Side Rendering
+- 🧵 Multi thread backend
+- ⌨️  MDX support
+- ⚙️  Build optimizations
+- Custom APIs*
+- Image optimization*
+- Server streamed content*
+
+> *development in progress
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ export default function MdxQuote( @@
         <>
           <Blockquote
             color="violet"
-            p={8}
+            py={1}
             px={20}
             mt={30}
             iconSize={30}
@@ Expand Down @@