Syntax for <details><summary> within mdx

[asher-floyd]

I'm sure this is a simple PEBCAK issue, but I cannot for the life of me figure out why the content of a summary tag isn't displaying properly within a details element. Is there something I need to import, or add to my config somewhere?

I'm using 3.8.1 with TypeScript. I've changed a few things using custom.css and am using the remark/rehype KaTeX stuff for equations, but I haven't otherwise touched how things should display globally.

The code works perfectly in the MDX playground (and on the Docusaurus site!).

[Josh-Cena]

Everything looks good on my side. Do you have a full reproduction?

[slorber]

Yeah agree, difficult to help without a repro, that could be related to any remark plugin, swizzled components, bad package versions or something else.

At least share the input string so we can copy/paste it instead of re-typing it manually. But if you can't reproduce on Docusaurus website + MDX playground that may not be enough anyway.

[asher-floyd]

Apologies, it's on a private gitlab currently. I've thrown a copy on my github pages (with some content, but no code, redacted). Still a little way off going live; I can remove some of those deps for sure. Other than a handful of custom components and some css, it's a fairly stock setup.

I copy-pasted the code from the docusaurus docs into the mdx for this page: https://asher-floyd.github.io/improved-lamp/faqs

Repo here: https://github.com/asher-floyd/improved-lamp

[slorber]

This is likely the problem: you are overriding the Details component we use when rendering MDX details elements.

import MDXComponents from '@theme-original/MDXComponents';
import CodeBlock from '@theme-original/CodeBlock';
import Details from '@theme-original/Details';
import Tabs from '@theme-original/Tabs';
import TabItem from '@theme-original/TabItem';

export default {
  // Re-use the default mapping
  ...MDXComponents,
  Details: Details,
  CodeBlock: CodeBlock,
  Tabs: Tabs,
  TabItem: TabItem,
  Admonition: MDXComponents.admonition,
};

The built-in one is different:

import MDXDetails from '@theme/MDXComponents/Details';

[asher-floyd]

Yep, that'll do it - I'm not sure what past me was up to there. Thanks for the catch - it would have driven me insane.

[asher-floyd]

Quick one while you're here, and before I go charging back in to break more UI elements:

What's the status of infima? I've grown quite fond of it and am curious if it's going to evolve further, or if v4 onwards will be using something else. I've got some companion (to our software platform) webapp ideas brewing, and it would be great to keep the styling consistent.

[slorber]

We don't plan to improve Infima much more, but rather merge it back into Docusaurus.

I don't particularly like Infima and plan to make it an implementation detail of our classic theme in the future, because having it as a separate standalone project increases developer friction.

Infima is a smaller version of Bootstrap, so it's preferable that you bet on something more established/maintained like Bootstrap.