Dynamic Glossary

website/docs/glossary/Glossary.mdx

@@ -0,0 +1,10 @@
+---
+id: interactive-glossary
+title: Interactive Glossary
+---
+
+import GlossaryTable from '@site/src/components/Glossary/GlossaryTable';
+
+Use the search boxes to filter by term or perform a fuzzy free-text search across definitions. Click any row or alias to deep-link to a glossary entry.
+
+<GlossaryTable />

website/package.json

@@ -26,9 +26,11 @@
     "clsx": "^2.1.1",
     "docusaurus-lunr-search": "^3.6.0",
     "dompurify": "^3.3.0",
+    "fuse.js": "^7.1.0",
+    "marked": "^12.0.2",
+    "prism-react-renderer": "^2.4.1",
     "quizdown-extended": "^1.2.1",
     "react": "^19.2.0",
-    "prism-react-renderer": "^2.4.1",
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",

website/src/components/Glossary/GlossaryTable.module.css

@@ -0,0 +1,151 @@
+.wrapper {
+  margin: 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.controls {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+}
+
+.control input {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.35rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-color);
+  color: var(--ifm-font-color-base);
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 0.5rem;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.termCol {
+  width: 28%;
+}
+
+.definitionCol {
+  width: 72%;
+}
+
+th,
+td {
+  padding: 0.85rem 1rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+th {
+  background: var(--ifm-color-emphasis-100);
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+}
+
+tr:nth-child(even) {
+  background: var(--ifm-table-stripe-background);
+}
+
+tbody tr {
+  scroll-margin-top: 72px; /* leave space for sticky header */
+}
+
+.activeRow {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: -2px;
+  background: var(--ifm-color-emphasis-100);
+}
+
+.termCell {
+  min-width: 180px;
+  font-weight: 700;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.termName {
+  margin-bottom: 0.25rem;
+}
+
+.definitionCell {
+  width: 100%;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 1rem;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.definitionText > :first-child {
+  margin-top: 0;
+}
+
+.definitionText > :last-child {
+  margin-bottom: 0;
+}
+
+.pillRow {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+}
+
+.pill:hover,
+.pill:focus-visible {
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.abbreviationPill {
+  font-weight: 700;
+}
+
+.aliasPill {
+  font-weight: 600;
+}
+
+.aliasLink {
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+.aliasLink:hover,
+.aliasLink:focus-visible {
+  color: var(--ifm-color-primary-darker);
+}