feat: add section navigation and embedded Archify diagrams

src/components/ArchifyDiagram/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function ArchifyDiagram({name, title}: {name: string; title: string}): React.ReactElement {
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(name)) throw new Error('Invalid diagram name');
+  const source = useBaseUrl(`/diagrams/${name}/`);
+  const json = useBaseUrl(`/diagrams/${name}.json`);
+  return <section className="archify-panel" aria-label={title}>
+    <div className="archify-toolbar"><strong>Interactive diagram</strong><div><a href={source} target="_blank" rel="noopener noreferrer">Open full viewer ↗</a><a href={json} download>JSON source ↓</a></div></div>
+    <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
+  </section>;
+}

src/css/custom.css

@@ -96,4 +96,9 @@
 a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offset: 4px;}
 @media (max-width: 996px) {.navbar {padding: 0 1rem;} .hero-inner {gap: 15px; padding: 55px 25px;} .hero-art {transform: scale(.85);} .start-section {padding: 35px 25px;} .start-card {padding: 20px;}}
 @media (max-width: 700px) {.hero-inner {grid-template-columns: 1fr; padding: 45px 24px;} .hero-art {display: none;} .hero-copy h1 {font-size: 3rem;} .start-grid {grid-template-columns: 1fr;} .section-heading {align-items: flex-start;} .foundation-badge {display: none;} .start-section {padding: 32px 20px;} .navbar__title {font-size: 1.45rem;} .navbar__logo {height: 31px;} .navbar input {max-width: 145px;} .button--lg {font-size: .95rem;} .button--primary span {padding-left: 10px;}}
+.archify-panel {border: 1px solid var(--line); margin: 1.5rem 0;}
+.archify-toolbar {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; background: var(--surface); font-size: .85rem;}
+.archify-toolbar div {display: flex; gap: 20px; flex-wrap: wrap;}
+.archify-panel iframe {width: 100%; height: 720px; border: 0; display: block; background: #f6f6f6;}
+@media (max-width: 700px) {.archify-panel iframe {height: 650px;}}
 @media (prefers-reduced-motion: reduce) {.start-card {transition: none;} .start-card:hover {transform: none;}}

src/pages/index.tsx

@@ -25,9 +25,9 @@ export default function Home(): React.ReactElement {
       <section className="start-section container" aria-labelledby="start-title">
         <div className="section-heading"><div><p className="eyebrow">START HERE</p><h2 id="start-title">A clear place to begin.</h2></div><span className="foundation-badge">Foundation · v1</span></div>
         <div className="start-grid">
-          <Link className="start-card" to="/docs/overview/"><span className="card-number">01 / OVERVIEW</span><h3>What’s here</h3><p>Understand the starting point and what remains to be decided.</p><span className="card-action">Read the overview <span aria-hidden="true">↗</span></span></Link>
-          <Link className="start-card" to="/docs/maintain/"><span className="card-number">02 / MAINTENANCE</span><h3>Make it your own</h3><p>Add a page, preview a change, and publish through the existing pipeline.</p><span className="card-action">Open the guide <span aria-hidden="true">↗</span></span></Link>
-          <Link className="start-card" to="/docs/reference/"><span className="card-number">03 / REFERENCE</span><h3>Under the hood</h3><p>Find the repository layout, build commands, and publication details.</p><span className="card-action">View the reference <span aria-hidden="true">↗</span></span></Link>
+          <Link className="start-card" to="/organization/structure/"><span className="card-number">01 / ORGANIZATION</span><h3>Organization</h3><p>Explore the structure workspace and its first interactive diagram.</p><span className="card-action">Explore structure <span aria-hidden="true">↗</span></span></Link>
+          <Link className="start-card" to="/strategy/"><span className="card-number">02 / STRATEGY</span><h3>Strategy</h3><p>Shape the direction for an AI-powered Eldorado.</p><span className="card-action">View the direction <span aria-hidden="true">↗</span></span></Link>
+          <Link className="start-card" to="/contribution/"><span className="card-number">03 / CONTRIBUTION</span><h3>Contribution</h3><p>Contribute evidence, proposals, documentation, and diagrams.</p><span className="card-action">Start contributing <span aria-hidden="true">↗</span></span></Link>
         </div>
         <aside className="scope-note"><span className="scope-symbol" aria-hidden="true">✦</span><div><strong>Shaping the direction.</strong><p>This space is dedicated to AI strategy and direction for Eldorado. Specific initiatives, priorities, and the roadmap remain to be defined.</p></div></aside>
       </section>