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>