feat: integrate Redocusaurus for interactive OFREP OpenAPI docs page

Signed-off-by: Jonathan Norris <[email protected]>

Author: jonathannorris

docusaurus.config.ts

@@ -172,7 +172,7 @@ const themeConfig: ThemeCommonConfig & AlgoliaThemeConfig = {
   },
   prism: {
     theme: themes.oceanicNext,
-    additionalLanguages: ['java', 'csharp', 'powershell', 'php', 'kotlin', 'ruby', 'dart'],
+    additionalLanguages: ['java', 'csharp', 'powershell', 'php', 'kotlin', 'ruby', 'dart', 'scala'],
     magicComments: [
       {
         className: 'theme-code-block-highlighted-line',
@@ -284,7 +284,31 @@ const config: Config = {
       },
     },
   ],
-  presets: [['classic', presetClassicOptions]],
+  presets: [
+    ['classic', presetClassicOptions],
+    [
+      'redocusaurus',
+      {
+        specs: [
+          {
+            id: 'ofrep-api',
+            spec: 'https://raw.githubusercontent.com/open-feature/protocol/refs/heads/main/service/openapi.yaml',
+          },
+        ],
+        theme: {
+          primaryColor: '#1890ff',
+          options: {
+            disableSearch: true,
+            theme: {
+              sidebar: {
+                width: '0px',
+              },
+            },
+          },
+        },
+      },
+    ],
+  ],
   plugins: [
     async function tailwind() {
       return {
@@ -377,7 +401,7 @@ const config: Config = {
   markdown: {
     mermaid: true,
   },
-  themes: ['@docusaurus/theme-mermaid'],
+  themes: ['@docusaurus/theme-mermaid', 'docusaurus-theme-redoc'],
 };
 
 export default config;

package.json

@@ -57,6 +57,7 @@
     "react-instantsearch": "^7.15.8",
     "react-lite-youtube-embed": "^2.5.1",
     "react-transition-group": "^4.4.5",
+    "redocusaurus": "^2.5.0",
     "rehype-github-alerts": "^4.1.1",
     "remark-gfm": "^4.0.1",
     "remarkable": "2.0.1",
@@ -72,8 +73,8 @@
     "@docusaurus/tsconfig": "^3.9.1",
     "@types/fs-extra": "11.0.4",
     "@types/react": "^19.1.6",
-    "@typescript-eslint/parser": "8.35.1",
     "@typescript-eslint/eslint-plugin": "8.35.1",
+    "@typescript-eslint/parser": "8.35.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-mdx": "3.6.0",

src/css/custom.css

@@ -24,7 +24,7 @@
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-color-primary: #8D8DFF;
-    --ifm-navbar-background-color: #33363A;
+  --ifm-navbar-background-color: #33363A;
 }
 
 .header-github-link:hover {
@@ -36,13 +36,11 @@
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }
 
 [data-theme='dark'] .header-github-link::before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }
 
 .prism-code {
@@ -69,15 +67,16 @@
 .card-container *:last-child {
   margin-bottom: 0;
 }
-.code-block-diff-remove-line{
+
+.code-block-diff-remove-line {
   background-color: #ff00001f;
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
   border-left: 3px solid #ff000080;
 }
 
-.code-block-diff-add-line{
+.code-block-diff-add-line {
   background-color: #00ff001f;
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
@@ -89,11 +88,13 @@
 .github-badges {
   text-align: start;
 }
+
 /* Add some space between github badges */
 .github-badges>a {
   margin-left: 2px;
   margin-right: 2px;
 }
+
 /* center the footer items' content */
 .footer__item {
   text-align: center;
@@ -113,6 +114,7 @@
   background-color: white !important;
   border-radius: var(--ifm-global-radius);
 }
+
 /**
 * Disables the copy button on a code block if the language is
 * set to 'disable-copy-button'.
@@ -131,6 +133,7 @@
   margin: 0;
   line-height: normal;
 }
+
 .has-tooltip:hover .tooltip {
   @apply visible z-50;
 }
@@ -150,6 +153,7 @@
   margin-bottom: 16px;
   border-left: 0.25em solid var(--github-alert-default-color);
 }
+
 .markdown-alert-note .markdown-alert-title,
 .markdown-alert-note .markdown-alert-title>svg {
   color: var(--github-alert-note-color);
@@ -159,6 +163,7 @@
 .markdown-alert-note {
   border-left-color: var(--github-alert-note-color);
 }
+
 .markdown-alert-important .markdown-alert-title,
 .markdown-alert-important .markdown-alert-title>svg {
   color: var(--github-alert-important-color);
@@ -168,6 +173,7 @@
 .markdown-alert-important {
   border-left-color: var(--github-alert-important-color);
 }
+
 .markdown-alert-warning .markdown-alert-title,
 .markdown-alert-warning .markdown-alert-title>svg {
   color: var(--github-alert-warning-color);
@@ -202,19 +208,22 @@
   width: 100%;
   transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
+
 .yt-lite::after {
   content: "";
   display: block;
   padding-bottom: var(--aspect-ratio);
 }
-.yt-lite > iframe {
+
+.yt-lite>iframe {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
 }
-.yt-lite > .lty-playbtn {
+
+.yt-lite>.lty-playbtn {
   width: 70px;
   height: 46px;
   background-color: #212121;
@@ -223,28 +232,33 @@
   border-radius: 14%;
   transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
-.yt-lite:hover > .lty-playbtn {
+
+.yt-lite:hover>.lty-playbtn {
   background-color: red;
   opacity: 1;
 }
-.yt-lite > .lty-playbtn::before {
+
+.yt-lite>.lty-playbtn::before {
   content: "";
   border-color: transparent transparent transparent #fff;
   border-style: solid;
   border-width: 11px 0 11px 19px;
 }
-.yt-lite > .lty-playbtn,
-.yt-lite > .lty-playbtn::before {
+
+.yt-lite>.lty-playbtn,
+.yt-lite>.lty-playbtn::before {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
 }
+
 .yt-lite.lyt-activated {
   cursor: unset;
 }
+
 .yt-lite.lyt-activated::before,
-.yt-lite.lyt-activated > .lty-playbtn {
+.yt-lite.lyt-activated>.lty-playbtn {
   opacity: 0;
   pointer-events: none;
 }
@@ -258,7 +272,53 @@
   margin: 0 auto;
 }
 
-.yt-lite > .lty-playbtn {
+.yt-lite>.lty-playbtn {
   cursor: pointer;
   border: 0;
+}
+
+/* Full width Redoc API viewer */
+.redocusaurus {
+  max-width: none !important;
+  width: 100% !important;
+}
+
+.redocusaurus .api-content {
+  max-width: none !important;
+}
+
+.redoc-wrap {
+  max-width: none !important;
+}
+
+/* Expand main container for Redoc pages */
+article:has(.redocusaurus) {
+  max-width: none !important;
+}
+
+.docMainContainer_TBSr:has(.redocusaurus) {
+  max-width: 100% !important;
+}
+
+.container:has(.redocusaurus) {
+  max-width: 100% !important;
+}
+
+.docItemContainer_Djhp:has(.redocusaurus) {
+  max-width: none !important;
+  width: 100%;
+}
+
+.docItemCol_VOVn:has(.redocusaurus) {
+  max-width: none !important;
+  flex-basis: 100% !important;
+}
+
+/* Hide Redocly branding footer */
+.redocusaurus a[href*="redocly.com"] {
+  display: none !important;
+}
+
+.redocusaurus [class*="powered-by"] {
+  display: none !important;
 }