Make most features work in CommonMark mode: head, live code blocks, tabs... #9092
Description
Motivation
Related to the CommonMark support issue: #3018
Some custom elements we created do not work when using the CommonMark parser mode, that you can turn on using:
frontMatter.mdx.format: 'md'config.markdown.format: 'detect'+ using the.mdextension
I think it would be convenient for users to have features working fine in both modes in a consistent way. I believe it is possible, but may require some adaptations.
Here are some components that do not currently work:
SEO
This should work in CommonMark too, but currently does not:
<head>
<title>HEAD Markdown Page tests title</title>
<meta name="keywords" content="cooking, blog">
</head>Summary/details
Renders as:
Instead of:
Live code editor
Renders as:
Instead of:
Tabs
Renders as: N/A because we don't have any syntax that does not require using MDX/ESM imports.
Instead of:
Possible solution? IMHO this syntax should be allowed without imports:
<tabs>
<tabItem value="apple" label="Apple" default>
This is an apple 🍎
</tabItem>
<tabItem value="orange" label="Orange">
This is an orange 🍊
</tabItem>
<tabItem value="banana" label="Banana">
This is a banana 🍌
</tabItem>
</tabs>Structured data
As part of #9669 we are adding a @theme/StructuredData helper component:
import StructuredData from "@theme/StructuredData";
<head>
<meta name="keywords" content="cooking, blog" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<StructuredData structuredData={{
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
}} />
</head>
# TitleWe should figure out how to define structured data in CommonMark mode
Self-service
- I'd be willing to do some initial work on this proposal myself.