chore: bump version to v0.17.1 (#357)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

.eslintrc

@@ -1,106 +0,0 @@
-{
-  "root": true,
-  "reportUnusedDisableDirectives": true,
-  "ignorePatterns": ["**/build", "**/dist"],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "import"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "prettier",
-  ],
-  "env": {
-    "browser": true,
-    "es2020": true,
-  },
-  "parserOptions": {
-    "tsconfigRootDir": ".",
-    "project": true,
-    "sourceType": "module",
-    "ecmaVersion": 2020,
-  },
-  "settings": {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"],
-    },
-    "import/resolver": {
-      "typescript": true,
-    },
-    "react": {
-      "version": "detect",
-    },
-  },
-  "rules": {
-    "@typescript-eslint/array-type": "error",
-    "@typescript-eslint/no-wrapper-object-types": "error",
-    "@typescript-eslint/no-empty-object-type": "error",
-    "@typescript-eslint/no-unsafe-function-type": "error",
-    "@typescript-eslint/ban-ts-comment": "error",
-    "@typescript-eslint/consistent-type-definitions": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      { "prefer": "type-imports" },
-    ],
-    "@typescript-eslint/explicit-module-boundary-types": "error",
-    "@typescript-eslint/method-signature-style": ["error", "property"],
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        "selector": "typeParameter",
-        "format": ["PascalCase"],
-        "leadingUnderscore": "forbid",
-        "trailingUnderscore": "forbid",
-        "custom": {
-          "regex": "^(T|T[A-Z][A-Za-z]+)$",
-          "match": true,
-        },
-      },
-    ],
-    "@typescript-eslint/no-deprecated": "error",
-    "@typescript-eslint/no-empty-function": "error",
-    "@typescript-eslint/no-empty-interface": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-non-null-assertion": "error",
-    "@typescript-eslint/no-unnecessary-condition": "error",
-    "@typescript-eslint/no-unnecessary-type-assertion": "error",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/explicit-function-return-type": "error",
-    "@typescript-eslint/no-inferrable-types": [
-      "error",
-      { "ignoreParameters": true },
-    ],
-    "import/default": "error",
-    "import/export": "error",
-    "import/namespace": "error",
-    "import/newline-after-import": "error",
-    "import/no-cycle": "error",
-    "import/no-duplicates": "off",
-    "import/no-named-as-default-member": "error",
-    "import/no-unused-modules": "error",
-    "import/order": [
-      "off",
-      {
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index",
-          "object",
-          "type",
-        ],
-      },
-    ],
-    "no-case-declarations": "error",
-    "no-empty": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-shadow": "error",
-    "no-undef": "off",
-    "sort-imports": "off",
-  },
-}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -32,55 +32,24 @@ body:
       description: If applicable, add screenshots to help explain your problem.
     validations:
       required: false
-  - type: input
-    id: tuono-version
+  - type: textarea
+    id: system-info
     attributes:
-      label: Tuono version
-      placeholder: '[e.g. 0.4.0]'
+      label: System Info
+      description: Output of `npx envinfo --system --npmPackages 'tuono' --binaries --browsers`
+      render: shell
+      placeholder: System, Binaries, Browsers
     validations:
-      required: false
-  - type: input
-    id: os-version
+      required: true
+  - type: textarea
+    id: system-info-rust
     attributes:
-      label: OS
-      placeholder: '[e.g. MacOS, Windows]'
+      label: System info (Rust)
+      description: Output of `rustc --version && cargo --version && tuono --version`
+      render: shell
+      placeholder: 'rustc, cargo and tuono binary version'
     validations:
-      required: false
-  - type: input
-    id: browser-version
-    attributes:
-      label: Browser
-      placeholder: '[e.g. chrome, safari]'
-    validations:
-      required: false
-  - type: input
-    id: node-version
-    attributes:
-      label: Node version
-      placeholder: '[e.g. 20.0.0]'
-    validations:
-      required: false
-  - type: input
-    id: rust-version
-    attributes:
-      label: Rust version
-      placeholder: '[e.g. 1.79.0]'
-    validations:
-      required: false
-  - type: input
-    id: create-version
-    attributes:
-      label: Crate version
-      placeholder: '[e.g. 1.78.0]'
-    validations:
-      required: false
-  - type: input
-    id: node-package-manager-version
-    attributes:
-      label: Node Package Manger version
-      placeholder: '[e.g. pnpm: 9.5.0] '
-    validations:
-      required: false
+      required: true
   - type: textarea
     id: additional-context
     attributes:

.github/labeler.yml

@@ -0,0 +1,36 @@
+# @see https://github.com/actions/labeler
+
+rust:
+  - changed-files:
+      - any-glob-to-any-file: ['crates/**', 'Cargo.toml']
+
+typescript:
+  - changed-files:
+      - any-glob-to-any-file:
+          [
+            'packages/**',
+            'package.json',
+            'pnpm-*.yaml',
+            'eslint.config.js',
+            'tsconfig.json',
+          ]
+
+documentation:
+  - changed-files:
+      - any-glob-to-any-file: ['apps/documentation/**']
+
+'CI/CD':
+  - changed-files:
+      - any-glob-to-any-file: ['.github/**']
+
+'repo maintenance':
+  - changed-files:
+      - any-glob-to-any-file:
+          [
+            '.npmrc',
+            '.nvmrc',
+            '.prettierrc',
+            '.prettierignore',
+            'renovate.json',
+            'turbo.json',
+          ]

.github/pull_request_template.md

@@ -3,11 +3,12 @@
 <!--
 Thank you for your Pull Request.
 
-Explain the context and why you're making that change. What is the problem
-you're trying to solve? If a new feature is being added, describe the intended
-use case that feature fulfills.
+Explain the context and why you're making that change.
+What is the problem you're trying to solve?
+If a new feature is being added,
+describe the intended use case that feature fulfills.
 
 Bug fixes and new features should include tests.
 
-Contributors guide: https://github.com/Valerioageno/tuono/blob/main/CONTRIBUTING.md
+PR guide: https://tuono.dev/documentation/contributing/pull-requests
 -->

.github/workflows/ci-documentation.yml

@@ -3,13 +3,21 @@ name: Documentation Website CI
 on:
   push:
     branches:
-      - main
+      - 'main'
     paths:
+      # ⬇ Keep paths in sync with `typescript.yml`
       - '.github/**'
+      - '*'
+      - '!Cargo.toml'
+      # ⬆ Keep paths in sync with `typescript.yml`
       - 'apps/documentation/**'
   pull_request:
     paths:
+      # ⬇ Keep paths in sync with `typescript.yml`
       - '.github/**'
+      - '*'
+      - '!Cargo.toml'
+      # ⬆ Keep paths in sync with `typescript.yml`
       - 'apps/documentation/**'
 
 jobs:
@@ -29,7 +37,7 @@ jobs:
         uses: actions-rust-lang/setup-rust-toolchain@v1
 
       - name: Install tuono
-        run: cargo install tuono@0.12.3
+        run: cargo install tuono@0.16.9
 
       - name: Build project
         working-directory: ./apps/documentation

.github/workflows/deploy-documentation.yml

@@ -3,7 +3,7 @@ name: Deploy documentation website on AWS S3
 on:
   push:
     branches:
-      - main
+      - 'main'
     paths:
       - '.github/**'
       - 'apps/documentation/**'
@@ -27,7 +27,7 @@ jobs:
         uses: actions-rust-lang/setup-rust-toolchain@v1
 
       - name: Install tuono
-        run: cargo install tuono@0.12.3
+        run: cargo install tuono@0.16.9
 
       - name: Build project
         working-directory: ./apps/documentation

.github/workflows/pr-labeler.yml

@@ -0,0 +1,27 @@
+name: 'PR Labeler'
+
+# @see https://github.com/actions/labeler
+# @see .github/labeler.yml
+
+on:
+  - pull_request_target
+
+jobs:
+  labeler:
+    name: 'Manage labels'
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      # Add checkout step to load labeler.yml locally,
+      # rather than from an API request
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: actions/labeler@v5
+        with:
+          sync-labels: true

.github/workflows/pr-title-checker.yml

@@ -0,0 +1,61 @@
+name: 'PR Title Checker'
+
+# This workflow ensures that PR titles adhere to a pattern
+# similar to conventional commits standard
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - labeled
+      - unlabeled
+
+env:
+  PR_TITLE: ${{ github.event.pull_request.title }}
+
+jobs:
+  check_pr_title:
+    name: 'PR Title Checker'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check type
+        id: type
+        # @warning Keep in sync with apps/documentation/src/routes/documentation/contributing/pull-requests.mdx
+        run: |
+          VALID_COMMIT_TYPES="chore|ci|docs|feat|fix|refactor|test"
+          REGEX="^${VALID_COMMIT_TYPES})(\(.*\))?!?: .*"
+
+          if ! [[ $PR_TITLE =~ $REGEX ]]; then
+            echo "::error title=Type::The title has an incorrect type. Valid types are ${VALID_COMMIT_TYPES}"
+            echo "result=fail" >> "$GITHUB_OUTPUT"
+          else
+            echo "::notice title=Type::The title is using a valid type"
+            echo "result=ok" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Check length
+        id: length
+        run: |
+          MAX_LENGTH=100
+          LENGTH=${#PR_TITLE}
+
+          if [ $LENGTH -gt $MAX_LENGTH ]; then
+            echo "::error title=Length::The title is longer than $MAX_LENGTH characters"
+            echo "result=fail" >> "$GITHUB_OUTPUT"
+          else
+            echo "::notice title=Length::The title length is within the maximum value of $MAX_LENGTH characters"
+            echo "result=ok" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Check result
+        env:
+          FAILURE: ${{ contains(join(steps.*.outputs.result, ','), 'fail') }}
+        run: |
+          echo "Failure: $FAILURE"
+          if [ "$FAILURE" = "false" ]; then
+            exit 0
+          else
+            exit 1
+          fi

.github/workflows/release.yml

@@ -34,10 +34,10 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - uses: actions-rs/toolchain@v1
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
-          toolchain: stable
-          override: true
+          toolchain: 'stable'
 
       - uses: katyo/publish-crates@v2
         with:
@@ -80,10 +80,10 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - uses: actions-rs/toolchain@v1
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
         with:
-          toolchain: stable
-          override: true
+          toolchain: 'stable'
 
       - uses: katyo/publish-crates@v2
         with:

.github/workflows/repo-root-ci.yml

@@ -1,4 +1,5 @@
 name: Repo root CI
+
 # All workflows are triggered based on specific paths,
 # the root repository is something that is not applicable to rust nor typescript
 # so it has been moved in a standalone workflow
@@ -6,14 +7,16 @@ name: Repo root CI
 on:
   push:
     branches:
-      - main
+      - 'main'
     paths:
+      - '*'
       - '.github/**'
-      - './*'
+      - '.docker/**'
   pull_request:
     paths:
+      - '*'
       - '.github/**'
-      - './*'
+      - '.docker/**'
 
 jobs:
   build-and-test:

.github/workflows/rust.yml

@@ -3,13 +3,15 @@ name: Rust CI
 on:
   push:
     branches:
-      - main
+      - 'main'
     paths:
       - '.github/**'
+      - 'Cargo.toml'
       - 'crates/**'
   pull_request:
     paths:
       - '.github/**'
+      - 'Cargo.toml'
       - 'crates/**'
 
 env:
@@ -43,7 +45,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - run: rustup update ${{ matrix.toolchain }} && rustup default ${{ matrix.toolchain }}
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          toolchain: ${{ matrix.toolchain }}
+
       - run: cargo build --verbose
       - run: cargo test --verbose
 
@@ -55,5 +61,8 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+
       - run: cargo fmt --all -- --check
       - run: cargo clippy -- -D warnings

.github/workflows/spell-checking.yml

@@ -3,7 +3,7 @@ name: Spell Checker
 on:
   push:
     branches:
-      - main
+      - 'main'
 
   pull_request:
 

.github/workflows/typescript.yml

@@ -3,13 +3,21 @@ name: Typescript CI
 on:
   push:
     branches:
-      - main
+      - 'main'
     paths:
+      # ⬇ Keep paths in sync with `ci-documentation.yml`
       - '.github/**'
+      - '*'
+      - '!Cargo.toml'
+      # ⬆ Keep paths in sync with `ci-documentation.yml`
       - 'packages/**'
   pull_request:
     paths:
+      # ⬇ Keep paths in sync with `ci-documentation.yml`
       - '.github/**'
+      - '*'
+      - '!Cargo.toml'
+      # ⬆ Keep paths in sync with `ci-documentation.yml`
       - 'packages/**'
 
 jobs:

.gitignore

@@ -8,6 +8,8 @@ dist/
 
 examples/*/pnpm-lock.yaml
 
+vite.config.ts.timestamp*
+
 ## Rust related ignores
 
 # Generated by Cargo

.nvmrc

@@ -1 +1 @@
-22.11.0
+22.13.0

.prettierignore

@@ -1 +1,8 @@
-pnpm-lock.yaml
+pnpm-lock.yaml
+
+dist
+.tuono
+
+vite.config.ts.timestamp-*
+
+packages/tuono-lazy-fn-vite-plugin/tests/sources/*

CODEOWNERS

@@ -0,0 +1,9 @@
+*          @Valerioageno @marcalexiei
+
+# Rust
+/crates/    @Valerioageno
+/Cargo.toml @Valerioageno
+
+# Misc
+/.github/   @marcalexiei
+

CONTRIBUTING.md

@@ -7,8 +7,12 @@
 ## Contributions
 
 Any feature contribution or suggestion is strongly appreciated.
-Since the current project size, there isn't yet a defined way to start a discussion. Consider [opening a new issue](https://github.com/tuono-labs/tuono/issues/new/choose)
-or to reach me using my email address, [valerioageno@yahoo.it](mailto:valerioageno@ahoo.it). I'm also available on Twitter (X); DM @valerioageno.
+
+We are currently managing the tasks' prioritization in the [Road to V1](https://github.com/orgs/tuono-labs/projects/2) project. You can pick any task that you see in the `ready` column that is not already assigned.
+
+If you want to contribute on something that is in the `backlog` column, or it hasn't been scoped yet, please drop a message in the [#general](https://discord.com/invite/khQzPa654B) discord channel so we can all have visibility of it.
+
+Consider [opening a new issue](https://github.com/tuono-labs/tuono/issues/new/choose) if you find a bug.
 
 ## Bugs
 
@@ -19,6 +23,4 @@ or to reach me using my email address, [valerioageno@yahoo.it](mailto:valerioage
 
 **Did you write a patch that fixes a bug?**
 
-- Open a new GitHub pull request with the patch.
-- Ensure the PR description clearly describes the problem and solution. Include the relevant issue number, if applicable.
-- The pull requests must pass all the CI pipelines
+[Visit the documentation to learn how to open a pull request](https://tuono.dev/documentation/contributing/pull-requests)

Cargo.toml

@@ -7,8 +7,7 @@ members = [
 ]
 exclude = [
 		"apps/documentation",
-		"examples/wit-mdx",
+		"examples/with-mdx",
 		"examples/tuono-app",
-		"examples/tuono-tutorial",
-		"benches/tuono"
+		"examples/tuono-tutorial"
 ]

README.md

@@ -26,7 +26,7 @@ Some of its features are:
 
 ## 📖 Documentation
 
-The [documentation](https://tuono.dev/documentation) is available on
+The [documentation](https://tuono.dev/) is available on
 [tuono.dev](https://tuono.dev/).
 
 ## Introduction
@@ -48,7 +48,7 @@ by Tuono based on the files defined within the `./src/routes` directory.
 The Tuono API tries to stick as much as possible to the Next.js one (or at least takes a huge inspiration
 from it). The major difference is the backend system. While Next.js relies entirely on Node/Deno/Bun,
 Tuono runs the server without any intermediary runtime. This enables impressive performance improvements
-(check the benchmarks [here](https://github.com/tuono-labs/tuono/tree/main/benches)).
+(check the benchmarks [here](https://github.com/tuono-labs/tuono-benchmarks)).
 
 ## Getting started
 

apps/documentation/.eslintrc

@@ -1,106 +0,0 @@
-{
-  "root": true,
-  "reportUnusedDisableDirectives": true,
-  "ignorePatterns": ["**/build", "**/dist"],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "import"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "prettier",
-  ],
-  "env": {
-    "browser": true,
-    "es2020": true,
-  },
-  "parserOptions": {
-    "tsconfigRootDir": ".",
-    "project": true,
-    "sourceType": "module",
-    "ecmaVersion": 2020,
-  },
-  "settings": {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"],
-    },
-    "import/resolver": {
-      "typescript": true,
-    },
-    "react": {
-      "version": "detect",
-    },
-  },
-  "rules": {
-    "@typescript-eslint/array-type": "error",
-    "@typescript-eslint/no-wrapper-object-types": "error",
-    "@typescript-eslint/no-empty-object-type": "error",
-    "@typescript-eslint/no-unsafe-function-type": "error",
-    "@typescript-eslint/ban-ts-comment": "error",
-    "@typescript-eslint/consistent-type-definitions": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      { "prefer": "type-imports" },
-    ],
-    "@typescript-eslint/explicit-module-boundary-types": "error",
-    "@typescript-eslint/method-signature-style": ["error", "property"],
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        "selector": "typeParameter",
-        "format": ["PascalCase"],
-        "leadingUnderscore": "forbid",
-        "trailingUnderscore": "forbid",
-        "custom": {
-          "regex": "^(T|T[A-Z][A-Za-z]+)$",
-          "match": true,
-        },
-      },
-    ],
-    "@typescript-eslint/no-deprecated": "error",
-    "@typescript-eslint/no-empty-function": "error",
-    "@typescript-eslint/no-empty-interface": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-non-null-assertion": "error",
-    "@typescript-eslint/no-unnecessary-condition": "error",
-    "@typescript-eslint/no-unnecessary-type-assertion": "error",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/explicit-function-return-type": "error",
-    "@typescript-eslint/no-inferrable-types": [
-      "error",
-      { "ignoreParameters": true },
-    ],
-    "import/default": "error",
-    "import/export": "error",
-    "import/namespace": "error",
-    "import/newline-after-import": "error",
-    "import/no-cycle": "error",
-    "import/no-duplicates": "off",
-    "import/no-named-as-default-member": "error",
-    "import/no-unused-modules": "error",
-    "import/order": [
-      "off",
-      {
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index",
-          "object",
-          "type",
-        ],
-      },
-    ],
-    "no-case-declarations": "error",
-    "no-empty": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-shadow": "error",
-    "no-undef": "off",
-    "sort-imports": "off",
-  },
-}

apps/documentation/CONTRIBUTING.md

@@ -0,0 +1,17 @@
+# Documentation Contributing
+
+## Update `tuono` version in `apps/documentation`
+
+Update `tuono` version in the following files
+
+- `.github/workflows/ci-documentation.yml`
+- `.github/workflows/deploy-documentation.yml`
+- `apps/documentation/Cargo.toml`
+- `apps/documentation/package.json`
+
+[Refer to this PR for additional information](https://github.com/tuono-labs/tuono/pull/236/files)
+
+In the future we might:
+
+- move the documentation in a separate repo
+- make a script to perform this operation

apps/documentation/Cargo.toml

@@ -8,7 +8,7 @@ name = "tuono"
 path = ".tuono/main.rs"
 
 [dependencies]
-tuono_lib = "0.12.3"
+tuono_lib = "0.16.9"
 glob = "0.3.1"
 time = { version = "0.3", features = ["macros"] }
 serde = { version = "1.0.202", features = ["derive"] }

apps/documentation/package.json

@@ -3,29 +3,30 @@
   "description": "The react/rust fullstack framework documentation",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "scripts": {
-    "lint": "eslint --ext .ts,.tsx ./src -c .eslintrc",
-    "format": "prettier -u --write --ignore-unknown './src/**/*'",
-    "format:check": "prettier --check --ignore-unknown './src/**/*'",
+    "lint": "eslint .",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check --ignore-unknown .",
     "types": "tsc --noEmit"
   },
   "dependencies": {
-    "@mantine/code-highlight": "^7.11.2",
-    "@mantine/core": "^7.11.2",
-    "@mantine/hooks": "^7.11.2",
-    "@mdx-js/react": "^3.0.1",
-    "@tabler/icons-react": "^3.11.0",
-    "clsx": "^2.1.1",
+    "@mantine/code-highlight": "7.14.2",
+    "@mantine/core": "7.14.2",
+    "@mantine/hooks": "7.14.2",
+    "@mdx-js/react": "3.1.0",
+    "@tabler/icons-react": "3.22.0",
+    "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tuono": "npm:tuono@0.12.3"
+    "tuono": "npm:tuono@0.16.9"
   },
   "devDependencies": {
-    "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "postcss": "^8.4.39",
-    "postcss-preset-mantine": "^1.17.0",
-    "postcss-simple-vars": "^7.0.1"
+    "@mdx-js/rollup": "3.1.0",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "postcss": "8.5.0",
+    "postcss-preset-mantine": "1.17.0",
+    "postcss-simple-vars": "7.0.1"
   }
 }

apps/documentation/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     'postcss-preset-mantine': {},
     'postcss-simple-vars': {

apps/documentation/public/polyfill-db.json

@@ -0,0 +1,18 @@
+{
+  "polyfills": [
+    {
+      "identifier": "HTMLElement",
+      "import": {
+        "package": "@lit-labs/ssr-dom-shim",
+        "name": "HTMLElement"
+      }
+    },
+    {
+      "identifier": "customElements",
+      "import": {
+        "package": "@lit-labs/ssr-dom-shim",
+        "name": "customElements"
+      }
+    }
+  ]
+}

apps/documentation/public/site.webmanifest

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/documentation/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,89 @@
+import { useMemo, type JSX } from 'react'
+import { Breadcrumbs as MantineBreadcrumbs, Button } from '@mantine/core'
+import { Link, Head } from 'tuono'
+
+import { IconChevronRight, IconBolt } from '@tabler/icons-react'
+
+interface BreadcrumbData {
+  href?: string
+  label: string
+}
+interface BreadcrumbsProps {
+  breadcrumbs: Array<BreadcrumbData>
+}
+
+export default function Breadcrumbs({
+  breadcrumbs = [],
+}: BreadcrumbsProps): JSX.Element {
+  const ldJson = useMemo(() => {
+    const _ldJson = {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'Tuono - The React/Rust fullstack framework',
+          item: 'https://tuono.dev' as string | undefined,
+        },
+      ],
+    }
+
+    _ldJson.itemListElement.push(
+      ...breadcrumbs.map((br, i) => ({
+        '@type': 'ListItem' as const,
+        position: i + 3,
+        name: br.label,
+        item: br.href ? `https://tuono.dev${br.href}` : undefined,
+      })),
+    )
+
+    return _ldJson
+  }, [breadcrumbs])
+
+  return (
+    <>
+      <Head>
+        <script type="application/ld+json">
+          {JSON.stringify(ldJson, null, 2)}
+        </script>
+      </Head>
+      <MantineBreadcrumbs
+        separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
+        mb="md"
+        mt="md"
+      >
+        <Button href="/" component={Link} variant="subtle" radius="xl" p={5}>
+          <IconBolt />
+        </Button>
+        {breadcrumbs.map((br) => (
+          <BreadcrumbElement href={br.href} label={br.label} key={br.label} />
+        ))}
+      </MantineBreadcrumbs>
+    </>
+  )
+}
+
+interface BreadcrumbElementProps {
+  href?: string
+  label: string
+}
+
+export function BreadcrumbElement({
+  href,
+  label,
+}: BreadcrumbElementProps): JSX.Element {
+  if (href) {
+    return (
+      <Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
+        {label}
+      </Button>
+    )
+  }
+
+  return (
+    <Button component="span" variant="light" radius="xl">
+      {label}
+    </Button>
+  )
+}

apps/documentation/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,3 @@
+import Breadcrumbs from './Breadcrumbs'
+
+export default Breadcrumbs

apps/documentation/src/components/EditPage/index.ts

@@ -0,0 +1,3 @@
+import EditPage from './EditPage'
+
+export default EditPage

apps/documentation/src/components/Hero/index.ts

@@ -0,0 +1,3 @@
+import Hero from './Hero'
+
+export default Hero

apps/documentation/src/components/MdxProvider/MdxBold/MdxBold.tsx

@@ -2,5 +2,5 @@ import type { JSX } from 'react'
 import { Text, type TextProps } from '@mantine/core'
 
 export default function MdxBold(props: TextProps): JSX.Element {
-  return <Text fw={700} {...props} />
+  return <Text component="span" fw={700} {...props} />
 }

apps/documentation/src/components/MdxProvider/MdxBold/index.ts

@@ -0,0 +1,3 @@
+import MdxBold from './MdxBold'
+
+export default MdxBold

apps/documentation/src/components/MdxProvider/MdxCode/MdxCode.tsx

@@ -1,9 +1,8 @@
-import type { JSX } from 'react'
+import type { JSX, HTMLAttributes } from 'react'
 import { Code } from '@mantine/core'
-import type { HTMLAttributes } from 'react'
 
 export default function MdxCode(
   props: HTMLAttributes<HTMLPreElement>,
 ): JSX.Element {
-  return <Code {...props} style={{ fontSize: 14 }} />
+  return <Code {...props} style={{ fontSize: 'inherit' }} />
 }

apps/documentation/src/components/MdxProvider/MdxCode/index.ts

@@ -0,0 +1,3 @@
+import MdxCode from './MdxCode'
+
+export default MdxCode

apps/documentation/src/components/MdxProvider/MdxLink/index.ts

@@ -0,0 +1,3 @@
+import MdxLink from './MdxLink'
+
+export default MdxLink

apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.tsx

@@ -1,10 +1,17 @@
 import type { JSX } from 'react'
 import { CodeHighlight } from '@mantine/code-highlight'
-import styles from './mdx-pre.module.css'
+
+import styles from './MdxPre.module.css'
 
 interface PreProps {
-  children: any
+  children: {
+    props: {
+      children: string
+      className?: string
+    }
+  }
 }
+
 export default function MdxPre({ children }: PreProps): JSX.Element {
   return (
     <CodeHighlight

apps/documentation/src/components/MdxProvider/MdxPre/index.ts

@@ -0,0 +1,3 @@
+import MdxPre from './MdxPre'
+
+export default MdxPre

apps/documentation/src/components/MdxProvider/MdxProvider.tsx

@@ -1,13 +1,12 @@
-import type { JSX } from 'react'
+import type { JSX, ReactNode } from 'react'
 import { MDXProvider } from '@mdx-js/react'
 
-import MdxLink from './mdx-link'
-import type { ReactNode } from 'react'
-import MdxPre from './mdx-pre'
-import MdxQuote from './mdx-quote'
-import MdxCode from './mdx-code'
-import { h } from './mdx-title'
-import MdxBold from './mdx-bold/mdx-bold'
+import MdxLink from './MdxLink'
+import MdxPre from './MdxPre'
+import MdxQuote from './MdxQuote'
+import MdxCode from './MdxCode'
+import { h } from './MdxTitle'
+import MdxBold from './MdxBold'
 
 interface MdxProviderProps {
   children: ReactNode

apps/documentation/src/components/MdxProvider/MdxQuote/index.ts

@@ -0,0 +1,3 @@
+import MdxQuote from './MdxQuote'
+
+export default MdxQuote

apps/documentation/src/components/MdxProvider/MdxTitle/MdxTitle.tsx

@@ -8,6 +8,7 @@ export default function MdxTitle(props: TitleProps): JSX.Element {
       data-order={props.order}
       mt={20}
       {...props}
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       id={String(props.children ?? '')
         .toLowerCase()
         .replaceAll(' ', '-')}
@@ -15,6 +16,12 @@ export default function MdxTitle(props: TitleProps): JSX.Element {
   )
 }
 
-export const h =
-  (order: 1 | 2 | 3 | 4 | 5 | 6) =>
-  (props: TitleProps): JSX.Element => <MdxTitle order={order} {...props} />
+export const h = (
+  order: 1 | 2 | 3 | 4 | 5 | 6,
+): React.ElementType<TitleProps> => {
+  function render(props: TitleProps): JSX.Element {
+    return <MdxTitle order={order} {...props} />
+  }
+  render.displayName = 'H'
+  return render
+}

apps/documentation/src/components/MdxProvider/MdxTitle/index.ts

@@ -0,0 +1,5 @@
+import MdxTitle, { h } from './MdxTitle'
+
+export default MdxTitle
+
+export { h }

apps/documentation/src/components/MdxProvider/index.ts

@@ -0,0 +1,3 @@
+import MdxProvider from './MdxProvider'
+
+export default MdxProvider

apps/documentation/src/components/MetaTags/index.ts

@@ -0,0 +1,3 @@
+import MetaTags from './MetaTags'
+
+export default MetaTags

apps/documentation/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,33 @@
+import type { JSX } from 'react'
+import { AppShell, Box, Burger, Button, Flex } from '@mantine/core'
+import { Link } from 'tuono'
+
+import NavbarActions from './NavbarActions'
+
+interface NavbarProps {
+  toggle: () => void
+}
+
+export default function Navbar({ toggle }: NavbarProps): JSX.Element {
+  return (
+    <AppShell.Header p="sm">
+      <Flex justify="space-between">
+        <Button
+          component={Link}
+          href="/"
+          variant="transparent"
+          p={0}
+          fz={28}
+          hiddenFrom="sm"
+        >
+          Tuono
+        </Button>
+        <Box />
+        <Flex align="center" gap={8}>
+          <NavbarActions />
+          <Burger onClick={toggle} hiddenFrom="sm" size="sm" />
+        </Flex>
+      </Flex>
+    </AppShell.Header>
+  )
+}

apps/documentation/src/components/Navbar/NavbarActions.tsx

@@ -1,28 +1,13 @@
 import type { JSX } from 'react'
-import { Flex, Button, ActionIcon, Group } from '@mantine/core'
-import {
-  IconBrandGithub,
-  IconBook,
-  IconBrandDiscord,
-} from '@tabler/icons-react'
-import { Link } from 'tuono'
+import { Flex, ActionIcon, Group } from '@mantine/core'
+import { IconBrandGithub, IconBrandDiscord } from '@tabler/icons-react'
 
-import ThemeBtn from '../theme-btn'
+import ThemeBtn from '../ThemeBtn'
 
-export default function Actions(): JSX.Element {
+export default function NavbarActions(): JSX.Element {
   return (
     <Flex gap={8}>
       <Group gap={8}>
-        <Button
-          component={Link}
-          href="/documentation"
-          visibleFrom="sm"
-          size="compact-lg"
-          rightSection={<IconBook />}
-          autoContrast
-        >
-          Get started
-        </Button>
         <ActionIcon
           variant="default"
           size="lg"

apps/documentation/src/components/Navbar/index.ts

@@ -0,0 +1,3 @@
+import Navbar from './Navbar'
+
+export default Navbar

apps/documentation/src/components/NavigationButtons/NavigationButtons.tsx

@@ -1,16 +1,16 @@
 import type { JSX } from 'react'
 import { Box, Button, Text, Title, Flex } from '@mantine/core'
-import { Link } from 'tuono'
 import { IconArrowRight, IconArrowLeft } from '@tabler/icons-react'
+import { Link } from 'tuono'
 
-interface NavigationButton {
+interface NavigationButtonData {
   href: string
   title: string
 }
 
 interface NavigationButtonsProps {
-  prev?: NavigationButton
-  next?: NavigationButton
+  prev?: NavigationButtonData
+  next?: NavigationButtonData
 }
 
 export default function NavigationButtons({
@@ -25,7 +25,7 @@ export default function NavigationButtons({
   )
 }
 
-interface NavigationButtonProps extends NavigationButton {
+interface NavigationBtnProps extends NavigationButtonData {
   type: 'next' | 'prev'
 }
 
@@ -33,7 +33,7 @@ const NavigationBtn = ({
   type,
   title,
   href,
-}: NavigationButtonProps): JSX.Element => {
+}: NavigationBtnProps): JSX.Element => {
   const heading = type === 'next' ? 'Next' : 'Previous'
   const textAlign = type === 'next' ? 'left' : 'right'
   const variant = type === 'next' ? 'filled' : 'outline'

apps/documentation/src/components/NavigationButtons/index.ts

@@ -0,0 +1,3 @@
+import NavigationButtons from './NavigationButtons'
+
+export default NavigationButtons

apps/documentation/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,111 @@
+import type { JSX } from 'react'
+
+import {
+  AppShell,
+  Badge,
+  Flex,
+  Divider,
+  Title,
+  Button,
+  ScrollArea,
+  Text,
+} from '@mantine/core'
+
+import { IconX } from '@tabler/icons-react'
+import { useMediaQuery } from '@mantine/hooks'
+
+import { sidebarElements } from './sidebarElements'
+import SidebarLink from './SidebarLink'
+
+interface SidebarProps {
+  close: () => void
+}
+
+function SidebarHeader({ close }: SidebarProps): JSX.Element {
+  const isSm = useMediaQuery('(min-width: 48em)')
+  return (
+    <AppShell.Section>
+      <Flex mb={20} w="100%" justify="space-between">
+        <Flex
+          gap={10}
+          align="center"
+          w={isSm ? '100%' : 'auto'}
+          justify="center"
+        >
+          <Title order={3}>Tuono</Title>
+          <Badge mt={4} size="xs" variant="outline">
+            Docs
+          </Badge>
+        </Flex>
+        <Button onClick={close} hiddenFrom="sm" variant="transparent" p="0">
+          <IconX />
+        </Button>
+      </Flex>
+    </AppShell.Section>
+  )
+}
+
+function SidebarElements({ close }: SidebarProps): JSX.Element {
+  return (
+    <AppShell.Section component={ScrollArea}>
+      {sidebarElements.map((el, i) => {
+        if (el.type === 'divider') {
+          return <Divider key={`${el.type}-${i}`} my="md" mx={10} />
+        }
+
+        if (el.type === 'title') {
+          return (
+            <Text
+              key={`${el.type}-${i}`}
+              size="xs"
+              fw={700}
+              fz={12}
+              pl={12}
+              py={5}
+            >
+              {el.label}
+            </Text>
+          )
+        }
+
+        if (el.children?.length) {
+          return (
+            <SidebarLink
+              key={`${el.type}-${i}`}
+              href={el.href}
+              label={el.label}
+              leftSection={el.leftIcon}
+            >
+              {el.children.map((child, index) => (
+                <SidebarLink
+                  href={child.href}
+                  label={child.label}
+                  key={index}
+                  onClick={close}
+                />
+              ))}
+            </SidebarLink>
+          )
+        }
+
+        return (
+          <SidebarLink
+            key={`${el.type}-${i}`}
+            href={el.href}
+            label={el.label}
+            onClick={close}
+          />
+        )
+      })}
+    </AppShell.Section>
+  )
+}
+
+export default function Sidebar({ close }: SidebarProps): JSX.Element {
+  return (
+    <AppShell.Navbar p="md">
+      <SidebarHeader close={close} />
+      <SidebarElements close={close} />
+    </AppShell.Navbar>
+  )
+}

apps/documentation/src/components/Sidebar/SidebarLink.module.css

@@ -0,0 +1,17 @@
+.link {
+  border-radius: 8px;
+  margin-top: 0.25rem;
+  line-height: 1rem;
+  font-weight: 500;
+  transition: 0.3s;
+}
+
+.link span {
+  font-size: 14px !important;
+  color: var(--mantine-color-sidebar-gray);
+}
+
+.link:hover span,
+.active span {
+  color: var(--mantine-color-sidebar-text-hover);
+}

apps/documentation/src/components/Sidebar/SidebarLink.tsx

@@ -1,10 +1,10 @@
 import type { JSX, ReactNode } from 'react'
-import { useState } from 'react'
 import { NavLink, type NavLinkProps } from '@mantine/core'
+import clsx from 'clsx'
 import { Link, useRouter } from 'tuono'
 import { IconChevronRight } from '@tabler/icons-react'
 
-import styles from './sidebar-link.module.css'
+import styles from './SidebarLink.module.css'
 
 interface SidebarLinkProps {
   label: string
@@ -17,24 +17,19 @@ export default function SidebarLink(
   props: SidebarLinkProps & NavLinkProps,
 ): JSX.Element {
   const { pathname } = useRouter()
-  const [isOpen, setIsOpen] = useState<boolean>(!!props.defaultOpened)
+
+  const isActive = pathname === props.href
 
   const internalProps = {
-    active: pathname === props.href,
-    className: styles.link,
+    active: isActive,
+    className: clsx(styles.link, isActive && styles.active),
     rightSection: props.children && (
       <IconChevronRight
         size="1.2rem"
         stroke={1.5}
         className="mantine-rotate-rtl"
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          setIsOpen((state) => !state)
-        }}
       />
     ),
-    opened: isOpen,
     autoContrast: true,
     ...props,
   }

apps/documentation/src/components/Sidebar/index.ts

@@ -0,0 +1,3 @@
+import Sidebar from './Sidebar'
+
+export default Sidebar

apps/documentation/src/components/Sidebar/sidebarElements.ts

@@ -0,0 +1,270 @@
+import type { ReactNode } from 'react'
+
+interface SidebarElementBase<T extends string> {
+  type: T
+}
+
+type SidebarDivider = SidebarElementBase<'divider'>
+
+interface SidebarLink extends SidebarElementBase<'element'> {
+  label: string
+  href: string
+  children?: Array<SidebarLink>
+  leftIcon?: ReactNode
+}
+
+interface SidebarTitle extends SidebarElementBase<'title'> {
+  label: string
+}
+
+type SidebarElement = SidebarDivider | SidebarLink | SidebarTitle
+
+export const sidebarElements: Array<SidebarElement> = [
+  {
+    type: 'element',
+    label: 'Home',
+    href: '/',
+  },
+  {
+    type: 'element',
+    label: 'Getting started',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Installation',
+        href: '/documentation/installation',
+      },
+      {
+        type: 'element',
+        label: 'How is tuono different?',
+        href: '/documentation/how-is-tuono-different',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Tutorial',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        href: '/documentation/tutorial',
+        label: 'Intro',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/development-setup',
+        label: 'Development setup',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/api-fetching',
+        label: 'API fetching',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/components',
+        label: 'Components',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/dynamic-routes',
+        label: 'Dynamic routes',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/error-handling',
+        label: 'Error handling',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/seo',
+        label: 'SEO and meta tags',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/redirections',
+        label: 'Redirections',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/production',
+        label: 'Production build',
+      },
+      {
+        type: 'element',
+        href: '/documentation/tutorial/conclusion',
+        label: 'Conclusion',
+      },
+    ],
+  },
+  { type: 'divider' },
+  { type: 'title', label: 'Overview' },
+  {
+    type: 'element',
+    label: 'Routing',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Defining routes',
+        href: '/documentation/routing/defining-routes',
+      },
+      {
+        type: 'element',
+        label: 'Dynamic routes',
+        href: '/documentation/routing/dynamic-routes',
+      },
+      {
+        type: 'element',
+        label: 'Link and navigation',
+        href: '/documentation/routing/link-and-navigation',
+      },
+      {
+        type: 'element',
+        label: 'Pages',
+        href: '/documentation/routing/pages',
+      },
+      {
+        type: 'element',
+        label: 'Loading state',
+        href: '/documentation/routing/loading-state',
+      },
+      {
+        type: 'element',
+        label: 'Layouts',
+        href: '/documentation/routing/layouts',
+      },
+      {
+        type: 'element',
+        label: 'Redirecting',
+        href: '/documentation/routing/redirecting',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Rendering',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Server side rendering',
+        href: '/documentation/rendering/server-side-rendering',
+      },
+      {
+        type: 'element',
+        label: 'Static site rendering',
+        href: '/documentation/rendering/static-site-rendering',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Styles',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'CSS modules',
+        href: '/documentation/styles/css-modules',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Integrations',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'MDX',
+        href: '/documentation/integrations/mdx',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Core concepts',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Multithreading',
+        href: '/documentation/core-concepts/multithreading',
+      },
+    ],
+  },
+  { type: 'divider' },
+  { type: 'title', label: 'API reference' },
+  {
+    type: 'element',
+    label: 'Components',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'Head',
+        href: '/documentation/components/head',
+      },
+      {
+        type: 'element',
+        label: 'Link',
+        href: '/documentation/components/link',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'Hooks',
+    href: '#focus',
+    children: [
+      {
+        type: 'element',
+        label: 'useRouter',
+        href: '/documentation/hooks/use-router',
+      },
+    ],
+  },
+  {
+    type: 'element',
+    label: 'CLI',
+    href: '/documentation/cli',
+  },
+  {
+    type: 'element',
+    label: 'Application state',
+    href: '/documentation/application-state',
+  },
+  {
+    type: 'element',
+    label: 'Configuration',
+    href: '/documentation/configuration',
+  },
+
+  { type: 'divider' },
+  {
+    type: 'element',
+    label: 'Contributing',
+    href: '#focus',
+    leftIcon: '✨',
+    children: [
+      {
+        type: 'element',
+        label: 'Guildelines',
+        href: '/documentation/contributing',
+      },
+      {
+        type: 'element',
+        label: 'Local development',
+        href: '/documentation/contributing/local-development',
+      },
+      {
+        type: 'element',
+        label: 'Pull requests',
+        href: '/documentation/contributing/pull-requests',
+      },
+    ],
+  },
+]

apps/documentation/src/components/TableOfContents/TableOfContents.tsx

@@ -6,14 +6,11 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter, Link } from 'tuono'
 import { IconList } from '@tabler/icons-react'
 import { Box, rem, ScrollArea, Text } from '@mantine/core'
-import { getHeadings, type Heading } from './get-headings'
-import classes from './table-of-content.module.css'
 
-interface TableOfContentsProps {
-  withTabs: boolean
-}
+import { getHeadings, type Heading } from './getHeadings'
+import classes from './TableOfContents.module.css'
 
-function getActiveElement(rects: DOMRect[]): number {
+function getActiveElement(rects: Array<DOMRect>): number {
   if (rects.length === 0) {
     return -1
   }
@@ -35,12 +32,16 @@ function getActiveElement(rects: DOMRect[]): number {
   return closest.index
 }
 
+interface TableOfContentsProps {
+  withTabs: boolean
+}
+
 export function TableOfContents({
   withTabs,
 }: TableOfContentsProps): JSX.Element | null {
   const [active, setActive] = useState(0)
-  const [headings, setHeadings] = useState<Heading[]>([])
-  const headingsRef = useRef<Heading[]>([])
+  const [headings, setHeadings] = useState<Array<Heading>>([])
+  const headingsRef = useRef<Array<Heading>>([])
   const router = useRouter()
 
   const filteredHeadings = headings.filter((heading) => heading.depth > 1)
@@ -63,7 +64,9 @@ export function TableOfContents({
       ),
     )
     window.addEventListener('scroll', handleScroll)
-    return (): void => window.removeEventListener('scroll', handleScroll)
+    return (): void => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [router.pathname])
 
   if (filteredHeadings.length === 0) {

apps/documentation/src/components/TableOfContents/getHeadings.ts

@@ -8,8 +8,8 @@ export interface Heading {
   getNode: () => HTMLHeadingElement
 }
 
-function getHeadingsData(headings: HTMLHeadingElement[]): Heading[] {
-  const result: Heading[] = []
+function getHeadingsData(headings: Array<HTMLHeadingElement>): Array<Heading> {
+  const result: Array<Heading> = []
 
   for (const heading of headings) {
     if (heading.id) {
@@ -26,7 +26,7 @@ function getHeadingsData(headings: HTMLHeadingElement[]): Heading[] {
   return result
 }
 
-export function getHeadings(): Heading[] {
+export function getHeadings(): Array<Heading> {
   const root = document.getElementById('mdx-root')
   console.log(root)
 

apps/documentation/src/components/TableOfContents/index.ts

@@ -1,6 +1,6 @@
 /*
  * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
  */
-import { TableOfContents } from './table-of-content'
+import { TableOfContents } from './TableOfContents'
 
 export default TableOfContents

apps/documentation/src/components/ThemeBtn/ThemeBtn.tsx

@@ -7,7 +7,7 @@ import {
 import { IconSun, IconMoon } from '@tabler/icons-react'
 import cx from 'clsx'
 
-import classes from './theme-btn.module.css'
+import classes from './ThemeBtn.module.css'
 
 export default function ThemeBtn(): JSX.Element {
   const { setColorScheme } = useMantineColorScheme()
@@ -17,9 +17,9 @@ export default function ThemeBtn(): JSX.Element {
 
   return (
     <ActionIcon
-      onClick={() =>
+      onClick={() => {
         setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
-      }
+      }}
       variant="default"
       size="lg"
       aria-label="Toggle color scheme"

apps/documentation/src/components/ThemeBtn/index.ts

@@ -0,0 +1,3 @@
+import ThemeBtn from './ThemeBtn'
+
+export default ThemeBtn

apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,96 +0,0 @@
-import type { JSX } from 'react'
-import { Breadcrumbs, Button } from '@mantine/core'
-import { Link, Head } from 'tuono'
-
-import { IconChevronRight, IconBolt } from '@tabler/icons-react'
-
-interface Breadcrumb {
-  href?: string
-  label: string
-}
-interface BreadcrumbsProps {
-  breadcrumbs: Breadcrumb[]
-}
-
-export default function TuonoBreadcrumbs({
-  breadcrumbs = [],
-}: BreadcrumbsProps): JSX.Element {
-  return (
-    <>
-      <Head>
-        <script type="application/ld+json">
-          {`{
-              "@context": "https://schema.org",
-              "@type": "BreadcrumbList",
-              "itemListElement": [
-				{
-                  "@type": "ListItem",
-                  "position": 1,
-                  "name": "Tuono - The React/Rust fullstack framework",
-                  "item": "https://tuono.dev"
-                },
-                {
-                  "@type": "ListItem",
-                  "position": 2,
-                  "name": "Tuono - Documentation",
-                  "item": "https://tuono.dev/documentation"
-                }${breadcrumbs.length > 0 ? ',' : ''}
-                ${breadcrumbs
-                  .map((br, i) =>
-                    JSON.stringify({
-                      '@type': 'ListItem',
-                      position: i + 3,
-                      name: br.label,
-                      item: br.href ? `https://tuono.dev${br.href}` : undefined,
-                    }),
-                  )
-                  .join(',')}]
-            }
-          `}
-        </script>
-      </Head>
-      <Breadcrumbs
-        separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
-        mb="md"
-        mt="md"
-      >
-        <Button
-          href="/documentation"
-          component={Link}
-          variant="subtle"
-          radius="xl"
-          p={5}
-        >
-          <IconBolt />
-        </Button>
-        {breadcrumbs.map((br) => (
-          <BreadcrumbElement href={br.href} label={br.label} key={br.label} />
-        ))}
-      </Breadcrumbs>
-    </>
-  )
-}
-
-interface BreadcrumbElementProps {
-  href?: string
-  label: string
-}
-
-export function BreadcrumbElement({
-  href,
-  label,
-}: BreadcrumbElementProps): JSX.Element {
-  if (href) {
-    return (
-      <Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
-        {label}
-      </Button>
-    )
-  }
-
-  return (
-    <Button component="span" variant="light" radius="xl">
-      {label}
-    </Button>
-  )
-}

apps/documentation/src/components/breadcrumbs/index.ts

@@ -1,5 +0,0 @@
-import Breadcrumbs, { BreadcrumbElement } from './breadcrumbs'
-
-export default Breadcrumbs
-
-export { BreadcrumbElement as Element }

apps/documentation/src/components/edit-page/index.ts

@@ -1,3 +0,0 @@
-import EditPage from './edit-page'
-
-export default EditPage

apps/documentation/src/components/hero/index.ts

@@ -1,3 +0,0 @@
-import Hero from './hero'
-
-export default Hero

apps/documentation/src/components/mdx-provider/index.ts

@@ -1,3 +0,0 @@
-import MdxProvider from './mdx-provider'
-
-export default MdxProvider

apps/documentation/src/components/mdx-provider/mdx-code/index.ts

@@ -1,3 +0,0 @@
-import MdxCode from './mdx-code'
-
-export default MdxCode

apps/documentation/src/components/mdx-provider/mdx-link/index.ts

@@ -1,3 +0,0 @@
-import MdxLink from './mdx-link'
-
-export default MdxLink

apps/documentation/src/components/mdx-provider/mdx-pre/index.ts

@@ -1,3 +0,0 @@
-import MdxPre from './mdx-pre'
-
-export default MdxPre

apps/documentation/src/components/mdx-provider/mdx-quote/index.ts

@@ -1,3 +0,0 @@
-import MdxQuote from './mdx-quote'
-
-export default MdxQuote

apps/documentation/src/components/mdx-provider/mdx-title/index.ts

@@ -1,5 +0,0 @@
-import MdxTitle, { h } from './mdx-title'
-
-export default MdxTitle
-
-export { h }

apps/documentation/src/components/meta-tags/index.ts

@@ -1,3 +0,0 @@
-import MetaTags from './meta-tags'
-
-export default MetaTags

apps/documentation/src/components/navbar/index.ts

@@ -1,3 +0,0 @@
-import Navbar from './navbar'
-
-export default Navbar

apps/documentation/src/components/navbar/navbar.tsx

@@ -1,34 +0,0 @@
-import type { JSX } from 'react'
-import { AppShell, Burger, Button, Flex } from '@mantine/core'
-import { Link, useRouter } from 'tuono'
-
-import Actions from './actions'
-
-interface NavbarProps {
-  opened: boolean
-  toggle: () => void
-}
-
-export default function Navbar({ opened, toggle }: NavbarProps): JSX.Element {
-  const { pathname } = useRouter()
-  return (
-    <AppShell.Header p="sm">
-      <Flex justify="space-between">
-        <Button component={Link} href="/" variant="transparent" p={0} fz={28}>
-          Tuono
-        </Button>
-        <Flex align="center" gap={8}>
-          <Actions />
-          {pathname.startsWith('/documentation') && (
-            <Burger
-              opened={opened}
-              onClick={toggle}
-              hiddenFrom="sm"
-              size="sm"
-            />
-          )}
-        </Flex>
-      </Flex>
-    </AppShell.Header>
-  )
-}

apps/documentation/src/components/navigation-buttons/index.ts

@@ -1,3 +0,0 @@
-import NavigationButtons from './navigation-buttons'
-
-export default NavigationButtons

apps/documentation/src/components/sidebar/index.ts

@@ -1,3 +0,0 @@
-import Sidebar from './sidebar'
-
-export default Sidebar

apps/documentation/src/components/sidebar/sidebar-link.module.css

@@ -1,6 +0,0 @@
-.link {
-  border-radius: 8px;
-  margin-top: 0.25rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-}

apps/documentation/src/components/sidebar/sidebar.tsx

@@ -1,108 +0,0 @@
-import type { JSX } from 'react'
-import { AppShell } from '@mantine/core'
-
-import SidebarLink from './sidebar-link'
-
-interface SidebarProps {
-  close: () => void
-}
-
-export default function Sidebar({ close }: SidebarProps): JSX.Element {
-  return (
-    <AppShell.Navbar p="md">
-      <SidebarLink
-        href="/documentation"
-        label="Getting started"
-        onClick={close}
-      />
-      <SidebarLink
-        href="/documentation/installation"
-        label="Installation"
-        onClick={close}
-      />
-      <SidebarLink
-        href="/documentation/tutorial"
-        label="Tutorial"
-        defaultOpened
-        onClick={close}
-      >
-        <SidebarLink
-          href="/documentation/tutorial/development-setup"
-          label="Development setup"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/api-fetching"
-          label="API fetching"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/components"
-          label="Components"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/dynamic-routes"
-          label="Dynamic routes"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/error-handling"
-          label="Error handling"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/seo"
-          label="SEO and meta tags"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/redirections"
-          label="Server redirection"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/production"
-          label="Production build"
-          onClick={close}
-        />
-        <SidebarLink
-          href="/documentation/tutorial/conclusion"
-          label="Conclusion"
-          onClick={close}
-        />
-      </SidebarLink>
-      <SidebarLink href="/documentation/cli" label="CLI" onClick={close} />
-      <SidebarLink
-        label="Application state"
-        href="/documentation/application-state"
-        onClick={close}
-      />
-
-      <SidebarLink
-        label="Routing"
-        href="/documentation/routing"
-        onClick={close}
-      >
-        <SidebarLink
-          href="/documentation/routing/intro"
-          label="Project structure"
-          onClick={close}
-        />
-      </SidebarLink>
-
-      <SidebarLink
-        label="Contributing"
-        href="/documentation/contributing"
-        leftSection="✨"
-        onClick={close}
-      >
-        <SidebarLink
-          href="/documentation/contributing/local-development"
-          label="Local development"
-          onClick={close}
-        />
-      </SidebarLink>
-    </AppShell.Navbar>
-  )
-}

apps/documentation/src/components/theme-btn/index.ts

@@ -1,3 +0,0 @@
-import ThemeBtn from './theme-btn'
-
-export default ThemeBtn

apps/documentation/src/modules.d.ts

@@ -1,2 +1,5 @@
 // declaration.d.ts
-declare module '*.css'
+declare module '*.css' {
+  const CSSModule: Record<string, string>
+  export default CSSModule
+}

apps/documentation/src/routes/__root.tsx

@@ -1,19 +1,24 @@
 import type { ReactNode, JSX } from 'react'
+
 import {
   ColorSchemeScript,
   createTheme,
   MantineProvider,
   AppShell,
+  Container,
 } from '@mantine/core'
+import type { CSSVariablesResolver } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { Head, useRouter } from 'tuono'
-import Navbar from '../components/navbar'
+import { Head } from 'tuono'
+
+import EditPage from '@/components/EditPage'
+import MdxProvider from '@/components/MdxProvider'
+import Navbar from '@/components/Navbar'
+import Sidebar from '@/components/Sidebar'
 
 import '@mantine/core/styles.css'
 import '@mantine/code-highlight/styles.css'
 
-import Sidebar from '../components/sidebar'
-
 interface RootRouteProps {
   children: ReactNode
 }
@@ -21,7 +26,7 @@ interface RootRouteProps {
 const theme = createTheme({
   primaryColor: 'violet',
   primaryShade: { light: 6, dark: 9 },
-  fontFamily: 'Roboto',
+  fontFamily: 'Inter',
   respectReducedMotion: true,
   radius: {
     xs: '8px',
@@ -56,13 +61,31 @@ const theme = createTheme({
       },
     },
   },
+  other: {
+    sidebarGrayLight: '#495057',
+    sidebarGrayDark: '#adb5bd',
+    sidebarTextHoverLight: '#212529',
+    sidebarTextHoverDark: '#f8f9fa',
+  },
+})
+
+const resolver: CSSVariablesResolver = (th) => ({
+  variables: {},
+  light: {
+    '--mantine-color-sidebar-gray': th.other.sidebarGrayLight as string,
+    '--mantine-color-sidebar-text-hover': th.other
+      .sidebarTextHoverLight as string,
+  },
+  dark: {
+    '--mantine-color-sidebar-gray': th.other.sidebarGrayDark as string,
+    '--mantine-color-sidebar-text-hover': th.other
+      .sidebarTextHoverDark as string,
+  },
 })
 
 export default function RootRoute({ children }: RootRouteProps): JSX.Element {
   const [opened, { toggle }] = useDisclosure()
 
-  const { pathname } = useRouter()
-
   return (
     <>
       <Head>
@@ -88,8 +111,9 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element {
         <link rel="manifest" href="/site.webmanifest" />
       </Head>
       <ColorSchemeScript />
-      <MantineProvider theme={theme}>
+      <MantineProvider theme={theme} cssVariablesResolver={resolver}>
         <AppShell
+          layout="alt"
           header={{ height: 60 }}
           navbar={{
             width: 300,
@@ -97,9 +121,14 @@ export default function RootRoute({ children }: RootRouteProps): JSX.Element {
             collapsed: { mobile: !opened },
           }}
         >
-          <Navbar opened={opened} toggle={toggle} />
-          {pathname.startsWith('/documentation') && <Sidebar close={toggle} />}
-          {children}
+          <Navbar toggle={toggle} />
+          <Sidebar close={toggle} />
+          <AppShell.Main>
+            <Container id="mdx-root" component="article" size="md" p={20}>
+              <MdxProvider>{children}</MdxProvider>
+              <EditPage />
+            </Container>
+          </AppShell.Main>
         </AppShell>
       </MantineProvider>
     </>

apps/documentation/src/routes/documentation/__root.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode, JSX } from 'react'
-import { AppShell, Container } from '@mantine/core'
-
-import MdxProvider from '../../components/mdx-provider'
-import EditPage from '../../components/edit-page'
-
-interface RootRouteProps {
-  children: ReactNode
-}
-
-export default function RootRoute({ children }: RootRouteProps): JSX.Element {
-  return (
-    <AppShell.Main>
-      <Container id="mdx-root" component="article" size="md" p={20}>
-        <MdxProvider>{children}</MdxProvider>
-        <EditPage />
-      </Container>
-    </AppShell.Main>
-  )
-}

apps/documentation/src/routes/documentation/application-state.mdx

@@ -1,4 +1,4 @@
-import MetaTags from '../../components/meta-tags'
+import MetaTags from '@/components/MetaTags'
 
 <MetaTags
   title="Tuono - Application state"
@@ -6,7 +6,7 @@ import MetaTags from '../../components/meta-tags'
   description="Learn how to add features to your Tuono application"
 />
 
-import Breadcrumbs, { Element } from '../../components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'
 
 <Breadcrumbs breadcrumbs={[{ label: 'Application state' }]} />
 

apps/documentation/src/routes/documentation/cli.mdx

@@ -1,4 +1,4 @@
-import MetaTags from '../../components/meta-tags'
+import MetaTags from '@/components/MetaTags'
 
 <MetaTags
   title="Tuono - CLI"
@@ -6,7 +6,7 @@ import MetaTags from '../../components/meta-tags'
   description="Tuono is the CLI that provides all the needed commands to handle the full-stack project."
 />
 
-import Breadcrumbs, { Element } from '../../components/breadcrumbs'
+import Breadcrumbs from '@/components/Breadcrumbs'
 
 <Breadcrumbs breadcrumbs={[{ label: 'CLI' }]} />
 

apps/documentation/src/routes/documentation/components/head.mdx

@@ -0,0 +1,14 @@
+import MetaTags from '@/components/MetaTags'
+
+<MetaTags
+  title="Tuono - Head"
+  canonical="https://tuono.dev/documentation/components/head"
+/>
+
+import Breadcrumbs from '@/components/Breadcrumbs'
+
+<Breadcrumbs breadcrumbs={[{ label: 'Components' }]} />
+
+# Head
+
+TODO

apps/documentation/src/routes/documentation/components/link.mdx

@@ -0,0 +1,37 @@
+import MetaTags from '@/components/MetaTags'
+
+<MetaTags
+  title="Tuono - Link"
+  canonical="https://tuono.dev/documentation/components/link"
+/>
+
+import Breadcrumbs from '@/components/Breadcrumbs'
+
+<Breadcrumbs breadcrumbs={[{ label: 'Components' }]} />
+
+# Link
+
+Tuono provides a `Link` component for clientside navigation between pages of your app. `Link` prefetches pages from any links above the fold, allowing for faster navigations without a full reload.
+
+```typescript jsx
+import { Link } from 'tuono'
+
+export default function Page() {
+  return <Link href="/page2">My Other Page</Link>
+}
+```
+
+For navigating to pages outside of your app (other websites), you should use the `<a>` tag.
+
+> Additional considerations:
+>
+> - Any `Link` in the viewport is prefetched by default when it appears within the viewport.
+> - The corresponding data for server-rendered routes is fetched only when the `Link` is clicked.
+
+## Reference
+
+The `Link` component behaves similarly to the `<a>` HTML tag, with a few additional features controlled by the following props:
+
+- `href`: `string` (Required) - Relative path to the page in your application. Anchor names (links with hashtags) are also valid.
+- `preload`: `boolean` (Defaults to `true`) - Whether to preload the page if the link is within the viewport.
+- `scroll`: `boolean` (Defaults to `true`) - Whether to preserve scroll position between navigations.