@salesforcedevs/docs-components 1.17.5-edit → 1.17.5-search-alpha

package/lwc.config.json

@@ -18,7 +18,6 @@
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
-        "doc/markdownEditor",
         "doc/overview",
         "doc/phase",
         "doc/specificationContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.5-edit",
+    "version": "1.17.5-search-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -1,7 +1,6 @@
 <template>
     <doc-content-layout
         lwc:if={isVersionFetched}
-        use-old-sidebar={useOldSidebar}
         class="content-type content-type-reference"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}

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

@@ -45,7 +45,6 @@ export default class AmfReference extends LightningElement {
     @api coveoPublicAccessToken!: string;
     @api coveoAnalyticsToken!: string;
     @api coveoSearchHub!: string;
-    @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
     @api languages!: OptionWithLink[];

package/src/modules/doc/componentPlayground/componentPlayground.css

@@ -17,6 +17,6 @@ iframe {
     border: 1px solid var(--dx-g-gray-90);
 }
 
-.container {
+.playground-container {
     position: relative;
 }

package/src/modules/doc/componentPlayground/componentPlayground.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" lwc:if={playgroundAvailable}>
+    <div class="playground-container" lwc:if={playgroundAvailable}>
         <dx-spinner
             size="large"
             variant="brand"
@@ -8,7 +8,7 @@
         <iframe
             src={playgroundSrc}
             onload={handleIframeLoad}
-            title="Component Playground"
+            title={playgroundTitle}
             allow="clipboard-write"
         ></iframe>
     </div>

package/src/modules/doc/componentPlayground/componentPlayground.ts

@@ -8,6 +8,19 @@ export default class ComponentPlayground extends LightningElement {
 
     isLoading = true;
 
+    /**
+     * Returns a formatted title for the component playground
+     * Maps 'aura' model to 'Aura' and 'lwc' model to 'Lightning'
+     * Capitalizes the first letter of the component name
+     * @returns {string} Formatted playground title
+     */
+    get playgroundTitle() {
+        const modelName = this.model === "aura" ? "Aura" : "Lightning";
+        const componentName =
+            this.component.charAt(0).toUpperCase() + this.component.slice(1);
+        return `Example previews and code for ${modelName} ${componentName} component`;
+    }
+
     get playgroundAvailable() {
         return (
             this.playgroundAppUrl &&

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

@@ -1,43 +1,20 @@
 <template>
     <div class="content">
-        <template lwc:if={useOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
-        <template lwc:else>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                coveo-organization-id={coveoOrganizationId}
-                coveo-public-access-token={coveoPublicAccessToken}
-                coveo-search-hub={coveoSearchHub}
-                coveo-advanced-query-config={coveoAdvancedQueryConfig}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar>
-        </template>
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

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

@@ -210,10 +210,7 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarType = this.useOldSidebar
-            ? "dx-sidebar-old"
-            : "dx-sidebar";
-        const sidebarEl = this.template.querySelector(sidebarType);
+        const sidebarEl = this.template.querySelector("dx-sidebar-old");
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;

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

@@ -1,43 +1,20 @@
 <template>
     <div class="content">
-        <template lwc:if={useOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
-        <template lwc:else>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                coveo-organization-id={coveoOrganizationId}
-                coveo-public-access-token={coveoPublicAccessToken}
-                coveo-search-hub={coveoSearchHub}
-                coveo-advanced-query-config={coveoAdvancedQueryConfig}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar>
-        </template>
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

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

@@ -1,6 +1,6 @@
 <template>
     <doc-content-layout
-        lwc:if={loaded}
+        lwc:if={displayContent}
         lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
@@ -11,7 +11,6 @@
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
         onselect={handleSelect}
-        use-old-sidebar={useOldSidebar}
         onlangchange={handleLanguageChange}
         languages={sidebarFooterContent.languages}
         language={sidebarFooterContent.language}
@@ -49,4 +48,12 @@
             onnavclick={handleNavClick}
         ></doc-content>
     </doc-content-layout>
+    <div lwc:if={display404}>
+        <dx-error
+            image="https://a.sfdcstatic.com/developer-website/images/404.svg"
+            code="404"
+            header="Beep boop. That did not compute."
+            subtitle="The document you're looking for doesn't seem to exist."
+        ></dx-error>
+    </div>
 </template>

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

@@ -11,7 +11,8 @@ import {
     SiderbarFooter,
     HistoryState,
     PageReference,
-    TocMap
+    TocMap,
+    ContentData
 } from "./types";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
@@ -72,7 +73,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     private contentProvider?: FetchContent;
     private docContent = "";
     private language?: DocLanguage | null = null;
-    private loaded = false;
+    private displayContent = false;
+    private display404 = false;
     private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
@@ -185,7 +187,13 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.apiDomain,
             this.allLanguages
         );
-        this.fetchDocument().then(() => (this.loaded = true));
+        this.fetchDocument().then((content: any) => {
+            if (content) {
+                this.displayContent = true;
+            } else {
+                this.display404 = true;
+            }
+        });
         window.addEventListener("popstate", this.handlePopState);
 
         this.searchSyncer.init();
@@ -463,7 +471,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    async fetchDocument(): Promise<void> {
+    async fetchDocument(): Promise<string> {
         this.setState({
             isFetchingDocument: true
         });
@@ -477,7 +485,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.setState({
                 isFetchingDocument: false
             });
-            return;
+            return "";
         }
 
         this.docTitle = data.docTitle;
@@ -509,11 +517,11 @@ export default class DocXmlContent extends LightningElementWithState<{
             data.id
         ) {
             try {
-                await this.fetchContent();
+                const moreData = await this.fetchContent();
                 this.setState({
                     isFetchingDocument: false
                 });
-                return;
+                return moreData.content;
             } catch (error) {
                 this.pageReference.contentDocumentId = `${data.id}.htm`;
                 this.pageReference.hash = "";
@@ -527,9 +535,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: false
         });
+        return data.content;
     }
 
-    async fetchContent(): Promise<void> {
+    async fetchContent(): Promise<ContentData> {
         this.setState({
             isFetchingContent: true
         });
@@ -553,6 +562,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingContent: false
         });
+        return data;
     }
 
     updateHeaderAndSidebarFooter(): void {

package/src/modules/doc/markdownEditor/markdownEditor.css

@@ -1,225 +0,0 @@
-.markdown-editor {
-    border: 1px solid #e1e5e9;
-    border-radius: 4px;
-    overflow: hidden;
-    background: #fff;
-}
-
-/* Editor Toolbar */
-.editor-toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e1e5e9;
-    flex-wrap: wrap;
-}
-
-.edit-button,
-.cancel-button,
-.save-button {
-    min-width: 80px;
-}
-
-.status-indicator {
-    margin-left: 0.5rem;
-    font-size: 0.875rem;
-}
-
-.status-saving {
-    color: #0176d3;
-}
-
-.status-success {
-    color: #04844b;
-}
-
-.status-error {
-    color: #ea001e;
-}
-
-/* Content Viewer */
-.content-viewer {
-    padding: 1rem;
-}
-
-.content-display {
-    line-height: 1.6;
-    color: #3e3e3c;
-}
-
-.content-display h1,
-.content-display h2,
-.content-display h3,
-.content-display h4,
-.content-display h5,
-.content-display h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    color: #181818;
-}
-
-.content-display p {
-    margin-bottom: 1rem;
-}
-
-.content-display ul,
-.content-display ol {
-    margin-bottom: 1rem;
-    padding-left: 2rem;
-}
-
-.content-display code {
-    background-color: #f3f2f2;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
-    font-size: 0.875rem;
-}
-
-.content-display pre {
-    background-color: #f3f2f2;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    overflow-x: auto;
-    margin-bottom: 1rem;
-}
-
-.content-display pre code {
-    background-color: transparent;
-    padding: 0;
-}
-
-/* HTML Content Styling */
-.html-content {
-    line-height: 1.6;
-    color: #3e3e3c;
-}
-
-.html-content h1,
-.html-content h2,
-.html-content h3,
-.html-content h4,
-.html-content h5,
-.html-content h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    color: #181818;
-}
-
-.html-content p {
-    margin-bottom: 1rem;
-}
-
-.html-content ul,
-.html-content ol {
-    margin-bottom: 1rem;
-    padding-left: 2rem;
-}
-
-.html-content code {
-    background-color: #f3f2f2;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
-    font-size: 0.875rem;
-}
-
-.html-content pre {
-    background-color: #f3f2f2;
-    padding: 1rem;
-    border-radius: 0.25rem;
-    overflow-x: auto;
-    margin-bottom: 1rem;
-}
-
-.html-content pre code {
-    background-color: transparent;
-    padding: 0;
-}
-
-/* No Content Message */
-.no-content {
-    color: #706e6b;
-    font-style: italic;
-    text-align: center;
-    padding: 2rem;
-    background-color: #f8f9fa;
-    border: 1px dashed #e1e5e9;
-    border-radius: 4px;
-}
-
-/* Editor Wrapper */
-.editor-wrapper {
-    position: relative;
-    min-height: 300px;
-}
-
-.simple-editor {
-    width: 100%;
-    min-height: 300px;
-    padding: 1rem;
-    border: none;
-    outline: none;
-    font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    resize: vertical;
-    background: #fff;
-    color: #3e3e3c;
-}
-
-.simple-editor:focus {
-    outline: none;
-}
-
-.simple-editor::placeholder {
-    color: #706e6b;
-}
-
-/* Loading Overlay */
-.loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgb(255 255 255 / 80%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .editor-toolbar {
-        flex-wrap: wrap;
-        gap: 0.25rem;
-        justify-content: flex-end;
-    }
-
-    .status-indicator {
-        margin-left: 0.25rem;
-        width: auto;
-        text-align: right;
-        margin-top: 0;
-    }
-
-    .simple-editor {
-        min-height: 250px;
-    }
-
-    .content-viewer {
-        padding: 0.75rem;
-    }
-}
-
-/* Empty state */
-.content-display:empty::before {
-    content: "No content to display";
-    color: #706e6b;
-    font-style: italic;
-}

package/src/modules/doc/markdownEditor/markdownEditor.html

@@ -1,80 +0,0 @@
-<template>
-    <div class="markdown-editor">
-        <!-- Editor Toolbar -->
-        <div class="editor-toolbar">
-            <template if:true={showViewer}>
-                <dx-button
-                    onclick={handleEdit}
-                    variant="tertiary"
-                    class="edit-button"
-                >
-                    Edit Content
-                </dx-button>
-            </template>
-
-            <template if:true={showEditor}>
-                <dx-button
-                    onclick={handleCancel}
-                    variant="secondary"
-                    class="cancel-button"
-                >
-                    Cancel
-                </dx-button>
-
-                <dx-button
-                    onclick={handleSave}
-                    variant="primary"
-                    disabled={saveButtonDisabled}
-                    class="save-button"
-                >
-                    Save
-                </dx-button>
-
-                <div class="status-indicator">
-                    <span class={statusClass}>{statusMessage}</span>
-                </div>
-            </template>
-        </div>
-
-        <!-- Content Viewer (Read-only) -->
-        <template if:true={showViewer}>
-            <div class="content-viewer">
-                <div class="content-display">
-                    <!-- Show HTML content if provided -->
-                    <template if:true={hasHtmlContent}>
-                        <div class="html-content" innerhtml={htmlContent}></div>
-                    </template>
-                    
-                    <!-- Show message if no HTML content -->
-                    <template if:false={hasHtmlContent}>
-                        <div class="no-content">
-                            No content to display. Click 'Edit Content' to fetch from the backend.
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </template>
-
-        <!-- Simple Editor -->
-        <template if:true={showEditor}>
-            <div class="editor-wrapper">
-                <textarea
-                    class="simple-editor"
-                    value={editorContent}
-                    onchange={handleContentChange}
-                    placeholder="Content will be loaded from the fetch URL..."
-                ></textarea>
-            </div>
-        </template>
-
-        <!-- Loading Overlay -->
-        <template if:true={isLoading}>
-            <div class="loading-overlay">
-                <dx-spinner
-                    size="medium"
-                    alternative-text="Loading"
-                ></dx-spinner>
-            </div>
-        </template>
-    </div>
-</template>

package/src/modules/doc/markdownEditor/markdownEditor.ts

@@ -1,148 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-
-export default class MarkdownEditor extends LightningElement {
-    @api fetchUrl: string = "";
-    @api saveUrl: string = "";
-    @api filePath: string = "";
-    @api htmlContent: string = "";
-
-    @track isEditing: boolean = false;
-    @track editorContent: string = "";
-    @track isLoading: boolean = false;
-    @track saveStatus: "idle" | "saving" | "success" | "error" = "idle";
-
-    // Event Handlers
-    async handleEdit() {
-        if (!this.fetchUrl) {
-            console.error("Fetch URL not configured");
-            return;
-        }
-
-        this.isLoading = true;
-        this.saveStatus = "idle";
-
-        try {
-            const response = await fetch(this.fetchUrl, {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json"
-                }
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                this.editorContent = data.content || data.text || data.body || "";
-                this.isEditing = true;
-            } else {
-                throw new Error(`Failed to fetch content: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Failed to fetch content:", error);
-            this.saveStatus = "error";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    handleCancel() {
-        this.isEditing = false;
-        this.saveStatus = "idle";
-        this.editorContent = "";
-    }
-
-    handleContentChange(event: Event) {
-        const target = event.target as HTMLTextAreaElement;
-        this.editorContent = target.value;
-    }
-
-    async handleSave() {
-        if (!this.saveUrl) {
-            console.error("Save URL not configured");
-            this.saveStatus = "error";
-            return;
-        }
-
-        this.saveStatus = "saving";
-        this.isLoading = true;
-
-        try {
-            const response = await fetch(this.saveUrl, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    content: this.editorContent,
-                    filePath: this.filePath
-                })
-            });
-
-            if (response.ok) {
-                this.saveStatus = "success";
-                this.isEditing = false;
-                this.editorContent = "";
-
-                // Dispatch save success event
-                this.dispatchEvent(
-                    new CustomEvent("saved", {
-                        detail: {
-                            success: true,
-                            content: this.editorContent,
-                            filePath: this.filePath
-                        }
-                    })
-                );
-            } else {
-                throw new Error(`Save failed: ${response.status}`);
-            }
-        } catch (error) {
-            console.error("Save failed:", error);
-            this.saveStatus = "error";
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    // Getters for UI state
-    get showEditor() {
-        return this.isEditing;
-    }
-
-    get showViewer() {
-        return !this.isEditing;
-    }
-
-    get saveButtonDisabled() {
-        return this.saveStatus === "saving" || this.isLoading || !this.editorContent.trim();
-    }
-
-    get statusMessage() {
-        switch (this.saveStatus) {
-            case "saving":
-                return "Saving...";
-            case "success":
-                return "Saved successfully!";
-            case "error":
-                return "Save failed. Please try again.";
-            default:
-                return "";
-        }
-    }
-
-    get statusClass() {
-        switch (this.saveStatus) {
-            case "saving":
-                return "status-saving";
-            case "success":
-                return "status-success";
-            case "error":
-                return "status-error";
-            default:
-                return "";
-        }
-    }
-
-    get hasHtmlContent() {
-        return this.htmlContent && this.htmlContent.trim().length > 0;
-    }
-}