doc: migrate config exampes to TS

website/src/pages/docs/advanced/generated-files-colocation.mdx

@@ -13,19 +13,21 @@ For similar results on a back-end project, please refer to [`@graphql-codegen/gr
 
 Most GraphQL Code Generator configuration examples (in guides or plugins documentation) generate types in a single common file, as follows:
 
-```yaml
-# Configuration for a React URQL setup
-
-schema: http://my-graphql-api.com/graphql
-documents: './src/**/*.tsx'
-generates:
-  graphql/generated.ts:
-    plugins:
-      - typescript
-      - typescript-operations
-      - typescript-urql
-    config:
-      withHooks: true
+```ts
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+// Configuration for a React URQL setup
+const config: CodegenConfig = {
+  schema: 'http://my-graphql-api.com/graphql',
+  documents: './src/**/*.tsx',
+  generates: {
+    'graphql/generated.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typescript-urql'],
+      config: { withHooks: true },
+    },
+  },
+};
+export default config;
 ```
 
 All code is generated in one single `graphql/generated.ts` file.
@@ -51,29 +53,29 @@ Just a few configuration steps are required to get this structure of colocated g
 
 ### Configure the preset
 
-To use this preset, you need to add 2 outputs to your `codegen.yml` file:
+To use this preset, you need to add 2 outputs to your `codegen.ts` file:
 
 - The first is the base types, generated by `typescript` plugin.
 - The second is the one in charge of generating types per operation.
 
-```yaml
-schema: http://my-graphql-api.com/graphql
-# we are looking for operations in .tsx files,
-# but not the generated ones.
-documents: 'src/**/!(*.generated).{ts,tsx}'
-generates:
-  src/types.ts:
-    - typescript
-  src/:
-    preset: near-operation-file
-    presetConfig:
-      extension: .generated.tsx
-      baseTypesPath: types.ts
-    plugins:
-      - typescript-operations
-      - typescript-urql
-    config:
-      withHooks: true
+
+```ts filename="codegen.ts"
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: 'http://my-graphql-api.com/graphql',
+  documents: 'src/**/!(*.generated).{ts,tsx}',
+  generates: {
+    'src/types.ts': ['typescript'],
+    'src/': {
+      preset: 'near-operation-file',
+      presetConfig: { extension: '.generated.tsx', baseTypesPath: 'types.ts' },
+      plugins: ['typescript-operations', 'typescript-urql'],
+      config: { withHooks: true },
+    },
+  },
+};
+export default config;
 ```
 
 <Callout>

website/src/pages/docs/advanced/how-does-it-work.mdx

@@ -78,16 +78,18 @@ fragment UserFields on User {
 }
 ```
 
-And with the following `codegen.yml` configuration file:
-
-```yaml filename="codegen.yml"
-schema: http://localhost:3333
-generates:
-  types-and-hooks.tsx:
-    plugins:
-      - typescript
-      - typescript-operations
-      - typescript-react-query
+And with the following `codegen.ts` configuration file:
+
+```ts filename="codegen.ts"
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  schema: 'http://localhost:3333',
+  generates: {
+    'types-and-hooks.tsx': { plugins: ['typescript', 'typescript-operations', 'typescript-react-query'] },
+  },
+};
+export default config;
 ```
 
 `@graphql-codegen/typescript` plugin can generate the following TypeScript typings and React hooks files based on defined operations:

website/src/pages/docs/advanced/profiler.mdx

@@ -5,7 +5,7 @@ import { PackageCmd } from '@theguild/components'
 GraphQL Code Generator CLI provides a flag that enables the profiler mode, as follows:
 
 <PackageCmd
-  packages={[{ name: 'graphql-code-generator --config graphql-codegen.yml --profile', cmd: 'run', isNpx: true }]}
+  packages={[{ name: 'graphql-code-generator --config graphql-codegen.ts --profile', cmd: 'run', isNpx: true }]}
 />
 
 GraphQL Code Generator operates as usual (generating your files) but also generates a `codegen-[timestamp].json` profile file.

website/src/pages/docs/config-reference/codegen-config.mdx

@@ -1,40 +1,38 @@
 import { PackageCmd, Callout } from '@theguild/components'
 
-# `codegen.yml` file
+# `codegen.ts` file
 
 [The plugins' page](/plugins) lists dozens of plugins with their set of options and specific outputs.
 
-GraphQL Code Generator relies on a configuration file named `codegen.yml` or `codegen.json` to manage all possible options, input, and output document types.
+GraphQL Code Generator relies on a configuration file named `codegen.ts` to manage all possible options, input, and output document types.
 
 The CLI automatically detects the defined config file and generates code accordingly.
 
 In addition, you can also define a path to your config file with the `--config` options, like so:
 
-<PackageCmd packages={[{ name: 'graphql-code-generator --config ./path/to/config.yml', cmd: 'run', isNpx: true }]} />
+<PackageCmd packages={[{ name: 'graphql-code-generator --config ./path/to/codegen.ts', cmd: 'run', isNpx: true }]} />
 
 ## Configuration file format
 
 Here's an example for a possible config file:
 
-```yaml
-schema: http://localhost:3000/graphql
-documents: ./src/**/*.graphql
-generates:
-  ./src/types.ts:
-    plugins:
-      - typescript
-      - typescript-operations
+```ts
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  schema: 'http://localhost:4000/graphql',
+  documents: ['src/**/*.tsx'],
+  generates: {
+    './src/gql/': {
+      preset: 'client',
+      plugins: []
+    }
+  }
+}
+
+export default config
 ```
 
-If you are looking for a reference file, an example for a [large configuration file can be seen here](https://github.com/dotansimha/graphql-code-generator/blob/master/dev-test/codegen.yml).
-
-<Callout>
-**For VSCode users**
-
-Ensure to [install the YAML plugin](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml) to add validation auto-complete capabilities for available plugins configuration files and `codegen.yml` file.
-
-</Callout>
-
 ## Configuration options
 
 Here are the supported options that you can define in the config file (see [source code](https://github.com/dotansimha/graphql-code-generator/blob/master/packages/utils/plugins-helpers/src/types.ts#L92)):
@@ -99,24 +97,23 @@ Here are the supported options that you can define in the config file (see [sour
 
 ## Environment Variables
 
-You can use environment variables in your `codegen.yml` file:
-
-```yaml /${SCHEMA_PATH}/
-schema: ${SCHEMA_PATH}
-documents: ./src/**/*.graphql
-generates:
-  ./src/types.ts:
-    plugins:
-      - typescript
-      - typescript-operations
-```
+You can use environment variables in your `codegen.ts` file:
 
-You can load a `.env` file by adding the `-r dotenv/config` option to your CLI command and adding `dotenv` as a dependency on your project.
+```ts /process.env.SCHEMA_PATH/
+import { CodegenConfig } from '@graphql-codegen/cli'
 
-You can specify a default value in case an environment variable is missing:
+const config: CodegenConfig = {
+  schema: process.env.SCHEMA_PATH,
+  documents: ['src/**/*.tsx'],
+  generates: {
+    './src/gql/': {
+      preset: 'client',
+      plugins: []
+    }
+  }
+}
 
-```yaml
-schema: ${SCHEMA_PATH:schema.graphql}
+export default config
 ```
 
 ## CLI Flags
@@ -180,7 +177,7 @@ For more detailed output, you can also enable the `verbose: true` or `--verbose`
 
 GraphQL-Codegen is uses [`cosmiconfig`](https://github.com/davidtheclark/cosmiconfig) library to manage configuration loading.
 
-That means you can use `codegen.yml`, `codegen.json`, or `codegen.js` as configuration files. You can also specify the entire configuration under a key called `"codegen"` in your `package.json`.
+That means you can use `codegen.yml`, `codegen.json`, `codegen.js`, or `codegen.ts` as configuration files. You can also specify the entire configuration under a key called `"codegen"` in your `package.json`.
 
 For more information, [please refer to `cosmiconfig` documentation](https://github.com/davidtheclark/cosmiconfig#cosmiconfig).
 

website/src/pages/docs/config-reference/config-field.mdx

@@ -10,29 +10,36 @@ The `config` field is used to pass configuration to Plugins.
 
 If you specify it in your root level, the options will be passed to every plugin for each output file:
 
-```yaml {2-3}
-schema: schema.graphql
-config:
-  configKey: configValue
-generates:
-  output.ts:
-    - plugin1
-    - plugin2
+```ts {5}
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  schema: 'schema.graphql',
+  config: { configKey: 'configValue' },
+  generates: { 'output.ts': ['plugin1', 'plugin2'] }
+}
+export default config
 ```
 
 ### Output Level
 
 If you specify it at the output file level, every plugin for specific output will get the config value:
 
-```yaml {4-5}
-schema: schema.graphql
-generates:
-  output.ts:
-    config:
-      configKey: configValue
-    plugins:
-      - plugin1
-      - plugin2
+```ts {7-9}
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  schema: 'schema.graphql',
+  generates: {
+    'output.ts': {
+      config: {
+        configKey: 'configValue'
+      },
+      plugins: ['plugin1', 'plugin2']
+    }
+  }
+}
+export default config
 ```
 
 <Callout>Output level configuration overrides root-level configuration.</Callout>
@@ -41,14 +48,23 @@ generates:
 
 If you specify it at the plugin level, only that plugin will get the config value:
 
-```yaml {5,7}
-schema: schema.graphql
-generates:
-  output.ts:
-    - plugin1:
-        configKey: configValue
-    - plugin2:
-        configKey: otherValue
+```ts {8,11}
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  schema: 'schema.graphql',
+  generates: {
+    'output.ts': [
+      {
+        plugin1: { configKey: 'configValue' }
+      },
+      {
+        plugin2: { configKey: 'otherValue' }
+      }
+    ]
+  }
+}
+export default config
 ```
 
 <Callout>Plugin level configuration overrides output-level and root-level configuration.</Callout>