ApiSpec.js

import React, {useEffect} from 'react'
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
import BrowserOnly from '@docusaurus/BrowserOnly'

import {useActivePlugin, useActiveVersion,} from '@docusaurus/plugin-content-docs/client'

import useAsync from '@hooks/useAsync'
import getLatestVersion from "@lib/utils/getLatestVersion";
import DownloadLabel from "@components/DownloadLabel";

const SCHEMA_BASE_URL = 'https://schema.fitko.de/fit-connect'

export default function ApiSpec(props) {
  const isInBrowser = ExecutionEnvironment.canUseDOM

  const {pluginId} = useActivePlugin({failfast: true})

  const {execute, status, error, value: latestVersion} = useAsync(getLatestVersion, {
    siteVersion: props.version === undefined ? '*' : props.version,
    projectId: props.gitlabProjectId,
    includePrerelease: props.includePrerelease !== undefined
  }, false)

  if (isInBrowser) {
    useEffect(() => {
      execute()
    }, [])
  }

  return (
    <BrowserOnly fallback={<div>Lädt...</div>}>
      {() => {
        import('rapidoc')

        return (
          <div>
            <p>Die aktuell angezeigte Version der API ist {status === 'success' &&
              <code>{latestVersion}</code>} {status === 'success' &&
              <DownloadLabel baseURL={`${SCHEMA_BASE_URL}/${props.path}`} version={latestVersion} artifact={props.artifact} label="OpenAPI"/>}.
              Alle vorherigen Versionen <a href={`${SCHEMA_BASE_URL}/${props.path}`}>finden sich hier.</a>
            </p>

            {status === 'success' && latestVersion && <rapi-doc
              render-style="view"
              layout="column"
              spec-url={`${SCHEMA_BASE_URL}/${props.path}/${latestVersion}/${props.artifact}`}
              theme="light"
              schema-description-expanded="true"
              show-info="false"
              show-header="false"
              show-components="false"
              allow-spec-file-load="false"
              allow-authentication={props.allowAuthentication || "true"}
              info-description-headings-in-navbar="false"
              allow-try={props.allowTry || "false"}
              primary-color="#11171a"
              allow-server-selection="false"
              server-url=""
            />}

            {status === 'error' && <p>Die API-Spezifikation konnte leider nicht geladen werden.</p>}
          </div>
        )
      }}
    </BrowserOnly>
  )
}