markupress 0.6.4 → 0.8.0

package/theme/shell.html

@@ -11,6 +11,7 @@
 <prop name="logo" type="object({ light: string, dark: string })">Logo images for the light and dark themes</prop>
 <prop name="favicon" type="string">Site icon URL</prop>
 <prop name="badge" type="string" default="">Badge beside the title</prop>
+<prop name="search" type="string" default="">The URL of the version's search index</prop>
 <prop name="nav" type="list(object({ label: string, href: string, current: string, icon: string }))" required>Top navigation: the sections, then the configured links, each with an icon URL or ""</prop>
 <prop name="sidebar" type="list(object({ label: string, current: string, depth: number, href?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>The section's sidebar: pages and links, and folders and groups with children, as &lt;hk-nav&gt; renders them</prop>
 <prop name="contents" type="list(object({ label: string, href: string, description: string }))" required>A generated index's pages and folders</prop>
@@ -23,7 +24,7 @@
 <prop name="page" type="object({ editLink?: string, lastUpdated?: string, ... })" required>The page's front matter, with its edit link and the date its file last changed in git</prop>
 <state name="dark" type="boolean" value="false"></state></defs>
 <div class="site"><a class="skip" href="#documentation-content">Skip to content</a>
-<markupress-header from:title="$title" from:home="$home" from:logo="$logo" from:badge="$badge" from:nav="$nav" from:dark="$dark">
+<markupress-header from:title="$title" from:home="$home" from:logo="$logo" from:badge="$badge" from:nav="$nav" from:search="$search" from:dark="$dark">
 <span class="menu" slot="menu"><ui-button variant="ghost" tone="neutral" popovertarget="documentation-navigation">Navigation</ui-button></span></markupress-header>
 <div class="columns"><aside id="documentation-navigation" popover aria-label="Documentation">
 <hk-nav from:items="$sidebar" label="Documentation"></hk-nav>
@@ -34,10 +35,10 @@
 <aside class="outline" $if="$outline.length" aria-label="On this page"><markupress-outline from:items="$outline"></markupress-outline></aside></div>
 <markupress-footer $if="$footer.columns.length or $footer.copyright" from:footer="$footer"></markupress-footer></div>
 <style>
-:host { display: block; background: var(--ui-surface); color: var(--ui-text); font: 1rem/1.7 system-ui, sans-serif; min-height: 100vh; }
+:host { display: block; background: var(--ui-surface); color: var(--ui-text); font: 1rem/1.7 var(--markupress-font, system-ui, sans-serif); min-height: 100vh; }
 .site { display: flex; flex-direction: column; min-height: 100vh; }
-.columns { display: flex; gap: 3rem; flex: 1; inline-size: 100%; max-inline-size: 90rem; margin: auto; padding: 2rem 1.5rem; }
-#documentation-navigation { flex: 0 0 15rem; } main { min-width: 0; flex: 1; max-width: 65ch; } .outline { flex: 0 0 13rem; }
+.columns { display: flex; gap: 3rem; flex: 1; inline-size: 100%; max-inline-size: var(--markupress-page-width, 90rem); margin: auto; padding: 2rem 1.5rem; }
+#documentation-navigation { flex: 0 0 var(--markupress-sidebar-width, 15rem); } main { min-width: 0; flex: 1; max-width: var(--markupress-content-width, 65ch); } .outline { flex: 0 0 var(--markupress-outline-width, 13rem); }
 /* Wide screens show the sidebar in the page; narrow ones open it as a native popover, which needs no script. */
 @media (min-width: 769px) { #documentation-navigation { display: block; position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
   #documentation-navigation, .outline { position: sticky; top: 5rem; align-self: flex-start; max-block-size: calc(100vh - 6rem); overflow: auto; } .menu { display: none; } }

package/theme/theme.css

@@ -40,7 +40,7 @@
 .markupress-prose .code-actions[hidden] { display: none; }
 .markupress-prose figure.code:is(:hover, :focus-within) .code-actions { opacity: 1; }
 @media (hover: none) { .markupress-prose .code-actions { opacity: 1; } }
-.markupress-prose .code-actions button { padding: .3rem .5rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-sm, .25rem); background: var(--ui-surface); color: var(--ui-text); font: .75rem/1 system-ui, sans-serif; cursor: pointer; }
+.markupress-prose .code-actions button { padding: .3rem .5rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-sm, .25rem); background: var(--ui-surface); color: var(--ui-text); font: .75rem/1 var(--markupress-font, system-ui, sans-serif); cursor: pointer; }
 .markupress-prose .code-actions button[aria-pressed="true"] { border-color: var(--ui-accent); }
 .markupress-prose pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
 .markupress-prose pre .line.highlighted { display: inline-block; box-sizing: content-box; min-inline-size: 100%; margin-inline: -1rem; padding-inline: 1rem; background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface)); box-shadow: inset 2px 0 var(--ui-accent); }