Adds basic tooltip integration. - #436
Draft
johnnymatthews wants to merge 1 commit into
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #350
Here's how it works, currently anyway:
The glossary stays in one place,
data/glossary.json, and everything reads from there. When Zola builds the site, a small template partial loads that file and drops it into every page as a plain JS object on window. So the terms and definitions ship with the HTML itself, no fetch calls, no extra build step, nothing to keep in sync. Add a term to the JSON and it just shows up everywhere on the next build.On the page, one vanilla JS file does the rest. It walks the text inside the article, matches any glossary term with a single whole-word regex (longest first, so "Merkle Tree" beats "Merkle"), and wraps each hit in a span. It skips code blocks, links, headings, and mermaid diagrams so it never breaks anything. The tooltip itself is one shared div: hover, tap, or keyboard focus shows it, Escape or tapping away closes it, and it flips or clamps to stay on screen. All styling is CSS using the existing theme variables, so dark and light mode both work.