Fix: Use rapi-doc instead of swaggerui; Add DISP OpenAPI specification

Signed-off-by: George J Padayatti <[email protected]>

src/pages/dataintermediation.js

@@ -13,22 +13,66 @@ export default function DataIntermediation() {
       description="Enabling trust in the data ecosystem for next-generation data sharing. ">
       <Helmet>
         <title>NordXDataspace (NXD)</title>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" />
+        {/* <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" /> */}
+        <link href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;family=Roboto+Mono&amp;display=swap" rel="stylesheet" />
       </Helmet>
-      <div id="swagger-ui"></div>
+      <rapi-doc 
+        spec-url = "/openapi/disp.yaml"
+        render-style="view"
+        theme="light"
+        show-header="false"
+        nav-bg-color="#0a065e"
+        nav-text-color="#fff"
+        primary-color="#0a065e"
+        persist-auth="true"
+        show-method-in-nav-bar="as-colored-block"
+        show-components="true"
+        allow-spec-file-download="true"
+        show-curl-before-try="true"
+        schema-style="table"
+        regular-font="Hind"
+        font-size="large"
+        mono-font="Roboto Mono"
+        schema-expand-level="1"
+        default-schema-tab="schema"
+      > </rapi-doc>
       <BrowserOnly>
         {() => {
 
           const script = document.createElement("script");
-          script.src = 'https://unpkg.com/[email protected]/swagger-ui-bundle.js'; // whatever url you want here
+          script.src = 'https://unpkg.com/rapidoc/dist/rapidoc-min.js'; // whatever url you want here
+          script.type = 'module'
           script.charset = "utf-8";
           script.crossOrigin = true;
           script.async = false;
           script.onload = function () {
-            window.ui = SwaggerUIBundle({
-              url: '/openapi/datamarketplace.yaml',
-              dom_id: '#swagger-ui',
-            });
+            const rapiDocElement = document.querySelector("rapi-doc");
+            // Function to apply the style when the element is available
+            const applyStyleToApiInfo = () => {
+              const mainContentElement =
+                rapiDocElement.shadowRoot.querySelector(".main-content");
+              const apiInfoElement =
+                rapiDocElement.shadowRoot.querySelector("#api-info");
+
+              if (
+                apiInfoElement &&
+                mainContentElement
+              ) {
+                mainContentElement.style.padding = "10px";
+                apiInfoElement.style.marginLeft = "1px";
+                observer.disconnect(); // Stop observing once style is applied
+              }
+            };
+
+            // Observe changes in the Shadow DOM
+            const observer = new MutationObserver(applyStyleToApiInfo);
+            if (rapiDocElement.shadowRoot) {
+              observer.observe(rapiDocElement.shadowRoot, {
+                childList: true,
+                subtree: true,
+              });
+              applyStyleToApiInfo(); // Try applying the style immediately in case the element is already there
+            }
           };
           document.head.appendChild(script);
         }}

src/pages/datamarketplace.js

@@ -13,22 +13,66 @@ export default function DataMarketplace() {
       description="Enabling trust in the data ecosystem for next-generation data sharing. ">
       <Helmet>
         <title>NordXDataspace (NXD)</title>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" />
+        {/* <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" /> */}
+        <link href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;family=Roboto+Mono&amp;display=swap" rel="stylesheet" />
       </Helmet>
-      <div id="swagger-ui"></div>
+      <rapi-doc 
+        spec-url = "/openapi/datamarketplace.yaml"
+        render-style="view"
+        theme="light"
+        show-header="false"
+        nav-bg-color="#0a065e"
+        nav-text-color="#fff"
+        primary-color="#0a065e"
+        persist-auth="true"
+        show-method-in-nav-bar="as-colored-block"
+        show-components="true"
+        allow-spec-file-download="true"
+        show-curl-before-try="true"
+        schema-style="table"
+        regular-font="Hind"
+        font-size="large"
+        mono-font="Roboto Mono"
+        schema-expand-level="1"
+        default-schema-tab="schema"
+      > </rapi-doc>
       <BrowserOnly>
         {() => {
 
           const script = document.createElement("script");
-          script.src = 'https://unpkg.com/[email protected]/swagger-ui-bundle.js'; // whatever url you want here
+          script.src = 'https://unpkg.com/rapidoc/dist/rapidoc-min.js'; // whatever url you want here
+          script.type = 'module'
           script.charset = "utf-8";
           script.crossOrigin = true;
           script.async = false;
           script.onload = function () {
-            window.ui = SwaggerUIBundle({
-              url: '/openapi/datamarketplace.yaml',
-              dom_id: '#swagger-ui',
-            });
+            const rapiDocElement = document.querySelector("rapi-doc");
+            // Function to apply the style when the element is available
+            const applyStyleToApiInfo = () => {
+              const mainContentElement =
+                rapiDocElement.shadowRoot.querySelector(".main-content");
+              const apiInfoElement =
+                rapiDocElement.shadowRoot.querySelector("#api-info");
+
+              if (
+                apiInfoElement &&
+                mainContentElement
+              ) {
+                mainContentElement.style.padding = "10px";
+                apiInfoElement.style.marginLeft = "1px";
+                observer.disconnect(); // Stop observing once style is applied
+              }
+            };
+
+            // Observe changes in the Shadow DOM
+            const observer = new MutationObserver(applyStyleToApiInfo);
+            if (rapiDocElement.shadowRoot) {
+              observer.observe(rapiDocElement.shadowRoot, {
+                childList: true,
+                subtree: true,
+              });
+              applyStyleToApiInfo(); // Try applying the style immediately in case the element is already there
+            }
           };
           document.head.appendChild(script);
         }}

src/pages/domain.js

@@ -13,22 +13,66 @@ export default function Domain() {
       description="Enabling trust in the data ecosystem for next-generation data sharing. ">
       <Helmet>
         <title>NordXDataspace (NXD)</title>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" />
+        {/* <link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" /> */}
+        <link href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;family=Roboto+Mono&amp;display=swap" rel="stylesheet" />
       </Helmet>
-      <div id="swagger-ui"></div>
+      <rapi-doc 
+        spec-url = "/openapi/domainSpecific.yaml"
+        render-style="view"
+        theme="light"
+        show-header="false"
+        nav-bg-color="#0a065e"
+        nav-text-color="#fff"
+        primary-color="#0a065e"
+        persist-auth="true"
+        show-method-in-nav-bar="as-colored-block"
+        show-components="true"
+        allow-spec-file-download="true"
+        show-curl-before-try="true"
+        schema-style="table"
+        regular-font="Hind"
+        font-size="large"
+        mono-font="Roboto Mono"
+        schema-expand-level="1"
+        default-schema-tab="schema"
+      > </rapi-doc>
       <BrowserOnly>
         {() => {
 
           const script = document.createElement("script");
-          script.src = 'https://unpkg.com/[email protected]/swagger-ui-bundle.js'; // whatever url you want here
+          script.src = 'https://unpkg.com/rapidoc/dist/rapidoc-min.js'; // whatever url you want here
+          script.type = 'module'
           script.charset = "utf-8";
           script.crossOrigin = true;
           script.async = false;
           script.onload = function () {
-            window.ui = SwaggerUIBundle({
-              url: '/openapi/domainSpecific.yaml',
-              dom_id: '#swagger-ui',
-            });
+            const rapiDocElement = document.querySelector("rapi-doc");
+            // Function to apply the style when the element is available
+            const applyStyleToApiInfo = () => {
+              const mainContentElement =
+                rapiDocElement.shadowRoot.querySelector(".main-content");
+              const apiInfoElement =
+                rapiDocElement.shadowRoot.querySelector("#api-info");
+
+              if (
+                apiInfoElement &&
+                mainContentElement
+              ) {
+                mainContentElement.style.padding = "10px";
+                apiInfoElement.style.marginLeft = "1px";
+                observer.disconnect(); // Stop observing once style is applied
+              }
+            };
+
+            // Observe changes in the Shadow DOM
+            const observer = new MutationObserver(applyStyleToApiInfo);
+            if (rapiDocElement.shadowRoot) {
+              observer.observe(rapiDocElement.shadowRoot, {
+                childList: true,
+                subtree: true,
+              });
+              applyStyleToApiInfo(); // Try applying the style immediately in case the element is already there
+            }
           };
           document.head.appendChild(script);
         }}