Integrate 'Scalar' openapi plugin so that we can render Real Device Access API (#3312)

Co-authored-by: Bahri <[email protected]>
Co-authored-by: bahrimootaz <[email protected]>

Author: si-net

.github/workflows/deploy-pr-preview.yml

@@ -53,7 +53,10 @@ jobs:
           CLOUDSDK_PYTHON: ${{ env.pythonLocation }}/python
 
       - name: Set Preview Path
-        run: echo "PREVIEW_PATH=pr-preview/pr-${{ github.event.number }}" >> "$GITHUB_ENV"
+        run: |
+          PREVIEW_PATH="pr-preview/pr-${{ github.event.number }}"
+          echo "PREVIEW_PATH=$PREVIEW_PATH" >> "$GITHUB_ENV"
+          echo "BASE_URL=/$PREVIEW_PATH/" >> "$GITHUB_ENV"
 
       - name: Install Dependencies
         if: github.event.action != 'closed' # Skip if the PR was closed

docusaurus.config.js

@@ -5,8 +5,9 @@ if (typeof unwrapJsx !== 'function') {
     throw new Error('unwrapJsx plugin is not a function');
 }
 // Enabling PR previews
-let siteBaseUrl = '/';
-if (process.env.PREVIEW_PATH) siteBaseUrl += process.env.PREVIEW_PATH;
+// Docusaurus will read the BASE_URL env var set in the CI.
+// We fall back to '/' for local development.
+let siteBaseUrl = process.env.BASE_URL || '/';
 
 const docusaurusConfig = {
     title: 'Sauce Labs Documentation',
@@ -174,6 +175,31 @@ const docusaurusConfig = {
         ],
     ],
     themes: ['docusaurus-theme-github-codeblock'],
+    plugins: [
+        [
+            '@scalar/docusaurus',
+            {
+                id: 'real-device-access-api',
+                label: 'Real Device Access API',
+                route: '/real-device-access-api',
+                showNavLink: true,
+                configuration: {
+                    hideClientButton: true,
+                    hideTestRequestButton: true,
+                    hideSearch: true,
+                    defaultOpenAllTags: true,
+                    layout: 'classic',
+                    sources: [
+                        {
+                            // This title will appear in the top left dropdown within Scalar API doc.
+                            title: 'Real Device Access API',
+                            url: 'https://raw.githubusercontent.com/saucelabs/real-device-api/main/open_api_specification.yaml',
+                        },
+                    ],
+                },
+            },
+        ],
+    ],
 };
 
 if (!process.env.SAUCE_DOCS_DEV) {

package-lock.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@docusaurus/core": "^3.7.0",
     "@docusaurus/preset-classic": "^3.7.0",
+    "@scalar/docusaurus": "^0.7.21",
     "clsx": "^2.1.1",
     "docusaurus-theme-github-codeblock": "^2.0.2",
     "react": "^19.2.0",