docs: split organization pages and simplify diagram controls

src/components/ArchifyDiagram/index.tsx

@@ -1,10 +1,9 @@
 import React, {useEffect, useId, useRef, useState} from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-export default function ArchifyDiagram({name, title}: {name: string; title: string}): React.ReactElement {
+export default function ArchifyDiagram({name, title, compact = false}: {name: string; title: string; compact?: boolean}): 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`);
   const dialog = useRef<HTMLDialogElement>(null);
   const opener = useRef<HTMLButtonElement>(null);
   const headingId = useId();
@@ -17,8 +16,8 @@ export default function ArchifyDiagram({name, title}: {name: string; title: stri
     return () => {document.body.style.overflow = previousOverflow;};
   }, [expanded]);
   const close = () => {dialog.current?.close();};
-  return <section className="archify-panel" aria-label={title}>
-    <div className="archify-toolbar"><strong>Interactive diagram</strong><div><button ref={opener} type="button" className="archify-expand" onClick={() => setExpanded(true)}>Open full viewer ⛶</button><a href={json} download>JSON source ↓</a></div></div>
+  return <section className={`archify-panel${compact ? ' archify-panel--compact' : ''}`} aria-label={title}>
+    <div className="archify-toolbar"><button ref={opener} type="button" className="archify-expand" aria-label={`Expand ${title}`} title="Expand diagram" onClick={() => setExpanded(true)}><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5" /></svg></button></div>
     <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
     <dialog ref={dialog} className="archify-modal" aria-labelledby={headingId} onClose={() => {setExpanded(false); opener.current?.focus();}}>
       <div className="archify-modal-toolbar"><strong id={headingId}>{title}</strong><button type="button" onClick={close} autoFocus aria-label="Close full-screen diagram">Close ×</button></div>

src/css/custom.css

@@ -97,12 +97,12 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 @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-toolbar {display: flex; justify-content: flex-end; padding: 4px; background: var(--surface);}
 .archify-panel iframe {width: 100%; height: 720px; border: 0; display: block; background: #f6f6f6;}
+.archify-panel--compact > iframe {height: 500px;}
 @media (max-width: 700px) {.archify-panel iframe {height: 650px;}}
-.archify-expand {border: 0; padding: 0; background: transparent; color: var(--ifm-link-color); font: inherit; cursor: pointer;}
-.archify-expand:hover {text-decoration: underline;}
+.archify-expand {display: grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--ifm-link-color); cursor: pointer;}
+.archify-expand:hover {background: var(--ifm-hover-overlay);}
 .archify-modal {position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: var(--surface); color: var(--ifm-color-content);}
 .archify-modal[open] {display: flex; flex-direction: column;}
 .archify-modal::backdrop {background: #000b;}