Best Component to Swizzle to add LLMs Copy Page button

[Devon-White]

I'm currently working on expanding the functionality for the llms-txt plugin I've been working on.

I'm trying to replicate a style that resembles closely to Mintlfy's version, example can be seen here.

A alpha version of this feature can already been seen on our site: https://developer.signalwire.com/

As of right now, we have created a separate theme a user can install to get the button to show on pages with corresponding generated md files. The theme wraps the DocItem/Content component, and places the CopyButton before the Content.

However, i'm not the biggest fan of the header either being wrapped when the button is too close, or it potentially overlapping with the header. I personally would like to swap the component to rendering under the Header in mobile view, like how mintlify does.

Any pointers on the best way to accomplish this? Is there a better component to be wrapping/ejecting to get the desired behavior? Due to how the syntheticTitles work, i landed on the best solution might be providing a custom Header component to the MDXComponents .

Mintlify Desktop view:

Mintlify Mobile view:

[Devon-White]

For now I decided for the copybutton to only work with the docs plugin (will look into adding it for blogs later, and i think pages will always be manually added by user, will look into this more)

The doc component i swizzled ended up being the doc breadcrumbs. Swizzling this component seems to provide one of the cleanest looks while having a minimum amount of layout shifting (depending if the button is present or not).

Example in desktop view:

Example in Mobile view:

Leaving the plugin & theme in alpha for now in case a better solutions presents itself.

[slorber]

Great that you found a solution that please you

We can't really recommend any "best component to swizzle" because this is subjective and related to the design you choose. At best, we can only improve how we organize our components so that it makes it easier to swizzle and customize.

[Devon-White]

In terms of how to access something a bit easier, i found mimicking the mintlify behavior 1:1 to be a tad tricky. This is mainly because the title wasn't the easiest thing to customize. I could definitely be missing something, but I found because the title can either be created from the front matter of contain it directly in the markdown, it made it a tad difficult to get the desired behavior. When its a syntheticTitle its easy enough to wrap the title and copy button in a div. I didn't see a easy way to do this however when the title is in the markdown content itself.

Perhaps if there was a title component i could swizzle that will always be the title of the page?

This is ultimately what lead me to using breadcrumbs

[slorber]

I understand, but unfortunately we have 2 distinct cases so we can't easily factorize them under a single component to swizzle.

You can however, customize the title inside the markdown content itself by swizzling @theme/MDXComponents/Heading

You can also swizzle @theme/MDXComponents and add an override for h1

In both cases, the component will also be used for blog posts and pages, so maybe you'll also need an extra if (docs) {} check.

It's not ideal but it should work