docs: DLT-3258 DLT-3259 improve sidebar search with logical keywords and fuzzy matching (#1174)

Author: francisrupert

apps/dialtone-documentation/docs/.vuepress/theme/components/Sidebar.vue

@@ -83,20 +83,26 @@ const focusedIndex = ref(-1);
 // Ref to the search input element
 const searchInput = ref(null);
 
+// Strip separators and case for fuzzy matching.
+const normalize = (str) => str.toLowerCase().replace(/[^a-z0-9]/g, '');
+
 // Recursive filter function for sidebar items
 const filterItems = (items, searchTerm) => {
   if (!searchTerm) return items;
 
-  const term = searchTerm.toLowerCase().trim();
+  const term = searchTerm.trim();
   if (!term) return items;
 
+  const normalizedTerm = normalize(term);
+  if (!normalizedTerm) return [];
+
   const filtered = [];
 
   items.forEach(item => {
     // Check if current item matches (text or keywords)
-    const itemMatches = item.text.toLowerCase().includes(term) ||
+    const itemMatches = normalize(item.text).includes(normalizedTerm) ||
       (item.keywords?.some(keyword =>
-        keyword.toLowerCase().includes(term),
+        normalize(keyword).includes(normalizedTerm),
       ) ?? false);
 
     // Recursively filter children if they exist

apps/dialtone-documentation/docs/utilities/borders/direction.md

@@ -1,7 +1,7 @@
 ---
 title: Border Directions
 description: Utilities for controlling an element's border.
-keywords: ["border top", "border bottom", "border left", "border right"]
+keywords: ["border top", "border bottom", "border left", "border right", "border inline start", "border inline end", "border block start", "border block end"]
 ---
 
 ## All Sides

apps/dialtone-documentation/docs/utilities/borders/divide-width.md

@@ -1,7 +1,7 @@
 ---
 title: Divide Width
 description: Utilities for controlling the divider width between an element's child items.
-keywords: ["divider width","separator width","divider size"]
+keywords: ["divider width","separator width","divider size","divide inline size","divide block size"]
 ---
 
 ## Default Width

apps/dialtone-documentation/docs/utilities/borders/radius.md

@@ -1,7 +1,7 @@
 ---
 title: Border Radius
 description: Utilities for controlling an element's border radius.
-keywords: ["rounded", "corner", "pill", "circle"]
+keywords: ["rounded", "corner", "pill", "circle", "radius start", "radius end"]
 ---
 
 ## All Corners

apps/dialtone-documentation/docs/utilities/borders/width.md

@@ -1,7 +1,7 @@
 ---
 title: Border Widths
 description: Utilities for controlling an element's border width.
-keywords: ["border size", "border thickness"]
+keywords: ["border size", "border thickness", "border inline size", "border block size"]
 ---
 
 ## All Sides

apps/dialtone-documentation/docs/utilities/layout/coordinates.md

@@ -1,7 +1,7 @@
 ---
 title: Coordinates
 description: Utility classes to assign an element’s top, right, bottom, or left position.
-keywords: ["top","right","bottom","left","inset","position offset"]
+keywords: ["top","right","bottom","left","inset","position offset","inset inline start","inset inline end","inset block start","inset block end"]
 ---
 
 ## Positive Coordinates

apps/dialtone-documentation/docs/utilities/sizing/height.md

@@ -1,7 +1,7 @@
 ---
 title: Height
 description: Utilities to control an element's height.
-keywords: ["size", "tall", "vh", "viewport height"]
+keywords: ["size", "tall", "vh", "viewport height", "block size", "block-size"]
 ---
 
 ## Layout stops

apps/dialtone-documentation/docs/utilities/sizing/max-height.md

@@ -1,7 +1,7 @@
 ---
 title: Max-height
 description: Utilities to control an element's maximum height.
-keywords: ["maximum height", "mxh"]
+keywords: ["maximum height", "mxh", "max block size", "max block-size"]
 ---
 
 ## Layout stops

apps/dialtone-documentation/docs/utilities/sizing/max-width.md

@@ -1,7 +1,7 @@
 ---
 title: Max-width
 description: Utilities to control an element's maximum width.
-keywords: ["maximum width", "mxw"]
+keywords: ["maximum width", "mxw", "max inline size", "max inline-size"]
 ---
 
 ## Layout stops

apps/dialtone-documentation/docs/utilities/sizing/min-height.md

@@ -1,7 +1,7 @@
 ---
 title: Min-height
 description: Utilities to control an element's minimum height.
-keywords: ["minimum height", "mnh"]
+keywords: ["minimum height", "mnh", "min block size", "min block-size"]
 ---
 
 ## Layout stops