Pages tree

Menus & pages

There are 2 kinds of pages nodes you can create: menu nodes & page nodes. The only difference between the 2 is that page nodes have a source.

Menu, as they are not pages, are only created in your navigation sidebar, to group pages together.

Organizing page trees

By default, pages with children are renamed to {source-without-extensions}/index.html in the output, and children are looked up from the {source-without-extensions} directory.

Single package

Example

Assuming you have the following configuration:

From ./packages/plugin-pages/__tests__/mock-fs/simple/typedoc.js

 
/** @type {import('../../../src').IPluginOptions} */
module.exports = {
    entryPoints: [
        './src/index.ts',
    ],
    skipErrorChecking: true,
    pluginPages: {
        pages: [
            { name: 'Getting started', source: 'getting-started.md', children: [
                { name: 'Configuration', source: 'configuration.md' },
                { name: 'Another page', source: 'other.md' },
            ] },
            { name: 'Additional resources', childrenDir: 'additional-resources', children: [
                { name: 'Some cool docs', source: 'some-cool-docs.md' },
            ] },
        ],
    },
};

Here is your input/output tree:

  • Getting started: pages/getting-started.md ⇒ pages/getting-started/index.html
    • Configuration: pages/getting-started/configuration.md ⇒ pages/getting-started/configuration.html
  • Additional resource (menu only)
    • Some cool docs: pages/additional-resources/some-cool-docs.md ⇒ pages/additional-resources/some-cool-docs.html

Monorepos

You can attach pages to monorepo modules (instead of the top-level project) by setting moduleRoot to true, and making sure their name is the name of your module (eg. your package.json name field).

Example

From ./packages/plugin-pages/__tests__/mock-fs/monorepo/typedoc.js

 
module.exports = {
    entryPoints: [
        'packages/*',
    ],
    entryPointStrategy: 'packages',
    skipErrorChecking: true,
    pluginPages: {
        pages: [
            { moduleRoot: true, name: 'demo', source: 'root-appendix.md', children: [
                { name: 'Root doc', source: 'root-doc.md', childrenSourceDir: '.', children: [
                    { name: 'Root doc child', source: 'root-doc-child.md', output: 'child.html' },
                ] },
            ] },
            { moduleRoot: true, name: 'pkg-a', source: 'readme-extras.md', children: [
                { name: 'Using pkg-a', source: 'using-pkg-a.md' },
            ] },
            { moduleRoot: true, name: 'pkg-b', source: 'readme-extras.md', children: [
                { name: 'Using pkg-b', source: 'using-pkg-b.md', children: [
                    { name: 'pkg-b details', source: 'details.md' },
                ] },
            ] },
        ],
        logLevel: 'Verbose',
    },
};

The moduleRoot flag

This flag must be set on all or none of the top-level page/menu. If the moduleRoot is a page, the source is prepended to the module index, pretty much like a README.

Settings

Member Visibility

Theme

Generated using TypeDoc