From 0fc7adfba9c4d47f5a727c728d997904fadbae2e Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 7 Nov 2021 23:16:04 +0800
Subject: [PATCH] docs: document global variables in MDX scope (#5900)

* Adding a note for how to access frontMatter within pages

* Move documentation

Co-authored-by: cd rubin <github@earthling.za.net>
---
 .../markdown-features-react.mdx               | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx
index 08aed08e3a..8be1ae86fc 100644
--- a/website/docs/guides/markdown-features/markdown-features-react.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -5,6 +5,8 @@ description: Using the power of React in Docusaurus Markdown documents, thanks t
 slug: /markdown-features/react
 ---
 
+# MDX and React
+
 ```mdx-code-block
 import BrowserWindow from '@site/src/components/BrowserWindow';
 ```
@@ -169,3 +171,48 @@ This way, you can reuse contents among multiple pages and avoid duplicating mate
 The table-of-contents does not currently contain the imported Markdown headings. This is a technical limitation that we are trying to solve ([issue](https://github.com/facebook/docusaurus/issues/3915)).
 
 :::
+
+## Available exports
+
+Within the MDX page, the following variables are available as globals:
+
+- `frontMatter`: the front matter as a record of string keys and values;
+- `toc`: the table of contents, as a tree of headings. See also [Inline TOC](./markdown-features-inline-toc.mdx) for a more concrete use-case.
+- `contentTitle`: the Markdown title, which is the first `h1` heading in the Markdown text. It's `undefined` if there isn't one (e.g. title specified in the front matter).
+
+```jsx
+import TOCInline from '@theme/TOCInline';
+import CodeBlock from '@theme/CodeBlock';
+
+The table of contents for this page, serialized:
+
+<CodeBlock className="language-json">{JSON.stringify(toc, null, 2)}</CodeBlock>
+
+The front matter of this page:
+
+<ul>
+  {Object.entries(frontMatter).map(([key, value]) => <li key={key}><b>{key}</b>: {value}</li>)}
+</ul>
+
+<p>The title of this page is: <b>{contentTitle}</b></p>
+```
+
+```mdx-code-block
+import TOCInline from '@theme/TOCInline';
+
+<BrowserWindow>
+
+The table of contents for this page, serialized:
+
+<CodeBlock className="language-json">{JSON.stringify(toc, null, 2)}</CodeBlock>
+
+The front matter of this page:
+
+<ul>
+  {Object.entries(frontMatter).map(([key, value]) => <li key={key}><b>{key}</b>: {value}</li>)}
+</ul>
+
+<p>The title of this page is: <b>{contentTitle}</b></p>
+
+</BrowserWindow>
+```