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

Add services overview skeleton and navigation

Browse Source
This commit is contained in:
Alexa Amundson
2025-11-21 14:15:53 -06:00
parent c25508c350
commit 9c94c8407d
7 changed files with 165 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/config/services.js Normal file
View File

@@ -0,0 +1,7 @@
export const osServices = [
{ id: 'core', name: 'Core Service', description: 'Ledger and internal APIs.' },
{ id: 'operator', name: 'Operator Service', description: 'Jobs, queues, background workers.' },
{ 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: 'docs', name: 'Docs', description: 'You are here.' },
];

33
src/pages/_app.jsx
View File

@@ -1,5 +1,34 @@
import Link from 'next/link';
import '../styles/globals.css'; import '../styles/globals.css';
export default function App({ Component, pageProps }) { const navLinks = [
return <Component {...pageProps} />; { href: '/', label: 'Home' },
{ href: '/services', label: 'Services' },
{ href: '/architecture', label: 'Architecture' },
{ href: '/agents', label: 'Agents' },
{ 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>
);
}
export default function App({ Component, pageProps }) {
return (
<>
<Navigation />
<Component {...pageProps} />
</>
);
} }

27
src/pages/agents.jsx Normal file
View File

@@ -0,0 +1,27 @@
import Head from 'next/head';
export default function Agents() {
return (
<>
<Head>
<title>Agents | BlackRoad OS Docs</title>
<meta name="description" content="Agent protocols, roles, and integration guides." />
</Head>
<header className="hero">
<h1>Agents</h1>
<p>Docs for automated agents and how they plug into BlackRoad OS.</p>
</header>
<main className="main">
<section className="section">
<div className="card">
<h2>In progress</h2>
<p className="subtle">
We will outline agent responsibilities, APIs, and operational guardrails here. Stay tuned for connection
patterns, auth guidance, and runbooks.
</p>
</div>
</section>
</main>
</>
);
}

43
src/pages/architecture.jsx
View File

@@ -1,51 +1,26 @@
import Head from 'next/head'; import Head from 'next/head';
const layers = [
{
title: 'Frontends',
description: 'web (public site), console (Prism console), docs (this portal). These shape the user experience.',
},
{
title: 'Backends',
description: 'api (public gateway), core (engine and ledger), operator (workers and background jobs).',
},
{
title: 'Infrastructure',
description: 'Railway for deployment, Cloudflare and managed domains under *.blackroad.systems.',
},
];
export default function Architecture() { export default function Architecture() {
return ( return (
<> <>
<Head> <Head>
<title>Architecture | BlackRoad OS Docs</title> <title>Architecture | BlackRoad OS Docs</title>
<meta
name="description"
content="High-level system architecture for BlackRoad OS."
/>
</Head> </Head>
<header className="hero"> <header className="hero">
<h1>Architecture</h1> <h1>Architecture</h1>
<p>Understand how the system layers connect users to core capabilities.</p> <p>High-level layout of BlackRoad OS services and flows.</p>
</header> </header>
<main className="main"> <main className="main">
<section className="section"> <section className="section">
<h2>System layers</h2>
<div className="card-grid">
{layers.map((layer) => (
<div key={layer.title} className="card">
<h3>{layer.title}</h3>
<p className="subtle">{layer.description}</p>
</div>
))}
</div>
</section>
<section className="section">
<h2>Flow</h2>
<div className="card"> <div className="card">
<pre style={{ whiteSpace: 'pre-wrap', margin: 0, fontFamily: 'monospace' }}> <h2>Coming soon</h2>
{`Users → Web / Console / Docs → API → Core / Operator`} <p className="subtle">
</pre> Detailed diagrams and request flows are on the way. This section will cover how frontends, gateways,
<p className="subtle" style={{ marginTop: '12px' }}> and operators connect to the core ledger and shared infrastructure.
Traffic starts at frontends, funnels through the API gateway, and lands on core systems and operators.
</p> </p>
</div> </div>
</section> </section>

27
src/pages/deployment.jsx Normal file
View File

@@ -0,0 +1,27 @@
import Head from 'next/head';
export default function Deployment() {
return (
<>
<Head>
<title>Deployment | BlackRoad OS Docs</title>
<meta name="description" content="Deployment, environments, and rollout practices." />
</Head>
<header className="hero">
<h1>Deployment</h1>
<p>Operational practices for launching and maintaining BlackRoad OS services.</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>
</div>
</section>
</main>
</>
);
}

88
src/pages/services.jsx
View File

@@ -1,81 +1,43 @@
import Head from 'next/head'; import Head from 'next/head';
import { osServices } from '../config/services';
const services = [ const serviceLinks = {
{ web: 'https://blackroad.systems',
name: 'BlackRoad OS – Web', 'prism-console': 'https://console.blackroad.systems',
id: 'web', docs: 'https://docs.blackroad.systems',
baseUrl: 'https://blackroad.systems', };
description: 'Public-facing site for the platform.',
},
{
name: 'BlackRoad OS – Console',
id: 'console',
baseUrl: 'https://console.blackroad.systems',
description: 'Prism console for operators and administrators.',
},
{
name: 'BlackRoad OS – API',
id: 'api',
baseUrl: 'https://api.blackroad.systems',
description: 'Public gateway that exposes platform capabilities.',
},
{
name: 'BlackRoad OS – Core',
id: 'core',
baseUrl: 'https://core.blackroad.systems',
description: 'Engine, ledger, and internal backbone.',
},
{
name: 'BlackRoad OS – Operator',
id: 'operator',
baseUrl: 'https://operator.blackroad.systems',
description: 'Workers and background jobs.',
},
{
name: 'BlackRoad OS – Docs',
id: 'docs',
baseUrl: 'https://docs.blackroad.systems',
description: 'This documentation portal.',
},
];
export default function Services() { export default function Services() {
return ( return (
<> <>
<Head> <Head>
<title>Services | BlackRoad OS Docs</title> <title>Services | BlackRoad OS Docs</title>
<meta
name="description"
content="Service catalog with IDs, responsibilities, and entry points."
/>
</Head> </Head>
<header className="hero"> <header className="hero">
<h1>Services</h1> <h1>Services Overview</h1>
<p>Catalog of core services with IDs, base URLs, and responsibilities.</p> <p>Shared catalog of BlackRoad OS services and their roles.</p>
</header> </header>
<main className="main"> <main className="main">
<section className="section"> <section className="section">
<div className="card"> <div className="card-grid">
<table className="table"> {osServices.map((service) => (
<thead> <div key={service.id} className="card">
<tr> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<th>Name</th> <h3 style={{ margin: 0 }}>{service.name}</h3>
<th>ID</th>
<th>Base URL</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{services.map((service) => (
<tr key={service.id}>
<td>{service.name}</td>
<td>
<span className="badge">{service.id}</span> <span className="badge">{service.id}</span>
</td> </div>
<td> <p className="subtle" style={{ marginTop: '8px' }}>{service.description}</p>
<a href={service.baseUrl}>{service.baseUrl}</a> {serviceLinks[service.id] && (
</td> <p style={{ marginTop: '12px' }}>
<td>{service.description}</td> <a href={serviceLinks[service.id]}>Visit entry point →</a>
</tr> </p>
)}
</div>
))} ))}
</tbody>
</table>
</div> </div>
</section> </section>
</main> </main>

37
src/styles/globals.css
View File

@@ -22,6 +22,43 @@ 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);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(10px);
}
.nav-brand {
font-weight: 700;
letter-spacing: 0.01em;
}
.nav-links {
display: flex;
gap: 14px;
align-items: center;
}
.nav-link {
color: var(--text);
padding: 8px 12px;
border-radius: 8px;
border: 1px solid transparent;
}
.nav-link:hover {
text-decoration: none;
border-color: var(--border);
background: rgba(59, 130, 246, 0.08);
}
a { a {
color: var(--accent); color: var(--accent);
text-decoration: none; text-decoration: none;