Fix: Loading swagger UI by using javascript script loading

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

src/components/Header/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import Translate from '@docusaurus/Translate';
-import styles from './../../pages/index.module.css';
 import clsx from 'clsx';
 
 export default function Header() {

src/pages/dataintermediation.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import Footer from '@site/src/components/Footer';
+import Helmet from "react-helmet";
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export default function DataIntermediation() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title}`}
+      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" />
+      </Helmet>
+      <div id="swagger-ui"></div>
+      <BrowserOnly>
+        {() => {
+
+          const script = document.createElement("script");
+          script.src = 'https://unpkg.com/[email protected]/swagger-ui-bundle.js'; // whatever url you want here
+          script.charset = "utf-8";
+          script.crossOrigin = true;
+          script.async = false;
+          script.onload = function () {
+            window.ui = SwaggerUIBundle({
+              url: '/openapi/datamarketplace.yaml',
+              dom_id: '#swagger-ui',
+            });
+          };
+          document.head.appendChild(script);
+        }}
+      </BrowserOnly>
+      <Footer />
+    </Layout>
+  )
+}

src/pages/datamarketplace.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import Footer from '@site/src/components/Footer';
+import Helmet from "react-helmet";
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export default function DataMarketplace() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title}`}
+      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" />
+        <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js" crossorigin></script>
+      </Helmet>
+      <div id="swagger-ui"></div>
+      <BrowserOnly>
+        {() => {
+          window.onload = () => {
+            window.ui = SwaggerUIBundle({
+              url: '/openapi/datamarketplace.yaml',
+              dom_id: '#swagger-ui',
+            });
+          }
+        }}
+      </BrowserOnly>
+      <Footer />
+    </Layout>
+  )
+}

src/pages/domain.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import Footer from '../components/Footer';
+import Footer from '@site/src/components/Footer';
 import Helmet from "react-helmet";
-import SwaggerUI from "swagger-ui-react"
-import "swagger-ui-react/swagger-ui.css"
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 export default function Domain() {
   const { siteConfig } = useDocusaurusContext();
@@ -14,9 +13,21 @@ 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" />
+        <script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js" crossorigin></script>
       </Helmet>
-      <SwaggerUI url="openapi/data-marketplace.yaml" />
+      <div id="swagger-ui"></div>
+      <BrowserOnly>
+        {() => {
+          window.onload = () => {
+            window.ui = SwaggerUIBundle({
+              url: '/openapi/datamarketplace.yaml',
+              dom_id: '#swagger-ui',
+            });
+          }
+        }}
+      </BrowserOnly>
       <Footer />
     </Layout>
-  );
+  )
 }

src/pages/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import Footer from '../components/Footer';
+import Footer from '@site/src/components/Footer';
 import Helmet from "react-helmet";
-import Card from '../components/Card';
-import Header from '../components/Header';
+import Card from '@site/src/components/Card';
+import Header from '@site/src/components/Header';
 
 
 const CardList = [
   {
     title: "Data Marketplace APIs",
-    link: "/data-marketplace",
+    link: "/datamarketplace",
     description: (<>
       Get started with dHDSI data marketplace APIs after onboarding to the dHDSI marketplace.
     </>),
@@ -24,7 +24,7 @@ const CardList = [
   },
   {
     title: "Data Intermediation Service Provider APIs",
-    link: "/data-intermediation",
+    link: "/dataintermediation",
     description: (<>
       Get started with Data Intermediatoon Service Provider (DISP) APIs (Consents, Data Exchange and Digital Walets)
     </>),