Support placing all the documentation for each module (entry point) on a single page each.

[lgarron]

Thanks for working on TypeDoc! I tried it a while back and it didn't work for us, but I just tried it again, and I got some very lovely output in a matter of seconds! 😍
I'm filing this issue to see if I can address my main reservation before adopting it for our project.

Search Terms

module documentation together single page

Problem

TypeDoc is great at giving an overview list of the exports of a module, but it doesn't have a way to look at the full documentation details for a single module (entry point) at once.

Suggested Solution

I'd really like to be able to generate all the documentation for a given module on the same page. I'm a big fan of what Go's documentation does, with the list of exports at the top of the page and then all their documentation below. For example: https://pkg.go.dev/net/http

Although I appreciate that TypeDoc includes a search bar, search and various other things become easier if everything for a module is on the same page.

As far as I can tell, it would be sufficiently useful for us if there were an option to inline all the sub-pages of a module into its main page instead.

[Gerrit0]

There's no built in method for doing this, and I'm not too keen on adding one built in without better infrastructure around testing themes... you can get pretty close with a custom theme like this:

// typedoc --plugin ./path/to/module-theme.js --theme module
// @ts-check
const td = require("typedoc");

// @ts-ignore getMapping is marked private, probably shouldn't be
// but I've been putting off making updates to that since I want to change
// how URLs are generated completely...
class ModuleTheme extends td.DefaultTheme {
    constructor(renderer) {
        super(renderer);

        // Unrelated to links, just a small style tweak to push members over so that they look less
        // like root exports on pages with classes.
        renderer.hooks.on("head.end", () => {
            return {
                tag: "style",
                props: null,
                children: [
                    {
                        tag: td.JSX.Raw,
                        props: { html: ".tsd-member .tsd-member { margin-left: 2em; }" },
                        children: [],
                    },
                ],
            };
        });
    }

    /**
     * @param {td.DeclarationReflection} reflection
     */
    getMapping(reflection) {
        if (reflection.kindOf(td.ReflectionKind.Module)) {
            return {
                kind: [td.ReflectionKind.Module],
                directory: "modules",
                template: this.reflectionTemplate,
            };
        }
    }
}

/** @param {td.Application} app */
exports.load = function load(app) {
    app.renderer.defineTheme("module", ModuleTheme);
};

[lgarron]

Thanks! I'm having trouble figuring out how to run that, though: Can I pass a file to the theme param? Do I need to make it an npm package?

[Gerrit0]

No, themes are given theme names passed to defineTheme when plugins are loaded. You can specify a local file as a theme:

typedoc --plugin ./path/to/module-theme.js --theme module