@salesforcedevs/docs-components 1.3.209-alpha.10 → 1.3.209-alpha1

package/lwc.config.json

@@ -18,6 +18,8 @@
         "doc/overview",
         "doc/phase",
         "doc/xmlContent",
+        "doc/atlasContent",
+        "doc/zoominContent",
         "docUtils/utils"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.209-alpha.10",
+    "version": "1.3.209-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -13,6 +13,7 @@
     "dependencies": {
         "@api-components/amf-helper-mixin": "^4.5.17",
         "classnames": "^2.2.6",
+        "jsonwebtoken": "^9.0.2",
         "kagekiri": "^1.4.1",
         "lodash.orderby": "^4.6.0",
         "lodash.uniqby": "^4.7.0",
@@ -21,6 +22,7 @@
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
+        "@types/jsonwebtoken": "^9.0.5",
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },

package/src/modules/doc/atlasContent/atlasContent.css

@@ -0,0 +1,52 @@
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
+}
+
+doc-content-layout {
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) +
+            var(--dx-g-doc-header-main-nav-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) +
+                    var(--dx-g-doc-header-main-nav-height)
+            )
+    );
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-dropdown {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+}
+
+dx-dropdown > dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+
+    border-bottom: 1px dashed var(--border-color);
+}
+
+dx-dropdown > dx-button:hover {
+    --border-color: var(--button-primary-color-hover);
+}
+
+.document-pickers {
+    margin-left: auto;
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+doc-phase {
+    --doc-c-phase-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+}

package/src/modules/doc/atlasContent/atlasContent.html

@@ -0,0 +1,48 @@
+<template>
+    <doc-content-layout
+        if:true={loaded}
+        coveo-organization-id={coveoOrganizationId}
+        coveo-public-access-token={coveoPublicAccessToken}
+        coveo-analytics-token={coveoAnalyticsToken}
+        coveo-search-hub={coveoSearchHub}
+        coveo-advanced-query-config={coveoAdvancedQueryConfig}
+        sidebar-header="Pages"
+        sidebar-content={sidebarContent}
+        sidebar-value={sidebarValue}
+        onselect={handleSelect}
+        use-old-sidebar={useOldSidebar}
+    >
+        <doc-phase
+            slot="version-banner"
+            if:true={showVersionBanner}
+            doc-phase-info={oldVersionInfo}
+            icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
+        ></doc-phase>
+        <div slot="sidebar-header" class="document-pickers">
+            <dx-dropdown
+                data-type="version"
+                analytics-event="custEv_ctaLinkClick"
+                analytics-payload={ANALYTICS_PAYLOAD}
+                options={versionOptions}
+                value={version.id}
+                width="290px"
+            >
+                <dx-button variant="inline" disabled={disableVersion}>
+                    {version.releaseVersion}
+                </dx-button>
+            </dx-dropdown>
+        </div>
+        <doc-breadcrumbs
+            if:true={showBreadcrumbs}
+            breadcrumbs={breadcrumbs}
+            pixel-per-character={breadcrumbPixelPerCharacter}
+        ></doc-breadcrumbs>
+        <doc-content
+            docs-data={docContent}
+            page-reference={pageReference}
+            onnavclick={handleNavClick}
+        ></doc-content>
+    </doc-content-layout>
+</template>

package/src/modules/doc/atlasContent/atlasContent.ts

@@ -0,0 +1,116 @@
+import {BaseContentElement} from "../xmlContent/baseContentElement";
+import { HistoryState, PageReference } from "../xmlContent/types";
+
+export default class xmlContentElement extends BaseContentElement{
+    
+    getReferenceFromUrl(): PageReference {
+        const [
+            page,
+            docId,
+            deliverable,
+            contentDocumentId
+        ] = window.location.pathname.substr(1).split("/");
+
+        const { origin: domain, hash, search } = window.location;
+
+        return {
+            contentDocumentId,
+            deliverable,
+            docId,
+            domain,
+            hash,
+            page,
+            search
+        };
+    }
+
+    async fetchDocument(): Promise<void> {
+        this.setState({
+            isFetchingDocument: true
+        });
+        const data = await this.contentProvider!.fetchDocumentData(
+            this.pageReference.docId!
+        );
+
+        // This could be a 404 scenario.
+        if (!data) {
+            this.setState({
+                isFetchingDocument: false
+            });
+            return;
+        }
+
+        this.docTitle = data.docTitle;
+        this.tocMap = data.tocMap;
+        this.sidebarContent = data.toc;
+        this.version = data.version;
+        this.language = data.language;
+        this.availableLanguages = data.availableLanguages;
+        this.availableVersions = data.availableVersions;
+        this.pdfUrl = data.pdfUrl;
+
+        this.updateHeader();
+
+        this.buildBreadcrumbs();
+
+        if (this.pageReference.deliverable !== data.deliverable) {
+            this.pageReference.deliverable = data.deliverable;
+            this.updateUrl(HistoryState.REPLACE_STATE);
+        }
+
+        if (this.oldVersionInfo) {
+            this.showVersionBanner = true;
+        }
+
+        if (
+            this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
+            data.id
+        ) {
+            try {
+                await this.fetchContent();
+                this.setState({
+                    isFetchingDocument: false
+                });
+                return;
+            } catch (error) {
+                this.pageReference.contentDocumentId = `${data.id}.htm`;
+                this.pageReference.hash = "";
+                this.pageReference.search = "";
+                this.updateUrl(HistoryState.REPLACE_STATE);
+            }
+        }
+
+        this.docContent = data.content;
+        this.addMetatags();
+        this.setState({
+            isFetchingDocument: false
+        });
+    }
+
+    async fetchContent(): Promise<void> {
+        this.setState({
+            isFetchingContent: true
+        });
+        const data = await this.contentProvider!.fetchContent(
+            this.pageReference.deliverable!,
+            this.pageReference.contentDocumentId!,
+            {
+                language: this.language!.id,
+                version: this.version!.id
+            }
+        );
+
+        if (data) {
+            this.docContent = data.content;
+            this.addMetatags();
+
+            if (!this.pageReference.hash) {
+                document.body.scrollIntoView();
+            }
+        }
+        this.setState({
+            isFetchingContent: false
+        });
+    }
+    
+}

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

@@ -207,9 +207,9 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseEl = (
-            this.template.querySelector("[name=doc-phase]")! as any
-        ).assignedElements()[0] as HTMLSlotElement;
+        const docPhaseEl = (this.template.querySelector(
+            "[name=doc-phase]"
+        )! as any).assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -259,8 +259,9 @@ export default class ContentLayout extends LightningElement {
                 });
 
                 // Adjust right nav bar position when doc phase is present
-                const rightNavBarEl =
-                    this.template.querySelector(".right-nav-bar");
+                const rightNavBarEl = this.template.querySelector(
+                    ".right-nav-bar"
+                );
 
                 if (rightNavBarEl) {
                     rightNavBarEl.style.top = `${
@@ -322,17 +323,14 @@ export default class ContentLayout extends LightningElement {
     };
 
     onSlotChange(event: Event): void {
-        const slotElements = (
-            event.target as HTMLSlotElement
-        ).assignedElements();
+        const slotElements = (event.target as HTMLSlotElement).assignedElements();
 
         if (slotElements.length) {
             this.contentLoaded = true;
             const slotContentElement = slotElements[0];
-            const headingElements =
-                slotContentElement.ownerDocument?.getElementsByTagName(
-                    TOC_HEADER_TAG
-                );
+            const headingElements = slotContentElement.ownerDocument?.getElementsByTagName(
+                TOC_HEADER_TAG
+            );
 
             for (const headingElement of headingElements as any) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
@@ -392,9 +390,9 @@ export default class ContentLayout extends LightningElement {
                 globalNavEl?.offsetHeight +
                 contextNavEl?.offsetHeight;
 
-            const docPhaseEl = (
-                this.template.querySelector("[name=doc-phase]")! as any
-            ).assignedElements()[0] as HTMLSlotElement;
+            const docPhaseEl = (this.template.querySelector(
+                "[name=doc-phase]"
+            )! as any).assignedElements()[0] as HTMLSlotElement;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight