@waveso/docs 0.7.1 → 0.9.0

package/dist/react/search-dialog.js

@@ -26,7 +26,7 @@ const FOCUSABLE_SELECTOR = [
 * portalled to `document.body`, so a navbar's stacking context cannot trap
 * it behind the page.
 */
-function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", placeholder = "Search documentation", dialogLabel = "Search documentation", pageSize = 20, minQueryLength = 2, debounceMs = 120, className, miniSearchOptions, hintLabel, shortQueryLabel, loadingLabel, errorLabel, emptyLabel, resultCountLabels, locale }) {
+function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", placeholder = "Search documentation", dialogLabel = "Search documentation", pageSize = 20, minQueryLength = 2, debounceMs = 120, className, miniSearchOptions, hintLabel, shortQueryLabel, loadingLabel, errorLabel, emptyLabel, selectLabel = "Select", openLabel = "Open", closeLabel = "Close", resultCountLabels, locale }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [hits, setHits] = useState([]);
@@ -53,7 +53,18 @@ function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", place
 	const movedByKeyboard = useRef(false);
 	const [activeIndex, setActiveIndex] = useState(0);
 	const [status, setStatus] = useState("idle");
-	const [shortcutHint, setShortcutHint] = useState("");
+	/**
+	* The trigger's shortcut, split rather than held as one string.
+	*
+	* ⚠️ THE `⌘` NEEDS ITS OWN `font-size` AND CSS CANNOT SELECT A CHARACTER.
+	* Measured in the shipped mono stack at 12px, its ink is 6.39px tall against
+	* the `K`'s 8.75px — so as one string the symbol sits visibly short of the
+	* letter beside it. Two nodes is the only way to scale one and not the other.
+	*
+	* `null` until the effect below resolves the platform: reading it during
+	* render would disagree with the server's markup and break hydration.
+	*/
+	const [shortcut, setShortcut] = useState(null);
 	const dialogRef = useRef(null);
 	const triggerRef = useRef(null);
 	const inputRef = useRef(null);
@@ -126,7 +137,10 @@ function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", place
 	}, [isOpen, closeDialog]);
 	useEffect(() => {
 		const isApple = /mac|iphone|ipad|ipod/i.test(navigator.userAgent);
-		setShortcutHint(isApple ? "⌘K" : "Ctrl K");
+		setShortcut({
+			modifier: isApple ? "⌘" : "Ctrl",
+			isSymbol: isApple
+		});
 	}, []);
 	useEffect(() => {
 		if (isOpen) {
@@ -267,13 +281,21 @@ function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", place
 		onClick: openDialog,
 		onPointerEnter: warmIndex,
 		onFocus: warmIndex,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "wave-docs-search-trigger-label",
-			children: triggerLabel
-		}), shortcutHint === "" ? null : /* @__PURE__ */ jsx("kbd", {
-			className: "wave-docs-search-trigger-kbd",
-			children: shortcutHint
-		})]
+		children: [
+			/* @__PURE__ */ jsx(SearchGlyph, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wave-docs-search-trigger-label",
+				children: triggerLabel
+			}),
+			shortcut === null ? null : /* @__PURE__ */ jsxs("kbd", {
+				className: "wave-docs-search-trigger-kbd",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "wave-docs-search-trigger-mod",
+					"data-symbol": shortcut.isSymbol ? "" : void 0,
+					children: shortcut.modifier
+				}), shortcut.isSymbol ? "K" : " K"]
+			})
+		]
 	}), isOpen ? createPortal(/* @__PURE__ */ jsx("div", {
 		className: "wave-docs-search-backdrop",
 		onMouseDown: (event) => {
@@ -288,7 +310,7 @@ function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", place
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "wave-docs-search-input-row",
-					children: [/* @__PURE__ */ jsx("input", {
+					children: [/* @__PURE__ */ jsx(SearchGlyph, {}), /* @__PURE__ */ jsx("input", {
 						ref: inputRef,
 						className: "wave-docs-search-input",
 						type: "text",
@@ -305,11 +327,6 @@ function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", place
 						autoComplete: "off",
 						autoCorrect: "off",
 						spellCheck: false
-					}), /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "wave-docs-search-close",
-						onClick: closeDialog,
-						children: "Close"
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -346,11 +363,82 @@ function SearchDialog({ indexUrl, navigate, Link, triggerLabel = "Search", place
 					},
 					resultCountLabels,
 					locale
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wave-docs-search-footer",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "wave-docs-search-hint",
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ jsx("kbd", {
+									className: "wave-docs-search-kbd",
+									children: "↑"
+								}),
+								/* @__PURE__ */ jsx("kbd", {
+									className: "wave-docs-search-kbd",
+									children: "↓"
+								}),
+								selectLabel
+							]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "wave-docs-search-hint",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ jsx("kbd", {
+								className: "wave-docs-search-kbd",
+								children: "↵"
+							}), openLabel]
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "wave-docs-search-close",
+							"aria-label": closeLabel,
+							"aria-keyshortcuts": "Escape",
+							onClick: closeDialog,
+							children: [/* @__PURE__ */ jsx("kbd", {
+								className: "wave-docs-search-kbd",
+								children: "Esc"
+							}), /* @__PURE__ */ jsx("span", { children: closeLabel })]
+						})
+					]
 				})
 			]
 		})
 	}), document.body) : null] });
 }
+/**
+* The magnifier, on the trigger and in the dialog's input row.
+*
+* Decorative in both places: the trigger carries its name in `aria-label` and
+* the input carries its own, so this glyph would only ever repeat a word that
+* is already there — announced as "search Search" and, on some engines, as the
+* name of the character.
+*
+* Inline SVG rather than a `::before` glyph, matching every other icon in this
+* package: generated content is announced by some screen-reader and browser
+* pairs, which is the one thing `aria-hidden` cannot take back.
+*/
+function SearchGlyph() {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "wave-docs-search-glyph",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 24 24",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "11",
+			cy: "11",
+			r: "7"
+		}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
+	});
+}
 /** One result row: a real link, so middle-click and "open in new tab" work. */
 function SearchResultOption({ hit, id, isActive, setSize, posInSet, onActivate, onSelect, Link }) {
 	function handleClick(event) {

package/dist/react/sidebar.d.ts

@@ -1,7 +1,17 @@
 import { DocNavNode } from "../types.js";
 import { DocsLinkComponent } from "./markdown-components.js";
-import { ReactNode } from "react";
+import { ComponentType, ReactNode } from "react";
 //#region src/react/sidebar.d.ts
+/**
+ * `icon` names to components, for `DocsSidebar`'s `icons` prop.
+ *
+ * The component is rendered with no props: an icon that needs configuration is
+ * a closure the host writes, not a contract this package invents. It should
+ * draw at the size it is given — the column is `1rem` square and the built-in
+ * markers use `currentColor`, so anything following those two conventions sits
+ * in line with them.
+ */
+type DocsIconMap = Record<string, ComponentType>;
 interface DocsSidebarProps {
   /** The tree from `@waveso/docs/source`. */
   nav: DocNavNode[];
@@ -32,6 +42,44 @@ interface DocsSidebarProps {
    * The separating space is markup, so this is the sentence and nothing else.
    */
   externalLink?: string | undefined;
+  /**
+   * The marker column. `true` (default), `false`, or your own icons.
+   *
+   * Weight and a chevron were the only things separating a category from a
+   * page, and in a tree where the two interleave — a `Reference` group sitting
+   * directly above an `Internals` page — that is not enough to scan. A leading
+   * glyph gives the column a shape you read before you read any words.
+   *
+   * `false` renders no markers at all, for a host whose own navigation has a
+   * different vocabulary and does not want a second one. The external-link mark
+   * returns to the trailing edge there — turning off a decorative column is not
+   * consent to drop a warning.
+   *
+   * A **map** replaces the defaults with your components, keyed by the `icon`
+   * name authored in frontmatter or `meta.json`:
+   *
+   * ```tsx
+   * import { Book, Rocket } from 'lucide-react';
+   *
+   * <DocsSidebar nav={nav} pathname={pathname}
+   *   icons={{ book: Book, rocket: Rocket }} />
+   * ```
+   *
+   * ```yaml
+   * # content/reference/index.md
+   * icon: book
+   * ```
+   *
+   * ⚠️ A NAME THE HOST RESOLVES, NEVER ART THIS PACKAGE SHIPS. Content is
+   * authored in YAML and JSON and cannot carry a React element, and a docs
+   * package mounted inside someone else's application must not put its
+   * iconography beside theirs. Three markers ship; everything else is yours.
+   *
+   * A name with no entry in the map falls back to the built-in marker for that
+   * node's type. A typo in one file leaves a folder where a book should be —
+   * not a hole in the column.
+   */
+  icons?: boolean | DocsIconMap | undefined;
   className?: string | undefined;
 }
 /**
@@ -76,6 +124,6 @@ interface DocsSidebarProps {
  * nothing prefetches locally whatever this says. Do not "fix" it back because
  * the network tab looks the same.
  */
-declare function DocsSidebar({ nav, pathname, Link, label, expandGroup, collapseGroup, externalLink, className }: DocsSidebarProps): ReactNode;
+declare function DocsSidebar({ nav, pathname, Link, label, expandGroup, collapseGroup, externalLink, icons, className }: DocsSidebarProps): ReactNode;
 //#endregion
-export { DocsSidebar, DocsSidebarProps };
+export { DocsIconMap, DocsSidebar, DocsSidebarProps };

package/dist/react/sidebar.js

@@ -15,6 +15,24 @@ function normalizeHref(href) {
 function isActiveHref(pathname, href) {
 	return normalizeHref(pathname) === normalizeHref(href);
 }
+/**
+* `{ [key]: true }` for every group the active page lives inside, keyed the way
+* the tree renders — `${prefix}-${index}`, index counted over *all* siblings
+* because that is what `NavList` does.
+*
+* Shaped as the state itself rather than as a list of keys so both callers can
+* spread it: it seeds the map on mount and merges into it on every navigation,
+* and neither needs a loop of its own.
+*/
+function openAlong(nodes, pathname, prefix, into = {}) {
+	nodes.forEach((node, index) => {
+		if (node.type !== "group" || !containsActive(node, pathname)) return;
+		const key = `${prefix}-${index}`;
+		into[key] = true;
+		openAlong(node.children, pathname, key, into);
+	});
+	return into;
+}
 /** Whether the active page lives anywhere under this node. */
 function containsActive(node, pathname) {
 	switch (node.type) {
@@ -66,18 +84,22 @@ function containsActive(node, pathname) {
 * nothing prefetches locally whatever this says. Do not "fix" it back because
 * the network tab looks the same.
 */
-function DocsSidebar({ nav, pathname, Link, label = "Docs", expandGroup, collapseGroup, externalLink, className }) {
+function DocsSidebar({ nav, pathname, Link, label = "Docs", expandGroup, collapseGroup, externalLink, icons = true, className }) {
+	const iconMap = icons === false ? false : icons === true ? {} : icons;
 	const text = {
 		expandGroup: expandGroup ?? DEFAULT_SIDEBAR_LABELS.expandGroup,
 		collapseGroup: collapseGroup ?? DEFAULT_SIDEBAR_LABELS.collapseGroup,
 		externalLink: externalLink ?? DEFAULT_SIDEBAR_LABELS.externalLink
 	};
 	const baseId = useId();
-	const [toggled, setToggled] = useState({});
+	const [toggled, setToggled] = useState(() => openAlong(nav, pathname, baseId));
 	const lastPathname = useRef(pathname);
 	if (lastPathname.current !== pathname) {
 		lastPathname.current = pathname;
-		setToggled({});
+		setToggled((previous) => ({
+			...previous,
+			...openAlong(nav, pathname, baseId)
+		}));
 	}
 	const handleToggle = (key, isOpen) => {
 		setToggled((previous) => ({
@@ -108,6 +130,7 @@ function DocsSidebar({ nav, pathname, Link, label = "Docs", expandGroup, collaps
 			nodes: nav,
 			depth: 0,
 			keyPrefix: baseId,
+			icons: iconMap,
 			pathname,
 			Link,
 			toggled,
@@ -157,7 +180,7 @@ function scrollableAncestor(element) {
 	}
 	return null;
 }
-function NavList({ nodes, depth, keyPrefix, pathname, Link, toggled, onToggle, text, id }) {
+function NavList({ nodes, depth, keyPrefix, icons, pathname, Link, toggled, onToggle, text, id }) {
 	const holdsActive = nodes.some((node) => (node.type === "page" || node.type === "link" && !node.external) && isActiveHref(pathname, node.href));
 	return /* @__PURE__ */ jsx("ul", {
 		id,
@@ -175,31 +198,47 @@ function NavList({ nodes, depth, keyPrefix, pathname, Link, toggled, onToggle, t
 				}, key);
 				case "link": return /* @__PURE__ */ jsx("li", {
 					className: "wave-docs-sidebar__item",
-					children: /* @__PURE__ */ jsx(NavLink, {
+					children: /* @__PURE__ */ jsxs(NavLink, {
 						href: node.href,
 						isExternal: node.external,
 						isActive: !node.external && isActiveHref(pathname, node.href),
 						isNearby: holdsActive,
 						Link,
 						externalLink: text.externalLink,
-						children: node.title
+						icons,
+						children: [icons === false ? null : /* @__PURE__ */ jsx(NavIcon, {
+							type: "external",
+							name: node.icon,
+							icons
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wave-docs-sidebar__label",
+							children: node.title
+						})]
 					})
 				}, key);
 				case "page": return /* @__PURE__ */ jsx("li", {
 					className: "wave-docs-sidebar__item",
-					children: /* @__PURE__ */ jsx(NavLink, {
+					children: /* @__PURE__ */ jsxs(NavLink, {
 						href: node.href,
 						isExternal: false,
 						isActive: isActiveHref(pathname, node.href),
 						isNearby: holdsActive,
 						Link,
-						children: node.title
+						children: [icons === false ? null : /* @__PURE__ */ jsx(NavIcon, {
+							type: "file",
+							name: node.icon,
+							icons
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wave-docs-sidebar__label",
+							children: node.title
+						})]
 					})
 				}, key);
 				case "group": return /* @__PURE__ */ jsx(NavGroup, {
 					node,
 					itemKey: key,
 					depth,
+					icons,
 					pathname,
 					Link,
 					toggled,
@@ -211,7 +250,7 @@ function NavList({ nodes, depth, keyPrefix, pathname, Link, toggled, onToggle, t
 		})
 	});
 }
-function NavGroup({ node, itemKey, depth, pathname, Link, toggled, onToggle, text }) {
+function NavGroup({ node, itemKey, depth, icons, pathname, Link, toggled, onToggle, text }) {
 	const listId = `${itemKey}-list`;
 	const hasActive = containsActive(node, pathname);
 	const isOpen = toggled[itemKey] ?? hasActive;
@@ -227,17 +266,32 @@ function NavGroup({ node, itemKey, depth, pathname, Link, toggled, onToggle, tex
 				"aria-expanded": isOpen,
 				"aria-controls": isOpen ? listId : void 0,
 				onClick: () => onToggle(itemKey, !isOpen),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "wave-docs-sidebar__group-title",
-					children: node.title
-				}), /* @__PURE__ */ jsx(Chevron, { isOpen })]
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(NavLink, {
+				children: [
+					icons === false ? null : /* @__PURE__ */ jsx(NavIcon, {
+						type: "folder",
+						name: node.icon,
+						icons
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "wave-docs-sidebar__group-title",
+						children: node.title
+					}),
+					/* @__PURE__ */ jsx(Chevron, { isOpen })
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(NavLink, {
 				href: node.href,
 				isExternal: false,
 				isActive: isGroupActive,
 				isNearby: hasActive,
 				Link,
-				children: node.title
+				children: [icons === false ? null : /* @__PURE__ */ jsx(NavIcon, {
+					type: "folder",
+					name: node.icon,
+					icons
+				}), /* @__PURE__ */ jsx("span", {
+					className: "wave-docs-sidebar__label",
+					children: node.title
+				})]
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "wave-docs-sidebar__group-toggle",
@@ -252,6 +306,7 @@ function NavGroup({ node, itemKey, depth, pathname, Link, toggled, onToggle, tex
 			nodes: node.children,
 			depth: depth + 1,
 			keyPrefix: itemKey,
+			icons,
 			pathname,
 			Link,
 			toggled,
@@ -260,7 +315,7 @@ function NavGroup({ node, itemKey, depth, pathname, Link, toggled, onToggle, tex
 		}) : null]
 	});
 }
-function NavLink({ href, isExternal, isActive, isNearby = false, Link, externalLink = DEFAULT_SIDEBAR_LABELS.externalLink, children }) {
+function NavLink({ href, isExternal, isActive, isNearby = false, Link, externalLink = DEFAULT_SIDEBAR_LABELS.externalLink, icons = {}, children }) {
 	const className = "wave-docs-sidebar__link";
 	if (isExternal) return /* @__PURE__ */ jsxs("a", {
 		className,
@@ -269,7 +324,7 @@ function NavLink({ href, isExternal, isActive, isNearby = false, Link, externalL
 		rel: "noopener noreferrer",
 		children: [
 			children,
-			/* @__PURE__ */ jsx("svg", {
+			icons === false ? /* @__PURE__ */ jsx("svg", {
 				className: "wave-docs-sidebar__external",
 				"aria-hidden": "true",
 				focusable: "false",
@@ -281,8 +336,8 @@ function NavLink({ href, isExternal, isActive, isNearby = false, Link, externalL
 				strokeWidth: "2",
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				children: /* @__PURE__ */ jsx("path", { d: "M14 4h6v6M20 4l-8 8M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" })
-			}),
+				children: /* @__PURE__ */ jsx("path", { d: NAV_ICON_PATHS.external[0] })
+			}) : null,
 			/* @__PURE__ */ jsxs("span", {
 				className: "wave-docs-sr-only",
 				children: [" ", externalLink]
@@ -303,6 +358,58 @@ function NavLink({ href, isExternal, isActive, isNearby = false, Link, externalL
 		children
 	});
 }
+/**
+* The glyph at the head of a row: a folder for a group, a page for a page.
+*
+* Weight and a chevron were the only things telling a category from a page, and
+* where the two interleave — a `Reference` group directly above an `Internals`
+* page — that is not enough to scan a column of twenty. A silhouette is read
+* before any word is.
+*
+* An external link takes the third glyph, in the same leading slot. It used to
+* carry that mark at the *far* end of its row, which cost twice: the leading
+* slot then had to be an empty box to keep the column from going ragged, and
+* the trailing edge held two unrelated meanings — "opens elsewhere" on one row,
+* "expands" on the next. Leading is what a row *is*; trailing is what it
+* *does*. With the mark moved, the only thing at the far end of any row is a
+* chevron, which is what makes a group legible from across the column — and
+* leaves that edge free for a status dot or an overflow control later.
+*
+* ⚠️ THE VISUAL MARK MOVED AND THE ANNOUNCED ONE DID NOT. The sr-only "(opens
+* in a new tab)" stays after the link text, so the name is still read as
+* "GitHub, opens in a new tab" rather than the other way round.
+*
+* Inline SVG, matching `Chevron` and the external mark rather than a font or a
+* dependency — the package ships no icon set, and these two are as generic as
+* the chevron beside them.
+*/
+const NAV_ICON_PATHS = {
+	folder: ["M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"],
+	file: ["M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", "M14 2v4a2 2 0 0 0 2 2h4"],
+	external: ["M14 4h6v6M20 4l-8 8M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"]
+};
+function NavIcon({ type, name, icons }) {
+	const Custom = name === void 0 ? void 0 : icons[name];
+	if (Custom !== void 0) return /* @__PURE__ */ jsx("span", {
+		className: "wave-docs-sidebar__icon",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(Custom, {})
+	});
+	return /* @__PURE__ */ jsx("svg", {
+		className: "wave-docs-sidebar__icon",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 24 24",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: NAV_ICON_PATHS[type].map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+	});
+}
 function Chevron({ isOpen }) {
 	return /* @__PURE__ */ jsx("svg", {
 		className: "wave-docs-sidebar__chevron",

package/dist/source.js

@@ -381,17 +381,20 @@ function buildNav(dir, config) {
 		const visible = index && isVisibleIn(index.doc, config) ? index : void 0;
 		const title = groupTitle(child, visible?.doc);
 		const href = visible?.doc.href;
+		const icon = child.meta?.icon ?? visible?.doc.frontmatter.icon;
 		const group = {
 			type: "group",
 			title,
 			children,
-			...href !== void 0 ? { href } : {}
+			...href !== void 0 ? { href } : {},
+			...icon !== void 0 ? { icon } : {}
 		};
 		const node = children.length === 0 && visible !== void 0 && href !== void 0 ? {
 			type: "page",
 			title,
 			href,
-			slug: visible.doc.slug
+			slug: visible.doc.slug,
+			...icon !== void 0 ? { icon } : {}
 		} : group;
 		const order = visible?.doc.frontmatter.order;
 		entries.push({
@@ -403,7 +406,8 @@ function buildNav(dir, config) {
 				type: "page",
 				title: navTitle(visible.doc),
 				href,
-				slug: visible.doc.slug
+				slug: visible.doc.slug,
+				...visible.doc.frontmatter.icon !== void 0 ? { icon: visible.doc.frontmatter.icon } : {}
 			} } : {},
 			...order !== void 0 ? { order } : {}
 		});
@@ -420,7 +424,8 @@ function toPageEntry(page, config) {
 			type: "page",
 			title,
 			href: page.doc.href,
-			slug: page.doc.slug
+			slug: page.doc.slug,
+			...page.doc.frontmatter.icon !== void 0 ? { icon: page.doc.frontmatter.icon } : {}
 		},
 		...order !== void 0 ? { order } : {},
 		...isVisibleIn(page.doc, config) ? {} : { hidden: true }