rapidoc 11.0.1 → 12.0.0

package/src/templates/focused-endpoint-template.js

@@ -0,0 +1,145 @@
+/**
+ * Renders the single active API operation, overview, or component in focused (3-column) rendering mode.
+ */
+import { fixRenderedAnchorLinks } from "~/utils/markdown-utils";
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { sanitizeHTML } from "../utils/sanitize.js";
+import { marked } from "marked";
+import Slugger from "github-slugger";
+import { expandedEndpointBodyTemplate } from "~/templates/expanded-endpoint-template";
+import "~/components/api-request";
+import "~/components/api-response";
+import componentsTemplate from "~/templates/components-template";
+import overviewTemplate from "~/templates/overview-template";
+import downloadsTemplate from "~/templates/downloads-template";
+import serverTemplate from "~/templates/server-template";
+import securitySchemeTemplate from "~/templates/security-scheme-template";
+import { expandCollapseNavBarTag } from "~/templates/navbar-template";
+
+function headingRenderer(tagElementId) {
+  const renderer = new marked.Renderer();
+  const slugger = new Slugger();
+  // renderer.heading = (text, level, raw, slugger) => `<h${level} class="observe-me" id="${tagElementId}--${slugger.slug(raw)}">${text}</h${level}>`;
+  renderer.heading = ({ text, depth }) =>
+    `<h${depth} class="observe-me" id="${tagElementId}--${slugger.slug(text)}">${text}</h${depth}>`;
+  fixRenderedAnchorLinks(renderer);
+  return renderer;
+}
+
+function wrapFocusedTemplate(templateToWrap) {
+  return html`<div class="regular-font section-gap--focused-mode" part="section-operations-in-tag">${templateToWrap}</div>`;
+}
+
+function defaultContentTemplate() {
+  // In focused mode default content is overview or first path
+  if (this.showInfo === "true") {
+    return wrapFocusedTemplate(html`${overviewTemplate.call(this)}${downloadsTemplate.call(this)}`);
+  }
+  const selectedTagObj = this.resolvedSpec.tags[0];
+  const selectedPathObj = this.resolvedSpec.tags[0]?.paths[0];
+  return selectedTagObj && selectedPathObj
+    ? wrapFocusedTemplate(
+        expandedEndpointBodyTemplate.call(
+          this,
+          selectedPathObj,
+          selectedTagObj.name || "",
+          selectedTagObj.description || "",
+          true,
+        ),
+      )
+    : wrapFocusedTemplate("");
+}
+
+function focusedTagBodyTemplate(tag) {
+  return html`
+    <h2 id="${tag.elementId}" class="rapidoc-heading title tag" part="section-tag-title label-tag-title heading heading-2">
+      ${tag.displayName || tag.name}
+    </h2>
+    ${
+      tag.description
+        ? html`<div class="m-markdown regular-font">
+            ${unsafeHTML(
+              sanitizeHTML(
+                marked(
+                  tag.description || "",
+                  this.infoDescriptionHeadingsInNavBar === "true"
+                    ? { renderer: headingRenderer(tag.elementId) }
+                    : undefined,
+                ),
+              ),
+            )}
+          </div>`
+        : ""
+    }
+  `;
+}
+
+export default function focusedEndpointTemplate() {
+  if (!this.focusedElementId && this.resolvedSpec) {
+    this.focusedElementId =
+      this.showInfo === "false" || this.showInfo === false
+        ? this.resolvedSpec.tags?.[0]?.paths?.[0]?.elementId || ""
+        : "overview";
+  }
+  if (!this.focusedElementId || !this.resolvedSpec) {
+    return;
+  }
+  const focusElId = this.focusedElementId;
+  let selectedPathObj = null;
+  let selectedTagObj = null;
+  let focusedTemplate;
+  if (focusElId.startsWith("overview") && this.showInfo === "true") {
+    focusedTemplate = html`${overviewTemplate.call(this)}${downloadsTemplate.call(this)}`;
+  } else if (focusElId === "auth" && this.allowAuthentication === "true") {
+    focusedTemplate = securitySchemeTemplate.call(this, this.allowTry);
+  } else if (focusElId === "servers" && this.allowServerSelection === "true") {
+    focusedTemplate = serverTemplate.call(this);
+  } else if (focusElId === "operations-top") {
+    focusedTemplate = html`<div id="operations-top" class="observe-me"><slot name="operations-top"></slot></div>`;
+  } else if (focusElId.startsWith("cmp--") && this.showComponents === "true") {
+    focusedTemplate = componentsTemplate.call(this);
+  } else if (focusElId.startsWith("tag--")) {
+    const idToFocus =
+      focusElId.indexOf("--", 4) > 0
+        ? focusElId.substring(0, focusElId.indexOf("--", 5))
+        : focusElId;
+    selectedTagObj = this.resolvedSpec.tags.find((v) => v.elementId === idToFocus);
+    if (selectedTagObj) {
+      focusedTemplate = wrapFocusedTemplate.call(
+        this,
+        focusedTagBodyTemplate.call(this, selectedTagObj),
+      );
+    } else {
+      focusedTemplate = defaultContentTemplate.call(this);
+    }
+  } else {
+    for (const tag of this.resolvedSpec.tags) {
+      selectedTagObj = tag;
+      selectedPathObj = tag.paths.find((v) => `${v.elementId}` === focusElId);
+      if (selectedPathObj) {
+        break;
+      }
+    }
+    if (selectedPathObj) {
+      // In focused mode we must expand the nav-bar tag element if it is collapsed
+      const newNavEl = this.shadowRoot?.getElementById(`link-${focusElId}`); // no shadowRoot when pre-rendering
+      expandCollapseNavBarTag(newNavEl, "expand");
+      const isFirst = selectedTagObj?.paths?.[0]?.elementId === selectedPathObj.elementId;
+      focusedTemplate = wrapFocusedTemplate.call(
+        this,
+        expandedEndpointBodyTemplate.call(
+          this,
+          selectedPathObj,
+          selectedTagObj.name || "",
+          selectedTagObj.description || "",
+          isFirst,
+        ),
+      );
+    } else {
+      // if focusedElementId is not found then show the default content (overview or first-path)
+      focusedTemplate = defaultContentTemplate.call(this);
+    }
+  }
+  return focusedTemplate;
+}

package/src/templates/header-template.js

@@ -0,0 +1,92 @@
+/**
+ * Renders the top navigation header with logo, title, search trigger, server selector, theme switcher, and auth controls.
+ */
+import { html } from "lit";
+import logoTemplate from "~/templates/logo-template";
+
+export default function headerTemplate() {
+  return html`<header class="row main-header regular-font" part="section-header">
+    <div class="only-large-screen-flex" style="align-items: center;">
+      <slot name="logo" class="logo" part="section-logo">
+        ${logoTemplate("height:36px;width:36px;margin-left:5px")}
+        <!-- m-logo style="height:36px;width:36px;margin-left:5px"></m-logo -->
+      </slot>
+      <div class="header-title" part="label-header-title">${this.headingText}</div>
+    </div>
+    <div class="main-header-controls">
+      ${
+        this.allowSpecUrlLoad === "false"
+          ? ""
+          : html`
+              <input
+                id="spec-url"
+                type="text"
+                style="font-size:var(--font-size-small)"
+                class="header-input mono-font"
+                part="textbox textbox-spec-url"
+                placeholder="Spec URL"
+                value="${this.specUrl || ""}"
+                @change="${this.onSpecUrlChange}"
+                spellcheck="false"
+              />
+              <div class="header-action-icon" @click="${this.onSpecUrlChange}">&#x21a9;</div>
+            `
+      }
+      ${
+        this.allowSpecFileLoad === "false"
+          ? ""
+          : html`
+              <input
+                id="spec-file"
+                part="file-input"
+                type="file"
+                style="display:none"
+                value="${this.specFile || ""}"
+                @change="${this.onSpecFileChange}"
+                spellcheck="false"
+              />
+              <button
+                class="btn btn-primary only-large-screen"
+                style="margin-left:10px;"
+                part="btn btn-fill"
+                @click="${this.onFileLoadClick}"
+              >
+                LOCAL JSON FILE
+              </button>
+            `
+      }
+      <slot name="header"></slot>
+      ${
+        this.allowSearch === "false" || "read focused".includes(this.renderStyle)
+          ? ""
+          : html`
+              <input
+                id="search"
+                class="header-input"
+                type="text"
+                part="textbox textbox-header-filter"
+                placeholder="Filter"
+                @change="${this.onSearchChange}"
+                style="max-width:130px;margin-left:10px;"
+                spellcheck="false"
+              />
+              <div class="header-action-icon" @click="${this.onSearchChange}">&#x21a9;</div>
+            `
+      }
+      ${
+        this.allowAdvancedSearch === "false" || "read focused".includes(this.renderStyle)
+          ? ""
+          : html`
+              <button
+                class="btn btn-primary only-large-screen"
+                part="btn btn-fill btn-search"
+                style="margin-left:10px;"
+                @click="${this.onShowAdvancedSearchClicked}"
+              >
+                Search
+              </button>
+            `
+      }
+    </div>
+  </header>`;
+}

package/src/templates/logo-template.js

@@ -0,0 +1,21 @@
+/**
+ * Renders default RapiDoc SVG branding logo.
+ */
+import { html } from "lit";
+
+export default function logoTemplate(style) {
+  return html`<svg style=${style} viewBox="1 0 511 512">
+    <path d="M351 411a202 202 0 01-350 0 203 203 0 01333-24 203 203 0 0117 24zm0 0" fill="#adc165" />
+    <path
+      d="M334 387a202 202 0 01-216-69 202 202 0 01216 69zm78 32H85a8 8 0 01-8-8 8 8 0 018-8h327a8 8 0 017 8 8 8 0 01-7 8zm0 0"
+      fill="#99aa52"
+    />
+    <path d="M374 338l-5 30a202 202 0 01-248-248 203 203 0 01253 218zm0 0" fill="#ffc73b" />
+    <path
+      d="M374 338a202 202 0 01-100-197 203 203 0 01100 197zm38 81l-6-2-231-231a8 8 0 0111-11l231 230a8 8 0 01-5 14zm0 0"
+      fill="#efb025"
+    />
+    <path d="M311 175c0 75 40 140 101 175a202 202 0 000-350 202 202 0 00-101 175zm0 0" fill="#ff903e" />
+    <path d="M412 419a8 8 0 01-8-8V85a8 8 0 0115 0v326a8 8 0 01-7 8zm0 0" fill="#e87425" />
+  </svg>`;
+}

package/src/templates/main-body-template.js

@@ -0,0 +1,102 @@
+/**
+ * Renders the top-level main layout shell, orchestrating header, navbar, content panels, and modal dialogs based on renderStyle.
+ */
+import { html } from "lit";
+
+// Templates
+import expandedEndpointTemplate from "~/templates/expanded-endpoint-template";
+import focusedEndpointTemplate from "~/templates/focused-endpoint-template";
+import overviewTemplate from "~/templates/overview-template";
+import endpointTemplate from "~/templates/endpoint-template";
+import serverTemplate from "~/templates/server-template";
+import securitySchemeTemplate, {
+  recoverPersistedApiKeys,
+} from "~/templates/security-scheme-template";
+import headerTemplate from "~/templates/header-template";
+import navbarTemplate from "~/templates/navbar-template";
+import advancedSearchDialogTemplate from "~/templates/advanced-search-dialog-template";
+import componentsTemplate from "~/templates/components-template";
+import downloadsTemplate from "~/templates/downloads-template";
+
+export default function mainBodyTemplate(isMini = false, pathsExpanded = false) {
+  if (!this.resolvedSpec) {
+    return "";
+  }
+  if (this.persistAuth === "true") {
+    recoverPersistedApiKeys.call(this);
+  }
+
+  if (this.resolvedSpec.specLoadError) {
+    return html` <div id="spec-not-found">${this.resolvedSpec.info.description}</div>`;
+  }
+
+  if (this.resolvedSpec.isSpecLoading) {
+    return html` <main class="main-content regular-font" part="section-main-content">
+      <slot></slot>
+      <div class="main-content-inner--${this.renderStyle}-mode">
+        <div class="loader"></div>
+      </div>
+    </main>`;
+  }
+
+  return html` <slot name="fixed-header"></slot>
+    <!-- Header -->
+    ${this.showHeader === "false" ? "" : headerTemplate.call(this)}
+
+    <!-- Advanced Search -->
+    ${this.allowAdvancedSearch === "false" ? "" : advancedSearchDialogTemplate.call(this)}
+
+    <div id="the-main-body" class="body ${this.cssClasses}" dir="${this.pageDirection}">
+      <!-- Side Nav -->
+      ${
+        (this.renderStyle === "read" || this.renderStyle === "focused") &&
+        this.showSideNav === "true" &&
+        this.resolvedSpec
+          ? navbarTemplate.call(this)
+          : ""
+      }
+
+      <!-- Main Content -->
+      <main class="main-content regular-font" tabindex="-1" part="section-main-content">
+        <slot></slot>
+        <div class="main-content-inner--${this.renderStyle}-mode">
+          ${
+            this.loading === true
+              ? html`<div class="loader"></div>`
+              : html` ${
+                  this.loadFailed === true
+                    ? html`<div style="text-align: center;margin: 16px;">Unable to load the Spec</div>`
+                    : html`
+                        <div
+                          class="operations-root"
+                          @click="${(e) => {
+                            this.handleHref(e);
+                          }}"
+                        >
+                          ${
+                            this.renderStyle === "focused"
+                              ? html`${this.showInfo === "false" ? downloadsTemplate.call(this) : ""}${focusedEndpointTemplate.call(this)}`
+                              : html`
+                                  ${this.showInfo === "true" ? overviewTemplate.call(this) : ""} ${downloadsTemplate.call(this)}
+                                  ${this.allowServerSelection === "true" ? serverTemplate.call(this) : ""}
+                                  ${this.allowAuthentication === "true" ? securitySchemeTemplate.call(this, this.allowTry) : ""}
+                                  <div id="operations-top" class="observe-me">
+                                    <slot name="operations-top"></slot>
+                                  </div>
+                                  ${
+                                    this.renderStyle === "read"
+                                      ? expandedEndpointTemplate.call(this)
+                                      : endpointTemplate.call(this, isMini, pathsExpanded)
+                                  }
+                                  ${this.showComponents === "true" ? componentsTemplate.call(this) : ""}
+                                `
+                          }
+                        </div>
+                      `
+                }`
+          }
+        </div>
+        <slot name="footer"></slot>
+      </main>
+    </div>`;
+}