refactor docs pages for ESM/TS support

website/docs/api/docusaurus.config.js.mdx

@@ -18,7 +18,15 @@ Refer to the Getting Started [**Configuration**](../configuration.mdx) for examp
 
 `docusaurus.config.js` contains configurations for your site and is placed in the root directory of your site.
 
-This file is run in Node.js using the [**CommonJS**](https://flaviocopes.com/commonjs/) module system, and should export a site configuration object, or a function that creates it.
+This file is run in Node.js and should export a site configuration object, or a function that creates it.
+
+The `docusaurus.config.js` file supports:
+
+- [**ES Modules**](https://flaviocopes.com/es-modules/)
+- [**CommonJS**](https://flaviocopes.com/commonjs/)
+- [**TypeScript**](../typescript-support.mdx#typing-config)
+
+hey
 
 Examples:
 

website/docs/configuration.mdx

@@ -25,15 +25,29 @@ The `docusaurus.config.js` file is run in Node.js and should export either:
 
 :::info
 
-The `docusaurus.config.js` file only supports the [**CommonJS**](https://flaviocopes.com/commonjs/) module system:
+The `docusaurus.config.js` file supports:
 
-- **Required:** use `module.exports = /* your config*/` to export your Docusaurus config
-- **Optional:** use `require('lib')` to import Node.js packages
+- [**ES Modules**](https://flaviocopes.com/es-modules/)
+- [**CommonJS**](https://flaviocopes.com/commonjs/)
+- [**TypeScript**](./typescript-support.mdx#typing-config)
+
+Constraints:
+
+- **Required:** use `export default /* your config*/` (or `module.exports` to export your Docusaurus config
+- **Optional:** use `import Lib from 'lib'` (or `require('lib')`) to import Node.js packages
 - **Optional:** use `await import('lib')` (dynamic import) in an async function to import ESM-Only Node.js packages
 
 :::
 
-Node.js gives us the ability to declare our Docusaurus configuration in various **equivalent ways**, and all the following config examples lead to the exact same result:
+Docusaurus gives us the ability to declare its configuration in various **equivalent ways**, and all the following config examples lead to the exact same result:
+
+```js title="docusaurus.config.js"
+export default {
+  title: 'Docusaurus',
+  url: 'https://docusaurus.io',
+  // your site config ...
+};
+```
 
 ```js title="docusaurus.config.js"
 module.exports = {
@@ -43,42 +57,52 @@ module.exports = {
 };
 ```
 
+```ts title="docusaurus.config.ts"
+import type {Config} from '@docusaurus/types';
+
+export default {
+  title: 'Docusaurus',
+  url: 'https://docusaurus.io',
+  // your site config ...
+} satisfies Config;
+```
+
 ```js title="docusaurus.config.js"
 const config = {
   title: 'Docusaurus',
   url: 'https://docusaurus.io',
   // your site config ...
 };
 
-module.exports = config;
+export default config;
 ```
 
 ```js title="docusaurus.config.js"
-module.exports = function configCreator() {
+export default function configCreator() {
   return {
     title: 'Docusaurus',
     url: 'https://docusaurus.io',
     // your site config ...
   };
-};
+}
 ```
 
 ```js title="docusaurus.config.js"
-module.exports = async function createConfigAsync() {
+export default async function createConfigAsync() {
   return {
     title: 'Docusaurus',
     url: 'https://docusaurus.io',
     // your site config ...
   };
-};
+}
 ```
 
 :::tip Using ESM-only packages
 
 Using an async config creator can be useful to import ESM-only modules (notably most Remark plugins). It is possible to import such modules thanks to dynamic imports:
 
 ```js title="docusaurus.config.js"
-module.exports = async function createConfigAsync() {
+export default async function createConfigAsync() {
   // Use a dynamic import instead of require('esm-lib')
   // highlight-next-line
   const lib = await import('lib');
@@ -88,7 +112,7 @@ module.exports = async function createConfigAsync() {
     url: 'https://docusaurus.io',
     // rest of your site config...
   };
-};
+}
 ```
 
 :::
@@ -120,7 +144,7 @@ It is recommended to check the [deployment docs](deployment.mdx) for more inform
 List the [themes](./using-plugins.mdx#using-themes), [plugins](./using-plugins.mdx), and [presets](./using-plugins.mdx#using-presets) for your site in the `themes`, `plugins`, and `presets` fields, respectively. These are typically npm packages:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   // ...
   plugins: [
     '@docusaurus/plugin-content-blog',
@@ -135,7 +159,7 @@ module.exports = {
 Docusaurus supports [**module shorthands**](./using-plugins.mdx#module-shorthands), allowing you to simplify the above configuration as:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   // ...
   plugins: ['content-blog', 'content-pages'],
   themes: ['classic'],
@@ -147,9 +171,9 @@ module.exports = {
 They can also be loaded from local directories:
 
 ```js title="docusaurus.config.js"
-const path = require('path');
+import path from 'path';
 
-module.exports = {
+export default {
   // ...
   themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
 };
@@ -158,7 +182,7 @@ module.exports = {
 To specify options for a plugin or theme, replace the name of the plugin or theme in the config file with an array containing the name and an options object:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   // ...
   plugins: [
     [
@@ -178,7 +202,7 @@ module.exports = {
 To specify options for a plugin or theme that is bundled in a preset, pass the options through the `presets` field. In this example, `docs` refers to `@docusaurus/plugin-content-docs` and `theme` refers to `@docusaurus/theme-classic`.
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   // ...
   presets: [
     [
@@ -211,7 +235,7 @@ Docusaurus guards `docusaurus.config.js` from unknown fields. To add custom fiel
 Example:
 
 ```js title="docusaurus.config.js"
-module.exports = {
+export default {
   // ...
   // highlight-start
   customFields: {