docusaurus-theme-redoc
Version:
Redoc Component for DocusaurusV2
49 lines (48 loc) • 1.88 kB
JSX
import React from 'react';
import useBrokenLinks from '@docusaurus/useBrokenLinks';
import clsx from 'clsx';
import '../../global';
import { Redoc as RedocComponent } from 'redoc';
import { useSpec } from '../../utils/useSpec';
import { ServerStyles } from './Styles';
import './styles.css';
/*!
* Redocusaurus
* https://redocusaurus.vercel.app/
* (c) 2025 Rohit Gohri
* Released under the MIT License
*/
function ServerRedoc(props) {
const { className, optionsOverrides, ...specProps } = props;
const { store, darkThemeOptions, lightThemeOptions, hasLogo } = useSpec(specProps, optionsOverrides);
const collector = useBrokenLinks();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
collectMenuItemAnchors(collector, store.menu.items);
return (<>
<ServerStyles specProps={specProps} lightThemeOptions={lightThemeOptions} darkThemeOptions={darkThemeOptions}/>
<div className={clsx([
'redocusaurus',
hasLogo && 'redocusaurus-has-logo',
className,
])}>
<RedocComponent store={store}/>
</div>
</>);
}
function collectMenuItemAnchors(collector, menuItems, parentAnchor = '') {
menuItems.forEach((menuItem) => {
// Register anchor for menu item
collector.collectAnchor(menuItem.id);
// If this is a child menu item, register a shortened anchor as well
// This may not be necessary in all cases, but definitely needed for
// menuItems of the form `tag/<Tag ID>/operation/<Operation ID>`.
if (parentAnchor != '') {
const childAnchor = menuItem.id.replace(`${parentAnchor}/`, '');
collector.collectAnchor(childAnchor);
}
if (menuItem.items.length > 0) {
collectMenuItemAnchors(collector, menuItem.items, menuItem.id);
}
});
}
export default ServerRedoc;