The doc context module

The ~doc-context module is a module meant to be used for documentation. It can be imported in any doc oriented component with

import docContext from '~doc-context';

It has the following prototype:

export interface DocContext {
  base: string;
  pages: Page[];
  pagesGraph: GraphNode[];
  mapPageUrlToRenderModuleUrl: () => {};

We'll now detail a bit more what each of those fields are.


The base URL the documentation is served from. You can for example build the full URL a page will be served at concatenating it with a page's relative URL.


pages provide you with a flat view of all the doc pages found in your project:

export interface Page {
    HTML url relative to the base root of the project, to be used in href (i.e. packages/foo/doc/index.html)
  url: string;
    Input file path relative the the root of the project (i.e. packages/foo/doc/
  input: string;
    Navigation properties to help reconstruct navigation tree
  nav?: {
    key: string;
    parent?: string;
    Front Matter Data
  data: Record<string, any>;


pagaesGraph basically have the same exact information as pages but presenting them with a more hierarchical view, as a graph, in order to ease up implementing navigation/grouping:

export interface GraphNode {
  key: string;
  page?: Page;
  children?: GraphNode[];


Function that may be called to setup speedy-links which are used in the studio when navigating through pages. You can read more information about it here.