---
title: "💭 Glossary Web Component – David Bushell – Web Dev (UK)"
description: "!https://dbushell.com/2025/05/07/glossary-web-component/"
date: 2025-07-25
published: true
tags:
  - blog
  - thought
template: link
---


<div class="embed-card embed-card-external">
  <a href="https://dbushell.com/2025/05/07/glossary-web-component/" class="embed-card-link" target="_blank" rel="noopener noreferrer">
    <div class="embed-card-image">
      <img src="https://dbushell.com/images/articles/2025-05-07-glossary-web-component.png" alt="Glossary Web Component — The one where I put the hypercard in the hyperlink" loading="lazy">
    </div>
    <div class="embed-card-content">
      <div class="embed-card-title">Glossary Web Component</div>
      <div class="embed-card-description">The one where I put the hypercard in the hyperlink</div>
      <div class="embed-card-meta">dbushell.com &middot; dbushell.com</div>
    </div>
  </a>
</div>


I really enjoy David's Glossary, he has absolutely nailed it.  I'm working on one for myself that feels close but not quite.  I want to have a list of words that auto glossary to terms for me, maybe this is too much automation and I should just lean on wikilinks, i.e. <a href="/sick-wikilink-hover/" class="wikilink" data-title="sick wikilink hover" data-description="Today I set up some sick wikilink hover effects using tailwind see a-case-for-tailwindcss. When you hover over them they show an image preview of the link..." data-date="2024-05-30">sick wikilink hover</a>, they only take wrapping in brackets.   But like David mentions here its a lot of work to make sure they are right on all the older posts.  I think it needs to be done with js on my setup, I don't have no fancy wroker to modify html on the way out, I'm fully static right now, so i would need to do full rebuilds any time the glossary changes, i'm trying to cut down on the number of features that require full site rebuilds and potential cache issues.

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>
