# Pages
The **routing system** in Sweyn is designed to be intuitive and flexible, allowing you to easily define routes using a **file-based structure**. Every file inside the `/pages` folder automatically becomes a route in your application. The structure and naming of these files determine the URL paths, with built-in support for **dynamic routing**.
## Overview
The `/pages` directory serves as the central place for defining routes in your application. Each file inside the `/pages` folder corresponds to a unique route based on its filename. When a user navigates to a particular route, the corresponding file is rendered at that location.
For example, the file `/pages/about.html` will be accessible at the `/about` route.
### Dynamic Routing
Sweyn supports **dynamic routing** by using file names wrapped in square brackets. A dynamic route allows you to capture a part of the URL as a variable. For instance, if you create a file named `[slug].html` in the `/pages` folder, this file will match any route with a dynamic segment (e.g., `/article/first-post`, `/article/second-post`).
### Example: Dynamic Route Setup
```html
Article: {{ slug }}
```
With this setup, when a user navigates to `/article/first-post`, the value of {{ slug }} will be `first-post`.
## Rendering Pages
To render content from the `/pages` folder, you need to include a `` element in the `./index.html` file. This `` tag serves as a placeholder where the content of the current route will be injected dynamically.
### Example: Adding a Slot to `index.html`
```html
```
- The `` tag in `index.html` is used as a placeholder for the content of the route currently being accessed.
- When the user visits a route (e.g., `/about`), the content from `/pages/about.html` will be injected into the ``.
## Folder Structure
The folder structure within `/pages` directly determines the route structure. Each file corresponds to a route path based on its location and name.
### Example: Folder Structure
```
/pages
├── about.html -> Route: /about
├── contact.html -> Route: /contact
├── products.html -> Route: /products
└── products
└── shirt.html -> Route: /products/shirt
└── [slug].html -> Route: /article/[slug]
```
In this example:
- `/pages/about.html` corresponds to the `/about` route.
- `/pages/contact.html` corresponds to the `/contact` route.
- `/pages/products.html` corresponds to the `/products` route.
- `/pages/products/shirt.html` corresponds to `/products/shirt`.
- `/pages/[slug].html` corresponds to dynamic routes like `/article/first-post`, where `slug` is a variable.
## Example Usage
### Step 1: Add a Slot in `index.html`
Start by adding the `` element to your `index.html`:
```html
```
### Step 2: Create Route Files in `/pages`
Next, create route files in the `/pages` directory. For example, to define an `/about` route, create `/pages/about.html`:
```html
About Us
Welcome to the About page!
```
### Step 3: Create Dynamic Route File
To create a dynamic route (for instance, `/article/[slug]`), create a file named `[slug].html`:
```html
Article: {{ slug }}
Content for the article: {{ slug }}
```
### Step 4: Access the Dynamic Route in `createServer()`
When defining custom routes in `createServer()`, you can access the dynamic segment of the URL (like `slug` or `page`) through the third parameter in the route handler function. This parameter contains the `route` object, where dynamic parts of the URL are stored.
### Example: Dynamic Route Handler
```ts
import { createServer } from './.sweyn/index.ts'
createServer({
routes: [
{
route: '/article/[page]',
handler: async (req, res, { route }) => {
// Access the dynamic part of the route via route.page
return route.page
},
},
],
})
```
In this example, if a user visits `/article/first-post`, `route.page` will be equal to `'first-post'`. You can use this dynamic value to fetch data, render content, or perform any other necessary actions.
### Step 5: Access the Route
When a user navigates to `/about`, the content from `/pages/about.html` will be injected into the `` tag in `index.html`. Similarly, if the user visits `/article/first-post`, the content from `/pages/[slug].html` will be rendered, with `first-post` accessible via `route.slug`.