@salesforcedevs/dx-components 1.3.206-alpha.10 → 1.3.206-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.206-alpha.10",
+    "version": "1.3.206-alpha.12",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/searchResults/searchResults.css

@@ -391,3 +391,8 @@ a.CoveoResultLink,
     gap: 12px;
     margin-bottom: var(--dx-g-spacing-smd);
 }
+
+.breadcrumb {
+    color: #555;
+    font-size: var(--dx-g-text-xs);
+}

package/src/modules/dx/searchResults/searchResults.ts

@@ -47,8 +47,8 @@ const resultsTemplatesInnerHtml = `
         <div class="dx-result">
             <div class="dx-result-info">
                 <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
-                <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
                 <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
             </div>
             <p class="dx-result-title">
                 <a
@@ -67,8 +67,8 @@ const resultsTemplatesInnerHtml = `
             <div class="dx-result">
                 <div class="dx-result-info">
                     <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
-                    <span class="CoveoFieldValue" data-field="@uri" data-helper="breadcrumbs" data-html-value="true"></span>
                     <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
+                    <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
                 </div>
                 <p class="dx-result-title">
                     <a class="CoveoResultLink"></a>
@@ -119,9 +119,12 @@ const buildTemplateHelperUriBreadcrumbs = (value: string) => {
     const url = new URL(value);
 
     // Only generate breadcrumbs for external links using the URL
+    const hostnamePattern =
+        /^((www\.)?(youtube\.com|developer\.salesforce\.com|developer-website-s\.herokuapp\.com))$/;
     if (
-        url.hostname === "developer.salesforce.com" ||
-        url.hostname === "developer-website-s.herokuapp.com"
+        hostnamePattern.test(url.hostname) &&
+        !/\/blogs|\/podcast/.test(url.pathname) &&
+        !/\/docs\/component-library/.test(url.pathname)
     ) {
         return "";
     }
@@ -129,19 +132,39 @@ const buildTemplateHelperUriBreadcrumbs = (value: string) => {
     let parts = url.pathname.split("/").filter((part) => part !== "");
 
     // Remove language prefix from trailhead URLs
-    if (url.hostname === "trailhead.salesforce.com") {
-        parts = parts.slice(1);
+    if (
+        url.hostname === "trailhead.salesforce.com" ||
+        url.hostname === "dev.trailhead.salesforce.com"
+    ) {
+        parts = parts
+            .slice(1)
+            .filter((part) => part !== "content" && part !== "learn");
     }
 
     const breadcrumbs = processParts(parts);
 
-    breadcrumbs.unshift(`<span class="breadcrumb-item">${url.hostname}</span>`);
+    // if url.hostname is developer.salesforce.com or developer-website-s.herokuapp.com, remove the first part
+    if (
+        url.hostname !== "developer.salesforce.com" &&
+        url.hostname !== "developer-website-s.herokuapp.com"
+    ) {
+        breadcrumbs.unshift(
+            `<span class="breadcrumb-item">${url.hostname}</span>`
+        );
 
-    return `
+        return `
             <span class="breadcrumb">
                 ${breadcrumbs.join(" / ")}
             </span>
         `;
+    } else if (breadcrumbs.length === 1) {
+        return "";
+    }
+
+    // remove the last breadcrumb item (since the search result is the last item anyway)
+    breadcrumbs.pop();
+
+    return `<span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>`;
 };
 
 const buildTemplateHelperBreadcrumbs = (value: string) => {
@@ -154,16 +177,18 @@ const buildTemplateHelperBreadcrumbs = (value: string) => {
         parts = value.split("/").filter((part) => part !== "");
     }
 
+    // Don't show breadcrumbs if there's only one part or two (two because we remove the last item in the next step)
     if (parts.length === 1) {
         return "";
     }
 
     const breadcrumbs = processParts(parts);
 
+    // Remove the last breadcrumb item
+    breadcrumbs.pop();
+
     return `
-            <span class="breadcrumb">
-                ${breadcrumbs.join(" / ")}
-            </span>
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>
         `;
 };
 
@@ -282,7 +307,7 @@ export default class SearchResults extends LightningElement {
 
             window.onresize = debounce(() => {
                 this.processBreadcrumbs(root);
-            }, 25);
+            }, 10);
         });
     }