mirror of
https://github.com/profullstack/logicsrc.git
synced 2026-10-02 12:54:03 +00:00
Breadcrumbs on every page, and a sidebar that unfolds to where you are (#170)
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. Claude-Session: https://claude.ai/code/session_014cmNRtR2vL1p89dbVQ7FZJ Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
eee9ce09c5
commit
df57b54bde
9 changed files with 310 additions and 32 deletions
46
apps/logicsrc-web/src/components/breadcrumbs.tsx
Normal file
46
apps/logicsrc-web/src/components/breadcrumbs.tsx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import type { ReactNode } from "react";
|
||||
import { crumbsFor } from "@/lib/crumbs";
|
||||
|
||||
/**
|
||||
* The trail at the top of every page, derived from the path and the spec
|
||||
* registry. Rendered on the server too (usePathname works during SSR), so the
|
||||
* HTML carries it, plus a BreadcrumbList for search engines.
|
||||
*/
|
||||
export function Breadcrumbs({ leaf }: { leaf?: string }): ReactNode {
|
||||
const pathname = usePathname() ?? "/";
|
||||
const crumbs = crumbsFor(pathname, leaf);
|
||||
if (crumbs.length === 0) return null;
|
||||
const site = "https://logicsrc.com";
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
itemListElement: crumbs.map((c, i) => ({
|
||||
"@type": "ListItem",
|
||||
position: i + 1,
|
||||
name: c.label,
|
||||
item: `${site}${c.href}`
|
||||
}))
|
||||
};
|
||||
return (
|
||||
<nav className="crumbs" aria-label="Breadcrumb">
|
||||
<ol>
|
||||
{crumbs.map((c, i) => {
|
||||
const last = i === crumbs.length - 1;
|
||||
return (
|
||||
<li key={c.href + c.label}>
|
||||
{last ? (
|
||||
<span aria-current="page">{c.label}</span>
|
||||
) : (
|
||||
<a href={c.href}>{c.label}</a>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
89
apps/logicsrc-web/src/components/side-nav.tsx
Normal file
89
apps/logicsrc-web/src/components/side-nav.tsx
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import type { ReactNode } from "react";
|
||||
import { NAV_GROUPS } from "@/lib/nav";
|
||||
import { FAMILIES, allSpecs, familyOfSpec, familyTree, type Family } from "@/lib/specs";
|
||||
|
||||
/**
|
||||
* The sidebar, broad first, drilling down in place. The four groups are
|
||||
* always shown. Under Specs, the family the current page belongs to unfolds
|
||||
* to its specs, and the spec the page belongs to unfolds to its blocks, so
|
||||
* the sidebar shows where you are and what is beside you without leaving the
|
||||
* page. Rendered on the server too, so the unfolded state is in the HTML.
|
||||
*/
|
||||
function currentFamily(pathname: string): { family?: Family; specSlug?: string } {
|
||||
const parts = pathname.split("/").filter(Boolean);
|
||||
if (parts[0] === "specs" && parts[1]) return { family: FAMILIES.find((f) => f.slug === parts[1]) };
|
||||
const slug =
|
||||
parts[0] === "docs" && parts[1]
|
||||
? allSpecs().find((x) => x.doc === `/docs/${parts[1]}`)?.slug
|
||||
: allSpecs().find((x) => x.landing === `/${parts[0]}`)?.slug;
|
||||
if (!slug) return {};
|
||||
return { family: familyOfSpec(slug), specSlug: slug };
|
||||
}
|
||||
|
||||
export function SideNav(): ReactNode {
|
||||
const pathname = usePathname() ?? "/";
|
||||
const { family: open, specSlug } = currentFamily(pathname);
|
||||
const openParent = specSlug ? allSpecs().find((x) => x.slug === specSlug)?.parent ?? specSlug : undefined;
|
||||
|
||||
const isCurrent = (href: string): boolean => href === pathname;
|
||||
|
||||
return (
|
||||
<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 family = group.label === "Specs" ? FAMILIES.find((f) => `/specs/${f.slug}` === item.href) : undefined;
|
||||
const unfolded = family && open && family.slug === open.slug;
|
||||
const active = isCurrent(item.href) || (family && open?.slug === family.slug && pathname.startsWith("/specs/"));
|
||||
return (
|
||||
<div key={item.href} className={unfolded ? "nav-branch open" : "nav-branch"}>
|
||||
<a
|
||||
href={item.href}
|
||||
className={active ? "active" : undefined}
|
||||
aria-current={isCurrent(item.href) ? "page" : undefined}
|
||||
target={item.external ? "_blank" : undefined}
|
||||
rel={item.external ? "noreferrer" : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
{unfolded ? (
|
||||
<div className="nav-children">
|
||||
{familyTree(family).map(({ spec, children }) => {
|
||||
const href = spec.landing ?? spec.doc ?? "/specs";
|
||||
const here = spec.slug === specSlug || children.some((c) => c.slug === specSlug);
|
||||
return (
|
||||
<div key={spec.slug}>
|
||||
<a href={href} className={spec.slug === specSlug ? "active" : undefined} aria-current={spec.slug === specSlug ? "page" : undefined}>
|
||||
{spec.name}
|
||||
</a>
|
||||
{children.length > 0 && (here || openParent === spec.slug) ? (
|
||||
<div className="nav-children">
|
||||
{children.map((c) => (
|
||||
<a
|
||||
key={c.slug}
|
||||
href={c.landing ?? c.doc ?? href}
|
||||
className={c.slug === specSlug ? "active" : undefined}
|
||||
aria-current={c.slug === specSlug ? "page" : undefined}
|
||||
>
|
||||
{c.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
@ -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={{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue