Fix: Revert to sidebar in rapidocs

Signed-off-by: George J Padayatti <[email protected]>
decentralised-dataexchange · Sep 25, 2023 · 4b8d3e8 · 4b8d3e8
1 parent eec9fd3
commit 4b8d3e8
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 98 deletions.
diff --git a/openapi/v2023.8.1/index.html b/openapi/v2023.8.1/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="GovStack Consent Building Block APIs" />
-    <title>GovStack Consent Building Block APIs</title>
+    <meta name="description" content="GovStack Consent BB APIs" />
+    <title>GovStack Consent BB APIs</title>
     <link
       href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;family=Roboto+Mono&amp;display=swap"
       rel="stylesheet"
@@ -17,81 +17,76 @@
       // JavaScript to modify render-style based on screen width
       window.addEventListener("DOMContentLoaded", (event) => {
         const rapiDocElement = document.querySelector("rapi-doc");
-        // Function to apply the style when the element is available
-        const applyStyleToApiInfo = () => {
-          const header =
-            rapiDocElement.shadowRoot.querySelector(".main-header");
-          const mainContentElement =
-            rapiDocElement.shadowRoot.querySelector(".main-content");
-          const apiInfoElement =
-            rapiDocElement.shadowRoot.querySelector("#api-info");
-          const labelOperationPathElements =
-            rapiDocElement.shadowRoot.querySelectorAll(
-              "[part*='section-operation-webhook-method']"
-            );
+        if (window.innerWidth <= 768) {
+          // Assuming 768px as the breakpoint for tablet size
+          rapiDocElement.setAttribute("render-style", "read"); // for sizes less than a tablet
+
+          // 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");
+            const labelOperationPathElements =
+              rapiDocElement.shadowRoot.querySelectorAll(
+                "[part*='section-operation-webhook-method']"
+              );
+
+            if (
+              apiInfoElement &&
+              labelOperationPathElements &&
+              mainContentElement
+            ) {
+              mainContentElement.style.padding = "10px";
+              apiInfoElement.style.marginLeft = "0";
+              labelOperationPathElements.forEach(function (element) {
+                element.style.overflowX = "scroll";
+              });
+              observer.disconnect(); // Stop observing once style is applied
+            }
+          };
 
-          if (
-            apiInfoElement &&
-            labelOperationPathElements &&
-            mainContentElement &&
-            header
-          ) {
-            mainContentElement.style.padding = "10px";
-            apiInfoElement.style.marginLeft = "0";
-            header.style.padding = "8px 4px 8px 16px";
-            labelOperationPathElements.forEach(function (element) {
-              element.style.overflowX = "scroll";
+          // Observe changes in the Shadow DOM
+          const observer = new MutationObserver(applyStyleToApiInfo);
+          if (rapiDocElement.shadowRoot) {
+            observer.observe(rapiDocElement.shadowRoot, {
+              childList: true,
+              subtree: true,
             });
-            observer.disconnect(); // Stop observing once style is applied
+            applyStyleToApiInfo(); // Try applying the style immediately in case the element is already there
           }
-        };
-
-        // 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
-        }
-        if (window.innerWidth <= 768) {
-          // Assuming 768px as the breakpoint for tablet size
-          rapiDocElement.setAttribute("render-style", "view"); // for sizes less than a tablet
         } else {
-          rapiDocElement.setAttribute("render-style", "view"); // for sizes greater than a tablet
+          rapiDocElement.setAttribute("render-style", "focused"); // for sizes greater than a tablet
         }
       });
     </script>
   </head>
   <body>
     <rapi-doc
+      render-style="focused"
       spec-url="./bundled.yaml"
       theme="light"
-      show-header="true"
+      show-header="false"
       nav-bg-color="#0a065e"
-      header-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-url-load="false"
-      allow-spec-file-load="false"
       allow-spec-file-download="true"
+      show-curl-before-try="false"
       schema-style="table"
       regular-font="Hind"
       font-size="large"
       mono-font="Roboto Mono"
       schema-expand-level="1"
-      default-schema-tab="example"
-      render-style="view"
+      default-schema-tab="schema"
     >
       <img
-        slot="logo"
+        slot="nav-logo"
         style="height: 130px; width: 130px; margin: 0 auto"
         src="./resources/logo.svg"
       />
     </rapi-doc>
   </body>
-</html>
+</html>
diff --git a/openapi/v2023.8.2/index.html b/openapi/v2023.8.2/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="GovStack Consent Building Block APIs" />
-    <title>GovStack Consent Building Block APIs</title>
+    <meta name="description" content="GovStack Consent BB APIs" />
+    <title>GovStack Consent BB APIs</title>
     <link
       href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&amp;family=Roboto+Mono&amp;display=swap"
       rel="stylesheet"
@@ -17,81 +17,76 @@
       // JavaScript to modify render-style based on screen width
       window.addEventListener("DOMContentLoaded", (event) => {
         const rapiDocElement = document.querySelector("rapi-doc");
-        // Function to apply the style when the element is available
-        const applyStyleToApiInfo = () => {
-          const header =
-            rapiDocElement.shadowRoot.querySelector(".main-header");
-          const mainContentElement =
-            rapiDocElement.shadowRoot.querySelector(".main-content");
-          const apiInfoElement =
-            rapiDocElement.shadowRoot.querySelector("#api-info");
-          const labelOperationPathElements =
-            rapiDocElement.shadowRoot.querySelectorAll(
-              "[part*='section-operation-webhook-method']"
-            );
+        if (window.innerWidth <= 768) {
+          // Assuming 768px as the breakpoint for tablet size
+          rapiDocElement.setAttribute("render-style", "read"); // for sizes less than a tablet
+
+          // 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");
+            const labelOperationPathElements =
+              rapiDocElement.shadowRoot.querySelectorAll(
+                "[part*='section-operation-webhook-method']"
+              );
+
+            if (
+              apiInfoElement &&
+              labelOperationPathElements &&
+              mainContentElement
+            ) {
+              mainContentElement.style.padding = "10px";
+              apiInfoElement.style.marginLeft = "0";
+              labelOperationPathElements.forEach(function (element) {
+                element.style.overflowX = "scroll";
+              });
+              observer.disconnect(); // Stop observing once style is applied
+            }
+          };
 
-          if (
-            apiInfoElement &&
-            labelOperationPathElements &&
-            mainContentElement &&
-            header
-          ) {
-            mainContentElement.style.padding = "10px";
-            apiInfoElement.style.marginLeft = "0";
-            header.style.padding = "8px 4px 8px 16px";
-            labelOperationPathElements.forEach(function (element) {
-              element.style.overflowX = "scroll";
+          // Observe changes in the Shadow DOM
+          const observer = new MutationObserver(applyStyleToApiInfo);
+          if (rapiDocElement.shadowRoot) {
+            observer.observe(rapiDocElement.shadowRoot, {
+              childList: true,
+              subtree: true,
             });
-            observer.disconnect(); // Stop observing once style is applied
+            applyStyleToApiInfo(); // Try applying the style immediately in case the element is already there
           }
-        };
-
-        // 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
-        }
-        if (window.innerWidth <= 768) {
-          // Assuming 768px as the breakpoint for tablet size
-          rapiDocElement.setAttribute("render-style", "view"); // for sizes less than a tablet
         } else {
-          rapiDocElement.setAttribute("render-style", "view"); // for sizes greater than a tablet
+          rapiDocElement.setAttribute("render-style", "focused"); // for sizes greater than a tablet
         }
       });
     </script>
   </head>
   <body>
     <rapi-doc
+      render-style="focused"
       spec-url="./bundled.yaml"
       theme="light"
-      show-header="true"
+      show-header="false"
       nav-bg-color="#0a065e"
-      header-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-url-load="false"
-      allow-spec-file-load="false"
       allow-spec-file-download="true"
+      show-curl-before-try="false"
       schema-style="table"
       regular-font="Hind"
       font-size="large"
       mono-font="Roboto Mono"
       schema-expand-level="1"
-      default-schema-tab="example"
-      render-style="view"
+      default-schema-tab="schema"
     >
       <img
-        slot="logo"
+        slot="nav-logo"
         style="height: 130px; width: 130px; margin: 0 auto"
         src="./resources/logo.svg"
       />
     </rapi-doc>
   </body>
-</html>
+</html>