diff --git a/astro.config.ts b/astro.config.ts
index d7099a81d7f5ff2..3e59ae1d5edd96a 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -8,14 +8,15 @@ import starlightLinksValidator from "starlight-links-validator";
import icon from "astro-icon";
import sitemap from "@astrojs/sitemap";
import react from "@astrojs/react";
+
import { readdir } from "fs/promises";
+import { fileURLToPath } from "url";
import rehypeTitleFigure from "rehype-title-figure";
import rehypeMermaid from "./src/plugins/rehype/mermaid.ts";
import rehypeAutolinkHeadings from "./src/plugins/rehype/autolink-headings.ts";
import rehypeExternalLinks from "./src/plugins/rehype/external-links.ts";
import rehypeHeadingSlugs from "./src/plugins/rehype/heading-slugs.ts";
-import { fileURLToPath } from "url";
async function autogenSections() {
const sections = (
diff --git a/src/components/Render.astro b/src/components/Render.astro
index fd854e3aee7ab28..8583134d2de073b 100644
--- a/src/components/Render.astro
+++ b/src/components/Render.astro
@@ -13,29 +13,49 @@ const props = z.object({
let { file, product, params } = props.parse(Astro.props);
if (!product) {
- product = Astro.params.slug?.split("/")[0];
-}
+ const fromSlug = Astro.params.slug?.split("/")[0];
-if (!product) {
- throw new Error(
- `[Render] Unable to infer which folder ${file} is in, please provide a "product" input with your "file" input.`,
- );
+ if (!fromSlug) {
+ throw new Error(
+ `[Render] Unable to infer which folder ${file} is in, please provide a "product" input with your "file" input.`,
+ );
+ }
+
+ product = fromSlug;
}
-const partial = await getEntry("partials", `${product}/${file}`);
+const id = `${product}/${file}`;
+const partial = await getEntry("partials", id);
if (!partial) {
throw new Error(
- `[Render] Couldn't find partial: ${file}. Included on ${Astro.params.slug}`,
+ `[Render] Couldn't find "${id}" included on "${Astro.url.pathname}"`,
);
}
+// We currently only enforce parameters if `params` is set in the frontmatter,
+// until we can migrate existing `inputParameters` frontmatter to `params`.
if (partial.data.params) {
- const expected = partial.data.params;
- if (!params)
+ const expected = partial.data.params.sort();
+ const optional = expected.filter((p) => p.endsWith("?"));
+ const received = Object.keys(params ?? {}).sort();
+
+ const maximum = expected.length;
+ const minimum = maximum - optional.length;
+
+ if (
+ received.length < minimum ||
+ received.length > maximum ||
+ expected.some((p: string) => {
+ if (p.endsWith("?")) return false;
+
+ return !received.includes(p);
+ })
+ ) {
throw new Error(
- `${file} included on ${Astro.params.slug} expected parameters: ${expected}, got none`,
+ `[Render] Expected parameters ${JSON.stringify(expected)} but received parameters ${JSON.stringify(received)} for "${file}" included on "${Astro.url.pathname}"`,
);
+ }
}
const { Content } = await render(partial);
diff --git a/src/content.config.ts b/src/content.config.ts
index 6a9312871f2f8e3..7152ad8da779ae3 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -1,4 +1,4 @@
-import { z, defineCollection } from "astro:content";
+import { defineCollection } from "astro:content";
import { docsLoader, i18nLoader } from "@astrojs/starlight/loaders";
import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
@@ -20,6 +20,7 @@ import {
warpReleasesSchema,
releaseNotesSchema,
fieldsSchema,
+ partialsSchema,
} from "~/schemas";
function contentLoader(name: string) {
@@ -36,10 +37,6 @@ function dataLoader(name: string) {
});
}
-const partialSchema = z.object({
- params: z.string().array().optional(),
-});
-
export const collections = {
docs: defineCollection({
loader: docsLoader(),
@@ -61,7 +58,7 @@ export const collections = {
}),
partials: defineCollection({
loader: contentLoader("partials"),
- schema: partialSchema,
+ schema: partialsSchema,
}),
glossary: defineCollection({
loader: dataLoader("glossary"),
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-confluence.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-confluence.mdx
index 163f058ab349dfa..b5d8a9b675d8c97 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-confluence.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-confluence.mdx
@@ -9,8 +9,8 @@ import { Render } from "~/components";
@@ -43,7 +43,7 @@ These permissions follow the principle of least privilege to ensure that only th
### Access security
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-jira.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-jira.mdx
index 8a979257d344b4d..2ed30e254ee025b 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-jira.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/atlassian-jira.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
:::note
@@ -35,7 +35,7 @@ These permissions follow the principle of least privilege to ensure that only th
### Access security
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/aws-s3.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/aws-s3.mdx
index 24f4d389a91591e..10b2f8d713f2095 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/aws-s3.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/aws-s3.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -65,7 +65,7 @@ For more information, refer to [Content findings](/cloudflare-one/applications/c
### S3 Bucket security
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/bitbucket-cloud.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/bitbucket-cloud.mdx
index 5373ecd5021b179..7f753b123913288 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/bitbucket-cloud.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/bitbucket-cloud.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
:::note
@@ -46,7 +46,7 @@ These permissions follow the principle of least privilege to ensure that only th
### Repository security
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/box.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/box.mdx
index ced7f69c7efa779..539d5a6f8ddd9ec 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/box.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/box.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -27,7 +27,7 @@ These permissions follow the principle of least privilege to ensure that only th
## Security findings
-
+
### File sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/dropbox.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/dropbox.mdx
index f35a093099d68cf..1e8ae6d58f95c27 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/dropbox.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/dropbox.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -39,7 +39,7 @@ These permissions follow the principle of least privilege to ensure that only th
### File and folder sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/github.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/github.mdx
index 3aa76210cc4c088..ddb0390da8bd0fe 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/github.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/github.mdx
@@ -11,7 +11,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -36,7 +36,7 @@ These permissions follow the principle of least privilege to ensure that only th
### Branches and merges
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/gmail.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/gmail.mdx
index 15c05db230fb4e1..83914dda5101247 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/gmail.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/gmail.mdx
@@ -10,7 +10,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -21,14 +21,14 @@ import { Render } from "~/components";
## Security findings
### Gmail administrator settings
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-admin.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-admin.mdx
index 475cec37521250d..b3ca5249c11e473 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-admin.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-admin.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -19,14 +19,14 @@ import { Render } from "~/components";
## Security findings
### User account settings
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-calendar.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-calendar.mdx
index 6db9a49737efe14..3782fd1120a91ed 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-calendar.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-calendar.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -19,14 +19,14 @@ import { Render } from "~/components";
## Security findings
### Calendar sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-drive.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-drive.mdx
index ce51fbb91a9585d..23f345600ef3e03 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-drive.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/google-drive.mdx
@@ -10,7 +10,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -21,14 +21,14 @@ import { Render } from "~/components";
## Security findings
### File sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/index.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/index.mdx
index b10ad9b1fa4bc10..3b42b5be84df05d 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/index.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/google-workspace/index.mdx
@@ -11,7 +11,7 @@ import { DirectoryListing, Render } from "~/components";
This integration covers the following Google Workspace products:
@@ -40,7 +40,7 @@ These permissions follow the principle of least privilege to ensure that only th
### User account settings
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/admin-center.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/admin-center.mdx
index a2acb7ba700dcc2..3fe3bc639802fb1 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/admin-center.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/admin-center.mdx
@@ -10,7 +10,7 @@ import { GlossaryTooltip, Render } from "~/components";
## Integration prerequisites
@@ -21,14 +21,14 @@ import { GlossaryTooltip, Render } from "~/components";
## Security findings
### User account settings
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/index.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/index.mdx
index 704e8c417f21d2a..ffddf7e05564642 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/index.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/index.mdx
@@ -8,7 +8,7 @@ import { DirectoryListing, GlossaryTooltip, Render } from "~/components";
This integration covers the following Microsoft 365 products:
@@ -42,7 +42,7 @@ These permissions follow the principle of least privilege to ensure that only th
### User account settings
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/onedrive.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/onedrive.mdx
index 3bf4af7e708b84f..53f7a99eae99ec6 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/onedrive.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/onedrive.mdx
@@ -10,7 +10,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -21,14 +21,14 @@ import { Render } from "~/components";
## Security findings
### File sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/outlook.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/outlook.mdx
index 880b3d41613bd56..54b99ebc29fd99b 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/outlook.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/outlook.mdx
@@ -10,7 +10,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -21,14 +21,14 @@ import { Render } from "~/components";
## Security findings
### Calendar sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/sharepoint.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/sharepoint.mdx
index db23be574c0d4dd..2f8f808c278fae7 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/sharepoint.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/microsoft-365/sharepoint.mdx
@@ -10,7 +10,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -21,14 +21,14 @@ import { Render } from "~/components";
## Security findings
### File sharing
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/servicenow.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/servicenow.mdx
index 7666dac0777c1d6..f9686972c2105e5 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/servicenow.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/servicenow.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -28,7 +28,7 @@ These permissions follow the principle of least privilege to ensure that only th
### Instance security
diff --git a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/slack.mdx b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/slack.mdx
index a970bebc960f2d2..86b5a52f19fac94 100644
--- a/src/content/docs/cloudflare-one/applications/casb/casb-integrations/slack.mdx
+++ b/src/content/docs/cloudflare-one/applications/casb/casb-integrations/slack.mdx
@@ -8,7 +8,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -30,7 +30,7 @@ These permissions follow the principle of least privilege to ensure that only th
## Security findings
-
+
### User account settings
diff --git a/src/content/docs/cloudflare-one/identity/idp-integration/entra-id.mdx b/src/content/docs/cloudflare-one/identity/idp-integration/entra-id.mdx
index e7a76058d4b01fd..567fa36456916f7 100644
--- a/src/content/docs/cloudflare-one/identity/idp-integration/entra-id.mdx
+++ b/src/content/docs/cloudflare-one/identity/idp-integration/entra-id.mdx
@@ -144,7 +144,7 @@ The Microsoft Entra ID integration allows you to synchronize IdP groups and auto
### 2. Configure SCIM in Entra ID
diff --git a/src/content/docs/cloudflare-one/policies/gateway/dns-policies/index.mdx b/src/content/docs/cloudflare-one/policies/gateway/dns-policies/index.mdx
index 823a0bf4d767522..300f855405984d2 100644
--- a/src/content/docs/cloudflare-one/policies/gateway/dns-policies/index.mdx
+++ b/src/content/docs/cloudflare-one/policies/gateway/dns-policies/index.mdx
@@ -21,7 +21,7 @@ When creating a DNS policy, you can select as many security risk categories and
## Actions
diff --git a/src/content/docs/cloudflare-one/policies/gateway/http-policies/index.mdx b/src/content/docs/cloudflare-one/policies/gateway/http-policies/index.mdx
index 1a9a99c3c5f2ea5..b14951779ed709f 100644
--- a/src/content/docs/cloudflare-one/policies/gateway/http-policies/index.mdx
+++ b/src/content/docs/cloudflare-one/policies/gateway/http-policies/index.mdx
@@ -25,7 +25,7 @@ An HTTP policy consists of an **Action** as well as a logical expression that de
## Actions
@@ -672,5 +672,5 @@ The country of the user making the request.
diff --git a/src/content/docs/cloudflare-one/policies/gateway/network-policies/index.mdx b/src/content/docs/cloudflare-one/policies/gateway/network-policies/index.mdx
index e924860f293bc91..b2666fe06a32934 100644
--- a/src/content/docs/cloudflare-one/policies/gateway/network-policies/index.mdx
+++ b/src/content/docs/cloudflare-one/policies/gateway/network-policies/index.mdx
@@ -23,7 +23,7 @@ A network policy consists of an **Action** as well as a logical expression that
## Actions
diff --git a/src/content/docs/learning-paths/secure-internet-traffic/build-http-policies/recommended-http-policies.mdx b/src/content/docs/learning-paths/secure-internet-traffic/build-http-policies/recommended-http-policies.mdx
index 46bdd5bc69507d8..f65a3a28c83984e 100644
--- a/src/content/docs/learning-paths/secure-internet-traffic/build-http-policies/recommended-http-policies.mdx
+++ b/src/content/docs/learning-paths/secure-internet-traffic/build-http-policies/recommended-http-policies.mdx
@@ -58,7 +58,7 @@ Bypass HTTP inspection for a custom list of domains identified as incompatible w
## All-HTTP-DomainHost-Blocklist
-
+
| Selector | Operator | Value | Logic | Action |
| -------- | ------------- | ------------------ | ----- | ------ |
diff --git a/src/content/docs/style-guide/components/render.mdx b/src/content/docs/style-guide/components/render.mdx
index 23069da3b383d66..57060bbe4d84a54 100644
--- a/src/content/docs/style-guide/components/render.mdx
+++ b/src/content/docs/style-guide/components/render.mdx
@@ -2,90 +2,174 @@
title: Render
---
-import { Steps } from "~/components";
+import { Code, Details, Type, MetaInfo } from "~/components";
The `Render` component allows us to include a "partial", a reusable Markdown snippet, onto a page.
-It also accepts parameters that can be used as variables within the partial, so that even content
-which needs slight differences between usages can be turned into a partial.
+It also accepts parameters that can be used as variables within the partial, so that even content which needs slight differences between usages can be turned into a partial.
## Component
```mdx live
import { Render } from "~/components";
-
-{/*
-Hello, {props.name}!
+```
-Hello `{props.name}`
+### Inputs
-Hello {props.name}
+- `file`
-[link]({props.link})
+ This should be the name of the partial, without the containing directory or file extension. For example, `/partials/style-guide/hello.mdx` would be `file="hello"`.
-link
-*/}
-```
+- `product`
-### Inputs
+ By default, it will look for partials in the same product folder as the current page. You can use this to specify a different product.
+
+ :::caution
+
+ When using the `Render` component inside partials, the original `product` is lost.
+
+ For example, if there are three files:
+
+ 1. `docs/fundamentals/index.mdx`
+ 2. `partials/dns/thing.mdx`
+ 3. `partials/dns/thing2.mdx`
-**file** `string`: This should be the name of the partial, without the containing directory or file extension.
-For example, `/partials/style-guide/hello.mdx` would be `file="hello"`.
+ `docs/fundamentals/index.mdx` uses ``
-**product** `string` (optional): By default, it will look for partials in the same product folder as the current page.
-You can use this to specify a different product.
+ `partials/dns/thing.mdx` must use `` as `product` cannot be inferred.
-**params** `object` (optional): If you wish to substitute values inside your partial, you can use pass params which can be
-referenced in your partial. Refer to [params](#params).
+ :::
-## Partials
+- `params`
-Partials only have one optional frontmatter property, which is `params`. This takes an array of strings,
-which should be the expected parameters. When this is defined, but those parameters are not passed, an error
-will be thrown.
+ If you wish to substitute values inside your partial, you can use pass params which can be referenced in your partial. Refer to [properties](#properties).
-```mdx title="/src/content/partials/style-guide/hello.mdx"
+## Properties
+
+### Defining expected properties in frontmatter
+
+Anything defined in the `params` property of the `Render` component is available inside the partial, using [JavaScript expressions](https://mdxjs.com/docs/using-mdx/).
+
+To protect against required properties being missed, any partial that relies on `params` should also define `params` in the partial's frontmatter. This should be an array of strings, matching the property names you expect. If a property is optional, such as for [conditional content](#properties-to-render-content-conditionally), add a `?` to the end of the name.
+
+```mdx
---
params:
- - name
- - foo
- - bar
+ - product
+ - deprecated?
---
+```
+
+For each of the below examples, you can open the dropdown to view the partial's content.
+
+### Properties as a plain string
+
+The below example would render `Hello, world!`.
+
+import simpleRaw from "~/content/partials/style-guide/simple-props.mdx?raw";
+
+
+
+
+```mdx live
+import { Render } from "~/components";
+
+
+```
+
+### Properties in Markdown syntax
+
+When using JavaScript expressions, you are now "inside JSX" and cannot use traditional Markdown syntax. Similarly, you cannot use a JavaScript expression inside Markdown syntax.
+
+Ideally, you should not use Markdown syntax, such as `**strong**` or `[text](link)`, with properties. If using JSX is not feasible, there is a [`Markdown`](/style-guide/components/markdown/) component that will take a `text` property.
+
+The [MDX documentation](https://mdxjs.com/table-of-components/#components) includes a mapping of common Markdown syntax to their equivalent JSX elements.
+
+#### Strong
+
+import strongRaw from "~/content/partials/style-guide/strong-in-props.mdx?raw";
-Hello, {props.name}!
+
+
-Hello, {props.foo}!
+```mdx live
+import { Render } from "~/components";
-Hello, {props.bar}!
+
```
-### Params
+#### Links
+
+import linkRaw from "~/content/partials/style-guide/link-in-props.mdx?raw";
+
+
+
-In the above example, you will notice there is:
+```mdx live
+import { Render } from "~/components";
-
+
+```
-1. A `params` input on the `Render` component.
-2. A `params` property in the frontmatter.
-3. A reference to `props.name`.
+#### Images
+
+import imageRaw from "~/content/partials/style-guide/image-in-props.mdx?raw";
+
+
+
+
+```mdx live
+import { Render } from "~/components";
+
+
+```
-
+#### Code blocks
-#### Input
+import codeRaw from "~/content/partials/style-guide/code-in-props.mdx?raw";
+
+
+
+
+```mdx live
+import { Render } from "~/components";
+
+
+```
+
+### Properties to render content conditionally
+
+Anything that you can represent in a JavaScript expression can be used in your conditional logic.
+
+This may be the [and (`&&`) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) or [ternary (`? ... : ... `) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator), the below example uses both.
+
+import optionalRaw from "~/content/partials/style-guide/optional-props.mdx?raw";
+
+
+
+
+```mdx live
+import { Render } from "~/components";
-When using the `params` input on the `Render` component, you can write a [JavaScript object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
-which is later available inside the partial.
+
-#### Frontmatter
+
-The `params` frontmatter property on a partial expects an array of strings, containing the "expected parameters". This is so that if
-your partial requires parameters to be passed, and none are passed, we can warn the user.
+
-#### Props
+
-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).
+
+```
\ No newline at end of file
diff --git a/src/content/partials/cloudflare-one/access/enable-scim-on-dashboard.mdx b/src/content/partials/cloudflare-one/access/enable-scim-on-dashboard.mdx
index 3878ec8c43e369a..ccd70df213801fe 100644
--- a/src/content/partials/cloudflare-one/access/enable-scim-on-dashboard.mdx
+++ b/src/content/partials/cloudflare-one/access/enable-scim-on-dashboard.mdx
@@ -1,8 +1,7 @@
---
params:
- idp
- - and
- - supportgroups
+ - supportgroups?
---
import { Markdown } from "~/components"
@@ -11,7 +10,7 @@ import { Markdown } from "~/components"
2. Find the {props.idp} integration and select **Edit**.
-3. Turn on **Enable SCIM**{props.and}**{props.supportgroups}**.
+3. Turn on **Enable SCIM** {props.supportgroups && and props.supportgroups.}
4. (Optional) Configure the following settings:
diff --git a/src/content/partials/cloudflare-one/casb/integration-description.mdx b/src/content/partials/cloudflare-one/casb/integration-description.mdx
index 0adfc2687136d9e..8fbdd74cd8a2d68 100644
--- a/src/content/partials/cloudflare-one/casb/integration-description.mdx
+++ b/src/content/partials/cloudflare-one/casb/integration-description.mdx
@@ -4,4 +4,4 @@ params:
- integrationAccountType
---
-The {props.one} integration detects a variety of data loss prevention, account misconfiguration, and user security risks in an integrated {props.two} that could leave you and your organization vulnerable.
+The {props.integrationName} integration detects a variety of data loss prevention, account misconfiguration, and user security risks in an integrated {props.integrationAccountType} that could leave you and your organization vulnerable.
diff --git a/src/content/partials/cloudflare-one/casb/integration-perms.mdx b/src/content/partials/cloudflare-one/casb/integration-perms.mdx
index e3925c333cf1b55..3344180ddf1ed5d 100644
--- a/src/content/partials/cloudflare-one/casb/integration-perms.mdx
+++ b/src/content/partials/cloudflare-one/casb/integration-perms.mdx
@@ -4,4 +4,4 @@ params:
- parentSlug
---
-Refer to {props.one} integration permissions for information on which API permissions to enable.
+Refer to {props.parentIntegration} integration permissions for information on which API permissions to enable.
diff --git a/src/content/partials/cloudflare-one/casb/salesforce-integration.mdx b/src/content/partials/cloudflare-one/casb/salesforce-integration.mdx
index eec76ac41cb89fc..5d658778ba7717a 100644
--- a/src/content/partials/cloudflare-one/casb/salesforce-integration.mdx
+++ b/src/content/partials/cloudflare-one/casb/salesforce-integration.mdx
@@ -9,7 +9,7 @@ import { Render } from "~/components";
## Integration prerequisites
@@ -34,7 +34,7 @@ These permissions follow the principle of least privilege to ensure that only th
### File sharing
diff --git a/src/content/partials/cloudflare-one/casb/security-findings.mdx b/src/content/partials/cloudflare-one/casb/security-findings.mdx
index 9c6ce5c60cf1bf1..ec8361843cd2d30 100644
--- a/src/content/partials/cloudflare-one/casb/security-findings.mdx
+++ b/src/content/partials/cloudflare-one/casb/security-findings.mdx
@@ -4,6 +4,6 @@ params:
- slugRelativePath
---
-The {props.one} integration currently scans for the following findings, or security risks. Findings are grouped by category and then ordered by [severity level](/cloudflare-one/applications/casb/manage-findings/#severity-levels).
+The {props.integrationName} integration currently scans for the following findings, or security risks. Findings are grouped by category and then ordered by [severity level](/cloudflare-one/applications/casb/manage-findings/#severity-levels).
-To stay up-to-date with new CASB findings as they are added, bookmark this page or subscribe to its RSS feed.
+To stay up-to-date with new CASB findings as they are added, bookmark this page or subscribe to its RSS feed.
diff --git a/src/content/partials/cloudflare-one/gateway/response.mdx b/src/content/partials/cloudflare-one/gateway/response.mdx
index ff669acf232f640..7d34c1d45961382 100644
--- a/src/content/partials/cloudflare-one/gateway/response.mdx
+++ b/src/content/partials/cloudflare-one/gateway/response.mdx
@@ -1,8 +1,8 @@
---
params:
- - type1
+ - type
+ - example
- example2
- - example3
---
-If a condition in an expression joins a {props.one} attribute (such as _{props.two}_) and a response attribute (such as _{props.three}_), then the condition will be evaluated when the response is received.
+If a condition in an expression joins a {props.type} attribute (such as _{props.example}_) and a response attribute (such as _{props.example2}_), then the condition will be evaluated when the response is received.
diff --git a/src/content/partials/style-guide/code-in-props.mdx b/src/content/partials/style-guide/code-in-props.mdx
new file mode 100644
index 000000000000000..12bd2c918db1357
--- /dev/null
+++ b/src/content/partials/style-guide/code-in-props.mdx
@@ -0,0 +1,30 @@
+---
+params:
+ - code
+---
+
+import { Code } from "~/components";
+
+#### Inline
+
+**Don't do this!**
+
+`{props.code}`
+
+**Do this!**
+
+{props.code}
+
+
+
+#### Codeblocks
+
+**Don't do this!**
+
+```js
+{props.code}
+```
+
+**Do this!**
+
+{props.name}
-
-[link]({props.link}) (href="%7Bprops.link%7D")
-
-link (href="/style-guide/components/render/")
\ No newline at end of file
diff --git a/src/content/partials/style-guide/image-in-props.mdx b/src/content/partials/style-guide/image-in-props.mdx
new file mode 100644
index 000000000000000..cca4506f76e98c6
--- /dev/null
+++ b/src/content/partials/style-guide/image-in-props.mdx
@@ -0,0 +1,12 @@
+---
+params:
+ - image
+---
+
+**Don't do this!**
+
+``
+
+**Do this!**
+
+
\ No newline at end of file
diff --git a/src/content/partials/style-guide/link-in-props.mdx b/src/content/partials/style-guide/link-in-props.mdx
new file mode 100644
index 000000000000000..75e80a9ba4bab7a
--- /dev/null
+++ b/src/content/partials/style-guide/link-in-props.mdx
@@ -0,0 +1,16 @@
+---
+params:
+ - link
+---
+
+**Don't do this!**
+
+This will link to `/style-guide/components/%7Bprops.link%7D`.
+
+[Markdown link]({props.link})
+
+**Do this!**
+
+This will link to `style-guide/components/render/#links`.
+
+JSX link
\ No newline at end of file
diff --git a/src/content/partials/style-guide/optional-props.mdx b/src/content/partials/style-guide/optional-props.mdx
new file mode 100644
index 000000000000000..6c6256808676eab
--- /dev/null
+++ b/src/content/partials/style-guide/optional-props.mdx
@@ -0,0 +1,23 @@
+---
+params:
+ - product
+ - deprecated?
+---
+
+{
+ props.deprecated && (
+
+
+ {props.product} is deprecated, please use alternative products.
+
+
+ )
+}
+
+{
+ props.product === "Thing Three" ? (
+ Welcome to our Thing Three launch countdown!
+ ) : (
+ Welcome to the {props.product} landing page.
+ )
+}
diff --git a/src/content/partials/style-guide/simple-props.mdx b/src/content/partials/style-guide/simple-props.mdx
new file mode 100644
index 000000000000000..89a65604442455c
--- /dev/null
+++ b/src/content/partials/style-guide/simple-props.mdx
@@ -0,0 +1,6 @@
+---
+params:
+ - name
+---
+
+Hello, {props.name}!
\ No newline at end of file
diff --git a/src/content/partials/style-guide/strong-in-props.mdx b/src/content/partials/style-guide/strong-in-props.mdx
new file mode 100644
index 000000000000000..70fdd5cc28422c0
--- /dev/null
+++ b/src/content/partials/style-guide/strong-in-props.mdx
@@ -0,0 +1,13 @@
+---
+params:
+ - dont
+ - do
+---
+
+**Don't do this!**
+
+{props.dont}
+
+**Do this!**
+
+{props.do}
\ No newline at end of file
diff --git a/src/schemas/partials.ts b/src/schemas/partials.ts
index 0acc176a4fb0684..58e1c6075535219 100644
--- a/src/schemas/partials.ts
+++ b/src/schemas/partials.ts
@@ -1,5 +1,26 @@
import { z } from "astro:schema";
-export const partialSchema = z.object({
- params: z.string().array().optional(),
-});
+const paramsDocs =
+ "https://developers.cloudflare.com/style-guide/components/render/#defining-expected-properties-in-frontmatter";
+
+export const partialsSchema = z
+ .object({
+ slug: z
+ .string()
+ .optional()
+ .describe(
+ "Used to define custom IDs: https://docs.astro.build/en/guides/content-collections/#defining-custom-ids",
+ ),
+ params: z
+ .string()
+ .array()
+ .optional()
+ .describe(`Used to define expected properties: ${paramsDocs}`),
+ inputParameters: z
+ .string()
+ .optional()
+ .describe(
+ `Deprecated - this field has no functionality, please migrate to ${paramsDocs}`,
+ ),
+ })
+ .strict();