docs: improvements (#10072)

* docs: improvements

* apply feedback from review

Author: n1ru4l

website/src/components/index-page.tsx

@@ -1,24 +1,22 @@
 import { ReactElement } from 'react';
-import dynamic from 'next/dynamic';
 import { HeroGradient, HeroIllustration, NPMBadge } from '@theguild/components';
 import gqlCodegenCover from '../../public/assets/illustrations/gql-codegen-cover.svg';
 import gqlGenerateCodeIllustration from '../../public/assets/illustrations/gql-generate-code-illustration.svg';
 import gqlWatchForChangesIllustration from '../../public/assets/illustrations/gql-watch-for-changes-illustration.svg';
 
-const LiveDemo = dynamic(() => import('@/components/live-demo/LiveDemo'), { ssr: false });
-
 export function IndexPage(): ReactElement {
   return (
     <>
       <HeroGradient
-        title="Generate code from your GraphQL schema"
-        description="Generate code from your GraphQL schema and operations with a simple CLI"
-        link={{
-          href: '/docs/getting-started/installation',
-          children: 'Try It Now',
-          title: 'Get started with GraphQL Code Generator',
-        }}
-        version={<NPMBadge name="@graphql-codegen/cli" />}
+        title="Generate Type-Safe GraphQL Client and Server Code"
+        description="Supercharge Your GraphQL Development Flow with Fully Typed Code in Seconds."
+        link={[
+          {
+            href: '/docs/getting-started',
+            children: 'Get Started with Client and Server',
+            title: 'Get started with GraphQL Code Generator',
+          },
+        ]}
         colors={['#1dbbff', '#ee1cd9']}
         image={{
           src: gqlCodegenCover,
@@ -28,8 +26,6 @@ export function IndexPage(): ReactElement {
         }}
       />
 
-      <LiveDemo />
-
       <HeroIllustration
         title="Generate Code Instantly"
         description="Generate code from your GraphQL schema and GraphQL operations with a single function call regardless of your environment or code format."

website/src/pages/docs/getting-started/index.mdx

@@ -3,7 +3,7 @@ title: Introduction
 description: GraphQL Code Generator is a plugin-based tool that helps you get the best out of your GraphQL stack. From back-end to front-end, GraphQL Code Generator automates the generation of typed Queries, Mutations and, Subscriptions for React, Vue, Angular, Next.js, Svelte, whether you are using Apollo Client, URQL or, React Query.
 ---
 
-import { Tabs, Callout } from '@theguild/components'
+import { Tabs, Callout, Cards} from '@theguild/components'
 
 # Introduction to GraphQL Code Generator
 
@@ -40,7 +40,7 @@ type Query {
 
 The following sections showcase why GraphQL Code Generator is a game-changer for your GraphQL Stack.
 
-### From the front-end
+### From the Frontend
 
 Most client-side implementations without GraphQL Code Generator would query the API as showcased in the following examples:
 
@@ -250,13 +250,13 @@ Manually maintaining the GraphQL operation types or the complete absence of type
 
 - **partial typing** of data (not all Schema's fields has a corresponding type)
 
-The strength of your front-end application types is based on your data types.
+The strength of your frontend application types is based on your data types.
 Any mistake on your manually maintained data types ripples in many of your components.
 
 For this reason, automating and generating the typing of your GraphQL operations will both improve the developer
 experience and stability of your stack.
 
-After installing 3 packages:
+After installing GraphQL Code Generator:
 
 ```sh npm2yarn
 npm i graphql
@@ -385,7 +385,6 @@ const posts = computed(() => result.value?.posts);
 <Tabs.Tab>
 ```tsx
 import { PostsGQL, PostsQuery } from './graphql'
-// BE SURE TO USE Observable from `rxjs` and not from `@apollo/client/core` when using map
 import { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 
@@ -436,7 +435,7 @@ GraphQL Code Generator checks for this automatically and will let you know if yo
 More details on the inner working of GraphQL Code Generator are available on [this page](/docs/advanced/how-does-it-work).
 </Callout>
 
-### To the back-end
+### To the Backend
 
 Most GraphQL API resolvers remain untyped or wrongly typed which, leads to multiple issues:
 
@@ -527,15 +526,41 @@ export const resolvers: UsersModule.Resolvers = {
 
 ## What's next?
 
-Start by [installing GraphQL Code Generator](/docs/getting-started/installation) in your project or get started with our guides:
-- [React and Vue](/docs/guides/react-vue)
-- [Vanilla TypeScript](/docs/guides/vanilla-typescript)
-- [Angular](/docs/guides/angular)
-- [Svelte](/docs/guides/svelte)
-- [Apollo and Yoga server](/docs/guides/graphql-server-apollo-yoga)
-- [GraphQL Modules](/docs/guides/graphql-modules)
+After unstanding the basic concepts of GraphQL Code Generator, you can start setting it up within your project.
+If your stack is not listed below, please refer to [our plugin overview](/plugins).
 
-If your stack is not listed above, please refer to [our plugins directory](/plugins).
+### Client-Side GraphQL
+
+Choose your existing setup or preference to get started.
+
+<Cards>
+  <Cards.Card arrow title="Vanilla TypeScript" href="/docs/guides/vanilla-typescript" />
+  <Cards.Card arrow title="React Query" href="/docs/guides/react-query" />
+  <Cards.Card arrow title="React / Vue" href="/docs/guides/react-vue" />
+  <Cards.Card arrow title="Angular" href="/docs/guides/angular" />
+  <Cards.Card arrow title="Svelte" href="/docs/guides/svelte" />
+</Cards>
+
+### Server-Side GraphQL
+
+
+<Cards>
+  <Cards.Card
+    arrow
+    title="GraphQL Yoga with Server Preset"
+    href="/docs/guides/graphql-server-apollo-yoga-with-server-preset"
+  />
+   <Cards.Card
+    arrow
+    title="Apollo Server with Server Preset"
+    href="/docs/guides/graphql-server-apollo-yoga-with-server-preset"
+  />
+  <Cards.Card arrow title="Apollo and Yoga server" href="/docs/guides/graphql-server-apollo-yoga" />
+  <Cards.Card arrow title="GraphQL Modules" href="/docs/guides/graphql-modules" />
+</Cards>
+
+
+### Troubleshooting
 
 If you are experiencing any issues, you can reach us via the following channels:
 

website/src/pages/docs/getting-started/installation.mdx

@@ -3,7 +3,7 @@ title: Quick Start
 description: GraphQL Code Generator is a plugin-based tool that helps you get the best out of your GraphQL stack. From back-end to front-end, GraphQL Code Generator automates the generation of typed Queries, Mutations and, Subscriptions for React, Vue, Angular, Next.js, Svelte, whether you are using Apollo Client, URQL or, React Query.
 ---
 
-import { Callout } from '@theguild/components'
+import { Callout, Cards } from '@theguild/components'
 
 # Quick Start
 
@@ -22,27 +22,22 @@ npm i -D @parcel/watcher
 
 ## Global Installation
 
-<Callout type="warning">
 Please avoid installing `graphql`, `@graphql-codegen/cli`, and its plugins as global dependencies. This will cause issues because of duplications of the `graphql` package. Install it only locally in your project.
 
-</Callout>
-
 ## Monorepo Project
 
-<Callout type="warning">
-If you are using Monorepo setup (Lerna/Yarn Workspaces/anything else), please note that GraphQL Codegen is using `require` to load plugins and files. This might break and fail in case of hoisting.
+If you are using Monorepo setup (Yarn or pnpm Workspaces), please note that GraphQL Codegen is using `require` to load plugins and files. This might break and fail in case of hoisting.
 
 If you are having issues with loading GraphQL-Codegen plugins, make sure it's installed correctly, at the same level of `node_modules`, and make sure it's accessible and available for the Codegen CLI.
 
-</Callout>
+## Setup
 
-GraphQL Code Generator comes with dozens of plugins, from front-end to back-end, from web apps to mobile apps. If you are not sure which plugins might be helpful for your GraphQL stack, give a try at the [_Initialization Wizard_](#initialization-wizard).
+GraphQL Code Generator comes with dozens of plugins, from frontend to backend, from web apps to mobile apps.
+We recommend looking at the [guides](#manual-setup) or trying the [initialization wizards](#initialization-wizard)
 
 Otherwise, you can start exploring the [plugins](/plugins) and [setting up them manually](#manual-setup).
 
-## Setup
-
-### Initialization Wizard
+## Initialization Wizard
 
 Once installed, GraphQL Code Generator CLI can help you configure your project based on some popular flows:
 
@@ -56,25 +51,38 @@ npm install # install the chosen packages
 
 Question by question, it will guide you through the whole process of setting up a schema, selecting and installing plugins, picking a destination to where your files are generated, and a lot more.
 
-### Manual Setup
+## Manual Setup
 
 Once GraphQL Code Generator is installed and added to your project's development workflow (scripts), you can start installing plugins and configuring them.
 
 If you are looking for the **best way to leverage GraphQL Code Generator on your stack**, you should read one of our _Guides_.
 
-#### Client
+### Client
+
+Follow one of the following guides to get started.
+
+<Cards>
+  <Cards.Card arrow title="Vanilla TypeScript" href="/docs/guides/vanilla-typescript" />
+  <Cards.Card arrow title="React Query" href="/docs/guides/react-query" />
+  <Cards.Card arrow title="React / Vue" href="/docs/guides/react-vue" />
+  <Cards.Card arrow title="Angular" href="/docs/guides/angular" />
+  <Cards.Card arrow title="Svelte" href="/docs/guides/svelte" />
+</Cards>
 
-We recommend using [a `client` preset](/plugins/presets/preset-client) that has a recommended configuration for the client applications. It's included in the `@graphql-codegen/cli` package by default. Follow one of the following guides to learn more:
+### Server
 
-- [React](/docs/guides/react-vue)
-- [Vue](/docs/guides/react-vue)
-- [Angular](/docs/guides/angular)
-- [Svelte](/docs/guides/svelte)
+Follow one of the following guides to get started.
 
-#### Server
+<Cards>
+  <Cards.Card
+    arrow
+    title="Apollo and Yoga server with Server Preset"
+    href="/docs/guides/graphql-server-apollo-yoga-with-server-preset"
+  />
+  <Cards.Card arrow title="Apollo and Yoga server" href="/docs/guides/graphql-server-apollo-yoga" />
+  <Cards.Card arrow title="GraphQL Modules" href="/docs/guides/graphql-modules" />
+</Cards>
 
-- [Apollo and Yoga server](/docs/guides/graphql-server-apollo-yoga)
-- [Apollo and Yoga server with Server Preset](/docs/guides/graphql-server-apollo-yoga-with-server-preset)
-- [GraphQL Modules](/docs/guides/graphql-modules)
+### Other
 
 If your stack is not listed above, please refer to [our plugins directory](/plugins).

website/src/pages/docs/guides/_meta.ts

@@ -1,7 +1,7 @@
 export default {
-  'react-vue': 'React / Vue',
   'vanilla-typescript': 'Vanilla TypeScript',
   'react-query': 'React Query',
+  'react-vue': 'React / Vue',
   angular: 'Angular',
   svelte: 'Svelte / Kit',
   'flutter-freezed': 'Dart/Flutter',

website/src/pages/docs/guides/react-vue.mdx

@@ -45,25 +45,9 @@ All the below code examples are available in our [repository `examples` folder](
 
 For most GraphQL clients and frameworks (React, Vue), install the following packages:
 
-**For Yarn:**
-
-```bash
-yarn add graphql
-yarn add -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher
-```
-
-**For npm:**
-
-```bash
-npm i -S graphql
-npm i -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher
-```
-
-**For pnpm:**
-
-```bash
-pnpm i graphql @graphql-typed-document-node/core
-pnpm i -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher
+```sh npm2yarn
+npm install graphql
+npm install --dev typescript @graphql-codegen/cli @parcel/watcher
 ```
 
 <br />
@@ -75,7 +59,7 @@ Then provide the corresponding framework-specific configuration:
 <Tabs.Tab>
 
 ```ts filename="codegen.ts" {5}
-import { CodegenConfig } from '@graphql-codegen/cli'
+import type { CodegenConfig } from '@graphql-codegen/cli'
 
 const config: CodegenConfig = {
   schema: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
@@ -119,29 +103,16 @@ export default config
 
 </Tabs>
 
-> Each framework-specific lines are highlighted
-
-<br />
-
-<Callout type="info">
-
-**Usage with `@tanstack/react-query`**
-
-If you are using `@tanstack/react-query`, we recommend using it with `graphql-request@^5.0.0` to get the best developer experience.
-
-If you are willing to provide your own fetcher, you can directly jump to the ["Appendix I: React Query with a custom fetcher
-setup"](#appendix-i-react-query-with-a-custom-fetcher-setup) and continue the guide once React Query is properly setup.
-
-</Callout>
+> **Note**: For React Query, please refer to our [dedicated guide](/docs/guides/react-query).
 
 <br />
 
 ## Writing GraphQL Queries
 
 First, start GraphQL Code Generator in watch mode:
 
-```
-yarn graphql-codegen --watch
+```sh npm2yarn
+npm run graphql-codegen --watch
 ```
 
 _Using GraphQL Code Generator will type your GraphQL Query and Mutations as you write them ⚡️_