From 51eb765b843519a87590810bba5746afccd4d5e4 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Wed, 22 Jan 2025 21:49:14 +0000
Subject: [PATCH 1/2] [Style Guide] Document using JSX in partials

---
 .../docs/style-guide/components/render.mdx    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/content/docs/style-guide/components/render.mdx b/src/content/docs/style-guide/components/render.mdx
index 23069da3b383d66..66c032e1409b42c 100644
--- a/src/content/docs/style-guide/components/render.mdx
+++ b/src/content/docs/style-guide/components/render.mdx
@@ -89,3 +89,37 @@ your partial requires parameters to be passed, and none are passed, we can warn
 
 The way that you can access these parameters is with the `props` object, surrounded in curly braces `{}`.
 This is a [JavaScript expression within MDX](https://mdxjs.com/docs/using-mdx/#props).
+
+## Dynamic (flexible) content in partials
+
+As partials are authored in MDX, they are able to use JavaScript expressions based on the `params` passed in.
+
+```mdx
+---
+params:
+  - product
+---
+
+Generic content.
+
+{ props.product === "Magic WAN" && <p>Content specific to Magic WAN only.</p> }
+```
+
+Within JavaScript expressions, HTML or components must be used.
+
+For example, when `params={{ path: "/foo/" }} is provided:
+
+```mdx
+---
+params:
+  - path
+---
+
+{/* ❌ - will link to the literal string "{props.path}" */}
+[link]({props.path})
+
+{/* ✅ - will link to "/foo/"" */}
+<a href={props.path}>link</a>
+```
+
+For this reason, the [`Markdown`](/style-guide/components/markdown/#example-for-variables-in-partials) component is available.
\ No newline at end of file

From 0eb97b9a0c7990defcdf84928bdda272560cdaa0 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Thu, 23 Jan 2025 15:53:53 +0000
Subject: [PATCH 2/2] add ternary example, link to mdxjs docs

---
 .../docs/style-guide/components/render.mdx    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/content/docs/style-guide/components/render.mdx b/src/content/docs/style-guide/components/render.mdx
index 66c032e1409b42c..998091194bd37eb 100644
--- a/src/content/docs/style-guide/components/render.mdx
+++ b/src/content/docs/style-guide/components/render.mdx
@@ -102,12 +102,13 @@ params:
 
 Generic content.
 
+{/* If `params={{ product: "Magic WAN" }}` is passed, this will result in `Content specific to Magic WAN only.` */}
 { props.product === "Magic WAN" && <p>Content specific to Magic WAN only.</p> }
 ```
 
 Within JavaScript expressions, HTML or components must be used.
 
-For example, when `params={{ path: "/foo/" }} is provided:
+For example, when `params={{ path: "/foo/" }}` is provided:
 
 ```mdx
 ---
@@ -115,11 +116,26 @@ params:
   - path
 ---
 
-{/* ❌ - will link to the literal string "{props.path}" */}
+{/* ❌ - will link to the literal string `{props.path}` */}
 [link]({props.path})
 
-{/* ✅ - will link to "/foo/"" */}
+{/* ✅ - will link to `/foo/` */}
 <a href={props.path}>link</a>
 ```
 
-For this reason, the [`Markdown`](/style-guide/components/markdown/#example-for-variables-in-partials) component is available.
\ No newline at end of file
+For this reason, the [`Markdown`](/style-guide/components/markdown/#example-for-variables-in-partials) component is available.
+
+```mdx
+---
+params:
+  - name
+---
+
+import { Markdown } from "~/components";
+
+{/* If `params={{ name: "Cloudflare" }}` is passed, this will result in `Hello <strong>Cloudflare</strong>` */}
+{/* If `params={{ name: "NotCloudflare" }}` is passed, this will result in `Goodbye <strong>NotCloudflare</strong>` */}
+{ name === "Cloudflare" ? <Markdown text="Hello **Cloudflare**!"> : <Markdown text={`Goodbye **${name}**!`}> }
+```
+
+More examples of using JSX are available in the [mdxjs.org documentation](https://mdxjs.com/docs/what-is-mdx/#expressions).
\ No newline at end of file