@salesforcedevs/docs-components 0.56.2-seo-test10 → 0.56.2

package/src/modules/doc/amfReference/route-meta.ts

@@ -0,0 +1,22 @@
+/**
+ * Represents the URL reference meta on Reference page.
+ * Contains information on selected Reference ID, Topic ID, and Topic Type
+ * separated by ":"
+ */
+export class RouteMeta {
+    meta: string;
+    referenceId = "";
+    topicId = "";
+    type = "";
+
+    constructor(meta: string) {
+        this.meta = meta;
+
+        if (meta && meta.includes(":")) {
+            const [referenceId, type, topicId] = meta.split(":");
+            this.referenceId = referenceId;
+            this.topicId = topicId || type;
+            this.type = type;
+        }
+    }
+}

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

@@ -2,7 +2,6 @@ import { Json } from "typings/custom";
 
 export interface AmfTopicType {
     referenceId: string;
-    parentReferencePath: string;
     amfId: string;
     elementId: string;
     type: string;
@@ -11,7 +10,6 @@ export interface AmfTopicType {
 export interface AmfMetadataTopic extends AmfTopicType {
     meta: string;
     identifier: string;
-    navTitle?: string;
 }
 
 export interface AmfMetaTopicType extends AmfTopicType {
@@ -55,37 +53,11 @@ export type DocPhaseEntry = {
     body: string;
 };
 
-export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
-
-/**
- * Represents parsed topic for the sidebar.
- */
-export interface ParsedMarkdownTopic {
-    label: string;
-    name: string;
-    children: ParsedMarkdownTopic[];
-    link?: {
-        href: string;
-        target?: string;
-    };
-}
-
-export interface AmfConfig {
+export interface AmfConfig extends AmfModelRecord {
     id: string;
+    amf: string;
     version?: string;
     docPhase?: DocPhaseEntry;
-    title: string;
-    href: string;
-    referenceType: ReferenceType;
-
-    // determines if a reference config is the current active and selected one.
-    isSelected: boolean;
-
-    // required for spec based references
-    amf?: string;
-
-    // required for markdown based references
-    topic?: ParsedMarkdownTopic;
 }
 
 export interface ParsedTopicModel {
@@ -112,22 +84,10 @@ export interface ReferenceVersion {
     label: string;
     deprecated?: boolean;
     selected?: boolean;
-    link: {
-        href: string;
-    };
 }
 
 export interface ReferenceSetConfig {
-    refId?: string;
     versionToRefMap?: Map<string, Array<AmfConfig>>;
     refList: Array<AmfConfig>;
-    versions: Array<ReferenceVersion>;
-}
-
-export interface RouteMeta {
-    meta: string;
-    referenceId: string;
-    topicId: string;
-    //type is only for spec based references
-    type?: string;
+    versions?: Array<ReferenceVersion>;
 }

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

@@ -20,7 +20,6 @@ const HIGHLIGHTABLE_SELECTOR = [
     "th",
     "td"
 ].join(",");
-const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class ContentLayout extends LightningElement {
     @api sidebarValue: string;
@@ -96,8 +95,6 @@ export default class ContentLayout extends LightningElement {
         target: window
     });
     private tocValue?: string = undefined;
-    private observerTimerId = null;
-    private didScrollToSelectedHash = false;
 
     get showToc(): boolean {
         return this.tocOptions && this.tocOptions.length > 0;
@@ -122,18 +119,6 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    renderedCallback(): void {
-        /**
-         * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
-         * Also we are considering recent renderedCallback
-         */
-        this.clearRenderObserverTimer();
-        this.observerTimerId = setTimeout(
-            this.attachInteractionObserver,
-            OBSERVER_ATTACH_WAIT_TIME
-        );
-    }
-
     disconnectedCallback(): void {
         this.disconnectObserver();
         window.removeEventListener(
@@ -141,25 +126,19 @@ export default class ContentLayout extends LightningElement {
             this.updateHighlighted
         );
         this.searchSyncer.dispose();
-        this.clearRenderObserverTimer();
     }
 
-    clearRenderObserverTimer = () => {
-        if (this.observerTimerId) {
-            clearTimeout(this.observerTimerId);
-        }
-    };
-
     updateHighlighted = (event: Event): void =>
         highlightTerms(
             this.querySelectorAll(HIGHLIGHTABLE_SELECTOR),
             (event as CustomEvent<string>).detail
         );
 
-    attachInteractionObserver = (): void => {
+    onSlotChange(event: Event): void {
         if (!this.enableSlotChange) {
             return;
         }
+
         this.disconnectObserver();
         this.observer = new IntersectionObserver((entries) => {
             entries.forEach(
@@ -171,54 +150,30 @@ export default class ContentLayout extends LightningElement {
             this.calculateActualSection();
         });
 
-        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        for (const headingElement of headingElements) {
-            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
-            const id = headingElement.getAttribute("id");
+        const anchoredTags = (event.target as HTMLSlotElement)
+            .assignedElements()
+            .filter(({ tagName }) => tagName === TOC_HEADER_TAG)
+            .map((tag) => {
+                tag.id = tag.hash;
+                return tag;
+            });
+
+        this._tocOptions = anchoredTags.map((tag) => ({
+            anchor: `#${tag.hash}`,
+            id: tag.id,
+            label: tag.title
+        }));
+
+        this.scrollToHash(anchoredTags);
+
+        anchoredTags.forEach((section) => {
+            const id = section.getAttribute("id");
             this.anchoredElements[id] = {
                 id,
                 intersect: false
             };
-            this.observer.observe(headingElement);
-        }
-        if (!this.didScrollToSelectedHash) {
-            this.didScrollToSelectedHash = true;
-            this.scrollToHash(headingElements);
-        }
-    };
-
-    onSlotChange(event: Event): void {
-        const slotElements = (
-            event.target as HTMLSlotElement
-        ).assignedElements();
-
-        if (slotElements.length) {
-            const slotContentElement = slotElements[0];
-            const headingElements =
-                slotContentElement.ownerDocument?.getElementsByTagName(
-                    TOC_HEADER_TAG
-                );
-            for (const headingElement of headingElements) {
-                // Sometimes elements hash is not being set when slot content is wrapped with div
-                headingElement.hash =
-                    headingElement.attributes.hash?.nodeValue;
-            }
-            const tocOptions = [];
-            for (const headingElement of headingElements) {
-                headingElement.id = headingElement.hash;
-
-                // Update tocOptions from anchorTags
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.title
-                };
-                tocOptions.push(tocItem);
-            }
-
-            this._tocOptions = tocOptions;
-        }
+            this.observer.observe(section);
+        });
     }
 
     private disconnectObserver(): void {
@@ -228,16 +183,16 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    // eslint-disable-next-line no-undef
-    private scrollToHash(headingElements: NodeListOf<Element>): void {
+    private scrollToHash(anchoredTags: Array<Element>): void {
         let { hash } = window.location;
+
         if (hash) {
             hash = hash.substr(1);
-            for (const headingElement of headingElements) {
-                if (headingElement.getAttribute("id") === hash) {
-                    headingElement.scrollIntoView({ behavior: "auto" });
-                    break;
-                }
+            const toScrollElement = anchoredTags.find(
+                (element) => element.getAttribute("id") === hash
+            );
+            if (toScrollElement) {
+                toScrollElement.scrollIntoView({ behavior: "auto" });
             }
         }
     }

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

@@ -13,7 +13,6 @@ import {
 import { SearchSyncer } from "docUtils/SearchSyncer";
 import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
 import { Language } from "typings/custom";
-import { DEFAULT_LANGUAGES } from "dxUtils/constants";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
 const handleContentError = (error): void => console.log(error);
@@ -100,7 +99,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         shouldStopPropagation: true,
         target: window
     });
-    private _allLanguages: Array<Language> = DEFAULT_LANGUAGES;
+    private _allLanguages: Array<Language> = [];
 
     @track private pageReference: PageReference = {};
 
@@ -584,5 +583,20 @@ export default class DocXmlContent extends LightningElementWithState<{
                 metadescription.setAttribute("content", docDescription);
             }
         }
+
+        if (this.pageReference) {
+            const metadescription = document.querySelector(
+                'link[rel="canonical"]'
+            );
+            if (metadescription) {
+                metadescription.setAttribute(
+                    "href",
+                    window.location.protocol +
+                        "//" +
+                        window.location.host +
+                        this.pageReferenceToString(this.pageReference)
+                );
+            }
+        }
     }
 }

package/src/modules/doc/amfReference/constants.ts

@@ -1,76 +0,0 @@
-const NAVIGATION_ITEMS = [
-    {
-        label: "Summary",
-        name: "summary",
-        childrenPropertyName: undefined,
-        type: "summary"
-    },
-    {
-        label: "Endpoints",
-        name: "endpoints",
-        childrenPropertyName: "endpoints",
-        type: "endpoint"
-    },
-    {
-        label: "Documentation",
-        name: "documentation",
-        childrenPropertyName: "docs",
-        type: "documentation"
-    },
-    {
-        label: "Types",
-        name: "types",
-        childrenPropertyName: "types",
-        type: "type"
-    },
-    {
-        label: "Security",
-        name: "security",
-        childrenPropertyName: "security",
-        type: "security"
-    }
-];
-
-const URL_CONFIG = {
-    summary: {
-        urlIdentifer: "label"
-    },
-    endpoint: {
-        urlIdentifer: "path"
-    },
-    method: {
-        urlIdentifer: "label"
-    },
-    documentation: {
-        urlIdentifer: "label"
-    },
-    type: {
-        urlIdentifer: "label",
-        prefix: "type:"
-    },
-    security: {
-        urlIdentifer: "label",
-        prefix: "security:"
-    }
-};
-
-export const REFERENCE_TYPES = {
-    markdown: "markdown",
-    raml: "rest-raml",
-    oa2: "rest-oa2",
-    oa3: "rest-oa3"
-};
-
-const oldReferenceIdNewReferenceIdMap: Record<string, string> = {
-    "commerce-api-assignments": "assignments",
-    "commerce-api-campaigns": "campaigns",
-    "commerce-api-catalogs": "catalogs",
-    "cdn-zones": "cdn-api-process-apis",
-    "inventory-impex": "impex",
-    "inventory-reservations": "inventory-reservation-service",
-    "shopper-login-and-api-access-service": "shopper-login",
-    "shopper-login-and-api-access-service-admin": "slas-admin",
-    "einstein-recommendations": "einstein-api-quick-start-guide"
-};
-
-export { NAVIGATION_ITEMS, URL_CONFIG, oldReferenceIdNewReferenceIdMap };