Overview

RouteData is the central context object that flows through the component tree. It is computed in the route loader and provided to all components via Qwik's context system (DocsProvider).

RouteData Interface

interface RouteData extends LocaleData {
  // Page metadata
  title: string;
  description?: string;
  slug: string;

  // Site metadata
  siteTitle: string;
  siteTitleHref: string;

  // Navigation
  sidebar: SidebarEntry[];
  hasSidebar: boolean;
  pagination: PaginationLinks;

  // Table of contents
  toc?: TocConfig;
  headings: MarkdownHeading[];

  // Footer
  editUrl?: string;
  lastUpdated?: Date;

  // Head tags
  head: HeadConfig[];

  // Special sections
  hero?: HeroConfig;
  banner?: { content: string };
  isFallback?: boolean;
  draft?: boolean;

  // Header
  social?: { icon: string; label: string; href: string }[];
  logo?: { src: string; alt?: string };

  // Locale
  dir: 'ltr' | 'rtl';
  lang: string;
}

Data Flow

qwik-docs.config.ts
        ↓
Vite Plugin (build time)
        ↓
Virtual Modules
   ├── virtual:qwik-docs/content (entries)
   └── virtual:qwik-docs/config (site config)
        ↓
Route Loader (request time)
   ├── loadPage() → frontmatter + headings
   ├── getSidebar() → sidebar entries
   ├── getPrevNextLinks() → pagination
   └── generateToc() → table of contents
        ↓
RouteData object
        ↓
DocsProvider (Qwik context)
        ↓
Components read via useRouteData()

How Components Use RouteData

Component	Fields Used
Page	hero, banner, draft, isFallback
Header	siteTitle, siteTitleHref, logo, social
Sidebar	sidebar
PageTitle	title
TableOfContents	toc
Footer	editUrl, lastUpdated
Pagination	pagination, dir
SocialIcons	social
SiteTitle	siteTitle, siteTitleHref, logo
Banner	banner.content
Hero	hero.*

Usage in Route File

import { entries } from 'virtual:qwik-docs/content';
import siteConfig from 'virtual:qwik-docs/config';
import { loadPage, getSidebar, getPrevNextLinks, generateToc } from '@qwik-docs/framework';
import { DocsProvider, Page } from '@qwik-docs/framework/components';

export const useDocsData = routeLoader$(async (event) => {
  const page = await loadPage(slug, entries);
  const sidebar = getSidebar(siteConfig, contentEntries, event.pathname);
  const { prev, next } = getPrevNextLinks(sidebar, event.pathname);
  const tocItems = generateToc(page.headings, { minHeadingLevel: 2, maxHeadingLevel: 3 });

  return { title: page.frontmatter.title, sidebar, pagination: { prev, next }, /* ... */ };
});