Skip to content

Lay out the documentation like kotlinlang.org/docs - #41

Merged
Leitwolf11 merged 1 commit into
mainfrom
design/docs-layout
Oct 18, 2026
Merged

Leitwolf11 merged 1 commit into
mainfrom
design/docs-layout

Conversation

@Leitwolf11

Copy link
Copy Markdown
Contributor

One DocShell now frames every documentation page on the three sites, in place of three copied sidebars. Getting started had no Syntax link, and each page opened with a capitalized kicker.

  • Left: the site's topics, current one marked; below 760 px they fold into a Contents button.
  • Top: breadcrumb (site / Documentation / topic).
  • Middle: the page in a column of at most 720 px.
  • Right: On this page, built from the rendered h2 headings (ids from their words, any script); hidden below 1100 px.
  • Bottom: previous / next topic cards and Edit this page linking to the source file.

Labels are in all four languages. The old layout styles are removed.

Testing: npm run check, format:check, test (44), build. Checked in the browser pane at 1280×800 (Overview, Talac Outputs: sticky TOC, pager, edit link) and 375×812 (Tazel Commands: Contents folded, no overflow), with no console errors. Not merged until the layout is approved.

The three documentation pages each drew their own sidebar. The two hand-built
pages listed different topics: Getting started had no link to Syntax. Each page
also opened with a capitalized section kicker.

DocShell now frames every documentation page:

- On the left, the topics of the site, with the current one marked. On a
  narrow screen they fold into a Contents button above the page.
- Above the page, a breadcrumb: site / Documentation / topic.
- The page in a column of at most 720 px.
- On the right, "On this page". It is read from the h2 headings of the
  rendered page, and each heading gets an id from its words in any script.
  It is hidden below 1100 px.
- Under the page, previous and next topic cards and an "Edit this page"
  link to the file the page is written in.

DocPage, OverviewPage and GettingStartedPage use it and drop their own
sidebars and kickers. The styles of the old layout are removed. The labels
are in all four languages.
@Leitwolf11

Copy link
Copy Markdown
Contributor Author

Self-review: read the diff. DocShell replaces the three copied sidebars. Its topics come from sidebarFor, so every page lists the same topics. The TOC is built from the rendered h2 elements and refreshed on a locale or path change. Previous and next follow the sidebar order, and the edit link points at the page's source file. Old layout styles are removed. Approved by the owner after a preview, and checks are green.

@Leitwolf11
Leitwolf11 merged commit 5877c2e into main Oct 18, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant