-
|
I'm trying to figure out how to write partial MDX components that I can use from other MDX pages. I've tried various options but cannot figure out how to simply create a "template" of an MDX page that I then parameterize in other MDX files. Here's what I tried: ---
export interface Props {
productName: string;
}
const { productName } = Astro.props;
---
<div>
**{productName}** is awesome!
<div/>I want to use it as follows: While the parameter substitution works, the content is not rendered as Markdown. The literal output on the page is: How do I "turn on" Markdown rendering? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
I went one step back, trying to figure out how partials work with Astro more generally. When I switch the file extension from Minimal example to repro my issue: npm create astro@latest my-mdx-test -- --template minimal -y
cd my-mdx-test
npx astro add mdx -yCreate file: ---
// src/partials/Test.mdx
---
Hello from MDX Partial! Prop: {Astro.props.message}
Is Astro defined? {typeof Astro !== 'undefined' ? 'Yes' : 'No'}Adapt ---
// src/pages/index.astro
import TestPartial from '../partials/Test.mdx';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>MDX Test</title>
</head>
<body>
<h1>Test Page</h1>
<TestPartial message="It works!" />
</body>
</html>Then run. This yields the following error: Guidance would be appreciated in any direction. |
Beta Was this translation helpful? Give feedback.
-
|
MDX does support passing props to use like this but it works a little bit differently. The Here’s an adapted version of your example: ---
// src/partials/Test.mdx
---
<div>
**{props.productName}** is awesome!
<div/>As far as I know, there’s no support for specifying prop types like you did in the version inspired by |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, this worked for me...almost. Why is this giving me a export const shipViaLogstash = `
output {
${props.Name.toLowerCase()} {
hosts => "https://localhost:9200"
}
}
`;
<Code
code={shipViaLogstash}
title="pipeline.conf"
lang="javascript"
/>I couldn't come up with a better workaround than this: export const shipViaLogstash = `
output {
NAME {
hosts => "https://localhost:9200"
}
}
`;
<Code
code={shipViaLogstash.replace("NAME", props.Name.toLowerCase())}
title="pipeline.conf"
lang="javascript"
/> |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, I’m not 100% sure but maybe it is because of the |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately removing |
Beta Was this translation helpful? Give feedback.
-
|
On a related note, the MDX partial has one major problem: headings are inherited from the included component. All Does anyone know if there's a workaround for this problem? |
Beta Was this translation helpful? Give feedback.
MDX does support passing props to use like this but it works a little bit differently. The
Astroglobal is not available and instead you access apropsobject directly. Any frontmatter between the---delimiters at the top of the file should just be YAML or TOML data like in a Markdown file.Here’s an adapted version of your example:
As far as I know, there’s no support for specifying prop types like you did in the version inspired by
.astrosyntax.