Is it possible to render the navigation pane on the left?

[ilg-ul]

Is there any way to render the site with the two main panes reversed, i.e. with the navigation pane on the left?

I know that this is a subjective matter, but most sites (including https://typedoc.org/guides/overview/!) has the navigation tree in the left pane.

Thank you!

[Gerrit0]

You could do this pretty easily with the customCss option

.container-main {
  flex-direction: row-reverse;
}

@media (min-width: 1024px) {
  .col-content {
    padding-left: 2rem;
    padding-right: 0;
  }
  .col-menu {
    border-left: 0;
    border-right: 1px solid var(--color-accent);
  }
}

[ilg-ul]

Thank you, this customCss solved the problem.

In case others find this useful too, perhaps it could be automated with an option to directly generate these CSS definitions.

[ilg-ul]

For those interested to see how a site with the navigation pane on the left looks like, here is my first such project:

• https://xpack.github.io/logger-ts/

[Gerrit0]

Adding a flag for every possible configuration is something I do my best to avoid -- goal is to provide a sufficiently customizable output without having to support & test every possible combination on release. (Particularly true for the theme output, since tests there aren't easy to maintain in a useful way)

[ilg-ul]

I see.

From a maintainer point of view, you are right, customisation options are indeed more difficult to maintain.

However, you should also consider the user perspective; CSS knowledge is at premium and few users are able to create a configuration like the one you suggested before.

If you do not think that customisable theme options are the solution, at least consider adding a page in the documentation with possible custom CSS configurations (start with this one), such that users can directly use them without having to ask for support.

[Gerrit0]

If multiple people are using the same css it'd probably be better to create a custom theme and release that. https://typedoc.org/guides/themes/

typedoc --plugin ./left-nav-theme.js --theme left-nav 

// @ts-check
// CC0

const td = require("typedoc");
const fs = require("fs");
const { join } = require("path");

const css = `
.container-main {
  flex-direction: row-reverse;
}

@media (min-width: 1024px) {
  .col-content {
    padding-left: 2rem;
    padding-right: 0;
  }
  .col-menu {
    border-left: 0;
    border-right: 1px solid var(--color-accent);
  }
}
`;

class LeftNavigationTheme extends td.DefaultTheme {
  /** @param {td.Renderer} renderer */
  constructor(renderer) {
    super(renderer);

    renderer.once(
      td.Renderer.EVENT_END,
      /** @param {td.RendererEvent} event */
      (event) => {
        const styleCss = join(event.outputDirectory, "assets/style.css");
        fs.appendFileSync(styleCss, css);
      }
    );
  }
}

/** @param {td.Application} app */
exports.load = function (app) {
  app.renderer.defineTheme("left-nav", LeftNavigationTheme);
};

[ilg-ul]

That's a great idea, a theme would be definitely preferred.

Unfortunately I have no experience with TypeDoc themes (and poor experience with web sites in general), so I might not be the one that can do it at an acceptable quality level. :-(

[Dayday10]

I think your right. Shannon Day

…

On Fri, Mar 3, 2023, 11:52 PM Liviu Ionescu ***@***.***> wrote: Thank you, this customCss solved the problem. In case others find this useful too, perhaps it could be automated with an option to directly generate these CSS definitions. — Reply to this email directly, view it on GitHub <#2189 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWMIKFK4KHRYRCI26XFWTQTW2LKCVANCNFSM6AAAAAAVPDQ3UQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ilg-ul]

Does #2192 bring this feature into the master branch?

[Gerrit0]

It will go into beta for now, I try to avoid large theme changes in patch releases, will be released with 0.24

[ilg-ul]

Just curious, why not using full semver strings?

[Gerrit0]

Primarily because I don't want someone to think that there's a guarantee that code written for "1.0.0" will work with "1.1.0" when a new TS version is added, since TS doesn't follow semver and every update has the potential to be a breaking change. (In practice, I think this has only happened a 1-2 times in the past year)

Not strictly following semver also means I feel free to make in-theory breaking changes that in practice likely breaks nobody, like the Shiki upgrade in 0.23.25

[Gerrit0]

Released in v0.24.0