@salesforcedevs/docs-components 0.0.1 → 0.0.2-edit

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

@@ -1,3 +1,4 @@
+/* eslint-disable @lwc/lwc/no-document-query */
 import { api, track } from "lwc";
 import { normalizeBoolean } from "dxUtils/normalizers";
 import { FetchContent } from "./utils";
@@ -7,30 +8,44 @@ import {
     DocVersion,
     TreeNode,
     Header,
+    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
 } from "./types";
-import { SearchSyncer } from "docUtils/SearchSyncer";
-import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
-import { Breadcrumb, Language } from "typings/custom";
+import { SearchSyncer } from "docUtils/searchSyncer";
+import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
+import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
+import { track as trackGTM } from "dxUtils/analytics";
+import DOMPurify from "dompurify";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
-const handleContentError = (error): void => console.log(error);
+const handleContentError = (error: any): void => console.log(error);
 
 const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     default: 7.7,
     "ja-jp": 12.5
 };
 
+const defaultSidebarFooter: SiderbarFooter = {
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
     lastHighlightedSearch: string;
+    internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
+    @api coveoAnalyticsToken!: string;
+    @api coveoSearchHub!: string;
+    @api hideFooter = false;
 
     @api
     get allLanguages(): Array<Language> {
@@ -53,21 +68,27 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private availableLanguages: Array<DocLanguage> = [];
-    private availableVersions: Array<DocVersion> = [];
-    private contentProvider: FetchContent;
+    @track private availableVersions: Array<DocVersion> = [];
+    private contentProvider?: FetchContent;
     private docContent = "";
-    private language: DocLanguage = null;
+    private language?: DocLanguage | null = null;
     private loaded = false;
+    private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
-    private sidebarContent: Array<TreeNode> = null;
-    private version: DocVersion = null;
+    private sidebarContent: Array<TreeNode> | null = null;
+    private version: DocVersion | null = null;
     private docTitle = "";
-    private analyticsEvent = "custEv_ctaLinkClick";
     private _pathName = "";
-    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
+    private latestVersion = false;
+    private previewVersion = false;
+
+    private get enableFooter(): boolean {
+        return !this.hideFooter;
+    }
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -107,6 +128,37 @@ export default class DocXmlContent extends LightningElementWithState<{
     });
     private _allLanguages: Array<Language> = [];
 
+    private get oldVersionInfo(): DocPhaseInfo | null {
+        let info = null;
+        if (!this.disableVersion) {
+            const currentGAVersion = this.versionOptions.find(
+                (version) => !version.url.includes(version.id)
+            );
+            if (currentGAVersion?.link?.href && this.version?.id) {
+                const versionNo = currentGAVersion.id;
+                /**
+                 * Need to show old version doc banner only if the version is less than the current ga version
+                 * We should not show it to the preview version whose version is more than ga
+                 **/
+                try {
+                    if (parseFloat(this.version.id) < parseFloat(versionNo)) {
+                        info = oldVersionDocInfo(currentGAVersion.link.href);
+                    } else if (
+                        parseFloat(this.version.id) > parseFloat(versionNo)
+                    ) {
+                        this.previewVersion = true;
+                    }
+                } catch (exception) {
+                    /* Ideally this use case should not happen, but just added to not to break the page*/
+                    console.warn(exception);
+                }
+            }
+        }
+        return info;
+    }
+
+    @track showVersionBanner = false;
+
     @track private pageReference: PageReference = {};
     @track breadcrumbs: Array<Breadcrumb> = [];
 
@@ -142,8 +194,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     renderedCallback(): void {
         this.setState({ internalLinkClicked: true });
         const urlSectionLink =
-            this.pageReference?.hash?.split("#").length > 1
-                ? this.pageReference.hash.split("#")[1]
+            this.pageReference?.hash?.split("#").length! > 1
+                ? this.pageReference.hash!.split("#")[1]
                 : this.pageReference?.hash;
 
         const contentEl = this.template.querySelector("doc-content");
@@ -156,6 +208,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (anchorEl) {
             anchorEl.scrollIntoView();
+
             this.setState({ internalLinkClicked: false });
         }
 
@@ -181,24 +234,17 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
-        if (this.listenerAttached) {
-            this.pageHeader.removeEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = false;
-        }
     }
 
-    private get languageId(): string {
-        return this.language.id.replace("-", "_");
+    private get languageId(): string | undefined {
+        return this.language?.id.replace("-", "_");
     }
 
-    private get releaseVersionId(): string {
-        return this.version.id;
+    private get releaseVersionId(): string | undefined {
+        return this.version?.id;
     }
 
-    private get deliverable(): string {
+    private get deliverable(): string | undefined {
         return this.pageReference.deliverable;
     }
 
@@ -219,7 +265,11 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: { locale: string; topicid: string; version?: string } = {
+        const config: {
+            locale?: string;
+            topicid?: string;
+            version?: string;
+        } = {
             locale: this.languageId,
             topicid: this.deliverable
         };
@@ -233,7 +283,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get pageHeader(): Header {
         if (!this._pageHeader) {
-            this._pageHeader = document.querySelector("doc-header");
+            this._pageHeader = document.querySelector("doc-header")!;
         }
 
         return this._pageHeader;
@@ -276,13 +326,24 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get breadcrumbPixelPerCharacter() {
         return (
-            PIXEL_PER_CHARACTER_MAP[this.language.id] ||
+            PIXEL_PER_CHARACTER_MAP[this.language!.id] ||
             PIXEL_PER_CHARACTER_MAP.default
         );
     }
 
-    private handlePopState = (): void =>
-        this.updatePageReference(this.getReferenceFromUrl());
+    private get ANALYTICS_PAYLOAD() {
+        return {
+            element_title: "version picker",
+            content_category: "cta"
+        };
+    }
+
+    private handlePopState = (event: PopStateEvent): void =>
+        this.updatePageReference(this.getReferenceFromUrl(), event);
+
+    handleDismissVersionBanner() {
+        this.showVersionBanner = false;
+    }
 
     handleSelect(event: CustomEvent<{ name: string }>): void {
         event.stopPropagation();
@@ -314,7 +375,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.updateUrl();
     }
 
-    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
+    handleLanguageChange = (event: any) => {
         if (this.language && this.language.id === event.detail) {
             return;
         }
@@ -322,12 +383,26 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.language = this.availableLanguages.find(
             ({ id }) => id === event.detail
         );
-        this.pageReference.docId = this.language.url;
+        this.pageReference.docId = this.language!.url;
+
+        trackGTM(event.target!, "custEv_ctaLinkClick", {
+            click_text: event.detail,
+            element_title: "language selector",
+            click_url: `${window.location.origin}${this.pageReferenceToString(
+                this.pageReference
+            )}`,
+            element_type: "link",
+            content_category: "cta"
+        });
+
         this.updateUrl();
         this.fetchDocument();
     };
 
-    updatePageReference(newPageReference: PageReference): void {
+    updatePageReference(
+        newPageReference: PageReference,
+        event: PopStateEvent | undefined = undefined
+    ): void {
         this.pageReference.hash = newPageReference.hash;
         this.pageReference.search = newPageReference.search;
 
@@ -344,13 +419,26 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         this.fetchContent()
-            .then(() => this.buildBreadcrumbs())
+            .then(() => {
+                this.buildBreadcrumbs();
+                document.body.scrollTop = event?.state?.scroll?.value || 0;
+            })
             .catch(handleContentError);
     }
 
+    private sanitizeUrlPart(part: string | undefined): string | undefined {
+        if (!part) {
+            return part;
+        }
+        return DOMPurify.sanitize(part);
+    }
+
     getReferenceFromUrl(): PageReference {
         const [page, docId, deliverable, contentDocumentId] =
-            window.location.pathname.substr(1).split("/");
+            window.location.pathname
+                .substr(1)
+                .split("/")
+                .map(this.sanitizeUrlPart);
 
         const { origin: domain, hash, search } = window.location;
 
@@ -359,9 +447,9 @@ export default class DocXmlContent extends LightningElementWithState<{
             deliverable,
             docId,
             domain,
-            hash,
+            hash: this.sanitizeUrlPart(hash),
             page,
-            search
+            search: this.sanitizeUrlPart(search)
         };
     }
 
@@ -379,8 +467,9 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: true
         });
-        const data = await this.contentProvider.fetchDocumentData(
-            this.pageReference.docId
+
+        const data = await this.contentProvider!.fetchDocumentData(
+            this.pageReference.docId!
         );
 
         // This could be a 404 scenario.
@@ -400,7 +489,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateHeaderAndSidebarFooter();
 
         this.buildBreadcrumbs();
 
@@ -409,6 +498,12 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.updateUrl(HistoryState.REPLACE_STATE);
         }
 
+        if (this.oldVersionInfo) {
+            this.showVersionBanner = true;
+        } else {
+            this.latestVersion = true;
+        }
+
         if (
             this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
             data.id
@@ -438,12 +533,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingContent: true
         });
-        const data = await this.contentProvider.fetchContent(
-            this.pageReference.deliverable,
-            this.pageReference.contentDocumentId,
+        const data = await this.contentProvider!.fetchContent(
+            this.pageReference.deliverable!,
+            this.pageReference.contentDocumentId!,
             {
-                language: this.language.id,
-                version: this.version.id
+                language: this.language!.id,
+                version: this.version!.id
             }
         );
 
@@ -452,11 +547,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.addMetatags();
 
             if (!this.pageReference.hash) {
-                document.querySelector("main")?.scrollIntoView({
-                    behavior: "smooth",
-                    block: "start",
-                    inline: "nearest"
-                });
+                document.body.scrollIntoView();
             }
         }
         this.setState({
@@ -464,7 +555,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeader(): void {
+    updateHeaderAndSidebarFooter(): void {
         if (!this.pageHeader) {
             return;
         }
@@ -474,20 +565,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
-        }
-
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
@@ -496,6 +579,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     updateUrl(method = HistoryState.PUSH_STATE): void {
+        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
         window.history[method](
             {},
             "docs",
@@ -511,23 +595,24 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        this.template
-            .querySelector("doc-content-layout")
-            ?.setSidebarInputValue(searchParam);
+        (this.refs.docContentLayout as any)?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
         const { page, docId, deliverable, contentDocumentId, hash, search } =
             reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
-            search
+            search!
         )}${this.normalizeHash(hash)}`;
     }
 
-    private normalizeUrlPart(part: string, sentinel: string): string {
+    private normalizeUrlPart(
+        part: string | undefined,
+        sentinel: string
+    ): string {
         return (
             (part &&
-                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
+                (part.startsWith(sentinel!) ? part : `${sentinel}${part}`)) ||
             ""
         );
     }
@@ -536,16 +621,16 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.normalizeUrlPart(search, "?");
     }
 
-    private normalizeHash(hash: string): string {
+    private normalizeHash(hash?: string): string {
         return this.normalizeUrlPart(hash, "#");
     }
 
     private getComposedTitle(
-        topicTitle: string | undefined,
+        topicTitle: string | null | undefined,
         docTitle: string | undefined
     ): string {
         // map to avoid duplicates
-        const titleMap = {};
+        const titleMap: { [key: string]: any } = {};
         if (topicTitle) {
             // sometimes the h1 tag text (which is docSubTitle) contains text with new line character. For e.g, "Bulk API 2.0 Older\n  Documentation",
             // here it contains \n in the text context which needs to be removed
@@ -580,10 +665,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.breadcrumbs && this.breadcrumbs.length > 1;
     }
 
-    get docContentStyle(): string {
-        return this.showBreadcrumbs ? "" : "margin-top: 48px";
-    }
-
     private buildBreadcrumbs(): void {
         const { contentDocumentId } = this.pageReference;
         if (!contentDocumentId) {
@@ -615,16 +696,30 @@ export default class DocXmlContent extends LightningElementWithState<{
         return [item];
     }
 
+    // This method take docId and drops the version from the docId.
+    // Example:
+    // Takes input string: docId = "atlas.en-us.238.0.b2b_b2c_comm_dev.meta"
+    // Output string: filteredDocId = "atlas.en-us.b2b_b2c_comm_dev.meta"
+    dropVersionFromDocId(docId: string): string {
+        if (!this.version?.id) {
+            return docId;
+        }
+
+        const curVersion = this.version.id + ".";
+        const filteredDocId = docId.replace(curVersion, "");
+        return filteredDocId;
+    }
+
     addMetatags(): void {
         const div = document.createElement("div");
-        div.innerHTML = this.docContent;
+        div.innerHTML = DOMPurify.sanitize(this.docContent);
         const docDescription = div.querySelector(".shortdesc")?.textContent;
         const topicTitle = div.querySelector("h1")?.textContent;
 
         const title = document.querySelector("title");
         const composedTitle = this.getComposedTitle(topicTitle, this.docTitle);
 
-        if (title) {
+        if (title && title.textContent) {
             title.textContent = composedTitle;
         }
         const metatitle = document.querySelector('meta[name="title"]');
@@ -646,14 +741,52 @@ export default class DocXmlContent extends LightningElementWithState<{
                 'link[rel="canonical"]'
             );
             if (metadescription) {
+                const copyPageReference = { ...this.pageReference };
+                copyPageReference.docId = copyPageReference.docId
+                    ? this.dropVersionFromDocId(copyPageReference.docId)
+                    : copyPageReference.docId;
                 metadescription.setAttribute(
                     "href",
                     window.location.protocol +
                         "//" +
                         window.location.host +
-                        this.pageReferenceToString(this.pageReference)
+                        this.pageReferenceToString(copyPageReference)
                 );
             }
         }
+
+        this.addNoIndexMetaForOlderDocVersions();
+    }
+
+    /**
+     * Method adds noindex, follow meta tag to the older Couch DB doc pages.
+     * Fixes W-12547462.
+     */
+    private addNoIndexMetaForOlderDocVersions() {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const headTag = document.getElementsByTagName("head");
+        // this checks if the selected version is not the latest version,
+        // then it adds the noindex, follow meta tag to the older version pages.
+        const versionId = this.version!.id;
+        const docId = this.pageReference.docId;
+
+        // SEO fix:
+        // Doc id without version id is always considered latest and should be used for SEO.
+        // Condition is to find a docId which includes version id,
+        // these docs are always considered as old and should not be indexed including the preview docs.
+        if (
+            headTag.length &&
+            docId?.includes(versionId) &&
+            !document.querySelector('meta[name="robots"]')
+        ) {
+            const robotsMeta = document.createElement("meta");
+            robotsMeta.setAttribute("name", "robots");
+            robotsMeta.setAttribute("content", "noindex, follow");
+            headTag[0].appendChild(robotsMeta);
+        }
+    }
+
+    private get showVersionPicker(): boolean {
+        return !this.disableVersion;
     }
 }

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -166,12 +166,12 @@ api-security-documentation {
     --anypoint-button-emphasis-high-active-background-color: transparent;
 
     /* api example */
-    --api-example-accent-color: rgb(250, 250, 250);
-    --api-example-background-color: rgb(250, 250, 250);
+    --api-example-accent-color: rgb(250 250 250);
+    --api-example-background-color: rgb(250 250 250);
     --api-example-title-background-color: transparent;
 
     /* code snippets */
-    --http-code-snippet-container-background-color: rgb(250, 250, 250);
+    --http-code-snippet-container-background-color: rgb(250 250 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
     /* prism */
@@ -208,7 +208,7 @@ api-endpoint-documentation {
     );
 
     /* description */
-    --api-endpoint-documentation-description-color: rgb(24, 24, 24);
+    --api-endpoint-documentation-description-color: rgb(24 24 24);
 }
 
 api-endpoint-documentation,
@@ -271,11 +271,11 @@ api-method-documentation {
     --api-method-documentation-http-method-label-font-weight: var(
         --dx-g-font-bold
     );
-    --api-method-documentation-description-color: rgb(24, 24, 24);
+    --api-method-documentation-description-color: rgb(24 24 24);
     --api-method-documentation-operation-id-color: var(--dx-g-gray-50);
 
     /* body */
-    --api-body-document-description-color: rgb(24, 24, 24);
+    --api-body-document-description-color: rgb(24 24 24);
     --api-body-document-media-type-selector-color: var(--dx-g-blue-vibrant-20);
     --api-body-document-media-type-selector-font-size: var(
         --amf-h8-mod-font-size