Repository navigation
v0.1.0-alpha.12
Pre-release
Pre-release
·
261 commits
to main
since this release
What a documentation site needs: an "On this page" outline built on the server, headings you can link to, code blocks with titles, line numbers and highlighted lines, live examples with their source, previous and next links, and a copy button for any text. The sidebar gets a panel mode for small screens and shows the brand in its drawer, and a dismissed Banner now stays dismissed for the session. Nothing was renamed or removed.
Changed (check when you update)
- A
DismissibleBanneris remembered for the browser session by default. Closing it writes a session cookie, and later pages leave it out until the browser closes. Before, only a banner with aRememberKeywas remembered. Without aRememberKey, the key comes from the banner'sTitle, text and links, so a changed message shows again by itself, and banners with the same words and links share a dismissal. A banner whose text comes from a component of your own (a localizer) is remembered only with aRememberKey.Remember="DismissMemory.None"turns this off. RememberKeyalone now means the session, not a year. AddRemember="DismissMemory.Persistent"to keep the old year-long cookie.- The page's scrollbar is no longer themed by default under
AppShell. Styled scrollbars never fade, and on Windows they replace the system's overlay scrollbars.IzzyTheme Scrollbars="ThemeScrollbars.Themed"(or.ib-scrollbarson<html>) brings the themed one back. A page-scrolling shell now setsscrollbar-gutter: stable, so opening the drawer no longer shifts the header; with classic scrollbars, a short page shows an empty strip where the scrollbar goes. - Menus are at least 15rem wide (were 10rem), submenus too, never wider than the window less 1rem. A submenu with no room beside its item (a phone) opens below it, over the menu. A
MenuItem'sShortcutis drawn in a key cap (<kbd>) 24px from the label, with ⌘ ⌥ ⇧ ⌃ drawn as icons. Icons sit 10px from the label. - Vertical
NavItemtitles wrap instead of being cut short with an ellipsis. Horizontal menus stay on one line. - Headings get ids on a page with an
OnThisPage. AHeadinginAppMaingets anidslugged from its text ("Rows & columns" becomesrows-columns, a repeat-2) unless it sets one, and the levels the outline lists become links to themselves. Pages without anOnThisPagerender headings as before. - A click anywhere on a
CheckboxorSwitchrow toggles it, the hint included. A plain row is now only as wide as its label and hint, so blank space beside it doesn't toggle it; aControlPosition.Endrow is the full width. AppSidebar's drawer shows the shell'sAppBrandin its top row when the sidebar has noSidebarHeader, so it never opens on an empty bar. Add aSidebarHeaderto show something else.- A
Codeblock withLineNumbersorHighlightLinesrenders each line as its own element (amarkwhen highlighted). With aTitle, the language label gives way to a header row. - With JavaScript, the sidebar scrolls the current link into view when a page opens, and
AppShellturns off its transitions while the window is resized (crossing the breakpoint no longer slides the drawer out).
New
OnThisPage: the page's outline, forAppAside. EachHeadinginAppMainadds itself while the page renders, so the list is in the first response, with JavaScript off.MinLevelandMaxLevel(2 and 3) set the levels,Titlethe heading ("On this page"). With JavaScript it marks the section in view and adds headings from raw HTML (Prose, rendered Markdown). Headings in aCodeExample, a dialog or a popover aren't listed.Heading:Outline="false"leaves a heading out;Anchor="true"or"false"turns its self-link on or off. A heading that holds a link or button of its own never gets one.Code:Title(a file name in a header row),LineNumbers(not selected or copied), andHighlightLines="3-5,9", drawn on the server.CodeExample: a live example over its source, colored on the server with a copy button.CodeExampleFileparts become tabs over the source;Collapsiblehides it behind "Show code" (SourceOpenopens it). AlsoCode,Language,Title,HighlightLines,LineNumbers,MaxHeight,Center,ShowCodeText,HideCodeText,FilesLabel, and the--ib-example-paddingand--ib-example-bgvariables.CopyButton: copiesText, or the value or text of the element named byFor, and shows a check and "Copied" (CopiedLabel). An icon button named "Copy" (Label) unless it has content; it fits a field'sEndAddon. Needs JavaScript, so it appears only when the script runs.PrevNext: previous and next links for the end of an article (PreviousHref,PreviousTitle,NextHref,NextTitle,PreviousText,NextText,Label), side by side when there's room.BadgeVariant.Plain: a badge's text in its color with no fill or border, for counts.NavItem BadgeVariantpasses it to the item's badge.AppSidebar SmallScreen="SidebarSmallScreen.Panel": below the breakpoint the sidebar opens under the header, full width, andSidebarToggleturns into its close button; works with JavaScript off.SidebarToggle CloseLabelnames that button ("Close menu").IzzyTheme Scrollbars(ThemeScrollbars.Auto,Themed,Native), and the.ib-scrollbars-nativeclass.Banner Remember(DismissMemory.Session,Persistent,None).IzzyText:OnThisPage,PrevNextNavigation,Previous,Next,Copy,ShowCode,HideCode,SourceFiles.
Fixed
- The skip link,
SidebarToggleand the drawer's close and backdrop links went to the home page from any other page under<base href>(with JavaScript off; the skip link even with it). They now keep the page's path and query. - SiteNav's phone menu focuses its first link (it focused the hidden backdrop).
Full Changelog: v0.1.0-alpha.11...v0.1.0-alpha.12