Skip to content

Create a glossary of terms #16

Description

@webJose

Motivation

To provide easy access to term definitions and maybe links to where the term is explained in more detail.

Proposal

Create a glossary using a series of (small) Markdown files, one per glossary term. Its filename? The term's ID. Then create an inline component that renders it like an underlined (dash underline?) word/phrase that is clickable. Upon click, a popover appears with the term's definition and the optional links with a "Got it!" button that dismisses the popover.

Technical Details

It might be most beneficial to create a remark plug-in that actively searches for any of the glossary terms in MDAST text nodes that don't have an anchor parent (need to search for the node name as I don't know it). When a term is found, the MDAST is modified to insert an HTML node that represents the popover component detailed above.

The popover component would have to be imported in the Markdown components beforehand; Vite should tree-shake the import statement away if no glossary terms are found.

A better way might be to emit directives in the markdown so that remark-directive can pick them up and insert as HTML... although sounds more convoluted.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions