Skip to content

docs(html): KiCAD-inspired topbar, side TOC, language switcher, admonition tints#4113

Open
grandixximo wants to merge 4 commits into
LinuxCNC:masterfrom
grandixximo:docs/topbar-greyout-on-build
Open

docs(html): KiCAD-inspired topbar, side TOC, language switcher, admonition tints#4113
grandixximo wants to merge 4 commits into
LinuxCNC:masterfrom
grandixximo:docs/topbar-greyout-on-build

Conversation

@grandixximo
Copy link
Copy Markdown
Contributor

Re-implements the docs topbar on top of the merged docs/build/ layout (#4081). Supersedes the pre-#4081 prototype (766f2d9103).

What it adds

  • Sticky topbar with the LinuxCNC logo on every page, matching asciidoctor's footer palette. Logo at docs/src/lcnc-docs.svg, copied into docs/build/html/ by the shared-asset rule.
  • Side TOC via asciidoctor :toc=left; auto-hides below 800px.
  • Language switcher (top-right), built from po4a.cfg plus a LANG_LABEL_<lang> map so po4a.cfg stays the single source of truth. Works on regular pages and manpages.
  • Admonition tints (note/tip/warning/caution/important) with Unicode icons mapped onto asciidoctor's icons=font output, no FontAwesome dependency.

Per-page translation status

lang_switcher_postprocess.py walks the built tree, looks up each page's coverage in the per-language .po, and greys out switcher entries (and dead manpage-index links) below the POKEEP threshold (default 80%). POKEEP=30 on the make line surfaces in-progress translations; documented in contributing-to-linuxcnc.adoc, building-linuxcnc.adoc, and docs/README.adoc.

Notes

  • Build-time injection only: docinfo-header.html from a .html.in template via docinfo=shared; gcode.html becomes gcode.html.in (po4a master) with per-language topbar fragments; the stale hardcoded Translations: list in index.tmpl is dropped in favour of the switcher.
  • Verified with a full translated build (8 languages, 2387 translated pages).

…ition tints

Re-implemented on top of PR LinuxCNC#4081's docs/build/ layout.  Replaces the
previous prototype branch (commit 766f2d9) which targeted the
pre-LinuxCNC#4081 docs/html/ paths.

- Sticky topbar with LinuxCNC logo on every page; matches asciidoctor's
  footer colour scheme.  Logo SVG lives at docs/src/lcnc-docs.svg and is
  copied into docs/build/html/ by the shared-asset rule.
- Side TOC via asciidoctor :toc=left; auto-hides below 800px (CSS).
- Language switcher in the topbar (top-right) built from po4a.cfg + a
  LANG_LABEL_<lang> map in Submakefile, so po4a.cfg stays the single
  source of truth.
- Admonition blocks (note/tip/warning/caution/important) tinted by
  type with Unicode icons mapped onto asciidoctor's icons=font output
  (no FontAwesome dep).

Build-time injection:
- docs/src/docinfo-header.html generated from .html.in template;
  asciidoctor pages pick it up via docinfo=shared.
- docs/src/gcode.html renamed to gcode.html.in (po4a master); per-lang
  docs/build/html/<lang>/gcode.html generated from po4a's gcode-raw.html
  + per-lang topbar fragment.
- Per-lang docs/build/html/<lang>/index.html similarly gets topbar
  injection + CSS path rewrite + objects/index.incl appended so the
  manpage list is present on translated indexes too.
- docs/src/index.tmpl's hardcoded Translations: list dropped; topbar
  switcher replaces it.
- English + translated manpage HTML rules pass lcnc-lang-label and
  lcnc-subpath so the switcher works on manpages.

Per-page language indication via lang_switcher_postprocess.py: walks
docs/build/html at end of build, looks up each page's master in each
lang's .po, counts msgid-with-master-loc vs translated, toggles
class=lcnc-lang-unavail on the <li> when coverage falls below POKEEP
(default 80).  Same pass marks details-list entries (manpage index
lists) whose target file does not exist for the current language.
Idempotent: same toggle pattern across re-runs.

POKEEP is overridable on the make command line (POKEEP=30 surfaces
in-progress translations); contributing-to-linuxcnc.adoc,
building-linuxcnc.adoc, and docs/README.adoc document the knob.

CSS adds .lcnc-lang-unavail and .lcnc-link-unavail rules: dim text,
pointer-events: none, cursor not-allowed; .lcnc-link-unavail also adds
strikethrough for the index list context.
@grandixximo grandixximo force-pushed the docs/topbar-greyout-on-build branch from 42cfdf5 to 133a6d9 Compare June 3, 2026 04:59
Comment thread docs/src/Submakefile Outdated
Comment thread docs/po4a.cfg
@BsAtHome
Copy link
Copy Markdown
Contributor

BsAtHome commented Jun 3, 2026

You are hiding translations and doing grayed out presentation? The data is still there and you deliberately restrict access to it. That is IMO a Bad MoveTM and user unfriendly.

If a translation is not worthy to show, then it should be removed entirely. Any cutoff level is always an arbitrary value and you have no idea which part you will hit. The large translation file may be only 10% done, but that can cover a complete section of the documentation, which you now are hiding.

The better way is to start splitting the translations into smaller units so that it becomes much easier to do a full translation for a part. At the moment, you just see a huge mountain of stuff to translate with no end in sight. Smaller units solve that. But it is for the future.

@grandixximo
Copy link
Copy Markdown
Contributor Author

You are hiding translations and doing grayed out presentation? The data is still there and you deliberately restrict access to it. That is IMO a Bad MoveTM and user unfriendly.

Also this one, wasn't sure what to go for, mostly trying to avoid broken links, I'm not sure what you are proposing here, the only way is a % and it is arbitrary, but it's the standard as far as I looked around, the chapter split for translation does not belong here, is the bad move a blocker? What's the alternative for this PR?

@BsAtHome
Copy link
Copy Markdown
Contributor

BsAtHome commented Jun 3, 2026

Per your comment:

lang_switcher_postprocess.py walks the built tree, looks up each page's coverage in the per-language .po, and greys out switcher entries

Why do this at all? If a language was translated and enabled in po4a.cfg, then it will be there. No buts, the config states it is available, then it is available.

You worry about (external) links? This is the devel tree doc, not a release, and there are no guarantees in development. How else can we reorganize? Reorgs break things.

(and dead manpage-index links)

Don't hide it. This stuff needs fixing, not hiding.

What's the alternative for this PR?

It is not about "alternative". The redesign is great. The details are being discussed.

@hansu
Copy link
Copy Markdown
Member

hansu commented Jun 3, 2026

It would be cool if we could get the whole TO in the left panel, like

grafik

And I would move the Navigation to the top, like the style of the Numpy docs

grafik

You are hiding translations and doing grayed out presentation? The data is still there and you deliberately restrict access to it. That is IMO a Bad MoveTM and user unfriendly.

But if a language has a translation status of 10% or I would even say <50%, I would tend to hide this language. I think a mix of languages is more irritating than a complete English doc. Then you cannot really use the browser translation function.

Would be nice if we could suppress this when only building for one language:

file:///home/cnc/linuxcnc-master-docs/docs/build/html/de/gcode.html
  Line: 57
  Code: 404 File `/home/cnc/linuxcnc-master-docs/docs/build/html/de/gcode.html' does not exist
 To do: The link is broken. Double-check that you have not made any typo,
        or mistake in copy-pasting. If the link points to a resource that
        no longer exists, you may want to remove or fix the link.

@BsAtHome
Copy link
Copy Markdown
Contributor

BsAtHome commented Jun 3, 2026

You are hiding translations and doing grayed out presentation? The data is still there and you deliberately restrict access to it. That is IMO a Bad MoveTM and user unfriendly.

But if a language has a translation status of 10% or I would even say <50%, I would tend to hide this language. I think a mix of languages is more irritating than a complete English doc. Then you cannot really use the browser translation function.

You are undermining your argument by using "browser translation function". If you want the browser to translate, then you always should use the master (untranslated) documentation language (English) as the base for any automated translations... Not doing so would create Babel in extended fashion with aliens from Mars pitching in.

That actually touches the reason why or why not to do (full) documentation translations at all. The automated translations work very well for "casual" texts. However, highly technical documents range from usable to mediocre to poor to outright misleading when auto-translated. Secondly, this stuff is often running on systems that are isolated and no access to Internet or advanced tools. Local information is still relevant for these systems.

Hiding stuff is simply not the right way to solve the problem.

@hansu
Copy link
Copy Markdown
Member

hansu commented Jun 3, 2026

You are undermining your argument by using "browser translation function".

I mean if you have a text where one paragraph is English and the next one is in some other language and so on.
So if you are a person who have is very hard to read English you would enable browser translation. But I assume it gets problems when it expects English s source and there is text in other languages in between. So for that person this partly translated docs would not be very helpful.

But forget that idea. If we hide the partly translations, it is hard so see the status and what needs to be translated.
Maybe add a note/warning "This language is only XX% translated"

That actually touches the reason why or why not to do (full) documentation translations at all.

But how would you mark the chapters which are translated completely?

@BsAtHome
Copy link
Copy Markdown
Contributor

BsAtHome commented Jun 3, 2026

That actually touches the reason why or why not to do (full) documentation translations at all.

But how would you mark the chapters which are translated completely?

That is a good question. Probably by separating or grouping (some of) the chapters in translation. But any change here needs to wait because it should be accompanied by rethinking and moving around much of the documentation (content) to make a more logical and coherent story.

@grandixximo
Copy link
Copy Markdown
Contributor Author

grandixximo commented Jun 3, 2026

@hansu doesn't the TOC already render on the left panel with this PR? Or am I missing something?

@hansu
Copy link
Copy Markdown
Member

hansu commented Jun 3, 2026

@hansu doesn't the TOC already render on the left panel with this PR? Or am I missing something?

With whole I mean the whole documentation or at least the chapter and not only the toc of the regarding adoc document.
So currently it's only like this and that brings not much benefit.
grafik

Move the native language display names out of the makefile into
docs/src/lang-labels (tag<ws>name).  A language in po4a.cfg without an
entry falls back to its tag with a make warning.
Drop the POKEEP percent-threshold hiding: every present translation
stays clickable; the switcher only greys a target that does not exist.
A page below 100% now carries a no-JS banner below the topbar stating
its completeness, tinted red(0%) to green(100%).
@grandixximo
Copy link
Copy Markdown
Contributor Author

@hansu in the other picture you changed the LinuxCNC Home Page link for Documentation, but the top left logo already links back to Documentation main page, I think it should stay linking back to linuxcnc.org not documentation, or you were thinking something different?

@hansu
Copy link
Copy Markdown
Member

hansu commented Jun 4, 2026

I thought we could have the same header for the wlo page and the docs. So the top left logo then should point to www.linuxcnc.org

@grandixximo
Copy link
Copy Markdown
Contributor Author

The logo is specifically for the docs, with the penguin reading the docs book, its expected to bring you back to the main doc page, where it is still present up top, that's the most sensible IMO, clicking the doc logo and end up in linuxcnc.org and having to navigate back defeats the purpose of the logo, and moves it in the Documentation link, I don't find reason to do this switcharoo, feels confusing, I don't find it intuitive for the user, is that how other doc website behave? Kicad on which I took some ideas, and NumPhy which you linked, seem to both behave as I would expect.

@hansu
Copy link
Copy Markdown
Member

hansu commented Jun 4, 2026

Yeah the logo then should be the general one, not the docs logo.
But maybe it's too much for to have also the wlo page in the same look.
So then have the header for the docs like this:
grafik

For the complete TOC I think we need to include all adoc files in one adoc file like it is done in Master_Documentation.adoc.
No idea if that would change something for the po4a config.

@grandixximo
Copy link
Copy Markdown
Contributor Author

So then have the header for the docs like this:

agreed

For the complete TOC I think we need to include all adoc files in one adoc file like it is done in Master_Documentation.adoc. No idea if that would change something for the po4a config.

The TOC can be extracted at build time, working on it, since the TOC is huge, keep everything expanded? or only expand section where you landed? I will need to set focus on the landed item in the TOC if we want to avoid one line of JS.

Build a nested nav tree from the Master_*.adoc structure and inject it at
the top of asciidoctor's left TOC (no JS, native <details>). Each page gets
the tree with its branch expanded, its entry active, and its own section
list nested under it. Section-less pages get a scaffolded sidebar. CSS-drawn
markers override asciidoctor's absolute summary marker so they stay in flow.
@hansu
Copy link
Copy Markdown
Member

hansu commented Jun 4, 2026

The TOC can be extracted at build time, working on it, since the TOC is huge, keep everything expanded? or only expand section where you landed?

Keep everything collapsed when opening, like on the docs main page. And then expand the current section or subsection.

@grandixximo
Copy link
Copy Markdown
Contributor Author

@hansu Pushed the "complete" sidebar TOC. Only the book you land on is expanded; the others stay collapsed. The page's own local TOC is injected under its entry, so big per-page trees (like gcode) are not lost. It also scrolls to the active entry on load. I tried it and it works well.

With this, almost everything lives in the left bar now. The only thing still outside it is the manpage listing. I think it could be worth moving the manpages into the left panel too, and that gives us space to completely redesign the landing page, like proposed elsewhere with the main topics users visit the docs for. Probably a separate PR though, and #4109 should merge first.

@grandixximo
Copy link
Copy Markdown
Contributor Author

grandixximo commented Jun 4, 2026

The TOC can be extracted at build time, working on it, since the TOC is huge, keep everything expanded? or only expand section where you landed?

Keep everything collapsed when opening, like on the docs main page. And then expand the current section or subsection.

I tried with everything collapsed other than current section, but it was wasting a lot of space on short chapters, so i went with full expansion, I think it looks better, but I can switch back, it does not make much difference, I think it may save some clicks, but adds a few more scrolls, try it like this, see what you think. I think scrolls are less expensive as the mouse can be anywhere withing the left bar, while click on the arrow require some finesse...

Edit:
I noticed some fields are missing from the sidebar TOC, this is because they are also missing from the PDF, but I think the correct way is to add them in the PDF as well, like

  • getting-started/hardware-interface
  • gui/gladevcp-panels
  • drivers/mesa_modbus
  • code/writing-tests

We should have a single source of truth for the TOC, to avoid these issues, correct?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants