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>;
+}