Skip to content

v0.1.0-alpha.12

Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 21 Oct 03:12
· 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 Dismissible Banner is 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 a RememberKey was remembered. Without a RememberKey, the key comes from the banner's Title, 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 a RememberKey. Remember="DismissMemory.None" turns this off.
  • RememberKey alone now means the session, not a year. Add Remember="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-scrollbars on <html>) brings the themed one back. A page-scrolling shell now sets scrollbar-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's Shortcut is drawn in a key cap (<kbd>) 24px from the label, with ⌘ ⌥ ⇧ ⌃ drawn as icons. Icons sit 10px from the label.
  • Vertical NavItem titles wrap instead of being cut short with an ellipsis. Horizontal menus stay on one line.
  • Headings get ids on a page with an OnThisPage. A Heading in AppMain gets an id slugged from its text ("Rows & columns" becomes rows-columns, a repeat -2) unless it sets one, and the levels the outline lists become links to themselves. Pages without an OnThisPage render headings as before.
  • A click anywhere on a Checkbox or Switch row 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; a ControlPosition.End row is the full width.
  • AppSidebar's drawer shows the shell's AppBrand in its top row when the sidebar has no SidebarHeader, so it never opens on an empty bar. Add a SidebarHeader to show something else.
  • A Code block with LineNumbers or HighlightLines renders each line as its own element (a mark when highlighted). With a Title, the language label gives way to a header row.
  • With JavaScript, the sidebar scrolls the current link into view when a page opens, and AppShell turns off its transitions while the window is resized (crossing the breakpoint no longer slides the drawer out).

New

  • OnThisPage: the page's outline, for AppAside. Each Heading in AppMain adds itself while the page renders, so the list is in the first response, with JavaScript off. MinLevel and MaxLevel (2 and 3) set the levels, Title the heading ("On this page"). With JavaScript it marks the section in view and adds headings from raw HTML (Prose, rendered Markdown). Headings in a CodeExample, 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), and HighlightLines="3-5,9", drawn on the server.
  • CodeExample: a live example over its source, colored on the server with a copy button. CodeExampleFile parts become tabs over the source; Collapsible hides it behind "Show code" (SourceOpen opens it). Also Code, Language, Title, HighlightLines, LineNumbers, MaxHeight, Center, ShowCodeText, HideCodeText, FilesLabel, and the --ib-example-padding and --ib-example-bg variables.
  • CopyButton: copies Text, or the value or text of the element named by For, and shows a check and "Copied" (CopiedLabel). An icon button named "Copy" (Label) unless it has content; it fits a field's EndAddon. 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 BadgeVariant passes it to the item's badge.
  • AppSidebar SmallScreen="SidebarSmallScreen.Panel": below the breakpoint the sidebar opens under the header, full width, and SidebarToggle turns into its close button; works with JavaScript off. SidebarToggle CloseLabel names that button ("Close menu").
  • IzzyTheme Scrollbars (ThemeScrollbars.Auto, Themed, Native), and the .ib-scrollbars-native class.
  • Banner Remember (DismissMemory.Session, Persistent, None).
  • IzzyText: OnThisPage, PrevNextNavigation, Previous, Next, Copy, ShowCode, HideCode, SourceFiles.

Fixed

  • The skip link, SidebarToggle and 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