feat: create overview and getting started pages

2026-07-25 21:02:45 -07:00 · 2024-08-15 19:25:03 +02:00
parent b2940d9fa8
commit 3ca24ec87f
11 changed files with 103 additions and 6 deletions
@@ -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}
@@ -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">
@@ -0,0 +1,5 @@
+import { Text, type TextProps } from '@mantine/core'
+
+export default function MdxBold(props: TextProps): JSX.Element {
+  return <Text fw={700} {...props} />
+}
@@ -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}
@@ -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}
@@ -8,7 +8,7 @@ export default function MdxQuote(
    <>
      <Blockquote
        color="violet"
-        p={8}
+        py={1}
        px={20}
        mt={30}
        iconSize={30}
@@ -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 />}
@@ -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"
@@ -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
@@ -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`.
@@ -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
+