Code for OpenAPI Example

[conceptofmind]

Hello,

I was wondering if the .mdx code was available for these pages: https://fumadocs.dev/docs/openapi/createPlanet

I tried copying the markdown and checking the github, but it gets a 404. Is the template available for these pages?

Thank you!

[conceptofmind]

To clarify what I mean, I followed the documentation to generate the .mdx file from a test openapi.json but it does not look similar to what is in your documentation example. Also seems to have some spacing issues on the code block section and other places.

[fuma-nama]

You probably didn't add the CSS import: https://fumadocs.dev/docs/ui/openapi#generate-styles

[conceptofmind]

You probably didn't add the CSS import: https://fumadocs.dev/docs/ui/openapi#generate-styles

I did add to the tailwind CSS but maybe something there is not correct in the environment. Will investigate this part further. Thank you.

[fuma-nama]

Can take a look if you can provide a reproduction too

[conceptofmind]

Can take a look if you can provide a reproduction too

Ok, so one of the issues is resolved. I was using an older Canary version of Bun. Updated to a newer stable version and then reinstalled and updated Tailwind. This resolved the formatting for the general page.

Although, I am still seeing formatting issues in the codeblock:

I did:
bun add fumadocs-openapi shiki

globals.css

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@import 'fumadocs-openapi/css/preset.css';

source.ts

import { docs } from '@/.source';
import { createOpenAPI, attachFile } from 'fumadocs-openapi/server';
import { loader } from 'fumadocs-core/source';


export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
  pageTree: {
    attachFile,
  },
});

export const openapi = createOpenAPI();

mdx-components.tsx

import defaultMdxComponents from 'fumadocs-ui/mdx';
import * as TabsComponents from 'fumadocs-ui/components/tabs';
import { APIPage } from 'fumadocs-openapi/ui';
import { openapi } from '@/lib/source';
import type { MDXComponents } from 'mdx/types';

// use this function to get MDX components, you will need it for rendering MDX
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    ...TabsComponents,
    APIPage: (props) => <APIPage {...openapi.getAPIPageProps(props)} />,
    ...components,
  };
}

generate-docs.mjs

import { generateFiles } from 'fumadocs-openapi';

void generateFiles({
  // the OpenAPI schema, you can also give it an external URL.
  input: ['/docs/openapi/openapi.json'],
  output: './content/docs',
  // we recommend to enable it
  // make sure your endpoint description doesn't break MDX syntax.
  includeDescription: true,
});

Thank you!