Glossary

The Glossary component renders an alphabetically sorted definition list from a JSON data file.

Usage

import { Glossary } from '@/components/custom/glossary';

<Glossary />

The component reads from src/data/glossary.json and renders a <dl> (definition list) with terms sorted A-Z.

Data format

[
  {
    "term": "Admonition",
    "definition": "A callout block used to highlight notes, tips, warnings, and other important information."
  },
  {
    "term": "Design Token",
    "definition": "A named value (color, spacing, etc.) defined in JSON and converted to a CSS custom property."
  }
]

Each entry has:

• term — the word or phrase being defined
• definition — the definition text

Adding terms

Edit src/data/glossary.json to add, remove, or update terms. The component automatically sorts entries alphabetically — no need to maintain order in the file.

Rendered output

The component generates HTML like:

<dl>
  <dt>Admonition</dt>
  <dd>A callout block used to highlight notes, tips, warnings...</dd>
  <dt>Design Token</dt>
  <dd>A named value (color, spacing, etc.) defined in JSON...</dd>
</dl>

Customization

The component uses Infima CSS classes for styling. To customize the appearance, override styles in src/css/custom.css:

dl dt {
  font-weight: 600;
  color: var(--ifm-color-primary);
}

dl dd {
  margin-bottom: 1rem;
}