Try a new approach

site/content/docs/5.3/diff.md

@@ -0,0 +1,60 @@
+---
+layout: docs
+title: Diff
+description: Compare HTML classes from different Bootstrap versions
+group: diff
+aliases: "/diff/"
+---
+
+<script type="module">
+  // TODO: Use https://gohugo.io/functions/safejs/
+
+  const file = await fetch('/docs/5.3/assets/json/diffs/bootstrap-from-4.6.2-to-5.3.0.diff.json');
+  const text = await file.text();
+  
+  function getElements(divId, dataArray) {
+    const listContainer = document.getElementById(divId);
+    const listElement = document.createElement('ul');
+    for (const item of dataArray) {
+      const listItem = document.createElement('li');
+      listItem.textContent = item;
+      listElement.appendChild(listItem);
+    }
+    listContainer.appendChild(listElement);
+  }
+
+  getElements('removedElements', JSON.parse(text).removed);
+  getElements('addedElements', JSON.parse(text).added);
+</script>
+
+<form>
+  <div class="mb-3">
+    <label for="fromVersions" class="form-label">From</label>
+    <select class="form-select" aria-label="Default select example" id="fromVersions">
+      <option selected>Open this select menu</option>
+      <option value="1">v4.6.2</option>
+      <option value="2">v5.0.0</option>
+      <option value="3">v5.1.3</option>
+    </select>
+  </div>
+  <div class="mb-3">
+    <label for="toVersions" class="form-label">To</label>
+    <select class="form-select" aria-label="Default select example" id="toVersions">
+      <option selected>Open this select menu</option>
+      <option value="2">v5.0.0</option>
+      <option value="3">v5.1.3</option>
+      <option value="3">v5.1.3</option>
+    </select>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+
+# Deprecated classes
+
+<div id="removedElements">
+</div>
+
+# New classes
+
+<div id="addedElements">
+</div>

site/content/docs/5.3/glossary.md

@@ -10,21 +10,14 @@ toc: true
 ## Glossary
 
 {{< tables.inline >}}
-{{ $file := split (readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/data/glossary.data")) "\n" }}
 <table class="table">
   <tbody>
-    {{- range $file }}
-    {{ $class := split . ":" }}
+  {{ range $.Site.Data.bootstrap.classes }}
     <tr>
-      <td>
-      {{ if gt (len (string (index $class 1))) 1 }}
-      <a href="/docs/{{ $.Site.Params.docs_version }}/{{ (index $class 1) }}">{{ index $class 0 }}</a>
-      {{ else }}
-      <span>{{ index $class 0 }}</span>
-      {{ end }}
-      </td>
+      <td>{{ . }}</td>
     </tr>
-    {{- end -}}
+  {{ end }}
+  </ul>
   </tbody>
 </table>
 {{< /tables.inline >}}