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

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-alpha2",
     "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,111 @@
+import { BaseContentElement } from "docBaseElements/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

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

@@ -77,6 +77,16 @@ export type ApiNavItem = {
     id: string;
 };
 
+export type ZoominApiNavItem = {
+    bundle_id: string;
+    childEntries: Array<ZoominApiNavItem>;
+    id: string;
+    nav_path: string;
+    outputclasses: Array<string>;
+    title: string;
+    url: string;
+};
+
 export type ApiDocData = {
     available_languages: Array<ApiDocLanguage>;
     available_versions: Array<ApiDocVersion>;
@@ -115,3 +125,99 @@ export type ContentApiOptions = {
 };
 
 export type TocMap = { [key: string]: TreeNode };
+
+// ZOOMIN TYPES - START
+
+export type ZoominTocNode = {
+    id: string;
+    bundle_id: string;
+    childEntries?: Array<ZoominTocNode> | [];
+    nav_path: string;
+    outputclasses: Array<string>;
+    title: string;
+    url: string;
+    parent?: ZoominTocNode;
+    isExpanded?: boolean;
+};
+interface Attachment {
+    all_attachments: null;
+    topic_attachments: any[];
+}
+
+interface Dates {
+    "Added on": string;
+    "Created on": string;
+    "Initial upload": string;
+    "Updated on": string;
+}
+
+interface Label {
+    aliases: any[];
+    hidden: boolean;
+    isSubjectHead: boolean;
+    key: string;
+    navtitle: string;
+    outputclasses: any[];
+    subjectHeadId: string;
+    subjectheadNavtitle: string;
+    visibility: string;
+}
+
+interface Metadata {
+    description: string;
+    "mini-toc": string;
+    outputclasses: string;
+}
+
+interface ReadTimeData {
+    char_count: number;
+    img_count: number;
+    read_time: number;
+    video_links: string[];
+    word_count: number;
+}
+
+interface TopicCluster {
+    clustered_by: { enabled: boolean; type: string };
+    clustered_labels: any[];
+    clustered_topics: any[];
+    clustering_title: string;
+}
+
+export type ZoominDocContent = {
+    attachments: Attachment;
+    available_languages: string[];
+    breadcrumbs: any[];
+    breadcrumbs_html: string;
+    bundle_id: string;
+    bundle_landing_page: string;
+    bundle_subtitle: null;
+    bundle_title: string;
+    dates: Dates;
+    dislike_url: string;
+    dislikes: number;
+    es_archived_content: boolean;
+    is_in_fav: boolean;
+    is_liked: null;
+    is_watched: boolean;
+    keywords: string[];
+    labels: Label[];
+    labels_text: string;
+    like_url: string;
+    likes: number;
+    metadata: Metadata;
+    page_id: string;
+    page_key: number;
+    preprocessed_PDF: null;
+    rating: null;
+    read_time_data: ReadTimeData;
+    related_links: any[];
+    title: string;
+    topic_cluster: TopicCluster;
+    topic_html: string;
+    topic_language: string;
+    views: number;
+    your_rating: null;
+};
+
+// ZOOMIN TYPES - End

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

@@ -87,9 +87,7 @@ export class FetchContent {
         return json;
     }
 
-    private normalizeToc(
-        apiToc: Array<ApiNavItem>
-    ): {
+    private normalizeToc(apiToc: Array<ApiNavItem>): {
         tocMap: { [key: string]: TreeNode };
         normalizedToc: Array<TreeNode>;
     } {