Support rendering OpenAPI spec (#36449)

Fix #20852

web_src/css/standalone/swagger.css

@@ -29,9 +29,13 @@ body {
   margin-right: 0.5rem;
 }
 
+.swagger-spec-content {
+  display: none;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
-    background: #1e1e1e;
+    background: #14171a;
   }
   .swagger-ui, .swagger-back-link {
     filter: invert(88%) hue-rotate(180deg);

web_src/js/markup/render-iframe.ts

@@ -9,7 +9,9 @@ async function loadRenderIframeContent(iframe: HTMLIFrameElement) {
     if (!e.data?.giteaIframeCmd || e.data?.giteaIframeId !== iframe.id) return;
     const cmd = e.data.giteaIframeCmd;
     if (cmd === 'resize') {
-      iframe.style.height = `${e.data.iframeHeight}px`;
+      // TODO: sometimes the reported iframeHeight is not the size we need, need to figure why. Example: openapi swagger.
+      //  As a workaround, add some pixels here.
+      iframe.style.height = `${e.data.iframeHeight + 2}px`;
     } else if (cmd === 'open-link') {
       if (e.data.anchorTarget === '_blank') {
         window.open(e.data.openLink, '_blank');

web_src/js/standalone/external-render-iframe.ts

@@ -21,6 +21,9 @@ function mainExternalRenderIframe() {
   };
 
   const updateIframeHeight = () => postIframeMsg('resize', {iframeHeight: document.documentElement.scrollHeight});
+  const resizeObserver = new ResizeObserver(() => updateIframeHeight());
+  resizeObserver.observe(window.document.documentElement);
+
   updateIframeHeight();
   window.addEventListener('DOMContentLoaded', updateIframeHeight);
   // the easiest way to handle dynamic content changes and easy to debug, can be fine-tuned in the future

web_src/js/standalone/swagger.ts

@@ -1,18 +1,30 @@
 import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
 import 'swagger-ui-dist/swagger-ui.css';
+import {load as loadYaml} from 'js-yaml';
 
 window.addEventListener('load', async () => {
-  const url = document.querySelector('#swagger-ui')!.getAttribute('data-source')!;
-  const res = await fetch(url);
-  const spec = await res.json();
+  const elSwaggerUi = document.querySelector('#swagger-ui')!;
+  const url = elSwaggerUi.getAttribute('data-source')!;
+  let spec: any;
+  if (url) {
+    const res = await fetch(url);
+    spec = await res.json();
+  } else {
+    const elSpecContent = elSwaggerUi.querySelector<HTMLTextAreaElement>('.swagger-spec-content')!;
+    const filename = elSpecContent.getAttribute('data-spec-filename');
+    const isJson = filename?.toLowerCase().endsWith('.json');
+    spec = isJson ? JSON.parse(elSpecContent.value) : loadYaml(elSpecContent.value);
+  }
 
   // Make the page's protocol be at the top of the schemes list
   const proto = window.location.protocol.slice(0, -1);
-  spec.schemes.sort((a: string, b: string) => {
-    if (a === proto) return -1;
-    if (b === proto) return 1;
-    return 0;
-  });
+  if (spec?.schemes) {
+    spec.schemes.sort((a: string, b: string) => {
+      if (a === proto) return -1;
+      if (b === proto) return 1;
+      return 0;
+    });
+  }
 
   SwaggerUI({
     spec,