Added custom web routes documentation

docs/index.html

@@ -213,6 +213,7 @@ <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Navigation</h5>
             <a href="?page=developing-extensions/Admin-configuration"><button type="button" class="btn btn-sm text-start docs-nav" style="--bs-btn-padding-y: .1rem;">Admin configuration</button><br></a>
             <a href="?page=developing-extensions/Dashboard-wrappers"><button type="button" class="btn btn-sm text-start docs-nav" style="--bs-btn-padding-y: .1rem;">Dashboard wrappers</button><br></a>
             <a href="?page=developing-extensions/React-components"><button type="button" class="btn btn-sm text-start docs-nav" style="--bs-btn-padding-y: .1rem;">React components</button><br></a>
+            <a href="?page=developing-extensions/Custom-web-routes"><button type="button" class="btn btn-sm text-start docs-nav" style="--bs-btn-padding-y: .1rem;">Custom web routes</button><br></a>
             <a href="?page=developing-extensions/Packaging-extensions"><button type="button" class="btn btn-sm text-start docs-nav" style="--bs-btn-padding-y: .1rem;">Packaging extensions</button><br></a>
           </div>
           <div class="docs-category pb-4">

docs/pages/developing-extensions/Custom-web-routes.md

@@ -0,0 +1,125 @@
+<div class="position-relative p-4 text-body bg-body border rounded-4 d-flex align-items-center">
+  <div class="me-3">
+    <i class="bi bi-book h2"></i>
+  </div>
+  <p class="me-3 my-0">
+    Written by those who've walked the path. Want to improve our guides? Contribute and help build something awesome!
+  </p>
+  <a href="https://github.com/BlueprintFramework/web/tree/main/docs/pages/developing-extensions">
+    <button class="btn btn-primary px-4 rounded-pill placeholder-wave" type="button">
+      Contribute
+    </button>
+  </a>
+</div><br>
+
+# Creating custom web routes
+<h4 class="fw-light">Add your own web routes accessible from everywhere within Blueprint.</h4><br/>
+
+This guide provides a step-by-step overview on how to define custom web routes using a dedicated controller within a Blueprint extension.<br/><br/>
+
+### **Define the controller directory and routing file**
+
+Begin by creating a new directory within your extension to store your controller classes. In this example, we will use a directory named `controllers`.
+
+Next, open your `conf.yml` file and define the location of your controller directory and route file under the `requests` section. This allows Blueprint to recognize and load your custom logic.
+
+```yml
+requests:
+  views: ""
+  app: "controllers"
+  routers:
+    application: ""
+    client: ""
+    web: "routes.php"
+```
+
+- `app`: Points to the folder containing your controller classes.
+- `routers:web`: Defines the file responsible for registering your web routes.
+
+<div class="alert mt-2 rounded-4 border" role="alert">
+  <i class="bi bi-journal-text mb-1 float-start fs-4"></i>
+  <div class="ps-3 ms-3">For more details on configuration, refer to the <a href="?page=documentation/confyml">conf.yml documentation</a>.</div>
+</div>
+
+Depending on your use case, you may also define routes using `routers:application` or `routers:client`. Unlike `web` routes, which are publicly accessible, even to unauthenticated users, these route types are protected:
+
+- `client`: Can only be accessed by logged in user and via API key.
+- `application`: Can only be accessed via API key. Exact permissions can be defined.
+
+Each route also has a different url prefix:
+
+- `application`: `/api/application/extensions/{identifier}`
+- `client`: `/api/client/extensions/{identifier}`
+- `web`: `/extensions/{identifier}`
+
+
+### **Creating a controller**
+
+Inside the `controllers` directory, create a PHP file named after your controller class. The file and class name **must match exactly**.
+
+In this example, we will create a controller that handles routes for the dashboard and name the file `ExtensionDashboardController.php`.
+
+```php
+<?php
+
+namespace Pterodactyl\BlueprintFramework\Extensions\{identifier};
+
+use Pterodactyl\Http\Controllers\Controller;
+use Pterodactyl\BlueprintFramework\Libraries\ExtensionLibrary\Admin\BlueprintAdminLibrary as BlueprintExtensionLibrary;
+
+class ExtensionDashboardController extends Controller
+{
+    public function __construct(
+        private BlueprintExtensionLibrary $blueprint,
+    ) {}
+
+    public function getData()
+    {
+        return response()->json([
+            'status' => 'success',
+        ]);
+    }
+}
+```
+- This controller defines a `getData()` method that returns a JSON response.
+
+<div class="alert mt-2 rounded-4 border" role="alert">
+  <div>
+    <i class="bi bi-globe mb-1 float-start fs-4"></i>
+    <div class="ps-3 ms-3">For advanced controller techniques, see the <a href="https://laravel.com/docs/10.x/controllers">Laravel controller documentation</a>.</div>
+  </div>
+  <div>
+  <div class="ps-3 ms-3">For different response types (redirects, files, etc.), refer to <a href="https://laravel.com/docs/10.x/responses">Laravel HTTP responses documentation</a>.</div>
+  </div>
+</div><br/>
+
+### **Registering routes**
+
+Create a PHP file named `routes.php` (or another name, as long as it matches your `conf.yml`) to define your routes.
+
+```php
+<?php
+
+use Illuminate\Support\Facades\Route;
+use Pterodactyl\BlueprintFramework\Extensions\{identifier}\ExtensionDashboardController;
+
+Route::get('/data', [ExtensionDashboardController::class, 'getData']);
+```
+
+- All routes registered in this file are automatically prefixed with `/extensions/{identifier}`.
+- This example registers a new GET route accessible at `/extensions/{identifier}/data` and connects it to the `getData` function from `ExtensionDashboardController`.
+
+<div class="alert mt-2 rounded-4 border" role="alert">
+  <i class="bi bi-exclamation-diamond text-warning mb-1 float-start fs-4"></i>
+  <div class="ps-3 ms-3">Be sure to update the second <code>use</code> statement to match the correct namespace and class name of your controller.</div>
+</div>
+
+<div class="alert mt-2 rounded-4 border" role="alert">
+  <i class="bi bi-globe mb-1 float-start fs-4"></i>
+  <div class="ps-3 ms-3">For detailed route configuration, visit the <a href="https://laravel.com/docs/10.x/routing">Laravel routing documentation</a>.</div>
+</div><br/>
+
+<div class="btn-group docs-navigator" role="group" aria-label="Navigation" style="float: right">
+  <a href="?page=developing-extensions/React-components" class="btn btn-dark bg-light-subtle border-0 rounded-start-pill">Previous</a>
+  <a href="?page=developing-extensions/Packaging-extensions" class="btn btn-dark bg-light-subtle border-0 rounded-end-pill">Next</a>
+</div>

docs/pages/developing-extensions/Packaging-extensions.md

@@ -38,6 +38,6 @@ To package an extension for distribution, we need to convert it into a `identifi
 After running one of these commands, you'll be left with a `identifier.blueprint` file which you can in turn use to distribute your extension to the outside world. 
 
 <div class="btn-group docs-navigator" role="group" aria-label="Navigation" style="float: right">
-  <a href="?page=developing-extensions/React-components" class="btn btn-dark bg-light-subtle border-0 rounded-start-pill">Previous</a>
+  <a href="?page=developing-extensions/Custom-web-routes" class="btn btn-dark bg-light-subtle border-0 rounded-start-pill">Previous</a>
   <button type="button" class="btn btn-dark bg-light-subtle border-0 text-secondary rounded-end-pill disabled">Next</button>
 </div>

docs/pages/developing-extensions/React-components.md

@@ -91,5 +91,5 @@ With the code mentioned above, you've added the `Content.tsx` component into the
 
 <div class="btn-group docs-navigator" role="group" aria-label="Navigation" style="float: right">
   <a href="?page=developing-extensions/Dashboard-wrappers" class="btn btn-dark bg-light-subtle border-0 rounded-start-pill">Previous</a>
-  <a href="?page=developing-extensions/Packaging-extensions" class="btn btn-dark bg-light-subtle border-0 rounded-end-pill">Next</a>
+  <a href="?page=developing-extensions/Custom-web-routes" class="btn btn-dark bg-light-subtle border-0 rounded-end-pill">Next</a>
 </div>