@underpostnet/cyberia 3.3.0 → 3.3.76

package/src/client/components/core/Docs.js

@@ -1,17 +1,18 @@
 import { Css, darkTheme, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
 import { Modal, renderViewTitle } from './Modal.js';
+import { coverallsUrl, githubPagesUrl, githubUrl, packageRepository } from './Repository.js';
+import { Responsive } from './Responsive.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
 import { s, sIframe } from './VanillaJs.js';
 // https://mintlify.com/docs/quickstart
 class Docs {
-  static async RenderModal(type) {
+  static async RenderModal(type, parentModalId = 'modal-docs') {
     const docData = Docs.Data.find((d) => d.type === type);
+    const parentModal = Modal.Data[parentModalId];
+    if (!docData || !parentModal?.options) return;
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
-    const parentBarMode =
-      Modal.Data['modal-docs'] && Modal.Data['modal-docs'].options.barMode
-        ? Modal.Data['modal-docs'].options.barMode
-        : undefined;
+    const parentBarMode = parentModal.options.barMode;
     await Modal.instance({
       barConfig,
       title: renderViewTitle(docData),
@@ -25,14 +26,12 @@ class Docs {
               border: none;
               background: white;
               display: block;
+              /* The frame is the only scroll container; the modal body must not
+                 gain one of its own from the height set on load. */
+              overflow: auto;
             }
           </style>
-          <iframe
-            class="in iframe-${ModalId}"
-            src="${docData.url()}"
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
-          >
-          </iframe>
+          <iframe class="in iframe-${ModalId}" src="${docData.url()}"> </iframe>
         `;
       },
       maximize: true,
@@ -42,7 +41,7 @@ class Docs {
       observer: true,
       barMode: parentBarMode,
       query: true,
-      RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
+      RouterInstance: parentModal.options.RouterInstance,
     });
     const iframeEl = s(`.iframe-${ModalId}`);
     let swaggerThemeEventKey = null;
@@ -65,48 +64,49 @@ class Docs {
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
         }
-        // Keep the parent window scroll untouched.
-        // These modals are fixed-position; scrolling the parent on iframe navigation
-        // shifts Chrome layout calculations and leaves view modals offset by 50px.
-        // Bind Shift+K inside the iframe to focus the parent SearchBox (mirrors app-wide shortcut)
+        // These modals are fixed-position; scrolling the parent on iframe
+        // navigation shifts Chrome layout calculations and leaves view modals
+        // offset by 50px, so deep links re-sync the layout instead.
         try {
           const iframeWin = iframeEl.contentWindow;
           const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow?.document;
           if (iframeDoc) {
+            // The frame re-runs this on every in-frame navigation; without
+            // releasing the previous document's listeners they accumulate for
+            // the lifetime of the modal.
             if (unbindIframeLayoutSync) unbindIframeLayoutSync();
             const onIframeAnchorClick = (e) => {
-              if (e.target && e.target.closest && e.target.closest('a')) {
-                scheduleViewLayoutSync();
-              }
+              if (e.target?.closest?.('a')) scheduleViewLayoutSync();
             };
             const onIframeHashChange = () => scheduleViewLayoutSync();
             const onIframePopState = () => scheduleViewLayoutSync();
+            // Mirrors the app-wide shortcut: the frame owns focus, so the parent
+            // never sees the keystroke unless the frame forwards it.
+            const onIframeSearchShortcut = (e) => {
+              if (!e.shiftKey || e.key?.toLowerCase() !== 'k') return;
+              const searchBox = s(`.top-bar-search-box`);
+              if (!searchBox) return;
+              e.preventDefault();
+              e.stopPropagation();
+              if (s(`.main-body-btn-ui-close`)?.classList.contains('hide')) s(`.main-body-btn-ui-open`).click();
+              searchBox.blur();
+              searchBox.focus();
+              searchBox.select();
+            };
             iframeDoc.addEventListener('click', onIframeAnchorClick, true);
+            iframeDoc.addEventListener('keydown', onIframeSearchShortcut);
             if (iframeWin) {
               iframeWin.addEventListener('hashchange', onIframeHashChange);
               iframeWin.addEventListener('popstate', onIframePopState);
             }
             unbindIframeLayoutSync = () => {
               iframeDoc.removeEventListener('click', onIframeAnchorClick, true);
+              iframeDoc.removeEventListener('keydown', onIframeSearchShortcut);
               if (iframeWin) {
                 iframeWin.removeEventListener('hashchange', onIframeHashChange);
                 iframeWin.removeEventListener('popstate', onIframePopState);
               }
             };
-            iframeDoc.addEventListener('keydown', (e) => {
-              if (e.shiftKey && e.key.toLowerCase() === 'k') {
-                e.preventDefault();
-                e.stopPropagation();
-                if (s(`.top-bar-search-box`)) {
-                  if (s(`.main-body-btn-ui-close`) && s(`.main-body-btn-ui-close`).classList.contains('hide')) {
-                    s(`.main-body-btn-ui-open`).click();
-                  }
-                  s(`.top-bar-search-box`).blur();
-                  s(`.top-bar-search-box`).focus();
-                  s(`.top-bar-search-box`).select();
-                }
-              }
-            });
           }
         } catch (e) {
           // cross-origin or security restriction — safe to ignore
@@ -159,121 +159,114 @@ class Docs {
         };
       }
     }
+    // The iframe is sized to the modal body rather than left to grow: an
+    // auto-height iframe inside a fixed-height modal scrolls the modal and the
+    // document it holds, which is where the double scrollbar comes from.
+    const resizeIframe = () => {
+      const frame = s(`.iframe-${ModalId}`);
+      const modalEl = s(`.${ModalId}`);
+      if (!frame || !modalEl) return;
+      const barEl = s(`.bar-default-modal-${ModalId}`);
+      const barHeight = barEl ? barEl.offsetHeight : Modal.headerTitleHeight;
+      frame.style.height = `${Math.max(modalEl.offsetHeight - barHeight, 0)}px`;
+    };
+
     Modal.Data[ModalId].onObserverListener[ModalId] = () => {
-      if (s(`.iframe-${ModalId}`)) {
-        const barEl = s(`.bar-default-modal-${ModalId}`);
-        const barHeight = barEl ? barEl.offsetHeight : Modal.headerTitleHeight;
-        s(`.iframe-${ModalId}`).style.height = `${s(`.${ModalId}`).offsetHeight - barHeight}px`;
-      }
-      if (type.match('coverage')) {
-        simpleIconsRender(`.doc-icon-coverage`);
-        simpleIconsRender(`.doc-icon-coverage-link`);
-      }
+      resizeIframe();
+      if (type.match('coverage')) simpleIconsRender(`.doc-icon-coverage`);
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
+    // The observer fires on modal mutations, not on viewport changes; a rotate
+    // or a window drag leaves the frame at its old height without this.
+    Responsive.onChanged(resizeIframe, { key: ModalId });
     Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      Responsive.offChanged(ModalId);
       if (unbindIframeLayoutSync) unbindIframeLayoutSync();
       if (swaggerThemeEventKey) delete ThemeEvents[swaggerThemeEventKey];
       closeModalRouteChangeEvent({ closedId: ModalId });
     };
   }
-  static Data = [
-    {
-      type: 'repo',
-      icon: html`<i class="fab fa-github"></i>`,
-      text: `Last Release`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
-        return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
-      },
-    },
-    {
-      type: 'demo',
-      icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
-        <path fill="currentColor" d="M20 2v12l10-6z" />
-        <path
-          fill="currentColor"
-          d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
-        />
-      </svg>`,
-      text: html`Demo`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
-        return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
-      },
-    },
-    {
-      type: 'src',
-      icon: html`<i class="fa-brands fa-osi"></i>`,
-      text: 'Source Docs',
-      url: function () {
-        return `${getProxyPath()}docs/engine/${window.renderPayload.version.replace('v', '')}`;
-      },
-    },
-    {
-      type: 'api',
-      icon: html`<i class="fa-solid fa-arrows-turn-to-dots"></i>`,
-      text: `Api Docs`,
-      url: function () {
-        return `${getProxyPath()}api-docs`;
-      },
-    },
-    {
-      type: 'coverage',
+  // One entry per coverage report the build declared, each framed from /docs/coverage/<id>.
+  static coverageReports = () =>
+    (window.renderPayload.coverage ?? []).map(({ id, label }) => ({
+      type: `coverage-${id}`,
       icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
-      text: `Coverage report`,
-      url: function () {
-        const tokenOpts = Docs.Tokens['modal-docs'];
-        if (tokenOpts && tokenOpts.coverageUrl) return tokenOpts.coverageUrl();
-        return `${getProxyPath()}docs/coverage`;
+      text: label,
+      url: () => `${getProxyPath()}docs/coverage/${id}`,
+    }));
+  static get Data() {
+    return [
+      {
+        type: 'repo',
+        external: true,
+        icon: html`<i class="fab fa-github"></i>`,
+        text: `Last Release`,
+        url: function () {
+          const tokenOpts = Docs.Tokens['modal-docs'];
+          if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
+          return githubUrl(packageRepository());
+        },
       },
-      themeEvent: () => {
-        if (s(`.doc-icon-coverage`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage`));
+      {
+        type: 'demo',
+        external: true,
+        icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+          <path fill="currentColor" d="M20 2v12l10-6z" />
+          <path
+            fill="currentColor"
+            d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
+          />
+        </svg>`,
+        text: html`Demo`,
+        url: function () {
+          const tokenOpts = Docs.Tokens['modal-docs'];
+          if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
+          return githubPagesUrl(packageRepository());
+        },
       },
-    },
-    {
-      type: 'coverage-link',
-      icon: html`<img height="20" width="20" class="doc-icon-coverage-link" />`,
-      text: `Coverage`,
-      url: function () {
-        return `https://coveralls.io/github/underpostnet/engine`;
+      {
+        type: 'src',
+        icon: html`<i class="fa-brands fa-osi"></i>`,
+        text: 'Source Docs',
+        url: function () {
+          return `${getProxyPath()}docs/engine/${window.renderPayload.version.replace('v', '')}`;
+        },
       },
-      themeEvent: () => {
-        if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
+      {
+        type: 'api',
+        icon: html`<i class="fa-solid fa-arrows-turn-to-dots"></i>`,
+        text: `Api Docs`,
+        url: function () {
+          return `${getProxyPath()}api-docs`;
+        },
       },
-    },
-  ];
+      ...Docs.coverageReports(),
+      {
+        type: 'coverage-link',
+        external: true,
+        icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
+        text: `Coverage`,
+        url: function () {
+          const tokenOpts = Docs.Tokens['modal-docs'];
+          if (tokenOpts && tokenOpts.coverageLinkUrl) return tokenOpts.coverageLinkUrl();
+          return coverallsUrl();
+        },
+      },
+    ];
+  }
   static Tokens = {};
   static async instance(options = {}) {
     const { idModal } = options;
     Docs.Tokens[idModal] = options;
     setTimeout(() => {
-      s(`.btn-docs-src`).onclick = async () => {
-        setQueryPath({ path: 'docs', queryPath: 'src' });
-        await Docs.RenderModal('src');
-      };
-      s(`.btn-docs-api`).onclick = async () => {
-        setQueryPath({ path: 'docs', queryPath: 'api' });
-        await Docs.RenderModal('api');
-      };
-      s(`.btn-docs-coverage`).onclick = async () => {
-        setQueryPath({ path: 'docs', queryPath: 'coverage' });
-        await Docs.RenderModal('coverage');
-      };
-      s(`.btn-docs-coverage-link`).onclick = () => {
-        const docData = Docs.Data.find((d) => d.type === 'coverage-link');
-        location.href = docData.url();
-      };
-      s(`.btn-docs-repo`).onclick = () => {
-        const docData = Docs.Data.find((d) => d.type === 'repo');
-        location.href = docData.url();
-      };
-      s(`.btn-docs-demo`).onclick = () => {
-        const docData = Docs.Data.find((d) => d.type === 'demo');
-        location.href = docData.url();
-      };
+      // An external entry leaves the app; the rest open in a framed modal on their own route.
+      for (const docData of Docs.Data) {
+        s(`.btn-docs-${docData.type}`).onclick = async () => {
+          if (docData.external) return (location.href = docData.url());
+          setQueryPath({ path: 'docs', queryPath: docData.type });
+          await Docs.RenderModal(docData.type, idModal);
+        };
+      }
       listenQueryPathInstance({
         id: options.idModal,
         routeId: 'docs',
@@ -287,192 +280,223 @@ class Docs {
         },
       });
     });
-    // Register theme events for items that have them (Docs-specific concern)
-    for (const docData of Docs.Data) {
-      if (docData.themeEvent) {
-        ThemeEvents[`doc-icon-${docData.type}`] = docData.themeEvent;
-        setTimeout(ThemeEvents[`doc-icon-${docData.type}`]);
-      }
-    }
+    // The coverage icons are tinted to the theme's text colour, so they follow theme changes.
+    ThemeEvents['doc-icon-coverage'] = () => {
+      if (s(`.doc-icon-coverage`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage`));
+    };
+    setTimeout(ThemeEvents['doc-icon-coverage']);
     // Build submenu items and populate — submenu system is owned by Modal
     Modal.subMenuPopulate('docs', await Modal.buildSubMenuItemsHtml('docs', Docs.Data, options));
-    {
-      const docsData = [
-        {
-          id: 'getting-started',
-          icon: 'rocket',
-          title: 'Getting Started',
-          description: 'Learn the basics and get started with our platform',
-        },
-        {
-          id: 'api-docs',
-          icon: 'code',
-          title: 'API Reference',
-          description: 'Detailed documentation of our API endpoints',
-        },
-        {
-          id: 'guides',
-          icon: 'book',
-          title: 'Guides',
-          description: 'Step-by-step tutorials and how-to guides',
-        },
-        {
-          id: 'demo',
-          icon: 'laptop-code',
-          title: 'Demo',
-          description: 'Practical examples and code snippets',
-        },
-        {
-          id: 'faq',
-          icon: 'question-circle',
-          title: 'FAQ',
-          description: 'Frequently asked questions',
-        },
-        {
-          id: 'community',
-          icon: 'users',
-          title: 'Community',
-          description: 'Join our developer community',
-        },
-      ];
-      return html`
-        <style>
-          .docs-landing {
-            padding: 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
-            height: 100%;
-            box-sizing: border-box;
-          }
-          .docs-header {
-            text-align: center;
-            margin-bottom: 3rem;
-            opacity: 0;
-            animation: fadeInUp 0.6s ease-out forwards;
-          }
-          .docs-header h1 {
-            font-size: 2.5rem;
-            margin: 0 0 1rem;
-            line-height: 1.2;
-          }
-          .docs-header p {
-            font-size: 1.2rem;
-            max-width: 700px;
-            margin: 0 auto 2rem;
-            line-height: 1.6;
-          }
-          .docs-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 1.5rem;
-            margin: 0;
-            padding: 0;
-            list-style: none;
-          }
-          .docs-card-container {
-            cursor: pointer;
-            opacity: 0;
-            margin-bottom: 3rem;
-            animation: fadeInUp 0.6s ease-out forwards;
-          }
-          .docs-card {
-            border-radius: 8px;
-            padding: 1.5rem;
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            position: relative;
-            transition: all 0.3s ease-in-out;
-          }
 
-          .card-icon {
-            font-size: 1.75rem;
-            width: 56px;
-            height: 56px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 0 1.25rem;
-            transition: transform 0.2s ease;
-          }
+    const landingCards = [
+      {
+        id: 'getting-started',
+        icon: 'rocket',
+        title: 'Getting Started',
+        description: 'Learn the basics and get started with our platform',
+        docType: 'src',
+      },
+      {
+        id: 'api-docs',
+        icon: 'code',
+        title: 'API Reference',
+        description: 'Detailed documentation of our API endpoints',
+        docType: 'api',
+      },
+      {
+        id: 'guides',
+        icon: 'book',
+        title: 'Guides',
+        description: 'Step-by-step tutorials and how-to guides',
+        docType: 'src',
+      },
+      {
+        id: 'demo',
+        icon: 'laptop-code',
+        title: 'Demo',
+        description: 'Practical examples and code snippets',
+        docType: 'demo',
+      },
+      {
+        id: 'faq',
+        icon: 'question-circle',
+        title: 'FAQ',
+        description: 'Frequently asked questions',
+        docType: 'src',
+      },
+      {
+        id: 'community',
+        icon: 'users',
+        title: 'Community',
+        description: 'Join our developer community',
+        docType: 'repo',
+      },
+    ];
+
+    // A card resolves to a documented entry, never to a URL of its own: the
+    // submenu button and the card must open the same place.
+    const openLandingCard = (docType) => {
+      const btn = s(`.btn-docs-${docType}`);
+      if (btn) return btn.click();
+      location.href = Docs.Data.find((d) => d.type === docType).url();
+    };
 
-          .card-content {
-            flex: 1;
+    setTimeout(() => {
+      for (const { id, docType } of landingCards) {
+        const cardEl = s(`.docs-card-container-${id}`);
+        if (!cardEl) continue;
+        cardEl.onclick = () => openLandingCard(docType);
+        // The card is a div, so the keyboard affordances a button would carry
+        // have to be declared and handled explicitly.
+        cardEl.onkeydown = (e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return;
+          e.preventDefault();
+          openLandingCard(docType);
+        };
+      }
+    });
+
+    return html`
+      <style>
+        .docs-landing {
+          padding: 2rem;
+          max-width: 1200px;
+          margin: 0 auto;
+          box-sizing: border-box;
+        }
+        .docs-header {
+          text-align: center;
+          margin-bottom: 3rem;
+          opacity: 0;
+          animation: fadeInUp 0.6s ease-out forwards;
+        }
+        .docs-header h1 {
+          font-size: 2.5rem;
+          margin: 0 0 1rem;
+          line-height: 1.2;
+        }
+        .docs-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+          gap: 1.5rem;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+        .docs-card-container {
+          cursor: pointer;
+          opacity: 0;
+          animation: fadeInUp 0.6s ease-out forwards;
+          border-radius: 8px;
+        }
+        .docs-card-container:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 3px;
+        }
+        .docs-card {
+          border-radius: 8px;
+          padding: 1.5rem;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          box-sizing: border-box;
+          transition:
+            transform 0.25s ease,
+            background 0.25s ease,
+            border-color 0.25s ease;
+        }
+        .docs-card-container:hover .docs-card,
+        .docs-card-container:focus-visible .docs-card {
+          transform: translateY(-4px);
+        }
+        .card-icon {
+          font-size: 1.75rem;
+          width: 56px;
+          height: 56px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 0 1.25rem;
+          transition: transform 0.25s ease;
+        }
+        .docs-card-container:hover .card-icon {
+          transform: scale(1.08);
+        }
+        .card-content {
+          flex: 1;
+        }
+        .card-content h3 {
+          margin: 0 0 0.5rem;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+        .card-content p {
+          margin: 0;
+          font-size: 0.95rem;
+          line-height: 1.5;
+          opacity: 0.85;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .docs-header,
+          .docs-card-container {
+            animation: none;
+            opacity: 1;
           }
-          .card-content h3 {
-            margin: 0 0 0.5rem;
-            font-size: 1.25rem;
-            font-weight: 600;
+          .docs-card,
+          .card-icon {
+            transition: none;
           }
-          .card-content p {
-            margin: 0;
-            font-size: 0.95rem;
-            transition: color 0.3s ease;
+          .docs-card-container:hover .docs-card,
+          .docs-card-container:hover .card-icon {
+            transform: none;
           }
-        </style>
+        }
+      </style>
 
-        <style>
-          ${docsData
+      <style>
+        ${landingCards
+          .map(
+            (_, index) => css`
+              .docs-card-container:nth-child(${index + 1}) {
+                animation-delay: ${0.1 * (index + 1)}s;
+              }
+            `,
+          )
+          .join('')}
+      </style>
+
+      <div class="docs-landing">
+        <div class="docs-header">
+          <h1>Documentation</h1>
+        </div>
+
+        <ul class="docs-grid">
+          ${landingCards
             .map(
-              (_, index) => css`
-                .docs-card-container:nth-child(${index + 1}) {
-                  animation-delay: ${0.1 * (index + 1)}s;
-                }
+              ({ id, icon, title, description }) => html`
+                <div
+                  class="in docs-card-container docs-card-container-${id}"
+                  role="link"
+                  tabindex="0"
+                  aria-label="${title}: ${description}"
+                >
+                  <li class="docs-card box-content-border hover">
+                    <div class="card-icon">
+                      <i class="fas fa-${icon}" aria-hidden="true"></i>
+                    </div>
+                    <div class="card-content">
+                      <h3>${title}</h3>
+                      <p>${description}</p>
+                    </div>
+                  </li>
+                </div>
               `,
             )
             .join('')}
-        </style>
-
-        <div class="docs-landing">
-          <div class="docs-header">
-            <h1>Documentation</h1>
-            <!--
-                    <div class="search-bar">
-                      <i class="fas fa-search"></i>
-                      <input type="text" placeholder="Search documentation..." id="docs-search">
-                    </div>
-                    -->
-          </div>
-
-          <ul class="docs-grid">
-            ${docsData
-              .map((item) => {
-                setTimeout(() => {
-                  if (s(`.docs-card-container-${item.id}`)) {
-                    s(`.docs-card-container-${item.id}`).onclick = () => {
-                      if (item.id.match('demo')) {
-                        const demoData = Docs.Data.find((d) => d.type === 'demo');
-                        location.href = demoData
-                          ? demoData.url()
-                          : 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
-                      } else if (item.id.match('api')) {
-                        if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
-                      } else {
-                        if (s(`.btn-docs-src`)) s(`.btn-docs-src`).click();
-                      }
-                    };
-                  }
-                });
-                return html`
-                  <div class="in docs-card-container docs-card-container-${item.id}">
-                    <li class="docs-card">
-                      <div class="card-icon">
-                        <i class="fas fa-${item.icon}"></i>
-                      </div>
-                      <div class="card-content">
-                        <h3>${item.title}</h3>
-                        <p>${item.description}</p>
-                      </div>
-                    </li>
-                  </div>
-                `;
-              })
-              .join('')}
-          </ul>
-        </div>
-      `;
-    }
+        </ul>
+      </div>
+    `;
   }
 }
 export { Docs };