rapidoc/src/templates/overview-template.js

RapiDoc - Open API spec viewer with built in console

/**
 * Renders the API specification overview header with metadata, description markdown, contact, license, and download links.
 */
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 Slugger from "github-slugger";
import { marked } from "marked";

function headingRenderer() {
  const slugger = new Slugger();
  const renderer = new marked.Renderer();
  // renderer.heading = (text, level, raw, slugger) => `<h${level} class="observe-me" id="overview--${slugger.slug(raw)}">${text}</h${level}>`;
  renderer.heading = ({ text, depth }) =>
    `<h${depth} class="observe-me" id="overview--${slugger.slug(text)}">${text}</h${depth}>`;
  fixRenderedAnchorLinks(renderer);
  return renderer;
}

export default function overviewTemplate() {
  return html`
    <section
      id="overview"
      part="section-overview"
      class="observe-me ${this.renderStyle === "view" ? "section-gap" : "section-gap--read-mode"}"
    >
      ${
        this.resolvedSpec?.info
          ? html`
              <h1 id="api-title" class="rapidoc-heading" part="section-overview-title heading heading-1">
                ${this.resolvedSpec.info.title}
                ${
                  !this.resolvedSpec.info.version
                    ? ""
                    : html`<span class="version" part="label-overview-version">${this.resolvedSpec.info.version}</span>`
                }
              </h1>
              <div id="api-info">
                ${
                  this.resolvedSpec.info.contact?.email
                    ? html`<span
                        >${this.resolvedSpec.info.contact.name || "Email"}:
                        <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview"
                          >${this.resolvedSpec.info.contact.email}</a
                        >
                      </span>`
                    : ""
                }
                ${
                  this.resolvedSpec.info.contact?.url
                    ? html`<span
                        >URL:
                        <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview"
                          >${this.resolvedSpec.info.contact.url}</a
                        ></span
                      >`
                    : ""
                }
                ${
                  this.resolvedSpec.info.license
                    ? html`<span
                        >License:
                        ${
                          this.resolvedSpec.info.license.url
                            ? html`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview"
                                >${this.resolvedSpec.info.license.name}</a
                              >`
                            : this.resolvedSpec.info.license.name
                        }
                      </span>`
                    : ""
                }
                ${
                  this.resolvedSpec.info.termsOfService
                    ? html`<span
                        ><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">Terms of Service</a></span
                      >`
                    : ""
                }
              </div>
              <slot name="overview"></slot>
              ${
                this.resolvedSpec.info.description
                  ? html`<div id="api-description" class="m-markdown regular-font">
                      ${unsafeHTML(
                        sanitizeHTML(
                          marked(
                            this.resolvedSpec.info.description,
                            this.infoDescriptionHeadingsInNavBar === "true"
                              ? { renderer: headingRenderer() }
                              : undefined,
                          ),
                        ),
                      )}
                    </div>`
                  : ""
              }
            `
          : ""
      }
    </section>
  `;
}