blackroad-os/blackroad-os-docs
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix JSX structure and dependency gaps

Browse Source
This commit is contained in:
Alexa Amundson
2025-11-21 18:47:40 -06:00
parent 29f949a2a8
commit 2f5c645d24
9 changed files with 2952 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2902
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -23,10 +23,12 @@
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },
"devDependencies": { "devDependencies": {
"@docusaurus/types": "^3.9.2",
"@types/node": "^24.10.1", "@types/node": "^24.10.1",
"@types/react": "^19.2.6", "@types/react": "^19.2.6",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-config-next": "^14.2.4", "eslint-config-next": "^14.2.4",
"prism-react-renderer": "^2.4.1",
"typescript": "^5.9.3" "typescript": "^5.9.3"
} }
} }

6
src/config/services.ts
View File

@@ -3,9 +3,5 @@ export const osServices = [
{ id: "operator", name: "Operator Service", description: "Jobs, queues, background workers." }, { id: "operator", name: "Operator Service", description: "Jobs, queues, background workers." },
{ id: "web", name: "Web Frontend", description: "Public-facing site and status." }, { id: "web", name: "Web Frontend", description: "Public-facing site and status." },
{ id: "prism-console", name: "Prism Console", description: "Internal console for monitoring and control." }, { id: "prism-console", name: "Prism Console", description: "Internal console for monitoring and control." },
{ id: "docs", name: "Docs", description: "You are here." } { id: "docs", name: "Docs", description: "You are here." },
{ id: "operator", name: "Operator Service", description: "Jobs, queues, workers." },
{ id: "web", name: "Web Frontend", description: "Public site and status." },
{ id: "prism-console", name: "Prism Console", description: "Internal operator console." },
{ id: "docs", name: "Docs", description: "Documentation and knowledge base." }
]; ];

16
src/pages/_app.jsx
View File

@@ -9,18 +9,6 @@ const navLinks = [
{ href: '/deployment', label: 'Deployment' }, { href: '/deployment', label: 'Deployment' },
]; ];
function Navigation() {
return (
<nav className="nav">
<div className="nav-brand">BlackRoad OS Docs</div>
<div className="nav-links">
{navLinks.map((link) => (
<Link key={link.href} href={link.href} className="nav-link">
{link.label}
</Link>
))}
</div>
</nav>
function AppLayout({ children }) { function AppLayout({ children }) {
return ( return (
<div className="app-shell"> <div className="app-shell">
@@ -41,10 +29,6 @@ function AppLayout({ children }) {
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
return ( return (
<>
<Navigation />
<Component {...pageProps} />
</>
<AppLayout> <AppLayout>
<Component {...pageProps} /> <Component {...pageProps} />
</AppLayout> </AppLayout>

20
src/pages/agents.jsx
View File

@@ -8,15 +8,10 @@ export default function Agents() {
<title>Agents | BlackRoad OS Docs</title> <title>Agents | BlackRoad OS Docs</title>
<meta name="description" content="Agent protocols, roles, and integration guides." /> <meta name="description" content="Agent protocols, roles, and integration guides." />
</Head> </Head>
<header className="hero"> <DocsLayout
<h1>Agents</h1> title="Agents"
<p>Docs for automated agents and how they plug into BlackRoad OS.</p> intro="How automated agents and the Operator service coordinate work across the platform."
</Head> >
<header className="hero">
<h1>Agents</h1>
<p>Background actors and automation that extend BlackRoad OS.</p>
</header>
<main className="main">
<section className="section"> <section className="section">
<div className="card"> <div className="card">
<h2>In progress</h2> <h2>In progress</h2>
@@ -27,12 +22,7 @@ export default function Agents() {
<p className="subtle">Profiles, behaviors, and operating guides for agents will land here soon.</p> <p className="subtle">Profiles, behaviors, and operating guides for agents will land here soon.</p>
</div> </div>
</section> </section>
</main>
</Head>
<DocsLayout
title="Agents"
intro="How automated agents and the Operator service coordinate work across the platform."
>
<section className="section"> <section className="section">
<h2>Agent orchestration</h2> <h2>Agent orchestration</h2>
<p className="subtle"> <p className="subtle">

34
src/pages/architecture.jsx
View File

@@ -40,30 +40,26 @@ export default function Architecture() {
<> <>
<Head> <Head>
<title>Architecture | BlackRoad OS Docs</title> <title>Architecture | BlackRoad OS Docs</title>
<meta <meta name="description" content="High-level system architecture for BlackRoad OS." />
name="description"
content="High-level system architecture for BlackRoad OS."
/>
</Head> </Head>
<header className="hero">
<h1>Architecture</h1>
<p>High-level layout of BlackRoad OS services and flows.</p>
<p>High-level maps and diagrams that show how BlackRoad OS fits together.</p>
</header>
<main className="main">
<section className="section">
<div className="card">
<h2>Coming soon</h2>
<p className="subtle">
Detailed diagrams and request flows are on the way. This section will cover how frontends, gateways,
and operators connect to the core ledger and shared infrastructure.
<p className="subtle">
This section will outline the layers, data flows, and handoffs between services. Detailed walkthroughs
and diagrams are on the way.
<DocsLayout <DocsLayout
title="Architecture" title="Architecture"
intro="How the layers of BlackRoad OS stitch together across frontends, services, and operators." intro="How the layers of BlackRoad OS stitch together across frontends, services, and operators."
> >
<section className="section">
<div className="card">
<h2>Overview</h2>
<p className="subtle">
High-level maps and diagrams show how BlackRoad OS fits together. Detailed walkthroughs and connection
flows will follow as the platform grows.
</p>
<p className="subtle">
Frontends, gateways, and operators connect to the core ledger and shared infrastructure through predictable
edges and shared conventions.
</p>
</div>
</section>
<section className="section"> <section className="section">
<h2>Layers at a glance</h2> <h2>Layers at a glance</h2>
<div className="card-grid"> <div className="card-grid">

21
src/pages/deployment.jsx
View File

@@ -8,27 +8,6 @@ export default function Deployment() {
<title>Deployment | BlackRoad OS Docs</title> <title>Deployment | BlackRoad OS Docs</title>
<meta name="description" content="Deployment, environments, and rollout practices." /> <meta name="description" content="Deployment, environments, and rollout practices." />
</Head> </Head>
<header className="hero">
<h1>Deployment</h1>
<p>Operational practices for launching and maintaining BlackRoad OS services.</p>
</Head>
<header className="hero">
<h1>Deployment</h1>
<p>Guides for environments, release procedures, and operational readiness.</p>
</header>
<main className="main">
<section className="section">
<div className="card">
<h2>Details coming soon</h2>
<p className="subtle">
Environment layouts, CI/CD pipelines, and rollback playbooks will live here so teams can ship changes with
confidence.
</p>
<p className="subtle">Playbooks and deployment diagrams will be documented here.</p>
</div>
</section>
</main>
</Head>
<DocsLayout <DocsLayout
title="Deployment" title="Deployment"
intro="High-level look at how BlackRoad OS services move from source to runtime." intro="High-level look at how BlackRoad OS services move from source to runtime."

29
src/pages/services.jsx
View File

@@ -1,4 +1,5 @@
import Head from 'next/head'; import Head from 'next/head';
import DocsLayout from '../components/DocsLayout';
import { osServices } from '../config/services'; import { osServices } from '../config/services';
const serviceLinks = { const serviceLinks = {
@@ -6,8 +7,6 @@ const serviceLinks = {
'prism-console': 'https://console.blackroad.systems', 'prism-console': 'https://console.blackroad.systems',
docs: 'https://docs.blackroad.systems', docs: 'https://docs.blackroad.systems',
}; };
import DocsLayout from '../components/DocsLayout';
import { osServices } from '../config/services';
const responsibilities = { const responsibilities = {
core: 'Maintains ledger, internal state, and foundational APIs.', core: 'Maintains ledger, internal state, and foundational APIs.',
@@ -29,18 +28,10 @@ export default function Services() {
content="Service catalog with IDs, responsibilities, and entry points." content="Service catalog with IDs, responsibilities, and entry points."
/> />
</Head> </Head>
<header className="hero"> <DocsLayout
<h1>Services Overview</h1> title="Services"
<p>Shared catalog of BlackRoad OS services and their roles.</p> intro="Catalog of the core BlackRoad OS services, their responsibilities, and the shared endpoints exposed by each."
<title>Services Overview | BlackRoad OS Docs</title> >
</Head>
<header className="hero">
<h1>Services Overview</h1>
<p>
A shared catalog of BlackRoad OS services with their IDs and responsibilities.
</p>
</header>
<main className="main">
<section className="section"> <section className="section">
<div className="card-grid"> <div className="card-grid">
{osServices.map((service) => ( {osServices.map((service) => (
@@ -55,18 +46,14 @@ export default function Services() {
<a href={serviceLinks[service.id]}>Visit entry point →</a> <a href={serviceLinks[service.id]}>Visit entry point →</a>
</p> </p>
)} )}
<div className="badge">{service.id}</div>
<h3 style={{ marginBottom: '6px' }}>{service.name}</h3>
<p className="subtle" style={{ marginTop: 0 }}>{service.description}</p>
<p className="subtle" style={{ marginTop: '12px' }}> <p className="subtle" style={{ marginTop: '12px' }}>
Links and deeper docs coming soon. Links and deeper docs coming soon.
</p> </p>
</div> </div>
))} ))}
<DocsLayout </div>
title="Services" </section>
intro="Catalog of the core BlackRoad OS services, their responsibilities, and the shared endpoints exposed by each."
>
<section className="section"> <section className="section">
<div className="card"> <div className="card">
<table className="table"> <table className="table">

57
src/styles/globals.css
View File

@@ -22,12 +22,6 @@ body {
min-height: 100vh; min-height: 100vh;
} }
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: rgba(11, 16, 33, 0.85);
.app-shell { .app-shell {
min-height: 100vh; min-height: 100vh;
} }
@@ -42,7 +36,6 @@ body {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
backdrop-filter: blur(10px);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
@@ -52,14 +45,31 @@ body {
} }
.nav-links { .nav-links {
list-style: none;
display: flex; display: flex;
gap: 14px; gap: 14px;
align-items: center; align-items: center;
padding: 0;
margin: 0;
} }
.nav-link { .nav-links li a {
color: var(--text); color: var(--text);
padding: 8px 12px; padding: 8px 10px;
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-links li a:hover {
background: rgba(59, 130, 246, 0.15);
color: #fff;
text-decoration: none;
}
.layout-content {
padding-top: 12px;
}
.docs-shell { .docs-shell {
display: grid; display: grid;
grid-template-columns: 240px 1fr; grid-template-columns: 240px 1fr;
@@ -97,35 +107,6 @@ body {
border: 1px solid transparent; border: 1px solid transparent;
} }
.nav-link:hover {
text-decoration: none;
border-color: var(--border);
background: rgba(59, 130, 246, 0.08);
letter-spacing: 0.5px;
}
.nav-links {
list-style: none;
display: flex;
gap: 14px;
padding: 0;
margin: 0;
}
.nav-links li a {
color: var(--text);
padding: 8px 10px;
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease;
}
.nav-links li a:hover {
background: rgba(59, 130, 246, 0.15);
color: #fff;
}
.layout-content {
padding-top: 12px;
.docs-nav li.active a { .docs-nav li.active a {
font-weight: 700; font-weight: 700;
border-color: var(--accent); border-color: var(--accent);