@salesforcedevs/docs-components 1.23.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.23.0",
+    "version": "1.26.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,7 +25,7 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "307353d10848546abcb801cbb4bc30c323e3e929",
+    "gitHead": "238d6ca8147bd1522bd67df8a653a03149eaedfd",
     "volta": {
         "node": "20.19.0",
         "yarn": "1.22.19"

package/src/modules/doc/contentLayout/contentLayout.html

@@ -29,6 +29,21 @@
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
+                    <div class="read" lwc:if={showReadingTime}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 52 52"
+                        >
+                            <g fill="#3e3e3c">
+                                <path
+                                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                                ></path>
+                            </g>
+                        </svg>
+                        {readingTime} minute read
+                    </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
                         lwc:if={shouldDisplayFeedback}

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -45,6 +45,8 @@ export default class ContentLayout extends LightningElement {
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
 
+    @api readingTime?: number;
+
     @api
     get breadcrumbs() {
         return this._breadcrumbs;
@@ -137,6 +139,10 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    get showReadingTime(): boolean {
+        return this.readingTime != null && this.readingTime > 0;
+    }
+
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -28,6 +28,21 @@
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
+                    <div class="read" lwc:if={showReadingTime}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 52 52"
+                        >
+                            <g fill="#3e3e3c">
+                                <path
+                                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                                ></path>
+                            </g>
+                        </svg>
+                        {readingTime} minute read
+                    </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
                         lwc:if={shouldDisplayFeedback}

package/src/modules/doc/xmlContent/xmlContent.html

@@ -12,6 +12,7 @@
         bail-href={sidebarFooterContent.bailHref}
         bail-label={sidebarFooterContent.bailLabel}
         show-footer={enableFooter}
+        reading-time={computedReadingTime}
     >
         <doc-phase
             slot="version-banner"

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -41,6 +41,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api hideFooter = false;
+    @api displayReadingTime = false;
 
     @api
     get allLanguages(): Array<Language> {
@@ -76,6 +77,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         return !this.hideFooter;
     }
 
+    private get computedReadingTime(): number | undefined {
+        return this.displayReadingTime ? this.readingTime : undefined;
+    }
+
     private searchSyncer = new SearchSyncer({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
@@ -147,6 +152,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     @track private pageReference: PageReference = {};
     @track breadcrumbs: Array<Breadcrumb> = [];
+    @track readingTime?: number;
 
     constructor() {
         super();
@@ -493,6 +499,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         this.docContent = data.content;
+        this.calculateReadingTime(data.content);
         this.addMetatags();
         this.setState({
             isFetchingDocument: false
@@ -515,6 +522,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (data) {
             this.docContent = data.content;
+            this.calculateReadingTime(data.content);
             this.addMetatags();
 
             if (!this.pageReference.hash) {
@@ -760,4 +768,32 @@ export default class DocXmlContent extends LightningElementWithState<{
     private get showVersionPicker(): boolean {
         return !this.disableVersion;
     }
+
+    private calculateReadingTime(content: string): void {
+        if (!this.displayReadingTime) {
+            this.readingTime = undefined;
+            return;
+        }
+
+        if (!content) {
+            this.readingTime = undefined;
+            return;
+        }
+
+        // Strip HTML tags and get text content
+        const div = document.createElement("div");
+        div.innerHTML = DOMPurify.sanitize(content);
+        const textContent = div.textContent || div.innerText || "";
+
+        // Count words (split by whitespace and filter out empty strings)
+        const wordCount = textContent
+            .trim()
+            .split(/\s+/)
+            .filter((word) => word.length > 0).length;
+
+        // Calculate reading time: (wordCount / 240) + 1, rounded
+        const readingTimeMinutes = Math.round(wordCount / 240 + 1);
+        this.readingTime =
+            readingTimeMinutes > 0 ? readingTimeMinutes : undefined;
+    }
 }

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -24,6 +24,19 @@ doc-breadcrumbs {
     margin-bottom: var(--dx-g-spacing-2xl);
 }
 
+.read {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-xs, 8px);
+    margin-bottom: var(--dx-g-spacing-lg, 16px);
+    color: var(--dx-g-gray-30, #3e3e3c);
+    font-size: var(--dx-g-font-size-sm, 14px);
+}
+
+.read svg {
+    flex-shrink: 0;
+}
+
 dx-sidebar,
 dx-sidebar-old {
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);