feat: integrate Redocusaurus for interactive OFREP OpenAPI docs page (#1283)

Integrates Redocusaurus to display interactive OpenAPI documentation for
OFREP.

## Changes

- Added `redocusaurus` dependency and preset configuration
- Added `scala` to Prism syntax highlighting (fixes OpenAPI spec
rendering)
- Added `docusaurus-theme-redoc` theme
- Added custom CSS for full-width Redoc layout while preserving left
navigation

## Features

- Embedded OpenAPI viewer with left nav visible
- Full-width layout for better API docs readability  
- Internal Redoc sidebar hidden (using theme config)
- Search disabled in Redoc viewer

## Related PR

Depends on: open-feature/spec#347
closes #1003

---------

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

Author: jonathannorris

docs/reference/other-technologies/ofrep/_category_.json

@@ -0,0 +1,10 @@
+{
+    "label": "OFREP",
+    "position": 2,
+    "collapsible": true,
+    "collapsed": false,
+    "link": {
+        "type": "doc",
+        "id": "reference/other-technologies/ofrep/index"
+    }
+}

docs/reference/other-technologies/ofrep.mdx renamed to docs/reference/other-technologies/ofrep/index.mdx

@@ -1,16 +1,14 @@
 ---
 title: OpenFeature Remote Evaluation Protocol (OFREP)
-sidebar_label: OFREP
-sidebar_position: 2
-id: ofrep
+sidebar_position: 1
 ---
 
-The **OpenFeature Remote Evaluation Protocol (OFREP)** is an API specification for feature flagging that enables vendor-agnostic communication between applications and flag management systems. It defines a standard API layer between the provider and the flag management system, allowing any OpenSource or commercial system to implement the protocol and be compatible with community-maintained providers.
+The **OpenFeature Remote Evaluation Protocol (OFREP)** is an [API specification](./openapi) for feature flagging that enables vendor-agnostic communication between applications and flag management systems. It defines a standard API layer between the provider and the flag management system, allowing any OpenSource or commercial system to implement the protocol and be compatible with community-maintained providers.
 
 ### Key Benefits
 
 - **Vendor Agnostic**: Connect to any OFREP-compliant flag management system without vendor-specific implementations
-- **Standardized**: Built on a common OpenAPI specification for consistent integration
+- **Standardized**: Built on a [common OpenAPI specification](./openapi) for consistent integration
 - **Flexible**: Works on both client-side and server-side applications
 - **Community Maintained**: Generic OFREP providers maintained by the OpenFeature project
 
@@ -29,7 +27,7 @@ graph LR
 1. Your application uses the OpenFeature SDK
 2. The OpenFeature SDK uses an OFREP provider
 3. The OFREP provider communicates with your flag management system via the standardized OFREP API
-4. Your flag management system implements the OFREP specification
+4. Your flag management system implements the [OFREP specification](./openapi)
 
 ### Server vs Client
 
@@ -71,7 +69,7 @@ To create an OFREP provider for a new language:
 
 To make your flag management system OFREP-compliant:
 
-1. Implement the [OFREP OpenAPI specification](https://github.com/open-feature/protocol/blob/docs-update-readme-for-website/service/openapi.yaml)
+1. Implement the [OFREP OpenAPI specification](./openapi)
 2. Test your implementation with existing OFREP providers
 3. Register your system in the [OpenFeature ecosystem](https://github.com/open-feature/openfeature.dev/issues)
 

docs/reference/other-technologies/ofrep/openapi.mdx

@@ -0,0 +1,12 @@
+---
+title: "OpenAPI Spec"
+sidebar_position: 2
+hide_title: true
+---
+
+import Redoc from '@theme/Redoc';
+
+<div className="redoc-container">
+  <Redoc />
+</div>
+

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;

external-content/specification

@@ -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",

package.json

@@ -333,4 +333,34 @@ details[open] .mcp-install-summary strong::before {
 [data-theme='dark'] .mcp-install-button:hover {
   background-color: var(--ifm-color-primary-light);
   border-color: var(--ifm-color-primary-light);
+  color: #fff;
+  text-decoration: none;
+}
+
+/* Full width Redoc API viewer */
+.redoc-container {
+  margin: -2rem calc(-1 * var(--ifm-spacing-horizontal));
+  max-width: none;
+}
+
+/* Expand parent containers for full width */
+article:has(.redoc-container) {
+  max-width: none !important;
+}
+
+/* Force doc column to full width when Redoc is present */
+.main-wrapper:has(.redoc-container) [class*="docItemCol"] {
+  max-width: none !important;
+  flex-basis: 100% !important;
+}
+
+/* Hide Redocly branding */
+.redocusaurus a[href*="redocly.com"],
+.redocusaurus [class*="powered-by"] {
+  display: none !important;
+}
+
+/* Hide menu border on API viewer pages */
+.redoc-container .menu-content {
+  border-right: none !important;
 }