bbs.profullstack/logicsrc
1
0
Fork 0
mirror of https://github.com/profullstack/logicsrc.git synced 2026-10-02 12:54:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Breadcrumbs on every page, and a sidebar that unfolds to where you are

Browse source 
Anthony: "this needs a cookie crumb navbar, all pages need this with the
new IA" and "broad and drill down, I'm not seeing that in the sidebar".

lib/crumbs.ts derives the trail from the path and the spec registry, so
no page declares it: /openthreat is Home > Specs > Catalogs a site serves
about itself > OpenThreat, /opencpu adds OpenServer before OpenCPU,
/docs/openthreat ends in Specification, /docs/cli is Home > Docs > CLI,
a blog post passes its title as the leaf. components/breadcrumbs.tsx
renders it (server-rendered, with a BreadcrumbList JSON-LD) at the top
of every SiteShell page; the SPA routes rendered by page-markup.ts get
the same trail as a string.

components/side-nav.tsx replaces the flat sidebar: the four groups stay,
and under Specs the family the current page belongs to unfolds to its
specs, and the spec to its blocks, marked active. The home page string
marks the active entry for the SPA routes too.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014cmNRtR2vL1p89dbVQ7FZJ
This commit is contained in:
Anthony Ettinger 2026-09-13 04:00:39 +00:00
parent eee9ce09c5
commit f968b1e8e8
9 changed files with 310 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

39
apps/logicsrc-web/src/components/site-shell.tsx
View file

@ -1,18 +1,23 @@
import type { ReactNode } from "react";
import { renderInstallCommand } from "@/lib/install-command";
import { NAV_GROUPS } from "@/lib/nav";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { SideNav } from "@/components/side-nav";
/**
* The site chrome for every standalone route. The sidebar comes from
* lib/nav.ts, the same array the home page renders, so the two cannot drift.
* `active` is a label or an href; either marks the current entry.
* The site chrome for every standalone route: the sidebar that unfolds to
* where you are (components/side-nav.tsx), and the breadcrumb trail at the
* top of the page (components/breadcrumbs.tsx), both derived from the spec
* registry and the path. `crumbTitle` names the last crumb when the
* registry cannot, such as a blog post's title. `active` is kept for
* callers that still pass it and is no longer needed.
*/
export function SiteShell({
children,
active,
crumbTitle,
}: {
children: ReactNode;
active?: string;
crumbTitle?: string;
}): ReactNode {
return (
<main className="shell">
@ -27,30 +32,10 @@ export function SiteShell({
{/* Same markup the homepage uses, so the two can never drift apart.
Static content from a module constant -- nothing user-supplied. */}
<div dangerouslySetInnerHTML={{ __html: renderInstallCommand("rail") }} />
<nav aria-label="LogicSRC sections">
{NAV_GROUPS.map((group) => (
<div key={group.label} className="nav-group-block">
<span className="nav-group">{group.label}</span>
{group.items.map((item) => {
const isActive = item.label === active || item.href === active;
return (
<a
key={item.href}
href={item.href}
className={isActive ? "active" : undefined}
aria-current={isActive ? "page" : undefined}
target={item.external ? "_blank" : undefined}
rel={item.external ? "noreferrer" : undefined}
>
{item.label}
</a>
);
})}
</div>
))}
</nav>
<SideNav />
</aside>
<section className="workspace">
<Breadcrumbs leaf={crumbTitle} />
{children}
<footer
style={{