Site / Site and the Router

What the Site does with the same routers

A Site is a tree of nodes. A node is one of your existing routers, the route case it builds, and what you say about that place. Everything the tables above held is said there, once:

const PeopleNode = Site.route(peopleRouter, AppRoute.People, {
  title: () => 'People | Routing',
  section: 'People',
  landing: { searchText: Option.none() },
  shortcut: ['G', 'P'],
})
const PersonNode = Site.route(personRouter, AppRoute.Person, {
  title: ({ personId }) => `Person ${personId} | Routing`,
  section: 'People',
  history: (prev, next) => (prev.personId === next.personId ? 'replace' : 'push'),
})

export const AppSite = Site.make(
  HomeNode,
  Site.mount(PeopleNode, [PersonNode]),
  FilesIndexNode,
  FilesNode,
  NestedNode,
)

The two update branches become one wiring, placed beside the application's pages:

const Routing = Site.routing<Model, Message, AppRoute>({
  site: AppSite,
  route: {
    dependency: ['route'],
    get: model => model.route,
    set: (model, route) => modifyFields(model, { route: () => route }),
  },
  parse: urlToAppRoute,
  tags: { clicked: 'ClickedLink', changed: 'ChangedUrl' },
  completed: Message.CompletedNavigation,
  pages: [PeoplePage],
})

The same Messages arrive from the same runtime; makeApplication's routing config does not change. The nav, its links, the key bindings and the titles are read from the tree (Site.sectionOf, Site.landing, Site.shortcuts, Site.titleOf). The example is the whole application.