feat: better openapi docs

Author: B4nan

.gitignore

@@ -17,10 +17,7 @@ yarn.lock
 tmp
 jsconfig.json
 types
-sources/api
-sources/typedefs
 .history
 .docusaurus
 tsconfig.tsbuildinfo
 .turbo
-apify-docs-theme/package-lock.json

apify-docs-theme/package.json

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@apify/docs-search-modal": "^1.1.1",
-        "@docusaurus/theme-common": "^3.5.2",
+        "@docusaurus/theme-common": "3.6.2",
         "@stackql/docusaurus-plugin-hubspot": "^1.1.0",
         "axios": "^1.7.4",
         "babel-loader": "^9.1.3",

apify-docs-theme/src/theme/Layout/index.jsx

@@ -2,12 +2,17 @@ import React from 'react';
 // cannot use any of the theme aliases here as it causes a circular dependency :( ideas welcome
 import Layout from '@docusaurus/theme-classic/lib/theme/Layout/index';
 import { usePluginData } from '@docusaurus/useGlobalData';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { useLocation } from '@docusaurus/router';
 
 export default function LayoutWrapper(props) {
     const { options: { subNavbar } } = usePluginData('@apify/docs-theme');
+    const baseUrl = useBaseUrl('/');
+    const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');
+
     return (
         <div style={{
-            '--ifm-navbar-height': subNavbar ? '123px' : '68px',
+            '--ifm-navbar-height': subNavbar && !currentPath.startsWith('api/v2') ? '123px' : '68px',
             'margin': 0,
             'padding': 0,
             'boxSizing': 'border-box',

apify-docs-theme/src/theme/custom.css

@@ -1619,3 +1619,59 @@ iframe[src*="youtube"] {
     margin-top: -130px;
     position: absolute;
 }
+
+.redocusaurus .openapi-clients-box {
+    display: block;
+    float: right;
+    padding-left: 6px;
+}
+
+.redocusaurus .openapi-clients-box-heading {
+    display: inline-block;
+    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
+    color: #6C7590;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    text-transform: uppercase;
+    padding-bottom: 6px;
+}
+
+.redocusaurus .openapi-clients-box-icon {
+    display: block;
+    padding-bottom: 6px;
+}
+
+.theme-api-markdown .openapi-clients-box {
+    display: block;
+    float: right;
+    padding-left: 6px;
+}
+
+.theme-api-markdown .openapi-clients-box-heading {
+    display: inline-block;
+    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
+    color: #6C7590;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    text-transform: uppercase;
+    padding-bottom: 6px;
+}
+
+.theme-api-markdown .openapi-clients-box-icon {
+    display: block;
+    padding-bottom: 6px;
+    margin: 0 !important;
+}
+
+.theme-api-markdown .openapi__method-endpoint-path,
+.theme-api-markdown .openapi-security__summary-header {
+    margin-top: 0;
+}
+
+.theme-api-markdown .prism-code .token-line::before {
+    display: none !important;
+}

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-    presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+    presets: ['@docusaurus/babel/preset'],
     plugins: ['babel-plugin-styled-components'],
 };

docusaurus.config.js

@@ -86,11 +86,12 @@ module.exports = {
                 },
             }),
         ],
+        'docusaurus-theme-openapi-docs',
         '@docusaurus/theme-mermaid',
     ],
     presets: /** @type {import('@docusaurus/types').PresetConfig[]} */ ([
         [
-            '@docusaurus/preset-classic',
+            'classic',
             /** @type {import('@docusaurus/preset-classic').Options} */
             ({
                 docs: {
@@ -158,6 +159,37 @@ module.exports = {
                 sidebarPath: require.resolve('./sources/legal/sidebars.js'),
             },
         ],
+        [
+            '@docusaurus/plugin-content-docs',
+            {
+                id: 'openapi',
+                path: './sources/api',
+                routeBasePath: 'api/v2-new',
+                rehypePlugins: [externalLinkProcessor],
+                showLastUpdateAuthor: false,
+                showLastUpdateTime: false,
+                breadcrumbs: false,
+                sidebarPath: require.resolve('./sources/api/sidebars.js'),
+                docItemComponent: '@theme/ApiItem', // Derived from docusaurus-theme-openapi
+            },
+        ],
+        [
+            'docusaurus-plugin-openapi-docs',
+            {
+                id: 'openapi', // plugin id
+                docsPluginId: 'openapi', // configured for preset-classic
+                config: {
+                    /** @type {import('docusaurus-plugin-openapi-docs').Options} */
+                    v2: {
+                        specPath: 'node_modules/@apify/openapi/openapi.yaml',
+                        outputDir: './sources/api',
+                        sidebarOptions: {
+                            groupPathsBy: 'tag',
+                        },
+                    },
+                },
+            },
+        ],
         () => ({
             name: 'webpack-loader-fix',
             configureWebpack() {