ClickStack: add redoc for HyperDX API

docs/use-cases/observability/clickstack/_api.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: API Reference
+sidebar_position: 100
+slug: /use-cases/observability/clickstack/api
+title: ClickStack API Reference
+description: Complete API reference for the ClickStack observability platform
+show_title: false
+hide_table_of_contents: true
+---
+
+import RedocApi from '@site/src/components/RedocAPI/RedocApi';
+
+<RedocApi embedded={true} />

docusaurus.config.en.js

@@ -14,7 +14,7 @@ const frontmatterValidator = require('./plugins/frontmatter-validation/frontmatt
 import pluginLlmsTxt from './plugins/llms-txt-plugin.ts'
 import prismLight from "./src/utils/prismLight";
 import prismDark from "./src/utils/prismDark";
-import glossaryTransformer from "./plugins/glossary-transformer.js";
+// import glossaryTransformer from "./plugins/glossary-transformer.js";
 
 // Helper function to skip over index.md files.
 function skipIndex(items) {
@@ -156,7 +156,7 @@ const config = {
           showLastUpdateTime: false,
           sidebarCollapsed: true,
           routeBasePath: "/",
-          remarkPlugins: [math, remarkCustomBlocks, glossaryTransformer],
+          remarkPlugins: [math, remarkCustomBlocks],
           beforeDefaultRemarkPlugins: [fixLinks],
           rehypePlugins: [katex],
         },
@@ -190,7 +190,7 @@ const config = {
               blogPath
             );
           },
-          remarkPlugins: [math, remarkCustomBlocks, glossaryTransformer],
+          remarkPlugins: [math, remarkCustomBlocks],
           beforeDefaultRemarkPlugins: [fixLinks],
           rehypePlugins: [katex],
         },
@@ -292,7 +292,7 @@ const config = {
       prism: {
         theme: prismLight,
         darkTheme: prismDark,
-        additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml", "bash", "docker", "csharp"],
+        additionalLanguages: ["java", "cpp", "rust", "python", "javascript", "yaml", "bash", "docker", "csharp", "scala"],
         magicComments: [
           // Remember to extend the default highlight class name as well!
           {

package.json

@@ -50,7 +50,9 @@
     "@redocly/cli": "^1.34.0",
     "axios": "^1.13.1",
     "clsx": "^2.1.0",
+    "docusaurus-plugin-openapi-docs": "^4.5.1",
     "docusaurus-plugin-sass": "^0.2.6",
+    "docusaurus-theme-openapi-docs": "^4.5.1",
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.2",
     "esbuild": "^0.25.11",
@@ -68,6 +70,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-medium-image-zoom": "^5.2.14",
+    "redoc": "^2.5.2",
+    "redocusaurus": "^2.5.0",
     "rehype-katex": "^7.0.1",
     "remark-docusaurus-tabs": "^0.2.0",
     "remark-link-rewrite": "^1.0.7",

sidebars.js

@@ -1694,7 +1694,12 @@ const sidebars = {
               dirName: "use-cases/observability/clickstack/integration-examples",
             },
           ]
-        }
+        },
+        {
+          type: 'link',
+          label: 'ClickStack API',
+          href: 'https://clickhouse.com/docs/clickstack-api',
+        },
       ]
     },
   ],

src/components/RedocAPI/RedocApi.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { RedocStandalone } from 'redoc';
+import { useColorMode } from '@docusaurus/theme-common';
+import styles from './styles.module.scss'
+
+export default function RedocApi({ embedded = false }) {
+    const { colorMode } = useColorMode();
+    const isDarkMode = colorMode === 'dark';
+
+    return (
+        <div className={embedded ? styles.embeddedContainer : ''}>
+            <RedocStandalone
+                specUrl="/docs/apis/openapi.json"
+                options={{
+                    scrollYOffset: 60,
+                    theme: {
+                        colors: {
+                            primary: {
+                                main: isDarkMode ? '#faff69' : '#ffcc00',
+                            },
+                            text: {
+                                primary: isDarkMode ? '#ffffff' : '#000000',
+                                secondary: isDarkMode ? '#b4b4b4' : '#666666',
+                            },
+                            border: {
+                                dark: isDarkMode ? '#444444' : '#cccccc',
+                                light: isDarkMode ? '#333333' : '#eeeeee',
+                            },
+                            http: {
+                                get: '#6bbd5b',
+                                post: '#248fb2',
+                                put: '#9b708b',
+                                options: '#d3ca12',
+                                patch: '#e09d43',
+                                delete: '#e27a7a',
+                                basic: '#999',
+                                link: '#31bbb6',
+                                head: '#c167e4',
+                            },
+                        },
+                        sidebar: {
+                            backgroundColor: isDarkMode ? '#1b1b1d' : '#fafafa',
+                            textColor: isDarkMode ? '#ffffff' : '#000000',
+                        },
+                        rightPanel: {
+                            backgroundColor: isDarkMode ? '#1b1b1d' : '#263238',
+                        },
+                        typography: {
+                            fontSize: '14px',
+                            fontFamily: 'system-ui, -apple-system, sans-serif',
+                            headings: {
+                                fontFamily: 'system-ui, -apple-system, sans-serif',
+                            },
+                            code: {
+                                fontSize: '13px',
+                                backgroundColor: isDarkMode ? '#2d2d30' : '#f5f5f5',
+                                color: isDarkMode ? '#d4d4d4' : '#000000',
+                            },
+                        },
+                    }
+                }}
+                className={styles.redoc}
+            />
+        </div>
+    );
+}
+

src/components/RedocAPI/styles.module.scss

@@ -0,0 +1,155 @@
+:global(.redoc-page) {
+    main {
+        padding: 0 !important;
+        margin: 0 !important;
+        max-height: calc(100vh - var(--ifm-navbar-height)) !important;
+        overflow: hidden !important;
+    }
+}
+
+:global(.redoc-wrap) {
+    position: fixed !important;
+    top: var(--ifm-navbar-height) !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    overflow: auto !important;
+    margin: 0 !important;
+}
+
+.embeddedContainer {
+    // Hide the right sidebar/TOC
+    & ~ :global(aside.theme-doc-sidebar-container) {
+        display: none !important;
+    }
+
+    :global(.redoc-wrap) {
+        position: relative !important;
+        top: auto !important;
+        left: auto !important;
+        right: auto !important;
+        bottom: auto !important;
+        min-height: calc(100vh - var(--ifm-navbar-height)) !important;
+        height: auto !important;
+    }
+}
+
+// Target the parent container when embedded
+:global(.markdown) {
+    .embeddedContainer {
+        margin: 0 !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+}
+
+// Make the main content area full width when RedocAPI is embedded
+:global(.theme-doc-markdown) {
+    &:has(.embeddedContainer) {
+        max-width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+
+        & + :global(aside) {
+            display: none !important;
+        }
+    }
+}
+
+// Target the doc item wrapper
+:global(.docItemContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module),
+:global([class*="docItemContainer"]) {
+    &:has(.embeddedContainer) {
+        max-width: 100% !important;
+
+        :global(.col--3) {
+            display: none !important;
+        }
+    }
+}
+
+// Ensure the main column takes full width when embedded
+:global(.docMainContainer) {
+    &:has(.embeddedContainer) {
+        max-width: 100% !important;
+
+        :global(.container) {
+            max-width: 100% !important;
+            padding: 0 !important;
+        }
+
+        :global(.row) {
+            margin: 0 !important;
+        }
+
+        :global(.col) {
+            max-width: 100% !important;
+            padding: 0 !important;
+        }
+    }
+}
+
+// Fix dark mode text visibility in Redoc
+:global([data-theme='dark']) {
+    .embeddedContainer {
+        // Fix dropdown text
+        :global(select),
+        :global(option),
+        :global(button),
+        :global(input) {
+            color: #ffffff !important;
+            background-color: #2d2d30 !important;
+            border-color: #444444 !important;
+        }
+
+        // Fix any remaining dark text on dark background
+        :global(.redoc-wrap) {
+            color: #ffffff !important;
+
+            // Make all headers white in dark mode
+            :global(h1),
+            :global(h2),
+            :global(h3),
+            :global(h4),
+            :global(h5),
+            :global(h6) {
+                color: #ffffff !important;
+            }
+
+            :global(p),
+            :global(span),
+            :global(div),
+            :global(label) {
+                color: inherit !important;
+            }
+
+            // Fix specific Redoc UI elements
+            :global([role="button"]),
+            :global(.menu-content) {
+                color: #ffffff !important;
+            }
+
+            // Fix authorization dropdown specifically
+            :global(.sc-*),
+            :global([class*="sc-"]) {
+                select,
+                option,
+                button,
+                input {
+                    color: #ffffff !important;
+                    background-color: #2d2d30 !important;
+                    border-color: #444444 !important;
+                }
+            }
+
+            // Fix dropdown menus and select boxes
+            :global(select) {
+                appearance: none;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
+                background-repeat: no-repeat !important;
+                background-position: right 8px center !important;
+                padding-right: 30px !important;
+            }
+        }
+    }
+}

src/pages/clickstack-api.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Layout from '@theme/Layout'
+import RedocApi from '../components/RedocApi/RedocApi'
+
+export default function ClickstackApi() {
+    return (
+        <Layout
+            title="ClickstackApi"
+            description="ClickstackApi page"
+            noFooter={true}
+            wrapperClassName="redoc-page"
+        >
+            <RedocApi/>
+        </Layout>
+    )
+}