@ubx/docs-ui 0.7.0 → 0.9.0

package/dist/Header.d.ts

@@ -8,7 +8,7 @@ export type SectionTab = {
     label: string;
     href: string;
 };
-export declare function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle, }: {
+export declare function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle, githubUrl, }: {
     nav: NavLink[];
     /** Omit entirely for a single-tier header, which is the provider site. */
     tabs?: SectionTab[];
@@ -38,4 +38,18 @@ export declare function Header({ nav, tabs, activeTab, mobileMenu, search, showT
      * away rather than being set to true.
      */
     showThemeToggle?: boolean;
+    /**
+     * Repository URL. When set, a "Star us on GitHub" button renders to the
+     * right of the nav.
+     *
+     * A prop rather than something one site builds for itself: the whole
+     * reason all three surfaces share this header is that a nav element
+     * living in one repo drifts from the other two. That applies to a call
+     * to action as much as to a link.
+     *
+     * Optional because it is a marketing affordance first. A docs reader
+     * arriving to look up a flag is not there to star anything, so each
+     * site decides.
+     */
+    githubUrl?: string;
 }): import("react").JSX.Element;

package/dist/Header.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ThemeToggle } from "./ThemeToggle";
-export function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle = true, }) {
+export function Header({ nav, tabs, activeTab, mobileMenu, search, showThemeToggle = true, githubUrl, }) {
     return (_jsxs("header", { className: "border-b border-border bg-background", children: [_jsxs("div", { className: "relative mx-auto flex max-w-7xl items-center gap-3 px-6 py-4", children: [mobileMenu, _jsxs(Link, { href: "/", className: "flex shrink-0 items-center", children: [_jsx("img", { src: "/logo/logo.png", alt: "ubx", className: "logo-light h-6 w-auto" }), _jsx("img", { src: "/logo/logo-dark.png", alt: "ubx", className: "logo-dark h-6 w-auto" })] }), _jsx("div", { className: "flex-1" }), _jsx("nav", { className: "absolute left-1/2 hidden -translate-x-1/2 items-center gap-5 md:flex", children: nav.map((item) => {
                             const className = item.current
                                 ? "text-sm text-primary"
                                 : "text-sm text-foreground-muted hover:text-primary";
                             return item.href.startsWith("/") ? (_jsx(Link, { href: item.href, className: className, children: item.label }, item.label)) : (_jsx("a", { href: item.href, className: className, children: item.label }, item.label));
-                        }) }), search ? _jsx("div", { className: "w-40 shrink-0 sm:w-56 lg:w-64", children: search }) : null, showThemeToggle ? _jsx(ThemeToggle, {}) : null] }), tabs && tabs.length > 0 ? (_jsx("div", { className: "mx-auto max-w-7xl px-6", children: _jsx("nav", { className: "flex gap-6 overflow-x-auto", children: tabs.map((tab) => {
+                        }) }), search ? _jsx("div", { className: "w-40 shrink-0 sm:w-56 lg:w-64", children: search }) : null, githubUrl ? (_jsxs("a", { href: githubUrl, className: "hidden shrink-0 items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm text-foreground-muted transition-colors hover:border-primary hover:text-primary sm:flex", children: [_jsx("svg", { viewBox: "0 0 16 16", width: "15", height: "15", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" }) }), "Star us on GitHub"] })) : null, showThemeToggle ? _jsx(ThemeToggle, {}) : null] }), tabs && tabs.length > 0 ? (_jsx("div", { className: "mx-auto max-w-7xl px-6", children: _jsx("nav", { className: "flex gap-6 overflow-x-auto", children: tabs.map((tab) => {
                         // Prefix match, so /concepts/ledger keeps the Concepts tab
                         // lit rather than only the exact section index.
                         const active = activeTab === tab.href || activeTab?.startsWith(tab.href + "/");

package/dist/PageShell.d.ts

@@ -51,6 +51,21 @@ export type PageShellProps = {
     intro?: React.ReactNode;
     /** See Header's own showThemeToggle. Default true. */
     showThemeToggle?: boolean;
+    /** See Header's own githubUrl. Omitted means no button. */
+    githubUrl?: string;
+    /**
+     * Render children edge to edge, with no centred, padded main column.
+     *
+     * The default wraps children in `mx-auto max-w-7xl px-6 py-12`, which
+     * is right for a docs page and wrong for a page built from full bleed
+     * tone bands: it caps every band at 1280px and insets it 24px, so the
+     * bands stop reaching the viewport edges and the alternating tones
+     * read as boxes rather than bands.
+     *
+     * ubiquex.io's home page is built that way, so it opts out and owns
+     * its own inner width. Both docs sites are unaffected.
+     */
+    fullBleed?: boolean;
     /** Footer identity. Required for the reason stated on Footer itself. */
     footer: {
         tagline: React.ReactNode;
@@ -61,7 +76,7 @@ export type PageShellProps = {
     };
     children: React.ReactNode;
 };
-export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, showThemeToggle, footer, children, }: PageShellProps): React.JSX.Element;
+export declare function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel, searchPlaceholder, searchPlacement, intro, showThemeToggle, githubUrl, fullBleed, footer, children, }: PageShellProps): React.JSX.Element;
 /**
  * Sets data-theme from localStorage before paint.
  *

package/dist/PageShell.js

@@ -9,13 +9,13 @@ const HEADER_SEARCH_CLASS = "w-full rounded-full bg-field px-4 py-1.5 text-sm te
 /** Full size, for a landing page where search is the point. */
 const HERO_SEARCH_CLASS = "w-full rounded-full bg-field px-5 py-3 text-base text-foreground outline-none " +
     "placeholder:text-foreground-muted focus:ring-2 focus:ring-primary/30";
-export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, showThemeToggle = true, footer, children, }) {
+export function PageShell({ nav, tabs, activeTab, sidebar, sidebarLabel = "Navigation", searchPlaceholder, searchPlacement = "header", intro, showThemeToggle = true, githubUrl, fullBleed = false, footer, children, }) {
     const headerSearch = searchPlaceholder && searchPlacement === "header" ? (_jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HEADER_SEARCH_CLASS })) : undefined;
     const heroSearch = searchPlaceholder && searchPlacement === "hero" ? (_jsx("div", { className: "mx-auto mt-8 max-w-xl", children: _jsx(GlobalSearch, { placeholder: searchPlaceholder, inputClassName: HERO_SEARCH_CLASS }) })) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, showThemeToggle: showThemeToggle, mobileMenu: sidebar ? (_jsx(MobileSidebarToggle, { label: sidebarLabel, children: sidebar })) : undefined }), sidebar ? (
+    return (_jsxs(_Fragment, { children: [_jsx(Header, { nav: nav, tabs: tabs, activeTab: activeTab, search: headerSearch, showThemeToggle: showThemeToggle, githubUrl: githubUrl, mobileMenu: sidebar ? (_jsx(MobileSidebarToggle, { label: sidebarLabel, children: sidebar })) : undefined }), sidebar ? (
             // No intro or hero search here on purpose: a page with a sidebar
             // is a content page, and a hero belongs to a landing page.
-            _jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-1 gap-10 px-6 py-10", children: [_jsx("aside", { className: "hidden w-64 shrink-0 lg:block", children: sidebar }), _jsx("main", { className: "min-w-0 flex-1", children: children })] })) : (_jsxs("main", { className: "mx-auto w-full max-w-7xl flex-1 px-6 py-12", children: [intro, heroSearch, children] })), _jsx(Footer, { tagline: footer.tagline, links: footer.links })] }));
+            _jsxs("div", { className: "mx-auto flex w-full max-w-7xl flex-1 gap-10 px-6 py-10", children: [_jsx("aside", { className: "hidden w-64 shrink-0 lg:block", children: sidebar }), _jsx("main", { className: "min-w-0 flex-1", children: children })] })) : fullBleed ? (_jsxs("main", { className: "flex-1", children: [intro, heroSearch, children] })) : (_jsxs("main", { className: "mx-auto w-full max-w-7xl flex-1 px-6 py-12", children: [intro, heroSearch, children] })), _jsx(Footer, { tagline: footer.tagline, links: footer.links })] }));
 }
 /**
  * Sets data-theme from localStorage before paint.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ubx/docs-ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Shared UI for ubx documentation sites: the page shell, theme A, Shiki-backed CodeBlock, header, search, theme toggle.",
   "license": "Apache-2.0",
   "type": "module",