From 185cbfdbd17df21e2c4fcdbee1f9a2078cab2e9c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 10 Sep 2024 15:14:10 +0700
Subject: [PATCH] move contributing to faq

---
 docs/data/material/getting-started/faq/faq.md | 75 +++++++++++++++++++
 .../getting-started/templates/templates.md    | 71 ------------------
 2 files changed, 75 insertions(+), 71 deletions(-)

diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index ccbdc6ebd8ff96..6638bd59961d68 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -261,6 +261,81 @@ return (
 
 If you are getting the error: `TypeError: Cannot convert a Symbol value to a string`, take a look at the [styled()](/system/styled/#how-to-use-components-selector-api) docs page for instructions on how you can fix this.
 
+## How can I contribute to the free templates?
+
+The templates are built using the shared theme. Below are the structure to create a new template:
+
+### Template page
+
+Create a new page in the `docs/pages/material-ui/getting-started/templates/<name>.js` directory with the following code:
+
+```js
+import * as React from 'react';
+import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
+import Template from 'docs/data/material/getting-started/templates/<name>/<Template>';
+
+export default function Page() {
+  return (
+    <AppTheme>
+      <TemplateFrame>
+        <Template />
+      </TemplateFrame>
+    </AppTheme>
+  );
+}
+```
+
+Then create a template file at `docs/data/material/getting-started/templates/<name>/<Template>.tsx` (add more files if needed):
+
+> Note: The `<Template>` must be a pascal case string of the `<name>` folder.
+
+### Shared theme
+
+The template must use `AppTheme` from `../shared-theme/AppTheme` to ensure a consistent look and feel across all templates.
+
+If the template contains custom themed components, for example the dashboard template has MUI X themed components, pass the themed components to the `AppTheme`'s `themedComponents` prop:
+
+```js
+import AppTheme from '../shared-theme/AppTheme';
+
+const xThemeComponents = {
+  ...chartsCustomizations,
+  ...dataGridCustomizations,
+  ...datePickersCustomizations,
+  ...treeViewCustomizations,
+};
+
+export default function Dashboard(props: { disableCustomTheme?: boolean }) {
+  return (
+    <AppTheme {...props} themeComponents={xThemeComponents}>...</AppTheme>
+  )
+}
+```
+
+### Color mode toggle
+
+The shared theme provides 2 appearance of the color mode toggle, `ColorModeSelect` and `ColorModeIconDropdown`.
+You can use either of them in your template, it will be hidden within the `TemplateFrame` but will be visible in the Code Sandbox and Stackblitz.
+
+### Template frame
+
+If the template has a sidebar or a header that needs to stick to the top, refer to the CSS variable `--template-frame-height` to adjust.
+
+For example, the dashboard template has a fixed header that needs to be accounted for the template frame height:
+
+```js
+<AppBar
+  position="fixed"
+  sx={{
+    top: 'var(--template-frame-height, 0px)',
+    // ...other styles
+  }}
+>
+```
+
+This will make the `AppBar` stay below the `TemplateFrame` in a preview mode but stick to the top in the Code Sandbox and Stackblitz.
+
 ## [legacy] I have several instances of styles on the page
 
 If you are seeing a warning message in the console like the one below, you probably have several instances of `@mui/styles` initialized on the page.
diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index 8532db818bd37b..fd0d891f6473b3 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -43,74 +43,3 @@ Looking for something more? You can find complete templates and themes in the <a
 [Toolpad Core](https://mui.com/toolpad/core/introduction/) is a framework designed to build dashboards and internal tools. It leverages the existing suite of components offered by Material UI and ties them together to help you create applications quickly.
 
 {{"demo": "../../components/app-bar/DashboardLayoutBasic.js", "height": 400, "iframe": true, "hideToolbar": true}}
-
-## Contributing
-
-### Template page
-
-Create a new page in the `docs/pages/material-ui/getting-started/templates/<name>.js` directory with the following code:
-
-```js
-import * as React from 'react';
-import AppTheme from 'docs/src/modules/components/AppTheme';
-import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
-import Template from 'docs/data/material/getting-started/templates/<name>/<Template>';
-
-export default function Page() {
-  return (
-    <AppTheme>
-      <TemplateFrame>
-        <Template />
-      </TemplateFrame>
-    </AppTheme>
-  );
-}
-```
-
-Then create a folder in the `docs/data/material/getting-started/templates/<name>` directory and add the template files.
-
-### Shared theme
-
-The template must use `AppTheme` from `../shared-theme/AppTheme` to ensure a consistent look and feel across all templates.
-
-If the template contains custom themed components, for example the dashboard template has MUI X themed components, pass the themed components to the `AppTheme`'s `themedComponents` prop:
-
-```js
-import AppTheme from '../shared-theme/AppTheme';
-
-const xThemeComponents = {
-  ...chartsCustomizations,
-  ...dataGridCustomizations,
-  ...datePickersCustomizations,
-  ...treeViewCustomizations,
-};
-
-export default function Dashboard(props: { disableCustomTheme?: boolean }) {
-  return (
-    <AppTheme {...props} themeComponents={xThemeComponents}>...</AppTheme>
-  )
-}
-```
-
-### Color mode toggle
-
-The shared theme provides 2 appearance of the color mode toggle, `ColorModeSelect` and `ColorModeIconDropdown`.
-You can use either of them in your template, it will be hidden within the `TemplateFrame` but will be visible in the Code Sandbox and Stackblitz.
-
-### Template frame
-
-If the template has a sidebar or a header that needs to stick to the top, refer to the CSS variable `--template-frame-height` to adjust.
-
-For example, the dashboard template has a fixed header that needs to be accounted for the template frame height:
-
-```js
-<AppBar
-  position="fixed"
-  sx={{
-    top: 'var(--template-frame-height, 0px)',
-    // ...other styles
-  }}
->
-```
-
-This will make the `AppBar` stay below the `TemplateFrame` in a preview mode but stick to the top in the Code Sandbox and Stackblitz.