How to integrate a custom react page into the docs theme using the layout

[clemwo]

Hi,
I dream of the following:
I want to create custom react pages that uses the same layout as the .mdx pages.
What I would like to do is the following:

• Create a page custom.tsx that is a normal react page
• custom.tsx imports the Layout from nextra so displays sidebar, header, footer and so on
• link the custom.tsx in the sidebar

Why do I want to do this?

I want to use nextra for my personal home page so I can write markdown files for my personal projects.
But I would also like to host small games, tools and applications on my homepage and have the same sidebar and so on.

Is that possible with nextra? I couldn't find anything. I have also checked out Astro Starlight and Docusaurus but nothing fits me perfectly

[lacymorrow]

I think what you're doing is similar to what I'm doing for my personal site lacymorrow.com (home/contact pages), here's my meta:
https://github.com/lacymorrow/lacymorrow/blob/main/src/pages/_meta.json

[CannonLock]

@clemwo Have you considered exporting the page as a component and using it in the mdx?

I was a bit confused why the MDX didn't have the sidebar so I came here but just ended up doing this, where SwaggerUI is my "page".

page.mdx

import "swagger-ui-react/swagger-ui.css"
import SwaggerUI from "swagger-ui-react";

export async function SwaggerSpec() {
	const specResponse = await fetch("https://raw.githubusercontent.com/PelicanPlatform/pelican/main/swagger/pelican-swagger.yaml")
	const spec = await specResponse.text()
	return spec
}

<SwaggerUI spec={await SwaggerSpec()} />