docs(website): use .mdx extension for every docs (#8490)

website/docs/api/plugin-methods/static-methods.mdx

@@ -0,0 +1,123 @@
+---
+sidebar_position: 4
+---
+
+# Static methods
+
+Static methods are not part of the plugin instance—they are attached to the constructor function. These methods are used to validate and normalize the plugin options and theme config, which are then used as constructor parameters to initialize the plugin instance.
+
+## `validateOptions({options, validate})` {#validateOptions}
+
+Returns validated and normalized options for the plugin. This method is called before the plugin is initialized. You must return the options since they will be passed to the plugin during initialization.
+
+### `options` {#options}
+
+`validateOptions` is called with `options` passed to plugin for validation and normalization.
+
+### `validate` {#validate}
+
+`validateOptions` is called with `validate` function which takes a **[Joi](https://www.npmjs.com/package/joi)** schema and options as the arguments, returns validated and normalized options. `validate` will automatically handle error and validation config.
+
+:::tip
+
+[Joi](https://www.npmjs.com/package/joi) is recommended for validation and normalization of options.
+
+To avoid mixing Joi versions, use `const {Joi} = require("@docusaurus/utils-validation")`
+
+:::
+
+If you don't use **[Joi](https://www.npmjs.com/package/joi)** for validation you can throw an Error in case of invalid options and return options in case of success.
+
+```js title="my-plugin/src/index.js"
+function myPlugin(context, options) {
+  return {
+    name: 'docusaurus-plugin',
+    // rest of methods
+  };
+}
+
+// highlight-start
+myPlugin.validateOptions = ({options, validate}) => {
+  const validatedOptions = validate(myValidationSchema, options);
+  return validationOptions;
+};
+// highlight-end
+
+module.exports = myPlugin;
+```
+
+In TypeScript, you can also choose to export this as a separate named export.
+
+```ts title="my-plugin/src/index.ts"
+export default function (context, options) {
+  return {
+    name: 'docusaurus-plugin',
+    // rest of methods
+  };
+}
+
+// highlight-start
+export function validateOptions({options, validate}) {
+  const validatedOptions = validate(myValidationSchema, options);
+  return validationOptions;
+}
+// highlight-end
+```
+
+## `validateThemeConfig({themeConfig, validate})` {#validateThemeConfig}
+
+Return validated and normalized configuration for the theme.
+
+### `themeConfig` {#themeConfig}
+
+`validateThemeConfig` is called with `themeConfig` provided in `docusaurus.config.js` for validation and normalization.
+
+### `validate` {#validate-1}
+
+`validateThemeConfig` is called with `validate` function which takes a **[Joi](https://www.npmjs.com/package/joi)** schema and `themeConfig` as the arguments, returns validated and normalized options. `validate` will automatically handle error and validation config.
+
+:::tip
+
+[Joi](https://www.npmjs.com/package/joi) is recommended for validation and normalization of theme config.
+
+To avoid mixing Joi versions, use `const {Joi} = require("@docusaurus/utils-validation")`
+
+:::
+
+If you don't use **[Joi](https://www.npmjs.com/package/joi)** for validation you can throw an Error in case of invalid options.
+
+```js title="my-theme/src/index.js"
+function myPlugin(context, options) {
+  return {
+    name: 'docusaurus-plugin',
+    // rest of methods
+  };
+}
+
+// highlight-start
+myPlugin.validateThemeConfig = ({themeConfig, validate}) => {
+  const validatedThemeConfig = validate(myValidationSchema, options);
+  return validatedThemeConfig;
+};
+// highlight-end
+
+module.exports = validateThemeConfig;
+```
+
+In TypeScript, you can also choose to export this as a separate named export.
+
+```ts title="my-theme/src/index.ts"
+export default function (context, options) {
+  return {
+    name: 'docusaurus-plugin',
+    // rest of methods
+  };
+}
+
+// highlight-start
+export function validateThemeConfig({themeConfig, validate}) {
+  const validatedThemeConfig = validate(myValidationSchema, options);
+  return validatedThemeConfig;
+}
+// highlight-end
+```