Routing
Use this contract when you create, move, validate, or review route pages in a QUI Docs site. For the guided setup walkthrough, see Page Configuration. For writing principles and reviewer gates, see Principles and Rules.
Before editing
Inspect the existing docs surface before adding or moving a page:
- Open
qui-docs.config.tsand check the section order, existingnavConfigentries, and any configuredknowledgeexclusions. - Read nearby sibling routes so the new page matches the section's naming, tone, heading depth, and link style.
- Read Principles before writing the content shape.
- Read Rules before choosing filenames, frontmatter, links, screenshots, or examples.
Page file contract
- Put route pages under the configured
pageDirectory, usuallysrc/routes. - Use kebab-case route files and folders. Use
page-authoring.mdx, notpageAuthoring.mdx. - Use folder segments ending in
+for nested URL groups. Example:authoring+/page-authoring.mdxmaps to/page-authoring. - Do not create new section
index.mdxpages. They make a side-nav item act as both a parent folder and a page. - Use
overview.mdxonly when the section needs real context about what it covers, who it is for, and how to think about the child pages. - Do not create an
overview.mdxpage just to list child routes. The side navigation already lists sibling pages.
MDX contract
Every route MDX page starts with a title and uses that title as the only H1:
---
title: Page Authoring
---
# {frontmatter.title}- Keep one H1 per page, always
# {frontmatter.title}. - Use optional frontmatter fields only when they have a specific page behavior. Common fields include
description,sideNavTitle,hidden,hideFromSearch,hideToc,hideSideNav,hideBreadcrumbs, andhidePageLinks. - Check PageFrontmatter before adding metadata fields. Do not invent frontmatter keys for behavior the platform does not read.
- Use H2 sections for primary tasks or concepts. Use H3 and H4 only when they add useful hierarchy.
- Do not skip heading levels, style heading text with bold or italics, or end headings with trailing punctuation.
- Use root-relative links for docs pages. Example:
[Rules](/rules). - Do not add a manual table of contents. The docs layout builds one from H2-H4 headings.
Navigation contract
Use navConfig when a page's order, nesting, initial expanded state, label, or visibility matters. Routes without entries still appear, but their order falls back to route discovery.
- Add section children in the exact sidebar order reviewers should see.
- For each route entry, set
idto the path segment at that nesting level. A page at/page-authoringusesid: "authoring"at the top level andid: "page-authoring"insidechildren. - Use
childrenfor nested route entries. - Use
expanded: trueonly when a section should be open on initial load. - Use
titlewhen a folder or route needs a sidebar label that cannot come from MDX frontmatter. - Use
sideNavTitlewhen the page title should stay unchanged but the side-nav label needs to be shorter. - Use
hiddenonly for pages that should stay out of the side navigation and adjacent page links. - Prefer stable section order over alphabetical fallback for authored documentation sections.
Properties defined in navConfig take precedence over overlapping page frontmatter. Check NavConfig before adding route metadata.
Search and knowledge contract
- Use MDX for documentation pages that should be searchable. MDX pages are included in the search index by default.
- Use
.tsxroutes sparingly. TSX pages can appear in navigation when configured, but their rendered content is not indexed for search by default. MDX allows you to use React components in your pages, so prefer MDX routes even for pages with more complex content. - Set
hideFromSearch: truein frontmatter ornavConfigwhen the page content should be excluded from search. - Check the
knowledgefield inqui-docs.config.tsbefore assuming a page is included in AI knowledge exports. The config can exclude route globs and add extra files. - For generated knowledge behavior, output files, and upload workflows, see AI Knowledge.
Move and rename contract
When you move or rename a route, keep old URLs working when they may already be linked or indexed:
- Create the new canonical MDX route.
- Add a small compatibility
.tsroute at the old path. - Redirect to the new root-relative URL.
- Update inbound links you touch in the same PR to point at the new canonical route.
- Do not add new links to compatibility routes.
Use this redirect shape:
import {redirect} from "react-router"
export const loader = () => {
return redirect("/new/path")
}Compatibility routes redirect or delegate only. They do not duplicate page content.
Verification contract
Before opening a PR:
- Run
pnpm qui-docs lint. - Run or compile every code snippet you add when the snippet is meant to execute.
- Validate links and fragments through the docs build when a build is appropriate for the checkout.
- Before running a docs build in this repo, read the configured docs port from
vite.config.tsand check whether it is occupied. - If the configured port is occupied, assume the docs dev server is already running and skip the routine build unless the task explicitly requires it.
- Manually review the new or moved route, its parent section, and any linked authoring pages for sidebar order, headings, links, and tone.
Author self-check
Before review, confirm:
- The page has one clear primary type from Principles.
- The first paragraph states what the reader can do after reading.
- Filename, route path, frontmatter, H1, headings, and links follow Rules.
- The page is in
navConfigwhen order, nesting, label, expansion, or visibility matters. - Search and AI knowledge behavior are intentional.
- Moved or renamed pages have compatibility redirects and updated canonical inbound links.
- Examples use realistic values and executable snippets have been checked.