Display ToC of texinfo generated html in fixed sidebar

[afh]

I find the table of contents (ToC) on the html pages generated by texinfo a bit "too classic" as jumping back and fourth from the ToC on top of the page and the manual using the inline navigational links seems rather disruptive.

Fiddling around with CSS I found a CSS only solution that places the ToC in a fixed sidebar to the left of the manual. This works well enough for me on macOS using Safari, Chrome, and Mullvad Browser that a PR, this PR, seems in order.

NOTA BENE: This PR stacks on top of #73, the only actual relevant changes for this PR are in commit 41d196f52bcd860a46451d6112007f64f65bd98b.

For a live preview visit: http://projects.surryhill.net/ledger/ledger3.html

[kljohann]

Looks fine on devices with larger screens but FWIW the menu takes up too much space on small/narrow screens (e.g., mobile phones). Maybe you can make it collapse into one of those "hamburger"-style buttons in those cases?

[simonmichael]

Great work @afh. This looks really nice when it works (on a big screen).

Unfortunately these home-grown CSS solutions are usually much more work than you think, to keep them working well across browsers, screen sizes etc. This one currently makes the site unreadable on a small screen (try "responsive design mode" or similar in your browser's dev tools). It also breaks Safari's reader mode, which shows the full page on the old site but is truncated on the new one.

Using a CSS framework or site generator (mdbook, MKDocs are two modern ones, and these days I wouldn't rule out Obsidian) usually solves this, at the cost of new complexity and maintenance work and a bit of "cookie cutter" sameness...

[afh]

Thank you for the helpful feedback @kljohann and @simonmichael. I was so excited about the possibility of making the texinfo html a bit more modern, that I forgot about narrow screen devices. Apologies

This is addressed in e139aed1f3cdeb47a98e68afbdb43a2f68506c9c and the live preview has been updated accordingly.

@kljohann Making the navigation sidebar user togglable would likely require at JS and possibly a change of the DOM, two things that I'd like to avoid; my goal was to make the changes as minimally invasive as possible.

I wasn't aware that the CSS would affect Safari Reader mode in this way :/ Not sure how this could be addressed. Any of you have any ideas?

[afh]

Somewhat related: The GNU project provides CSS to style texinfo manuals.

Here's the Ledger manual with those styles applied: https://projects.surryhill.net/ledger/ledger3-with-gnu-css.html

While it is only a one line change, these styles do not support Dark Mode.

What are your thoughts on this?

[jwiegley]

Looks good to me, it's ok that it doesn't have dark mode; lots of browsers can force that anyway.

[afh]

Glad to hear it looks good to you, @jwiegley. I went ahead and created #75.

[afh]

Please hold for now.

[afh]

Closing as this surely was an entertaining and somewhat promising experiment a more thorough solution should ideally find its way to texinfo. Thanks for the helpful feedback all.