chore(deps): update devdependencies (eslint)

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

.editorconfig

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

.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

@@ -1,6 +1,7 @@
 name: Bug report
 description: File a bug report
 title: '[Bug]: '
+type: Bug
 labels: ['bug']
 
 body:
@@ -32,55 +33,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/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Ask a question / Get support
+    url: https://discord.com/invite/khQzPa654B
+    about: Ask questions and discuss with other community members

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,7 @@
 name: Feature request
 description: Suggest an idea for this project
 title: '[Feature request]: '
+type: Feature
 labels: ['enhancement']
 
 body:

.github/labeler.yml

@@ -0,0 +1,34 @@
+# @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:
+          [
+            'devtools/**',
+            'packages/**',
+            'package.json',
+            'pnpm-*.yaml',
+            'eslint.config.js',
+            'tsconfig.json',
+          ]
+
+'CI/CD':
+  - changed-files:
+      - any-glob-to-any-file: ['.github/**']
+
+'repo maintenance':
+  - changed-files:
+      - any-glob-to-any-file:
+          [
+            'devtools/**',
+            '.npmrc',
+            '.nvmrc',
+            '.prettierrc',
+            '.prettierignore',
+            'renovate.json',
+            'turbo.json',
+          ]

.github/pull_request_template.md

@@ -1,13 +1,24 @@
-## Context & Description
+<!--
+👋 Thank you for your Pull Request 🙏
+-->
+
+### Checklist
+
+- [ ] I have read [Contributing > Pull requests](https://tuono.dev/documentation/contributing/pull-requests)
+
+### Related issue
+
+Fixes #0
+
+<!-- Replace the content with "None" if you haven't an issue to link -->
+
+### Overview
 
 <!--
-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
 -->

.github/workflows/ci-documentation.yml

@@ -1,57 +0,0 @@
-name: Documentation Website CI
-
-on:
-  push:
-    paths:
-      - '.github/**'
-      - 'apps/documentation/**'
-  pull_request:
-    paths:
-      - '.github/**'
-      - 'apps/documentation/**'
-
-jobs:
-  build:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
-    name: Check build
-    timeout-minutes: 15
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Install NodeJS Dependencies
-        uses: ./.github/actions/install-node-dependencies
-
-      - name: Setup rust
-        uses: actions-rust-lang/setup-rust-toolchain@v1
-
-      - name: Install tuono
-        run: cargo install tuono@0.12.3
-
-      - name: Build project
-        working-directory: ./apps/documentation
-        run: tuono build --static
-
-  fmt-lint-and-types:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
-    name: Check format and lint
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Install NodeJS Dependencies
-        uses: ./.github/actions/install-node-dependencies
-
-      - name: Check formatting
-        run: pnpm docs:format:check
-
-      - name: Lint
-        run: pnpm docs:lint
-
-      - name: Types
-        run: pnpm docs:types

.github/workflows/deploy-documentation.yml

@@ -1,45 +0,0 @@
-name: Deploy documentation website on AWS S3
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '.github/**'
-      - 'apps/documentation/**'
-
-jobs:
-  deploy-documentation:
-    runs-on: ubuntu-latest
-
-    env:
-      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Install NodeJS Dependencies
-        uses: ./.github/actions/install-node-dependencies
-
-      - name: Setup rust
-        uses: actions-rust-lang/setup-rust-toolchain@v1
-
-      - name: Install tuono
-        run: cargo install tuono@0.12.3
-
-      - name: Build project
-        working-directory: ./apps/documentation
-        run: tuono build --static
-
-      - name: Deploy
-        uses: reggionick/s3-deploy@v4
-        with:
-          folder: apps/documentation/out/static
-          bucket: tuono-documentation
-          bucket-region: eu-west-3
-          dist-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
-          invalidation: /
-          delete-removed: true
-          no-cache: true
-          private: true
-          files-to-include: '{.*/**,**}'

.github/workflows/docker-ci.yml

@@ -0,0 +1,61 @@
+name: Docker CI
+
+# If we need support more OS refer to
+# https://github.com/tuono-labs/tuono/pull/332#issuecomment-2614439692
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  build_and_test:
+    name: Build and Test Docker Image on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Build and Run Docker Compose
+        run: |
+          docker compose -f docker/compose.yml up --build -d
+
+      - name: Check if the container is running
+        run: |
+          docker ps --filter "name=tuono-source-container" --format "table {{.Names}}\t{{.Status}}"
+          if ! docker ps --filter "name=tuono-source-container" --format "{{.Status}}" | grep -q "Up"; then
+            echo "Error: Container 'tuono-source-container' is not running."
+            exit 1
+          fi
+
+      - name: Check commands inside container
+        run: |
+          docker exec tuono-source-container pnpm --version || { echo "Error: pnpm is not available."; exit 1; }
+          docker exec tuono-source-container tuono --version || { echo "Error: tuono is not available."; exit 1; }
+
+      - name: Run cargo test
+        run: docker exec tuono-source-container cargo test
+
+      - name: Install node dependencies in each tuono's sub-projets
+        run: docker exec tuono-source-container bash -c 'for dir in /tuono/packages/*; do [ -d "$dir" ] && (cd "$dir" && yes | pnpm install --frozen-lockfile); done'
+
+      - name: Run pnpm test
+        run: docker exec tuono-source-container pnpm test
+
+      - name: Tear Down Docker Compose
+        if: always()
+        run: |
+          docker compose -f docker/compose.yml down --volumes

.github/workflows/e2e-ci.yml

@@ -0,0 +1,53 @@
+name: E2E CI
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  e2e:
+    name: E2E Test (${{ matrix.os }})
+
+    strategy:
+      fail-fast: true
+      matrix:
+        os:
+          - 'ubuntu-latest'
+          - 'macos-latest'
+          - 'windows-latest'
+
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install NodeJS Dependencies
+        uses: ./.github/actions/install-node-dependencies
+
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install
+
+      - name: Run Playwright E2E tests
+        run: pnpm test:e2e
+
+  ci_ok:
+    name: E2E CI OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs:
+      - e2e
+    steps:
+      - name: Exit with error if some jobs are not successful
+        run: exit 1
+        if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')) }}

.github/workflows/examples-ci.yml

@@ -0,0 +1,107 @@
+name: Examples CI
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  example_list:
+    name: Get examples names
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+
+    outputs:
+      names: ${{ steps.find_folder.outputs.names }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - id: find_folder
+        working-directory: examples
+        # produces the list of folder inside examples without leading `./` and trailing `/`:
+        # ```text
+        # tuono-tutorial
+        # with-tailwind
+        # tuono-app
+        # with-mdx
+        # ```
+        #
+        # after, using `jq` the output is converted into a JSON array:
+        # ```json
+        # ["tuono-tutorial","with-tailwind","tuono-app","with-mdx"]
+        # ```
+        #
+        # and added to `$GITHUB_OUTPUT` env variable:
+        run: |
+          NAMES=$(find . -mindepth 1 -maxdepth 1 -type d -exec basename {} \;)
+          echo "names=$(echo "$NAMES" | jq -R -s -c 'split("\n")[:-1]')" >> "$GITHUB_OUTPUT"
+
+  check_example:
+    needs:
+      - example_list
+
+    strategy:
+      matrix:
+        example_name: ${{ fromJson(needs.example_list.outputs.names) }}
+        os:
+          - 'ubuntu-latest'
+          - 'macos-latest'
+          # to be added
+          # - 'windows-latest'
+
+        # Only on this repo some examples build including plugins fails
+        # However, if the project is downloaded via `tuono new`` it will work
+        # @see https://github.com/tuono-labs/tuono/pull/605#pullrequestreview-2656262230
+        # needs further investigations
+        exclude:
+          - example_name: with-tailwind
+
+    name: 'Check `${{ matrix.example_name }}` build on ${{ matrix.os }}'
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install NodeJS Dependencies
+        uses: ./.github/actions/install-node-dependencies
+
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+
+      - name: Build Rust
+        run: cargo build
+
+      - name: Build typescript
+        run: pnpm run build
+
+      - name: Check "build"
+        working-directory: ./examples/${{ matrix.example_name }}
+        run: ../../target/debug/tuono build
+
+      - name: Check formatting
+        run: pnpm run format
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
+  ci_ok:
+    name: Examples CI OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs:
+      - example_list
+      - check_example
+    steps:
+      - name: Exit with error if some jobs are not successful
+        run: exit 1
+        if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')) }}

.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 https://github.com/tuono-labs/tuono-documentation/blob/main/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

@@ -1,11 +1,14 @@
 name: Publish on npm and crates
+
 on:
   release:
     types: [published]
 
 jobs:
-  publish-on-npm-dry-run:
+  publish_npm_dry_run:
+    name: NPM publish (dry run)
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -23,16 +26,18 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-  publish-on-crates-dry-run:
+  publish_crates_dry_run:
+    name: Crates publish (dry run)
     runs-on: ubuntu-latest
+
     steps:
       - 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:
@@ -41,9 +46,11 @@ jobs:
           registry-token: ${{ secrets.CARGO_REGISTRY_TOKEN }}
           check-repo: true
 
-  publish-on-npm:
-    needs: [publish-on-crates-dry-run, publish-on-npm-dry-run]
+  publish_npm:
+    name: NPM publish
+    needs: [publish_npm_dry_run, publish_crates_dry_run]
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -64,17 +71,19 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-  publish-on-crates:
-    needs: [publish-on-crates-dry-run, publish-on-npm-dry-run]
+  publish_crates:
+    name: Crates publish
+    needs: [publish_npm_dry_run, publish_crates_dry_run]
     runs-on: ubuntu-latest
+
     steps:
       - 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,24 +1,24 @@
 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
 
 on:
   push:
-    paths:
-      - '.github/**'
-      - './*'
+    branches:
+      - 'main'
   pull_request:
-    paths:
-      - '.github/**'
-      - './*'
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 
 jobs:
-  build-and-test:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+  format:
     name: Check format
-    timeout-minutes: 15
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     steps:
       - name: Checkout code
@@ -29,3 +29,15 @@ jobs:
 
       - name: Test project
         run: pnpm repo:root:format
+
+  ci_ok:
+    name: Repo root CI OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs:
+      - format
+    steps:
+      - name: Exit with error if some jobs are not successful
+        run: exit 1
+        if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')) }}

.github/workflows/rust-ci.yml

@@ -0,0 +1,79 @@
+name: Rust CI
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  build_and_test:
+    name: Build and test crates on ${{ matrix.os }} with rust ${{ matrix.toolchain }}
+
+    strategy:
+      fail-fast: true
+      matrix:
+        os:
+          - 'ubuntu-latest'
+          - 'macos-latest'
+          - 'windows-latest'
+        toolchain:
+          - 'stable'
+
+        # Test `beta` and `nightly` toolchains only on `ubuntu`
+        # https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/running-variations-of-jobs-in-a-workflow#expanding-or-adding-matrix-configurations
+        include:
+          - toolchain: 'beta'
+            os: 'ubuntu-latest'
+          - toolchain: 'nightly'
+            os: 'ubuntu-latest'
+
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup rust toolchain
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          toolchain: ${{ matrix.toolchain }}
+
+      - run: cargo build --verbose
+      - run: cargo test --verbose
+
+  lint_and_fmt:
+    name: Check format and lint rust crates
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - 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
+
+  ci_ok:
+    name: Rust CI OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs:
+      - build_and_test
+      - lint_and_fmt
+    steps:
+      - name: Exit with error if some jobs are not successful
+        run: exit 1
+        if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')) }}

.github/workflows/rust.yml

@@ -1,45 +0,0 @@
-name: Rust CI
-
-on:
-  push:
-    paths:
-      - '.github/**'
-      - 'crates/**'
-  pull_request:
-    paths:
-      - '.github/**'
-      - 'crates/**'
-
-env:
-  CARGO_TERM_COLOR: always
-
-jobs:
-  lint_and_fmt:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
-    name: Check format and lint rust crates
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - run: cargo fmt --all -- --check
-      - run: cargo clippy -- -D warnings
-
-  build_and_test:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
-    name: Build and test rust crates
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        toolchain:
-          - stable
-          - beta
-          - nightly
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - run: rustup update ${{ matrix.toolchain }} && rustup default ${{ matrix.toolchain }}
-      - run: cargo build --verbose
-      - run: cargo test --verbose

.github/workflows/spell-checking.yml

@@ -1,23 +1,70 @@
 name: Spell Checker
 
-on: [pull_request]
+on:
+  push:
+    branches:
+      - 'main'
+
+  pull_request:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 
 jobs:
   spell_checking:
-    name: runner / LanguageTools
+    name: LanguageTool
     runs-on: ubuntu-latest
+
+    permissions:
+      checks: write
+      contents: read
+      pull-requests: write
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-
-      - uses: reviewdog/action-languagetool@v1
         with:
-          github_token: ${{ secrets.REVIEWDOG_TOKEN }}
+          # Keep this value in order to show the error comments
+          # also on edited files.
+          fetch-depth: 2
+
+      # If the workflow is triggered by a push use check reporter
+      #
+      # If the workflow is triggered by a PR coming from the
+      # same repository, the author has write access so we can
+      # use pr-review reporter since the GITHUB_TOKEN will have review
+      # write permissions
+      #
+      # Otherwise use annotation reporter that do not require any
+      # particular permission
+      #
+      # Why this?
+      # https://github.com/Valerioageno/tuono/pull/137#pullrequestreview-2455455272
+      - name: Set reporter
+        id: reporter
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          FROM_MAIN_REPO: ${{ github.event.pull_request.head.repo.full_name == github.event.pull_request.base.repo.full_name }}
+        run: |
+          echo "EVENT_NAME: $EVENT_NAME FROM_MAIN_REPO: $FROM_MAIN_REPO"
+          if [ "$EVENT_NAME" == 'push' ]; then
+            echo "name=github-check" >> $GITHUB_OUTPUT
+          elif [ "$FROM_MAIN_REPO" == 'true' ]; then
+            echo "name=github-pr-review" >> $GITHUB_OUTPUT
+          else
+            echo "name=github-pr-annotations" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Review dog languagetool
+        uses: reviewdog/action-languagetool@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           # Change reviewdog reporter if you need [github-pr-check,github-check,github-pr-review].
-          reporter: 'github-pr-review'
+          reporter: ${{ steps.reporter.outputs.name }}
           # Change reporter level if you need.
-          level: 'error'
+          level: 'warning'
           patterns: '**/*.md **/*.txt **/*.mdx'
-          #enabled_categories: 'STYLE,PLAIN_ENGLISH,WHITESPACE_RULE,EN_QUOTES,DASH_RULE,WORD_CONTAINS_UNDERSCORE,UPPERCASE_SENTENCE_START,ARROWS,COMMA_PARENTHESIS_WHITESPACE,UNLIKELY_OPENING_PUNCTUATION,SENTENCE_WHITESPACE,EN_UNPAIRED_BRACKETS,PHRASE_REPETITION,PUNCTUATION_PARAGRAPH_END'
+          # enabled_categories: "STYLE,PLAIN_ENGLISH,WHITESPACE_RULE,EN_QUOTES,DASH_RULE,WORD_CONTAINS_UNDERSCORE,UPPERCASE_SENTENCE_START,ARROWS,COMMA_PARENTHESIS_WHITESPACE,UNLIKELY_OPENING_PUNCTUATION,SENTENCE_WHITESPACE,EN_UNPAIRED_BRACKETS,PHRASE_REPETITION,PUNCTUATION_PARAGRAPH_END"
           disabled_categories: ''
           disabled_rules: ''

.github/workflows/typescript-ci.yml

@@ -0,0 +1,73 @@
+name: Typescript CI
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.head_ref || github.ref }}'
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  build_and_test:
+    name: Check build and test
+
+    strategy:
+      fail-fast: true
+      matrix:
+        os:
+          - 'ubuntu-latest'
+          - 'macos-latest'
+          - 'windows-latest'
+
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install NodeJS Dependencies
+        uses: ./.github/actions/install-node-dependencies
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Test project
+        run: pnpm test
+
+  lint_and_fmt:
+    name: Check format and lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install NodeJS Dependencies
+        uses: ./.github/actions/install-node-dependencies
+
+      - name: Check formatting
+        run: pnpm run format
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
+  ci_ok:
+    name: Typescript CI OK
+    runs-on: ubuntu-latest
+    timeout-minutes: 1
+    if: always()
+    needs:
+      - build_and_test
+      - lint_and_fmt
+    steps:
+      - name: Exit with error if some jobs are not successful
+        run: exit 1
+        if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')) }}

.github/workflows/typescript.yml

@@ -1,53 +0,0 @@
-name: Typescript CI
-
-on:
-  push:
-    paths:
-      - '.github/**'
-      - 'packages/**'
-  pull_request:
-    paths:
-      - '.github/**'
-      - 'packages/**'
-
-jobs:
-  build-and-test:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
-    name: Check build and test
-    timeout-minutes: 15
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Install NodeJS Dependencies
-        uses: ./.github/actions/install-node-dependencies
-
-      - name: Build project
-        run: pnpm build
-
-      - name: Test project
-        run: pnpm test
-
-  fmt-lint-and-types:
-    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
-    name: Check format and lint
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Install NodeJS Dependencies
-        uses: ./.github/actions/install-node-dependencies
-
-      - name: Check formatting
-        run: pnpm format:check
-
-      - name: Lint
-        run: pnpm lint
-
-      - name: Types
-        run: pnpm types

.gitignore

@@ -8,6 +8,8 @@ dist/
 
 examples/*/pnpm-lock.yaml
 
+vite.config.ts.timestamp*
+
 ## Rust related ignores
 
 # Generated by Cargo
@@ -24,3 +26,7 @@ examples/*/pnpm-lock.yaml
 
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
+
+# Files, generated by the code editors
+.vscode/
+

.nvmrc

@@ -1 +1 @@
-22.11.0
+22.17.1

.prettierignore

@@ -1 +1,11 @@
-pnpm-lock.yaml
+pnpm-lock.yaml
+
+dist
+.tuono
+out
+
+vite.config.ts.timestamp-*
+
+packages/tuono-lazy-fn-vite-plugin/tests/sources/*
+
+e2e/fixtures/*/test-results

CODEOWNERS

@@ -0,0 +1,2 @@
+* @Valerioageno
+

CONTRIBUTING.md

@@ -1,5 +1,5 @@
-![](https://github.com/Valerioageno/tuono/actions/workflows/rust.yml/badge.svg)
-![](https://github.com/Valerioageno/tuono/actions/workflows/typescript.yml/badge.svg)
+![](https://github.com/tuono-labs/tuono/actions/workflows/rust.yml/badge.svg)
+![](https://github.com/tuono-labs/tuono/actions/workflows/typescript.yml/badge.svg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 # How to Contribute to Tuono
@@ -7,18 +7,20 @@
 ## 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/Valerioageno/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
 
 **Did you find a bug?**
 
-- Ensure the bug was not already reported by searching on GitHub under [Issues](https://github.com/Valerioageno/tuono/issues).
-- If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/Valerioageno/tuono/issues/new/choose). Be sure to include a title and clear description, as much relevant information as possible, and a code sample or an executable test case demonstrating the expected behavior that is not occurring.
+- Ensure the bug was not already reported by searching on GitHub under [Issues](https://github.com/tuono-labs/tuono/issues).
+- If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/tuono-labs/tuono/issues/new/choose). Be sure to include a title and clear description, as much relevant information as possible, and a code sample or an executable test case demonstrating the expected behavior that is not occurring.
 
 **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

@@ -1,14 +1,15 @@
 [workspace]
 resolver = "2"
 members = [
-		"crates/tuono",
-		"crates/tuono_lib",
-		"crates/tuono_lib_macros",
+  "crates/tuono", 
+  "crates/tuono_internal", 
+  "crates/tuono_lib", 
+  "crates/tuono_lib_macros"
 ]
 exclude = [
-		"apps/documentation",
-		"examples/mdx",
-		"examples/tuono",
-		"examples/tutorial",
-		"benches/tuono"
+  "examples/with-mdx",
+  "examples/tuono-app",
+  "examples/tuono-tutorial",
+  "examples/with-tailwind",
+  "e2e/fixtures/base",
 ]

README.md

@@ -3,12 +3,13 @@
 
 # Tuono
 
-<img align="right" src="https://raw.githubusercontent.com/Valerioageno/tuono/main/assets/logo.png" width="160px">
+<img align="right" src="https://raw.githubusercontent.com/tuono-labs/tuono/main/assets/logo.png" width="160px">
 
-![](https://github.com/Valerioageno/tuono/actions/workflows/rust.yml/badge.svg)
-![](https://github.com/Valerioageno/tuono/actions/workflows/typescript.yml/badge.svg)
+![](https://github.com/tuono-labs/tuono/actions/workflows/rust.yml/badge.svg)
+![](https://github.com/tuono-labs/tuono/actions/workflows/typescript.yml/badge.svg)
 
-**Tuono is the fastest React framework out there**
+**Tuono is a full-stack web framework for building React applications using Rust as the backend with
+a strong focus on usability and performance.**
 
 Tuono (Italian word for "thunder", pronounced /2 Oh No/).
 Why Tuono? Just a badass name.
@@ -23,54 +24,34 @@ Some of its features are:
 - 🧬 Server Side Rendering
 - 🔥 Hot Module Reload
 
-## 📖 Documentation
+## Documentation
 
-The [documentation](https://tuono.dev/documentation) is available on
+The [documentation](https://tuono.dev/) is available on
 [tuono.dev](https://tuono.dev/).
 
-## Introduction
+## Installation
 
-**NodeJs/Deno/Bun are the only runtimes that allow a React app to be full-stack right? (no)**
+Available on MacOS, Linux and Windows.
 
-Tuono is a full-stack React framework with the server side written in Rust.
-Because of this, Tuono is extremely fast, and the requests are handled by a multithreaded Rust server.
-React is still React - it is just superpowered.
-
-**Rust is a 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 in a separate file alongside the React route. The routing is handled
-by Tuono based on the files defined within the `./src/routes` directory.
-
-**How is Tuono different from Next.js?**
-
-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/Valerioageno/tuono/tree/main/benches)).
+```sh
+cargo install tuono
+```
 
 ## Getting started
 
-As already mentioned above, I strongly suggest you take a look at the
-[tutorial](https://tuono.dev/documentation/tutorial).
+Create a new project with:
 
-Tuono is the CLI that provides all the needed commands to handle the full-stack project.
-To download it is required [cargo](https://doc.rust-lang.org/cargo/), which is the [rust](https://www.rust-lang.org/)
-package manager.
+```sh
+tuono new [PROJECT_NAME]
+```
 
-Then run `cargo install tuono`.
+> You can optionally pass the --template (or -t) flag to directly start from a [template](https://github.com/tuono-labs/tuono/tree/main/examples)
 
-To list all the available commands, run `tuono -h`
+Now just install the dependencies with you favourite JS package manager (i.e. `npm install`) and start the development environment
 
-To create a new project, run `tuono new [NAME]` (optionally, you can pass the `--template` (or `-t`) flag - check the
-[examples](https://github.com/Valerioageno/tuono/tree/main/examples) folder).
-
-Then, to run the local development environment, run it inside the project folder `tuono dev`
-
-Finally, when the project is ready to be deployed, just run `tuono build` to create the final React assets
-and to set the server project in `production` mode.
-
-Now to execute it just run `cargo run --release`.
+```sh
+tuono dev
+```
 
 ## Contributing
 

apps/README.md

@@ -1 +0,0 @@
-# Stadalone apps folder

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/Cargo.toml

@@ -1,15 +0,0 @@
-[package]
-name = "tuono"
-version = "0.0.1"
-edition = "2021"
-
-[[bin]]
-name = "tuono"
-path = ".tuono/main.rs"
-
-[dependencies]
-tuono_lib = "0.12.3"
-glob = "0.3.1"
-time = { version = "0.3", features = ["macros"] }
-serde = { version = "1.0.202", features = ["derive"] }
-

apps/documentation/README.md

@@ -1,7 +0,0 @@
-# Tuono starter
-
-This is the starter tuono project. To download it run in your terminal:
-
-```shell
-$ tuono new [NAME]
-```

apps/documentation/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "documentation",
-  "description": "The react/rust fullstack framework documentation",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "lint": "eslint --ext .ts,.tsx ./src -c .eslintrc",
-    "format": "prettier -u --write --ignore-unknown './src/**/*'",
-    "format:check": "prettier --check --ignore-unknown './src/**/*'",
-    "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",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "tuono": "npm:tuono@0.12.3"
-  },
-  "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"
-  }
-}

apps/documentation/postcss.config.cjs

@@ -1,14 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-preset-mantine': {},
-    'postcss-simple-vars': {
-      variables: {
-        'mantine-breakpoint-xs': '36em',
-        'mantine-breakpoint-sm': '48em',
-        'mantine-breakpoint-md': '62em',
-        'mantine-breakpoint-lg': '75em',
-        'mantine-breakpoint-xl': '88em',
-      },
-    },
-  },
-}

apps/documentation/public/site.webmanifest

@@ -1 +0,0 @@
-{"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

@@ -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/edit-page.tsx

@@ -1,24 +0,0 @@
-import type { JSX } from 'react'
-import { Button } from '@mantine/core'
-import { IconEdit } from '@tabler/icons-react'
-import { useRouter } from 'tuono'
-
-const GITHUB_URL =
-  'https://github.com/Valerioageno/tuono/tree/main/apps/documentation/src/routes'
-
-export default function EditPage(): JSX.Element {
-  const { pathname } = useRouter()
-  return (
-    <Button
-      p={0}
-      mt={60}
-      component="a"
-      variant="transparent"
-      leftSection={<IconEdit />}
-      target="_blank"
-      href={GITHUB_URL.concat(pathname).concat('.mdx')}
-    >
-      Edit page
-    </Button>
-  )
-}

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/hero.tsx

@@ -1,54 +0,0 @@
-import type { JSX } from 'react'
-import {
-  Button,
-  Center,
-  Container,
-  CopyButton,
-  Group,
-  rem,
-  Text,
-  Title,
-} from '@mantine/core'
-import { IconCopy, IconCheck } from '@tabler/icons-react'
-import { Link } from 'tuono'
-
-export default function Hero(): JSX.Element {
-  return (
-    <Container size={1100} my={100}>
-      <Center>
-        <Title order={1}>Superfast fullstack react framework</Title>
-      </Center>
-      <Center mt={50}>
-        <Text fz="18px">
-          The technologies we love seamlessly working together to unleash the
-          <strong> highest web performance</strong> ever met on React
-        </Text>
-      </Center>
-      <Center mt={50}>
-        <Group>
-          <Button component={Link} href="/documentation" size="lg">
-            Get Started
-          </Button>
-          <CopyButton value="cargo install tuono">
-            {({ copied, copy }) => (
-              <Button
-                onClick={copy}
-                size="lg"
-                style={{ border: 'solid 1px var(--mantine-color-violet-1)' }}
-                color="gray"
-                leftSection="$ cargo install tuono"
-                rightSection={
-                  copied ? (
-                    <IconCheck style={{ width: rem(20) }} />
-                  ) : (
-                    <IconCopy style={{ width: rem(20) }} />
-                  )
-                }
-              />
-            )}
-          </CopyButton>
-        </Group>
-      </Center>
-    </Container>
-  )
-}

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-bold/mdx-bold.tsx

@@ -1,6 +0,0 @@
-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} />
-}

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-code/mdx-code.tsx

@@ -1,9 +0,0 @@
-import type { JSX } 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 }} />
-}

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-link/mdx-link.tsx

@@ -1,36 +0,0 @@
-import type { JSX, AnchorHTMLAttributes } from 'react'
-import { Button } from '@mantine/core'
-import { Link } from 'tuono'
-import { IconExternalLink } from '@tabler/icons-react'
-
-export default function MdxLink(
-  props: AnchorHTMLAttributes<HTMLAnchorElement>,
-): JSX.Element {
-  if (props.href?.startsWith('http') || props.href?.startsWith('mailto')) {
-    return (
-      <Button
-        component="a"
-        {...props}
-        target="_blank"
-        rightSection={
-          <IconExternalLink size="16px" style={{ marginLeft: -5 }} />
-        }
-        variant="transparent"
-        style={{ height: '20px' }}
-        mt={-2}
-        p={0}
-      />
-    )
-  }
-  return (
-    <Button
-      component={Link}
-      {...props}
-      target="_blank"
-      variant="transparent"
-      style={{ height: '20px' }}
-      mt={-2}
-      p={0}
-    />
-  )
-}

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-pre/mdx-pre.module.css

@@ -1,5 +0,0 @@
-.pre {
-  code {
-    font-size: 14px;
-  }
-}

apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.tsx

@@ -1,17 +0,0 @@
-import type { JSX } from 'react'
-import { CodeHighlight } from '@mantine/code-highlight'
-import styles from './mdx-pre.module.css'
-
-interface PreProps {
-  children: any
-}
-export default function MdxPre({ children }: PreProps): JSX.Element {
-  return (
-    <CodeHighlight
-      className={styles.pre}
-      code={children.props.children || ''}
-      style={{ borderRadius: 8, fontWeight: 100 }}
-      language={children.props.className?.replace('language-', '')}
-    />
-  )
-}

apps/documentation/src/components/mdx-provider/mdx-provider.tsx

@@ -1,39 +0,0 @@
-import type { JSX } 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'
-
-interface MdxProviderProps {
-  children: ReactNode
-}
-
-export default function MdxProvider({
-  children,
-}: MdxProviderProps): JSX.Element {
-  return (
-    <MDXProvider
-      components={{
-        a: MdxLink,
-        // @ts-expect-error: useless finding the correct props types
-        pre: MdxPre,
-        blockquote: MdxQuote,
-        code: MdxCode,
-        h1: h(1),
-        h2: h(2),
-        h3: h(3),
-        h4: h(4),
-        h5: h(5),
-        h6: h(6),
-        strong: MdxBold,
-      }}
-    >
-      {children}
-    </MDXProvider>
-  )
-}

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-quote/mdx-quote.tsx

@@ -1,21 +0,0 @@
-import type { JSX, HTMLAttributes } from 'react'
-import { Blockquote, Space } from '@mantine/core'
-
-export default function MdxQuote(
-  props: HTMLAttributes<HTMLQuoteElement>,
-): JSX.Element {
-  return (
-    <>
-      <Blockquote
-        color="violet"
-        py={1}
-        px={20}
-        mt={30}
-        iconSize={30}
-        {...props}
-        style={{ borderRadius: 8 }}
-      />
-      <Space h="md" />
-    </>
-  )
-}

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/mdx-provider/mdx-title/mdx-title.tsx

@@ -1,20 +0,0 @@
-import type { JSX } from 'react'
-import { Title, type TitleProps } from '@mantine/core'
-
-export default function MdxTitle(props: TitleProps): JSX.Element {
-  return (
-    <Title
-      data-heading={props.children}
-      data-order={props.order}
-      mt={20}
-      {...props}
-      id={String(props.children ?? '')
-        .toLowerCase()
-        .replaceAll(' ', '-')}
-    />
-  )
-}
-
-export const h =
-  (order: 1 | 2 | 3 | 4 | 5 | 6) =>
-  (props: TitleProps): JSX.Element => <MdxTitle order={order} {...props} />

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

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

apps/documentation/src/components/meta-tags/meta-tags.tsx

@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react'
-import { Head } from 'tuono'
-
-interface MetaTagsProps {
-  title: string
-  description?: string
-  type?: 'website' | 'article' | 'book' | 'video.movie' | 'music.song'
-  canonical: string
-}
-
-export default function MetaTags({
-  title,
-  description,
-  type = 'article',
-  canonical,
-}: MetaTagsProps): ReactNode {
-  return (
-    <Head>
-      <title>{title}</title>
-      <link rel="canonical" href={canonical} />
-      <meta
-        name="description"
-        content={
-          description ??
-          'The technologies we love seamlessly working together to unleash the highest web performance ever met on React'
-        }
-      />
-      <meta
-        name="keywords"
-        content="ReactJs, Typescript, Rust, JavaScript, Fullstack framework, Web development"
-      />
-      <meta property="og:title" content={title} />
-      <meta property="og:type" content={type} />
-      <meta property="og:image" content="https://tuono.dev/og-cover.png" />
-      <meta property="og:url" content={canonical} />
-      <meta property="og:description" content={description} />
-      <meta property="og:site_name" content="Tuono" />
-      <meta property="og:locale" content="en_US" />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:site" content="@tuono_dev" />
-      <meta name="twitter:title" content={title} />
-      <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content="https://tuono.dev/og-cover.png" />
-    </Head>
-  )
-}

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

@@ -1,50 +0,0 @@
-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 ThemeBtn from '../theme-btn'
-
-export default function Actions(): 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"
-          aria-label="Check the project on github"
-          href="https://github.com/Valerioageno/tuono"
-          target="_blank"
-          component="a"
-        >
-          <IconBrandGithub />
-        </ActionIcon>
-        <ActionIcon
-          variant="default"
-          size="lg"
-          aria-label="Join the Tuono's community on Discord!"
-          href="https://discord.com/invite/khQzPa654B"
-          target="_blank"
-          component="a"
-        >
-          <IconBrandDiscord />
-        </ActionIcon>
-      </Group>
-      <ThemeBtn />
-    </Flex>
-  )
-}

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/navigation-buttons/navigation-buttons.tsx

@@ -1,63 +0,0 @@
-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'
-
-interface NavigationButton {
-  href: string
-  title: string
-}
-
-interface NavigationButtonsProps {
-  prev?: NavigationButton
-  next?: NavigationButton
-}
-
-export default function NavigationButtons({
-  prev,
-  next,
-}: NavigationButtonsProps): JSX.Element {
-  return (
-    <Flex mt={50} gap={10}>
-      {prev && <NavigationBtn type="prev" {...prev} />}
-      {next && <NavigationBtn type="next" {...next} />}
-    </Flex>
-  )
-}
-
-interface NavigationButtonProps extends NavigationButton {
-  type: 'next' | 'prev'
-}
-
-const NavigationBtn = ({
-  type,
-  title,
-  href,
-}: NavigationButtonProps): JSX.Element => {
-  const heading = type === 'next' ? 'Next' : 'Previous'
-  const textAlign = type === 'next' ? 'left' : 'right'
-  const variant = type === 'next' ? 'filled' : 'outline'
-
-  return (
-    <Button
-      component={Link}
-      fullWidth
-      variant={variant}
-      href={href}
-      justify="space-between"
-      h="auto"
-      rightSection={type === 'next' && <IconArrowRight />}
-      leftSection={type === 'prev' && <IconArrowLeft />}
-      p="20"
-    >
-      <Box>
-        <Title component="span" display="block" order={4} style={{ textAlign }}>
-          {heading}
-        </Title>
-        <Text component="span" display="block" style={{ textAlign }}>
-          {title}
-        </Text>
-      </Box>
-    </Button>
-  )
-}

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-link.tsx

@@ -1,47 +0,0 @@
-import type { JSX, ReactNode } from 'react'
-import { useState } from 'react'
-import { NavLink, type NavLinkProps } from '@mantine/core'
-import { Link, useRouter } from 'tuono'
-import { IconChevronRight } from '@tabler/icons-react'
-
-import styles from './sidebar-link.module.css'
-
-interface SidebarLinkProps {
-  label: string
-  href: string
-  onClick?: () => void
-  children?: ReactNode
-}
-
-export default function SidebarLink(
-  props: SidebarLinkProps & NavLinkProps,
-): JSX.Element {
-  const { pathname } = useRouter()
-  const [isOpen, setIsOpen] = useState<boolean>(!!props.defaultOpened)
-
-  const internalProps = {
-    active: pathname === props.href,
-    className: styles.link,
-    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,
-  }
-
-  if (props.href.startsWith('#')) {
-    return <NavLink component="button" {...internalProps} />
-  }
-
-  return <NavLink component={Link} {...internalProps} />
-}

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

@@ -1,101 +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"
-        onClick={close}
-        leftSection="✨"
-      />
-    </AppShell.Navbar>
-  )
-}

apps/documentation/src/components/table-of-content/get-headings.ts

@@ -1,38 +0,0 @@
-/**
- * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
- */
-export interface Heading {
-  depth: number
-  content: string
-  id: string
-  getNode: () => HTMLHeadingElement
-}
-
-function getHeadingsData(headings: HTMLHeadingElement[]): Heading[] {
-  const result: Heading[] = []
-
-  for (const heading of headings) {
-    if (heading.id) {
-      result.push({
-        depth: parseInt(heading.getAttribute('data-order') || '1', 10),
-        content: heading.getAttribute('data-heading') || '',
-        id: heading.id,
-        getNode: () =>
-          document.getElementById(heading.id) as HTMLHeadingElement,
-      })
-    }
-  }
-
-  return result
-}
-
-export function getHeadings(): Heading[] {
-  const root = document.getElementById('mdx-root')
-  console.log(root)
-
-  if (!root) {
-    return []
-  }
-
-  return getHeadingsData(Array.from(root.querySelectorAll('[data-heading]')))
-}

apps/documentation/src/components/table-of-content/index.ts

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

apps/documentation/src/components/table-of-content/table-of-content.module.css

@@ -1,120 +0,0 @@
-/*
- * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
- */
-.wrapper {
-  padding-left: var(--mantine-spacing-md);
-  position: sticky;
-  top: var(--mantine-spacing-xl);
-  right: 0;
-  padding-top: 55px;
-  flex: 0 0 calc(var(--docs-table-of-contents-width) - 20px);
-  width: 200px;
-
-  @mixin rtl {
-    padding-left: 0;
-    padding-right: var(--mantine-spacing-md);
-    right: auto;
-    left: 0;
-  }
-
-  &[data-with-tabs] {
-    padding-top: 0;
-    top: calc(var(--mantine-spacing-xl) + 60px);
-  }
-}
-
-.inner {
-  padding-bottom: var(--mantine-spacing-xl);
-  padding-left: var(--mantine-spacing-md);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @mixin rtl {
-    padding-left: 0;
-    padding-right: var(--mantine-spacing-md);
-  }
-}
-
-.link {
-  display: block;
-  border-left: 1px solid transparent;
-  padding: 8px var(--mantine-spacing-md);
-  margin-left: -1px;
-  padding-left: calc(var(--toc-link-offset) * var(--mantine-spacing-lg));
-  border-top-right-radius: var(--mantine-radius-sm);
-  border-bottom-right-radius: var(--mantine-radius-sm);
-
-  @mixin light {
-    color: var(--mantine-color-gray-7);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-dark-1);
-  }
-
-  @mixin rtl {
-    border-left: 0;
-    border-right: 1px solid transparent;
-    margin-left: 0;
-    margin-right: -1px;
-    border-top-left-radius: var(--mantine-radius-sm);
-    border-bottom-left-radius: var(--mantine-radius-sm);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &[data-active] {
-    border-color: var(--mantine-color-violet-5);
-
-    @mixin light {
-      color: var(--mantine-color-violet-8);
-      background-color: var(--mantine-color-violet-0);
-    }
-
-    @mixin dark {
-      color: var(--mantine-color-violet-1);
-      background-color: #534a6d;
-    }
-  }
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--mantine-spacing-md);
-}
-
-.title {
-  margin-left: var(--mantine-spacing-md);
-
-  @mixin rtl {
-    margin-left: 0;
-    margin-right: var(--mantine-spacing-md);
-  }
-}
-
-.items {
-  border-left: 1px solid;
-
-  @mixin light {
-    border-color: var(--mantine-color-gray-3) !important;
-  }
-
-  @mixin dark {
-    border-color: var(--mantine-color-dark-4) !important;
-  }
-
-  @mixin rtl {
-    border-left: 0;
-    border-right: 1px solid;
-
-    @mixin light {
-      border-color: var(--mantine-color-gray-3) !important;
-    }
-
-    @mixin dark {
-      border-color: var(--mantine-color-dark-4) !important;
-    }
-  }
-}

apps/documentation/src/components/table-of-content/table-of-content.tsx

@@ -1,114 +0,0 @@
-/*
- * Component inspired by: https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src/components/TableOfContents
- */
-import type { JSX } from 'react'
-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
-}
-
-function getActiveElement(rects: DOMRect[]): number {
-  if (rects.length === 0) {
-    return -1
-  }
-
-  const closest = rects.reduce(
-    (acc, item, index) => {
-      if (Math.abs(acc.position) < Math.abs(item.y)) {
-        return acc
-      }
-
-      return {
-        index,
-        position: item.y,
-      }
-    },
-    { index: 0, position: rects[0].y },
-  )
-
-  return closest.index
-}
-
-export function TableOfContents({
-  withTabs,
-}: TableOfContentsProps): JSX.Element | null {
-  const [active, setActive] = useState(0)
-  const [headings, setHeadings] = useState<Heading[]>([])
-  const headingsRef = useRef<Heading[]>([])
-  const router = useRouter()
-
-  const filteredHeadings = headings.filter((heading) => heading.depth > 1)
-
-  const handleScroll = (): void => {
-    setActive(
-      getActiveElement(
-        headingsRef.current.map((d) => d.getNode().getBoundingClientRect()),
-      ),
-    )
-  }
-
-  useEffect(() => {
-    const _headings = getHeadings()
-    headingsRef.current = _headings
-    setHeadings(_headings)
-    setActive(
-      getActiveElement(
-        _headings.map((d) => d.getNode().getBoundingClientRect()),
-      ),
-    )
-    window.addEventListener('scroll', handleScroll)
-    return (): void => window.removeEventListener('scroll', handleScroll)
-  }, [router.pathname])
-
-  if (filteredHeadings.length === 0) {
-    return null
-  }
-
-  const items = filteredHeadings.map((heading, index) => (
-    <Text
-      key={heading.id}
-      component={Link}
-      fz="sm"
-      p={10}
-      className={classes.link}
-      mod={{ active: active === index }}
-      href={`#${heading.id}`}
-      __vars={{ '--toc-link-offset': `${heading.depth - 1}` }}
-    >
-      {heading.content}
-    </Text>
-  ))
-
-  return (
-    <Box
-      component="nav"
-      mod={{ 'with-tabs': withTabs }}
-      className={classes.wrapper}
-    >
-      <div className={classes.inner}>
-        <div>
-          <div className={classes.header}>
-            <IconList
-              style={{ width: rem(20), height: rem(20) }}
-              stroke={1.5}
-            />
-            <Text className={classes.title}>Table of contents</Text>
-          </div>
-          <ScrollArea.Autosize
-            mah={`calc(100vh - ${rem(140)})`}
-            type="never"
-            offsetScrollbars
-          >
-            <div className={classes.items}>{items}</div>
-          </ScrollArea.Autosize>
-        </div>
-      </div>
-    </Box>
-  )
-}

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

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

apps/documentation/src/components/theme-btn/theme-btn.module.css

@@ -1,24 +0,0 @@
-.icon {
-  width: 22px;
-  height: 22px;
-}
-
-.dark {
-  @mixin dark {
-    display: none;
-  }
-
-  @mixin light {
-    display: block;
-  }
-}
-
-.light {
-  @mixin light {
-    display: none;
-  }
-
-  @mixin dark {
-    display: block;
-  }
-}

apps/documentation/src/components/theme-btn/theme-btn.tsx

@@ -1,31 +0,0 @@
-import type { JSX } from 'react'
-import {
-  ActionIcon,
-  useMantineColorScheme,
-  useComputedColorScheme,
-} from '@mantine/core'
-import { IconSun, IconMoon } from '@tabler/icons-react'
-import cx from 'clsx'
-
-import classes from './theme-btn.module.css'
-
-export default function ThemeBtn(): JSX.Element {
-  const { setColorScheme } = useMantineColorScheme()
-  const computedColorScheme = useComputedColorScheme('light', {
-    getInitialValueInEffect: true,
-  })
-
-  return (
-    <ActionIcon
-      onClick={() =>
-        setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')
-      }
-      variant="default"
-      size="lg"
-      aria-label="Toggle color scheme"
-    >
-      <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
-      <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
-    </ActionIcon>
-  )
-}

apps/documentation/src/modules.d.ts

@@ -1,2 +0,0 @@
-// declaration.d.ts
-declare module '*.css'

apps/documentation/src/routes/__root.tsx

@@ -1,107 +0,0 @@
-import type { ReactNode, JSX } from 'react'
-import {
-  ColorSchemeScript,
-  createTheme,
-  MantineProvider,
-  AppShell,
-} from '@mantine/core'
-import { useDisclosure } from '@mantine/hooks'
-import { Head, useRouter } from 'tuono'
-import Navbar from '../components/navbar'
-
-import '@mantine/core/styles.css'
-import '@mantine/code-highlight/styles.css'
-
-import Sidebar from '../components/sidebar'
-
-interface RootRouteProps {
-  children: ReactNode
-}
-
-const theme = createTheme({
-  primaryColor: 'violet',
-  primaryShade: { light: 6, dark: 9 },
-  fontFamily: 'Roboto',
-  respectReducedMotion: true,
-  radius: {
-    xs: '8px',
-    lg: '8px',
-    xl: '8px',
-    md: '8px',
-    sm: '8px',
-  },
-  fontSizes: {
-    // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-    xs: '16px',
-    sm: '16px',
-  },
-  colors: {
-    dark: [
-      '#d5d7e0',
-      '#acaebf',
-      '#8c8fa3',
-      '#666980',
-      '#4d4f66',
-      '#34354a',
-      '#2b2c3d',
-      '#1d1e30',
-      '#0c0d21',
-      '#01010a',
-    ],
-  },
-  headings: {
-    sizes: {
-      h1: {
-        fontSize: '48px',
-      },
-    },
-  },
-})
-
-export default function RootRoute({ children }: RootRouteProps): JSX.Element {
-  const [opened, { toggle }] = useDisclosure()
-
-  const { pathname } = useRouter()
-
-  return (
-    <>
-      <Head>
-        <meta charSet="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/site.webmanifest" />
-      </Head>
-      <ColorSchemeScript />
-      <MantineProvider theme={theme}>
-        <AppShell
-          header={{ height: 60 }}
-          navbar={{
-            width: 300,
-            breakpoint: 'sm',
-            collapsed: { mobile: !opened },
-          }}
-        >
-          <Navbar opened={opened} toggle={toggle} />
-          {pathname.startsWith('/documentation') && <Sidebar close={toggle} />}
-          {children}
-        </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,55 +0,0 @@
-import MetaTags from '../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Application state"
-  canonical="https://tuono.dev/documentation/application-state"
-  description="Learn how to add features to your Tuono application"
-/>
-
-import Breadcrumbs, { Element } from '../../components/breadcrumbs'
-
-<Breadcrumbs breadcrumbs={[{ label: 'Application state' }]} />
-
-# Application state
-
-The main reason Tuono is fast is that it loads just the features that are needed for the project.
-
-To define them, you need to fill the `ApplicationState` struct in the `./src/main.rs` file, and
-they will be automatically available in all the handlers you will define across the application.
-
-```rs
-// src/main.rs
-
-#[derive(Clone)]
-pub struct ApplicationState {
-    pub website_name: String,
-	pub base_path: String
-}
-
-pub fn main() -> ApplicationState {
-    let website_name = "tuono".to_string();
-    let base_path = "http://localhost:3000".to_string();
-
-    ApplicationState {
-        website_name,
-        base_path
-    }
-}
-```
-
-> For the sake of simplicity here we just enable a `String` but you can add Database connections or
-> HTTP clients (take a look [here](/documentation/tutorial/api-fetching) for an example with an HTTP client).
-
-Now the `ApplicationState` is available on all the handlers as following:
-
-```rs
-// src/routes/index.rs
-
-#[tuono_lib::handler]
-// The first argument always is the Request
-// The ApplicationState arguments are optional. You can use just the ones you need
-// to use in the handler (with no specific order).
-async fn my_handler(req: Request, website_name: String) -> Response {
-    ...
-}
-```

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

@@ -1,44 +0,0 @@
-import MetaTags from '../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - CLI"
-  canonical="https://tuono.dev/documentation/cli"
-  description="Tuono is the CLI that provides all the needed commands to handle the full-stack project."
-/>
-
-import Breadcrumbs, { Element } from '../../components/breadcrumbs'
-
-<Breadcrumbs breadcrumbs={[{ label: 'CLI' }]} />
-
-# CLI
-
-Tuono is the CLI that provides all the needed commands to handle the full-stack 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`.
-
-```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`
-
-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`.

apps/documentation/src/routes/documentation/contributing.mdx

@@ -1,48 +0,0 @@
-import MetaTags from '../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Contributing"
-  canonical="https://tuono.dev/documentation/contributing"
-  description="The project is massive - if you like it, do consider contributing!"
-/>
-
-import Breadcrumbs, { Element } from '../../components/breadcrumbs'
-
-<Breadcrumbs breadcrumbs={[{ label: '✨ Contributing' }]} />
-
-# Contributing
-
-## TL;DR
-
-The project is massive - if you like it, do consider contributing!
-
-## Getting started
-
-The `tuono` project can mostly be split into the following subdomains:
-
-- The CLI
-- The Rust backend
-- The React frontend
-- The documentation website (which is written with tuono 🚀)
-
-To check what the knowledge requirements are for each domain, check the
-[requirements](#requirements) section below.
-
-Currently, I'm keeping a private dashboard to prioritize new features and bug fixes, but if you
-want to propose something, please open a new issue on Github or reach out to me using
-my email address [valerioageno@yahoo.it](mailto:valerioageno@yahoo.it). I'm also available
-on Twitter (X) DMs `@valerioageno`, [Linkedin](https://www.linkedin.com/in/valerioageno)
-and discord `@__v__v__`.
-
-## Requirements
-
-It's not strictly required to know both React (& typescript) and Rust (even though it
-would be a great nice to have).
-
-Without taking into account specific cases, we can mostly split the domain requirements by:
-
-- The `CLI` needs Rust knowledge (even though a couple of scenarios might also need Typescript)
-- The Backend needs just `Rust`
-- The Frontend needs just `React` & `Typescript`
-- The documentation website needs just `React` & `Typescript` (or even less, since most of the
-  code is markdown).

apps/documentation/src/routes/documentation/index.mdx

@@ -1,54 +0,0 @@
-import MetaTags from '../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Documentation"
-  canonical="https://tuono.dev/documentation"
-  description="Tuono is a full-stack framework for building React applications using Rust as the backend."
-/>
-
-import Breadcrumbs from '../../components/breadcrumbs'
-
-<Breadcrumbs />
-
-# Tuono
-
-Tuono is a full-stack web framework for building React applications using Rust as the
-backend with a strong focus on usability and performance.
-
-Tuono (Italian word for "thunder", pronounced /2 Oh No/). Why Tuono? Just a badass name.
-
-If you have experience with [Next.js](https://nextjs.org/) you will feel home here.
-
-## Features
-
-- 🟦 Native Typescript
-- 🌐 Next.js like Routing
-- 🍭 CSS/SCSS modules
-- 🧬 Server Side Rendering
-- 🔥 Hot Module Reload
-
-## Introduction
-
-Tuono addresses the following two limits:
-
-- Enable React server-side rendering projects without using JS runtimes (Node, Deno)
-- Ease the web development using a typically hard language like Rust.
-
-#### NodeJs/Deno/Bun are the only runtimes that allow a React app to be server-side rendered (SSR)? (no)
-
-Tuono is the first full-stack React framework with the server side written in Rust (check the [ssr-rs](https://github.com/Valerioageno/ssr-rs) crate).
-Because of this, Tuono is extremely fast, and the requests are handled by a multithreaded Rust server.
-React is still React - it is just superpowered.
-
-#### Rust is a hard language, then writing server side code is hard as well, right? (no again)
-
-Tuono provides a collection of utilities to handle server-side code seamlessly with
-the React code. Each server side route is managed in a separate file alongside the React route.
-The routing is handled by Tuono based on the files defined within the `./src/routes` directory.
-
-#### How is Tuono different from Next.js?
-
-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/Valerioageno/tuono/tree/main/benches)).

apps/documentation/src/routes/documentation/installation.mdx

@@ -1,57 +0,0 @@
-import Breadcrumbs, { Element } from '../../components/breadcrumbs'
-
-import MetaTags from '../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Installation"
-  canonical="https://tuono.dev/documentation/installation"
-  description="Tuono is a development environment built in rust and typescript that outputs a website written in both the languages"
-/>
-
-<Breadcrumbs breadcrumbs={[{ label: 'Installation' }]} />
-
-# Installation
-
-## Requirements
-
-`Tuono` is a development environment built in rust and typescript that outputs a website written in both the
-languages. Since then, you need the following tools installed on your computer to work with it:
-
-- `Rust` - The Rust programming language tool chain (Go [here](https://rustup.rs/) for installing both `rust` and `cargo`)
-- `Cargo` - The rust package manager
-- `NodeJs` - The JavaScript runtime (Go [here](https://nodejs.org/en/download/package-manager) for installing both `nodejs` and `npm`)
-- `npm` or `yarn` or `pnpm` - A javaScript package manager
-
-> Node.js is needed just for the development environment. The final output will run on a Rust server.
-
-## Installation
-
-The tuono `CLI` is hosted on [crates.io](https://crates.io/crates/tuono) to download and install it, just run it on a terminal:
-
-```bash
-cargo install tuono
-```
-
-To check that it is correctly installed, run:
-
-```bash
-tuono --version
-```
-
-Run `tuono -h` to see all the available commands.
-
-```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
-```

apps/documentation/src/routes/documentation/routing/index.mdx

@@ -1,14 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Routing"
-  canonical="https://tuono.dev/documentation/routing/intro"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs breadcrumbs={[{ label: 'Routing' }]} />
-
-# Routing index
-
-TODO

apps/documentation/src/routes/documentation/routing/intro.mdx

@@ -1,19 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Routing"
-  canonical="https://tuono.dev/documentation/routing"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Routing', href: '/documentation/routing' },
-    { label: 'Project structure' },
-  ]}
-/>
-
-# Project structure
-
-Todo

apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx

@@ -1,189 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - API fetching"
-  canonical="https://tuono.dev/documentation/tutorial/api-fetching"
-  description="Learn how to fetch remote APIs on the backend"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'API fetching' },
-  ]}
-/>
-
-# API fetching
-
-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 Pokémon
-
-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:
-
-```rust
-// src/routes/index.rs
-use serde::{Deserialize, Serialize};
-use reqwest::Client;
-use tuono_lib::{Props, Request, Response};
-
-const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151";
-
-#[derive(Debug, Serialize, Deserialize)]
-struct Pokemons {
-    results: Vec<Pokemon>,
-}
-
-#[derive(Debug, Serialize, Deserialize)]
-struct Pokemon {
-    name: String,
-    url: String,
-}
-
-#[tuono_lib::handler]
-async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
-    return match fetch.get(ALL_POKEMON).send().await {
-        Ok(res) => {
-            let data = res.json::<Pokemons>().await.unwrap();
-            Response::Props(Props::new(data))
-        }
-        Err(_err) => Response::Props(Props::new("{}")),
-    };
-}
-```
-
-> The first argument is always the request `req: Request` which contains all the request's data like the query parameters and the HTTP headers.
-> The rest of the arguments represents the [ApplicationState](/documentation/application-state) and are optional.
-
-The terminal will complain now for two reasons:
-
-1. We don't have imported any `reqwest` crate
-2. The second argument `fetch: Client` has not been defined yet as global state.
-
-Let's fix these in the next section.
-
-## Application state
-
-Compared to the common Javascript runtimes, Tuono is fast because only the features you need for your project will be loaded.
-
-You can load them in the `ApplicationState` of your app inside the `./src/main.rs` file. This is the file that will be executed just once at the very beginning of your application.
-
-> For the tutorial we will use [Reqwest](https://docs.rs/reqwest/latest/reqwest/) which is one of the most famous HTTP library.
-
-To install it just run in your terminal:
-
-```bash
-$ cargo add reqwest
-```
-
-A new entry has just been added to your `Cargo.toml` file.
-
-```diff
-[package]
-name = "tuono"
-version = "0.0.1"
-edition = "2021"
-
-[[bin]]
-name = "tuono"
-path = ".tuono/main.rs"
-
-[dependencies]
-tuono_lib = "0.14.0" # the version might be different
-serde = { version = "1.0.202", features = ["derive"] }
-++ reqwest = "0.12.9" # the version might be different
-```
-
-> The `Cargo.toml` is the manifest file of your application, in which you handle Rust's dependencies
-> (similarly as the package.json for Javascript).
-
-Now let's define the `ApplicationState` in the `./src/main.rs` file.
-
-```rs
-// Import here the just added reqwest library
-use reqwest::Client;
-
-#[derive(Clone)]
-// Extend this struct with the feature you will need for your application
-pub struct ApplicationState {
-    // This will be available to all your route handlers
-    pub fetch: Client,
-}
-
-pub fn main() -> ApplicationState {
-    let fetch = Client::new();
-    return ApplicationState { fetch };
-}
-```
-
-Now the `fetch: Client` argument is available in the above defined handler, and the terminal should not complain anymore.
-Let's see in the next section how to show the fetched data on the browser.
-
-## Handling the page UI
-
-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
-import type { JSX } from 'react'
-import type { TuonoProps } from 'tuono'
-
-interface Pokemon {
-  name: string
-}
-
-interface IndexProps {
-  results: Pokemon[]
-}
-
-export default function IndexPage({
-  data,
-}: TuonoProps<IndexProps>): JSX.Element | null {
-  if (!data?.results) {
-    return null
-  }
-
-  return (
-    <>
-      <header className="header">
-        <a href="https://crates.io/crates/tuono" target="_blank">
-          Crates
-        </a>
-        <a href="https://www.npmjs.com/package/tuono" target="_blank">
-          Npm
-        </a>
-      </header>
-      <div className="title-wrap">
-        <h1 className="title">
-          TU<span>O</span>NO
-        </h1>
-        <div className="logo">
-          <img src="rust.svg" className="rust" />
-          <img src="react.svg" className="react" />
-        </div>
-      </div>
-      <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
-        {data.results.map((pokemon) => {
-          return pokemon.name
-        })}
-      </ul>
-    </>
-  )
-}
-```
-
-Refresh the browser now! A bit ugly, but all the Pokémon are finally printed on screen!
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{
-    title: 'Development setup',
-    href: '/documentation/tutorial/development-setup',
-  }}
-  next={{ title: 'Components', href: '/documentation/tutorial/components' }}
-/>

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

@@ -1,145 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Components"
-  canonical="https://tuono.dev/documentation/tutorial/components"
-  description="Learn how to manage the components in a Tuono codebase"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Components' },
-  ]}
-/>
-
-# Components
-
-## Creating a stand-alone component
-
-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:
-
-```tsx
-// src/components/PokemonLink.tsx
-import type { JSX } from 'react'
-import { Link } from 'tuono'
-
-interface Pokemon {
-  name: string
-}
-
-export default function PokemonLink({
-  pokemon,
-  id,
-}: {
-  pokemon: Pokemon
-  id: number
-}): JSX.Element {
-  return (
-    <Link href={`/pokemons/${pokemon.name}`}>
-      {pokemon.name}
-      <img
-        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
-      />
-    </Link>
-  )
-}
-```
-
-Now that the link is done, let’s import it into the `index.tsx` file
-
-```diff
-// src/routes/index.tsx
-
-++  import PokemonLink from '../components/PokemonLink'
-
-// ...
-	<ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
---      {pokemons.map((pokemon) => {
---        return pokemon.name;
-++      {pokemons.map((pokemon, i) => {
-++        return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />;
-      })}
-	</ul>
-// ...
-```
-
-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:
-
-```css
-/* src/components/PokemonLink.module.css */
-
-.link {
-  width: 100%;
-  max-width: 216px;
-  position: relative;
-  background: white;
-  margin-bottom: 10px;
-  border: solid #f0f0f0 1px;
-  text-decoration: none;
-  color: black;
-  padding: 5px 5px 5px 15px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-between;
-  transition: 0.2s;
-  align-items: center;
-}
-
-.link:hover {
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-}
-
-.link img {
-  width: 70px;
-  background: white;
-  border-radius: 50%;
-}
-```
-
-> 💡 SASS is supported out of the box. Just install the processor in the devDependencies `npm i -D sass` and run again `tuono dev`
-
-Then import the styles into the `PokemonLink` component as following:
-
-```diff
-// src/components/PokemonLink.tsx
-import type { JSX } from 'react'
-import { Link } from "tuono"
-import type { Pokemon } from "./../types/pokemon"
-++ import styles from './PokemonLink.module.css'
-
-export default function PokemonLink({
-  pokemon,
-  id,
-}: {
-  pokemon: Pokemon;
-  id: number;
-}): JSX.Element {
-  return (
---    <Link href={`/pokemons/${pokemon.name}`}>
-++    <Link className={styles.link} href={`/pokemons/${pokemon.name}`}>
-      {pokemon.name}
-      <img
-        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
-      />
-    </Link>
-  );
-}
-```
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{ title: 'API fetching', href: '/documentation/tutorial/api-fetching' }}
-  next={{
-    title: 'Dynamic routes',
-    href: '/documentation/tutorial/dynamic-routes',
-  }}
-/>

apps/documentation/src/routes/documentation/tutorial/conclusion.mdx

@@ -1,37 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Conclusion"
-  canonical="https://tuono.dev/documentation/tutorial/conclusion"
-  description="You just created a multi thread full stack application with Rust and React"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Conclusion' },
-  ]}
-/>
-
-# Conclusion
-
-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
-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
-at [valerioageno@yahoo.it](mailto:valerioageno@yahoo.it) or in Twitter (X) DMs [@valerioageno](https://twitter.com/valerioageno).
-
-Ciao
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{
-    title: 'Production build',
-    href: '/documentation/tutorial/production',
-  }}
-/>

apps/documentation/src/routes/documentation/tutorial/development-setup.mdx

@@ -1,77 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Development setup"
-  canonical="https://tuono.dev/documentation/tutorial/development-setup"
-  description="Learn how to setup a new Tuono project"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Development setup' },
-  ]}
-/>
-
-# Development setup
-
-## Scaffold a new project
-
-To set up a new fresh project you just need to run the following command:
-
-```
-$ tuono new tuono-tutorial
-```
-
-Get into the project folder and install the dependencies with:
-
-```
-$ npm install
-```
-
-Open it with your favorite code editor.
-
-The project will have the following structure:
-
-```
-├── package.json
-├── public
-├── src
-│   ├── routes
-│   └── styles
-├── Cargo.toml
-├── README.md
-└── tsconfig.json
-```
-
-`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`).
-
-`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:
-
-```
-$ 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 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!
-
-Then open [http://localhost:3000/](http://localhost:3000) on the browser.
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{ title: 'Tutorial', href: '/documentation/tutorial' }}
-  next={{ title: 'API fetching', href: '/documentation/tutorial/api-fetching' }}
-/>

apps/documentation/src/routes/documentation/tutorial/dynamic-routes.mdx

@@ -1,174 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Dynamic routes"
-  canonical="https://tuono.dev/documentation/tutorial/dynamic-routes"
-  description="Learn how to catch more endpoint with the same route loading dynamic data"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Dynamic routes' },
-  ]}
-/>
-
-# Dynamic routes
-
-## Create the Pokémon route
-
-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 point to a real page. Let’s create the dynamic route.
-
-Create the folder `routes/pokemons` and then create the two files `[pokemon].tsx` and `[pokemon].rs`.
-
-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:
-
-```rust
-// src/routes/pokemons/[pokemon].rs
-use serde::{Deserialize, Serialize};
-use reqwest::Client;
-use tuono_lib::{Props, Request, Response};
-
-const POKEMON_API: &str = "https://pokeapi.co/api/v2/pokemon";
-
-#[derive(Debug, Serialize, Deserialize)]
-struct Pokemon {
-    name: String,
-    id: u16,
-    weight: u16,
-    height: u16,
-}
-
-#[tuono_lib::handler]
-async fn get_pokemon(req: Request, fetch: Client) -> Response {
-    // The param `pokemon` is defined in the route filename [pokemon].rs
-    let pokemon = req.params.get("pokemon").unwrap();
-
-    return match fetch.get(format!("{POKEMON_API}/{pokemon}")).send().await {
-        Ok(res) => {
-            let data = res.json::<Pokemon>().await.unwrap();
-            Response::Props(Props::new(data))
-        }
-        Err(_err) => Response::Props(Props::new("{}"))
-    };
-}
-```
-
-Then let’s work on the frontend. Paste into the `[pokemon].tsx` file the following code:
-
-```tsx
-import type { JSX } from 'react'
-import { TuonoProps } from 'tuono'
-import PokemonView from '../../components/PokemonView'
-
-export default function Pokemon({ data }: TuonoProps): JSX.Element {
-  return <PokemonView pokemon={data} />
-}
-```
-
-The browser should complain that the component `PokemonView` does not exist. Let’s create it then!
-
-```tsx
-// components/PokemonView.tsx
-import { Link } from 'tuono'
-import styles from './PokemonView.module.css'
-
-interface Pokemon {
-  name: string
-  id: string
-  weight: number
-  height: number
-}
-
-export default function PokemonView({
-  pokemon,
-}: {
-  pokemon?: Pokemon
-}): JSX.Element {
-  return (
-    <div>
-      <Link className={styles['back-btn']} href="/">
-        Back
-      </Link>
-      {pokemon?.name && (
-        <div className={styles.pokemon}>
-          <div>
-            <h1 className={styles.name}>{pokemon.name}</h1>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Weight:</dt>
-              <dd>{pokemon.weight}lbs</dd>
-            </dl>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Height:</dt>
-              <dd>{pokemon.height}ft</dd>
-            </dl>
-          </div>
-          <img
-            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-```
-
-<br />
-
-```css
-/* components/PokemonView.module.css */
-.back-btn {
-  background-color: white;
-  border-radius: 10px;
-  padding: 7px 15px;
-  color: black;
-  text-decoration: none;
-  border: solid #f0f0f0 1px;
-  font-size: 20px;
-}
-
-.back-btn:hover {
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-}
-
-.pokemon {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-.name {
-  font-size: 50px;
-  font-weight: 700;
-}
-
-.pokemon img {
-  width: 400px;
-}
-
-.spec {
-  display: flex;
-  font-size: 18px;
-  margin-top: 10px;
-}
-
-.label {
-  font-weight: 700;
-}
-```
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{ title: 'Components', href: '/documentation/tutorial/components' }}
-  next={{
-    title: 'Error handling',
-    href: '/documentation/tutorial/error-handling',
-  }}
-/>

apps/documentation/src/routes/documentation/tutorial/error-handling.mdx

@@ -1,116 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Error handling"
-  canonical="https://tuono.dev/documentation/tutorial/error-handling"
-  description="Learn how to handle the server side error on your Tuono project"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Error handling' },
-  ]}
-/>
-
-# Error handling
-
-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 also be initialized with the
-`Props::new_with_status()` method.
-
-Let's see how it works!
-
-```diff
-// src/routes/pokemons/[pokemon].rs
-use serde::{Deserialize, Serialize};
--- use reqwest::Client;
-++ use reqwest::{Client, StatusCode};
-use tuono_lib::{Props, Request, Response};
-
-const POKEMON_API: &str = "https://pokeapi.co/api/v2/pokemon";
-
-#[derive(Debug, Serialize, Deserialize)]
-struct Pokemon {
-    name: String,
-    id: u16,
-    weight: u16,
-    height: u16,
-}
-
-#[tuono_lib::handler]
-async fn get_pokemon(req: Request, fetch: Client) -> Response {
-    // The param `pokemon` is defined in the route filename [pokemon].rs
-    let pokemon = req.params.get("pokemon").unwrap();
-
-    return match fetch.get(format!("{POKEMON_API}/{pokemon}")).send().await {
-        Ok(res) => {
-++            if res.status() == StatusCode::NOT_FOUND {
-++                return Response::Props(Props::new_with_status("{}", StatusCode::NOT_FOUND));
-++             }
-
-            let data = res.json::<Pokemon>().await.unwrap();
-            Response::Props(Props::new(data))
-        }
---        Err(_err) => Response::Props(Props::new(
-++        Err(_err) => Response::Props(Props::new_with_status(
-++            "{}",
-++            StatusCode::INTERNAL_SERVER_ERROR,
-        )),
-    };
-}
-```
-
-<br />
-
-```diff
-// src/routes/index.rs
-use serde::{Deserialize, Serialize};
--- use reqwest::Client;
-++ use reqwest::{Client, StatusCode};
-use tuono_lib::{Props, Request, Response};
-
-const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151";
-
-#[derive(Debug, Serialize, Deserialize)]
-struct Pokemons {
-    results: Vec<Pokemon>,
-}
-
-#[derive(Debug, Serialize, Deserialize)]
-struct Pokemon {
-    name: String,
-    url: String,
-}
-
-#[tuono_lib::handler]
-async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
-    return match fetch.get(ALL_POKEMON).send().await {
-        Ok(res) => {
-            let data = res.json::<Pokemons>().await.unwrap();
-            Response::Props(Props::new(data))
-        }
---        Err(_err) => Response::Props(Props::new(
-++        Err(_err) => Response::Props(Props::new_with_status(
-++            "{}", // Return empty JSON
-++            StatusCode::INTERNAL_SERVER_ERROR,
-        )),
-    };
-}
-```
-
-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.
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{
-    title: 'Dynamic routes',
-    href: '/documentation/tutorial/dynamic-routes',
-  }}
-  next={{ title: 'SEO and meta tags', href: '/documentation/tutorial/seo' }}
-/>

apps/documentation/src/routes/documentation/tutorial/index.mdx

@@ -1,37 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Tutorial"
-  canonical="https://tuono.dev/documentation/tutorial"
-  description="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 the latest version"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs breadcrumbs={[{ label: 'Tutorial' }]} />
-
-# Tutorial
-
-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 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 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 [valerioageno@yahoo.it](mailto:valerioageno@ahoo.it)
-> or on Twitter (X) DM [@valerioageno](https://twitter.com/valerioageno)
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  next={{
-    title: 'Development setup',
-    href: '/documentation/tutorial/development-setup',
-  }}
-/>

apps/documentation/src/routes/documentation/tutorial/production.mdx

@@ -1,47 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Building for production"
-  canonical="https://tuono.dev/documentation/tutorial/production"
-  description="Learn how to build the production project and run the optimize version"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Production build' },
-  ]}
-/>
-
-# Production build
-
-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 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 seamlessly renders a React application!🚀
-
-> Note: The `out` directory is not standalone. You can't rely just on it to run the production server.
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{
-    title: 'Server redirection',
-    href: '/documentation/tutorial/redirections',
-  }}
-  next={{ title: 'Conclusion', href: '/documentation/tutorial/conclusion' }}
-/>

apps/documentation/src/routes/documentation/tutorial/redirections.mdx

@@ -1,61 +0,0 @@
-import MetaTags from '../../../components/meta-tags'
-
-<MetaTags
-  title="Tuono - Redirection"
-  canonical="https://tuono.dev/documentation/tutorial/redirections"
-  description="Learn how to redirect to different route from the server"
-/>
-
-import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
-
-<Breadcrumbs
-  breadcrumbs={[
-    { label: 'Tutorial', href: '/documentation/tutorial' },
-    { label: 'Redirections' },
-  ]}
-/>
-
-# Redirections
-
-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
-Pokémon of the first generation.
-
-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
-use tuono_lib::{Request, Response};
-
-#[tuono_lib::handler]
-async fn redirect_to_goat(_req: Request) -> Response {
-    // Of course the GOAT is mewtwo - feel free to select your favourite 😉
-    Response::Redirect("/pokemons/mewtwo".to_string())
-}
-```
-
-Now let's create the button in the home page to actually point to it!
-
-```diff
-// src/routes/index.tsx
-
-<ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
-++      <PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
-        {data.results.map((pokemon, i) => {
-          return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
-        })}
-</ul>
-```
-
-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!
-
-import NavigationButtons from '../../../components/navigation-buttons'
-
-<NavigationButtons
-  prev={{ title: 'SEO and meta tags', href: '/documentation/tutorial/seo' }}
-  next={{
-    title: 'Production build',
-    href: '/documentation/tutorial/production',
-  }}
-/>