no-merge(redoc): An attempt to use redoc for API documentation

package.json

@@ -15,21 +15,23 @@
  "@emotion/core": "^11.0.0",
  "@emotion/react": "^11.11.0",
  "@emotion/styled": "^11.0.0",
+ "@loadable/component": "^5.15.3",
  "@mdx-js/mdx": "^1.6.18",
  "@mdx-js/react": "^1.6.18",
  "@sentry-internal/global-search": "^0.5.7",
  "@sentry/browser": "7.55.2",
  "@sentry/webpack-plugin": "2.2.2",
  "@types/dompurify": "^3.0.2",
- "@types/js-cookie": "^3.0.3",
  "@types/jest": "^29.5.3",
+ "@types/js-cookie": "^3.0.3",
  "@types/js-yaml": "^3.0.0",
- "@types/node": "^20.3.1",
+ "@types/node": "^20.4.6",
  "@types/react": "18.2.12",
  "@types/react-dom": "18.2.5",
  "@types/react-helmet": "^6.1.0",
  "@typescript-eslint/eslint-plugin": "^5.59.11",
  "@typescript-eslint/parser": "^5.59.11",
+ "babel-preset-gatsby": "^3.11.0",
  "bootstrap": "4.6.1",
  "crypto-browserify": "^3.12.0",
  "dompurify": "^3.0.3",
@@ -58,6 +60,7 @@
  "js-cookie": "^3.0.5",
  "js-yaml": "^3.0.0",
  "jsdom": "^22.1.0",
+ "mobx": "^6.10.0",
  "platformicons": "^5.6.0",
  "prism-sentry": "^1.0.2",
  "prismjs": "^1.27.0",
@@ -69,10 +72,12 @@
  "react-helmet": "^5.2.1",
  "react-popper": "^2.2.4",
  "react-select": "^5.7.3",
+ "redoc": "^2.0.0",
  "remark-deflist": "^0.2.1",
  "sass": "^1.62.1",
  "search-insights": "^2.2.3",
  "stream-browserify": "^3.0.0",
+ "styled-components": "^5.0.5",
  "ts-node": "^10.9.1",
  "typescript": "^5.1.3"
  },
@@ -113,7 +118,7 @@
  "test": "jest"
  },
  "volta": {
- "node": "18.16.0",
+ "node": "20.5.0",
  "yarn": "1.22.5"
  }
 }

src/components/navbar.tsx

@@ -32,6 +32,11 @@ export function Navbar({platforms}: Props) {
  API
  </SmartLink>
  </Nav.Item>
+ <Nav.Item>
+ <SmartLink className="nav-link" to="/redoc-api/">
+ Redoc Demo
+ </SmartLink>
+ </Nav.Item>
  <Nav.Item>
  <Nav.Link href="https://changelog.getsentry.com/">Changelog</Nav.Link>
  </Nav.Item>

src/components/redocLoader.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {RedocStandalone} from 'redoc';
+
+export function RedocLoader() {
+ console.log('gets to the component');
+ const isSSR = typeof window === 'undefined';
+ console.log(isSSR);
+ return (
+ <RedocStandalone
+ specUrl="http://localhost:3000/open-api-new.json"
+ options={{
+ nativeScrollbars: true,
+ theme: {colors: {primary: {main: '#dd5522'}}},
+ }}
+ />
+ );
+}

src/pages/index.tsx

@@ -78,6 +78,11 @@ function IndexPage() {
  API
  </SmartLink>
  </Nav.Item>
+ <Nav.Item>
+ <SmartLink className="nav-link" to="/redoc-api/">
+ Redoc API
+ </SmartLink>
+ </Nav.Item>
  <Nav.Item>
  <Nav.Link href="https://changelog.getsentry.com/">Changelog</Nav.Link>
  </Nav.Item>

src/pages/redoc-api/index.mdx

@@ -0,0 +1,11 @@
+---
+title: Redoc Demo
+---
+
+import { RedocLoader } from "../../components/redocLoader";
+import { Navbar } from "../../components/navbar";
+
+<div>
+ <Navbar />
+ <RedocLoader />
+</div>