Page Router

The Page Router handles page-specific code execution, and is defined in routes.ts.

Usage Notes

• First, create your Page class and give it a unique page class name like ContactPage.

• Then reference that class in the Page Router below

In this example;

• We have a home page with code, and we also have a blog page with code, so we've created two Page classes, HomePage and BlogPage.

• Home page is, of course, at a predefined path /.

• The Blog is a CMS collection with the Blog pages under /blog/. To represent this, we use a * wildcard for the matching.

import { RouteDispatcher } from "@sygnal/sse";
import { Site } from "./site";
import { HomePage } from "./page/home";
import { BlogPage } from "./page/blog";

export const routeDispatcher = (): RouteDispatcher => {
    
    var routeDispatcher = new RouteDispatcher(Site);
    routeDispatcher.routes = {

        // Site pages
        '/': HomePage,
        '/blog/*': BlogPage, 

    };

    return routeDispatcher;
}

How this Works

• Site code will be executed first.

• A visit to the home page at / will execute the code in our HomePage class.

• A visit to any blog page, e.g. /blog/2024-in-review or /blog/ai-futures-2025 will match our /blog/* route and execute the code in our BlogPage class.

• A visit to any other page, such as /about will execute nothing, because there is no route defined for it.

• A visit to /blog by itself, which might be a blog directory page, will execute nothing, because it does not match any patterns.

  • If you wanted /blog to also execute your BlogPage code, you could simply add another route for '/blog`: BlogPage .

• Each route can execute only one Page class.

• Each route must be unique, but you can add as many routes as you like.