Unified Sumo API docs with API references page (Redocusaurus)

docusaurus.config.js

@@ -222,6 +222,54 @@ module.exports = {
         },
       }),
     ],
+    [
+      'redocusaurus',
+      {
+        specs: [
+          {
+            id: 'sumo-api',
+            spec: 'static/sumologic-api.yaml',
+            route: '/docs/api-reference/',
+            layout: {
+              title: 'API Reference',
+              noFooter: true,
+            },
+          },
+        ],
+        theme: {
+          primaryColor: '#0055b3',
+          options: {
+            lazyRendering: true,
+          },
+          theme: {
+            typography: {
+              fontFamily: '"Lab Grotesque", sans-serif',
+              fontSize: '16px',
+              fontWeightRegular: '400',
+              fontWeightBold: '700',
+              headings: {
+                fontFamily: '"Lab Grotesque", "Segoe UI"',
+                fontWeight: '400',
+              },
+              code: {
+                fontSize: '13px',
+                fontFamily: 'Source Code Pro, monospace',
+              },
+            },
+            codeBlock: {
+              backgroundColor: '#1e1e1e',
+            },
+            rightPanel: {
+              backgroundColor: '#263238',
+              textColor: '#ffffff',
+            },
+            codeSample: {
+              backgroundColor: '#1e1e1e',
+            },
+          },
+        },
+      },
+    ],
   ],
   plugins: [
     'docusaurus-plugin-sass',
@@ -489,7 +537,6 @@ module.exports = {
           {
             label: 'API',
             position: 'left',
-            to: '#',
             type: 'dropdown',
             items:[
               {
@@ -500,8 +547,9 @@ module.exports = {
               },
               {
                 label: 'API Reference',
-                href: 'https://api.sumologic.com/docs/',
+                to: '/docs/api-reference/',
                 icon: 'code',
+                hideParentLabel: true,
               },
             ]
           },

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "DOCUSAURUS_IGNORE_SSG_WARNINGS=true docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -153,6 +153,7 @@
     "react-iframe": "^1.8.0",
     "react-json-view-lite": "1.2.1",
     "react-live": "^4.1.5",
+    "redocusaurus": "^2.5.0",
     "regjsgen": "0.8.0",
     "remark-code-import": "^1.2.0",
     "remark-emoji": "^4.0.1",

src/css/sumo.scss

@@ -1753,3 +1753,42 @@ article header h2[class*='title_'] {
 .language-sumo .token.time     { color: var(--sumo-number);   }
 .language-sumo .token.operator { color: var(--sumo-operator); }
 .language-sumo .token.regex    { color: var(--sumo-regex);    }
+
+/* Redoc centre panel code blocks */
+
+.redoc-markdown pre {
+  background-color: #1e1e1e !important;
+  border: none !important;
+  border-radius: 4px;
+  padding: 0 !important;
+  overflow-x: auto;
+}
+
+.redoc-markdown pre > code {
+  background-color: #1e1e1e !important;
+  color: #f8f8f2 !important;
+  display: block;
+  padding: 16px !important;
+  width: max-content;
+  min-width: 100%;
+  font-family: 'Source Code Pro', monospace !important;
+  font-size: 13px !important;
+}
+
+.redoc-markdown pre > code .token.operator {
+  color: #f92672 !important;
+}
+
+/* Scrollbar styling for Redoc code blocks */
+.redoc-markdown pre::-webkit-scrollbar {
+  height: 6px;
+}
+
+.redoc-markdown pre::-webkit-scrollbar-track {
+  background: #1e1e1e !important;
+}
+
+.redoc-markdown pre::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 3px;
+}

src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -66,8 +66,15 @@ according to the selected dropdown item
 function getDropdownProps(props, items, localPathname) {
   const activeItem = items.filter((item) => isItemActive(item, localPathname));
   if (activeItem.length) {
+    const { icon: _icon, ...activeItemWithoutIcon } = activeItem[0];
+    if (activeItem[0].hideParentLabel) {
+      return {
+        ...activeItemWithoutIcon,
+        label: activeItem[0].label,
+      };
+    }
     return {
-      ...activeItem[0],
+      ...activeItemWithoutIcon,
       label: props.label + ' > ' + activeItem[0].label,
     };
   }