fix images on mobile

.eslintrc.cjs

@@ -224,11 +224,37 @@ module.exports = {
         },
         tailwindcss: {
           callees: tailwindCallees,
-          whitelist: ['light', 'hive-focus', 'hive-focus-within'],
+          whitelist: ['light', 'hive-focus', 'hive-focus-within', '_text-primary-600'],
           config: path.join(__dirname, './packages/web/docs/tailwind.config.ts'),
         },
       },
     },
+    {
+      files: ['packages/web/docs/src/**/*.mdx'],
+      parser: 'eslint-mdx',
+      parserOptions: {
+        ecmaVersion: 2024,
+        sourceType: 'module',
+      },
+      rules: {
+        'import/no-duplicates': 'error',
+        'react/jsx-uses-vars': 'error', // should be enabled, otherwise @typescript-eslint/no-unused-vars gives false positive
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_', // allow underscores in destructuring
+          },
+        ],
+        'no-restricted-imports': [
+          'error',
+          {
+            name: 'next/image',
+            message: 'Use markdown syntax - ![Your image alt attribute](/path/to/your/image)',
+          },
+        ],
+      },
+    },
     {
       files: 'cypress/**',
       extends: 'plugin:cypress/recommended',

package.json

@@ -30,7 +30,7 @@
     "generate": "pnpm --filter @hive/storage db:generate && pnpm graphql:generate",
     "graphql:generate": "graphql-codegen --config codegen.mts",
     "integration:prepare": "cd integration-tests && ./local.sh",
-    "lint": "eslint --cache --ignore-path .gitignore \"{packages,cypress}/**/*.{ts,tsx,graphql}\"",
+    "lint": "eslint --cache --ignore-path .gitignore \"{packages,cypress}/**/*.{ts,tsx,graphql,mdx}\"",
     "lint:env-template": "tsx scripts/check-env-template.ts",
     "lint:fix": "pnpm lint --fix",
     "lint:prettier": "prettier --cache --check .",

packages/web/docs/package.json

@@ -12,7 +12,7 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.3",
     "@tailwindcss/typography": "0.5.15",
-    "@theguild/components": "7.3.0",
+    "@theguild/components": "7.3.3",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
     "next": "14.2.18",

packages/web/docs/src/pages/docs/dashboard/explorer.mdx

@@ -1,6 +1,4 @@
-import NextImage from 'next/image'
 import { Callout } from '@theguild/components'
-import schemaExplorerImage from '../../../../public/docs/pages/features/schema-explorer.png'
 
 # Schema Explorer
 
@@ -9,11 +7,7 @@ your GraphQL schema. Not only does it allow you to explore the different types a
 schema, but it also enables you to gain a deeper understanding of the arguments and their respective
 input types.
 
-<NextImage
-  alt="Schema Explorer"
-  src={schemaExplorerImage}
-  className="mt-10 max-w-2xl rounded-lg drop-shadow-md"
-/>
+![Schema Explorer](/docs/pages/features/schema-explorer.png)
 
 ## Schema Usage and Coverage
 

packages/web/docs/src/pages/docs/dashboard/insights.mdx

@@ -1,14 +1,7 @@
-import NextImage from 'next/image'
-import usageOperationsImage from '../../../../public/docs/pages/features/usage-operations.png'
-
 # Insights
 
 A list of all the GraphQL operations executed by your consumers, their performance metrics and total
 count. By clicking on a specific query, you'll be able to see the full list of fields and arguments
 used in the operation.
 
-<NextImage
-  alt="Insights"
-  src={usageOperationsImage}
-  className="mt-10 max-w-2xl rounded-lg drop-shadow-md"
-/>
+![Insights](/docs/pages/features/usage-operations.png)

packages/web/docs/src/pages/docs/dashboard/laboratory.mdx

@@ -1,7 +1,4 @@
-import NextImage from 'next/image'
 import { Callout } from '@theguild/components'
-import labFormImage from '../../../../public/docs/pages/features/lab-form.png'
-import labImage from '../../../../public/docs/pages/features/lab.png'
 
 # Laboratory
 
@@ -14,7 +11,7 @@ You can use the full power of [GraphiQL](https://github.com/graphql/graphiql) di
 compose your GraphQL operations, explore with different field and variations, and access your
 GraphQL schema full documentation.
 
-<NextImage alt="Lab" src={labImage} className="mt-6 max-w-3xl rounded-lg drop-shadow-md" />
+![Laboratory](/docs/pages/features/lab.png)
 
 ## Link a Laboratory Endpoint
 
@@ -49,7 +46,7 @@ To get started with using the Laboratory mock schema externally, create a
 Now, click on the **Use Schema Externally** button on the Laboratory page, and follow the
 instructions on the form:
 
-<NextImage alt="Lab Form" src={labFormImage} className="mt-6 max-w-xl rounded-lg drop-shadow-md" />
+![Laboratory Form](/docs/pages/features/lab-form.png)
 
 To test access to your setup, try running a `curl` command to run a simple GraphQL query against
 your mocked schema:

packages/web/docs/src/pages/docs/gateway/deployment/node-frameworks/express.mdx

@@ -4,8 +4,6 @@ description:
   a robust set of features to handle HTTP on Node.js applications.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with Express
 
 [Express is the most popular web framework for Node.js.](https://expressjs.com/) It is a minimalist
@@ -65,7 +63,7 @@ const app = express()
 
 const serveRuntime = createGatewayRuntime(/* Your configuration */)
 const hiveGWRouter = express.Router()
-// GraphiQL specefic CSP configuration
+// GraphiQL specific CSP configuration
 hiveGWRouter.use(
   helmet({
     contentSecurityPolicy: {

packages/web/docs/src/pages/docs/gateway/deployment/node-frameworks/fastify.mdx

@@ -4,8 +4,6 @@ description:
   powerful framework that is easy to learn and use.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with Fastify
 
 [Fastify is one of the popular HTTP server frameworks for Node.js.](https://www.fastify.io/) It is a

packages/web/docs/src/pages/docs/gateway/deployment/node-frameworks/hapi.mdx

@@ -1,5 +1,3 @@
-import { Callout } from '@theguild/components'
-
 # Integration with Hapi
 
 [Hapi](https://hapi.dev) allows you to build powerful, scalable applications, with minimal overhead

packages/web/docs/src/pages/docs/gateway/deployment/node-frameworks/koa.mdx

@@ -4,8 +4,6 @@ description:
   expressive, and more robust foundation for web applications and APIs.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with Koa
 
 [Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.](https://koajs.com)

packages/web/docs/src/pages/docs/gateway/deployment/node-frameworks/nextjs.mdx

@@ -4,8 +4,6 @@ description:
   integrated with Next.js easily as an API Route.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with Next.js
 
 [Next.js](https://nextjs.org) is a web framework that allows you to build websites very quickly and

packages/web/docs/src/pages/docs/gateway/deployment/node-frameworks/uwebsockets.mdx

@@ -2,8 +2,6 @@
 description: µWebSockets.js is an HTTP/WebSocket server for Node.js.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with µWebSockets.js
 
 [µWebSockets.js](https://github.com/uNetworking/uWebSockets.js) is an alternative to Node.js's

packages/web/docs/src/pages/docs/gateway/deployment/runtimes/bun.mdx

@@ -4,8 +4,6 @@ description:
   platform besides Node.js.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with Bun
 
 Hive Gateway provides you a cross-platform GraphQL Server. So you can easily integrate it into any

packages/web/docs/src/pages/docs/gateway/deployment/runtimes/deno.mdx

@@ -4,8 +4,6 @@ description:
   platform besides Node.js.
 ---
 
-import { Callout } from '@theguild/components'
-
 # Integration with Deno
 
 Hive Gateway provides you a cross-platform GraphQL Server. So you can easily integrate it into any

packages/web/docs/src/pages/docs/gateway/deployment/runtimes/nodejs.mdx

@@ -1,5 +1,3 @@
-import { Callout } from '@theguild/components'
-
 # Node.js
 
 Node.js is the most common runtime for JavaScript.

packages/web/docs/src/pages/docs/gateway/index.mdx

@@ -4,7 +4,7 @@ description:
   Hive Gateway is the GraphQL federation Gateway and/or Proxy Gateway for your GraphQL services.
 ---
 
-import { Callout, Cards, Tabs } from '@theguild/components'
+import { Cards, Tabs } from '@theguild/components'
 
 # Hive Gateway
 

packages/web/docs/src/pages/docs/gateway/monitoring-tracing.mdx

@@ -4,9 +4,7 @@ description:
   behavior of your Hive Gateway.
 ---
 
-import Image from 'next/image'
-import { Table, Td, Th, Tr } from 'nextra/components'
-import { Callout, Cards, Tabs } from '@theguild/components'
+import { Callout, Tabs } from '@theguild/components'
 
 # Monitoring and Tracing
 
@@ -130,7 +128,7 @@ The following are available to use with this plugin:
 
 <Tabs items={['CLI', 'Programmatic Usage']}>
 
-  <Tabs.Tab>
+<Tabs.Tab>
 
 ```ts filename="gateway.config.ts"
 import { createStdoutExporter, defineConfig } from '@graphql-hive/gateway'
@@ -159,7 +157,7 @@ export const gatewayConfig = defineConfig({
 })
 ```
 
-  </Tabs.Tab>
+</Tabs.Tab>
 
 <Tabs.Tab>
 

packages/web/docs/src/pages/docs/gateway/other-features/performance/deduplicate-request.mdx

@@ -2,8 +2,6 @@
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Deduplicate HTTP Requests
 
 Most of the time, your Hive Gateway will receive multiple requests for the same data. This can

packages/web/docs/src/pages/docs/gateway/other-features/performance/request-batching.mdx

@@ -5,8 +5,6 @@ description:
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Request Batching
 
 Batching is the process of taking a group of requests, combining them into one, and making a single

packages/web/docs/src/pages/docs/gateway/other-features/performance/upstream-cancellation.mdx

@@ -2,16 +2,14 @@
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Upstream Cancellation
 
 This feature enables you to cancel the upstream HTTP requests when the client cancels the downstream
 GraphQL request. This can be useful when you want to save resources on your server and the services.
 
 There is also
 [Execution Cancellation](/docs/gateway/other-features/performance/execution-cancellation) that stops
-the execution, but it doesn't stop ongoing HTTP requests. This seperately allows you to stop the
+the execution, but it doesn't stop ongoing HTTP requests. This separately allows you to stop the
 HTTP requests by hooking into [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
 
 ## Enable Upstream Cancellation

packages/web/docs/src/pages/docs/gateway/other-features/security/block-field-suggestions.mdx

@@ -2,8 +2,6 @@
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Block Field Suggestions
 
 This is a feature that allows you to prevent **returning field suggestions** and **leaking your

packages/web/docs/src/pages/docs/gateway/other-features/security/cost-limit.mdx

@@ -2,8 +2,6 @@
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Cost Limit
 
 **Limit** the **complexity** of a GraphQL document by using
@@ -18,35 +16,35 @@ npm install @escape.tech/graphql-armor-cost-limit
 Then, add it to your plugins:
 
 ```ts filename="gateway.config.ts"
-import {defineConfig} from '@graphql-hive/gateway';
-import { costLimitPlugin } from '@escape.tech/graphql-armor-cost-limit';
+import { costLimitPlugin } from '@escape.tech/graphql-armor-cost-limit'
+import { defineConfig } from '@graphql-hive/gateway'
 
 export const gatewayConfig = defineConfig({
   plugins: () => [
     costLimitPlugin({
-        // Toogle the plugin | default: true
-        enabled: true,
-        // Cost allowed for the query | default: 5000
-        maxCost: 5000,
-        // Static cost of an object | default: 2
-        objectCost: 2,
-        // Static cost of a field | default: 1
-        scalarCost: 1,
-        // Factorial applied to nested operator | default: 1.5
-        depthCostFactor: 1.5,
-        // Ignore the cost of introspection queries | default: true
-        ignoreIntrospection: true,
-        // Do you want to propagate the rejection to the client? | default: true
-        propagateOnRejection: true,
-
-        /* Advanced options (use here on your own risk) */
-
-        // Callbacks that are ran whenever a Query is accepted
-        onAccept: []
-
-        // Callbacks that are ran whenever a Query is rejected
-        onReject: []
-    }),
+      // Toogle the plugin | default: true
+      enabled: true,
+      // Cost allowed for the query | default: 5000
+      maxCost: 5000,
+      // Static cost of an object | default: 2
+      objectCost: 2,
+      // Static cost of a field | default: 1
+      scalarCost: 1,
+      // Factorial applied to nested operator | default: 1.5
+      depthCostFactor: 1.5,
+      // Ignore the cost of introspection queries | default: true
+      ignoreIntrospection: true,
+      // Do you want to propagate the rejection to the client? | default: true
+      propagateOnRejection: true,
+
+      /* Advanced options (use here on your own risk) */
+
+      // Callbacks that are ran whenever a Query is accepted
+      onAccept: [],
+
+      // Callbacks that are ran whenever a Query is rejected
+      onReject: []
+    })
   ]
-});
+})
 ```

packages/web/docs/src/pages/docs/gateway/other-features/security/csrf-prevention.mdx

@@ -5,8 +5,6 @@ description:
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # CSRF Prevention
 
 If you have CORS enabled, almost all requests coming from the browser will have a preflight

packages/web/docs/src/pages/docs/gateway/other-features/security/error-masking.mdx

@@ -2,8 +2,6 @@
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Error Masking
 
 Hive Gateway automatically masks unexpected errors and prevents leaking sensitive information to

packages/web/docs/src/pages/docs/gateway/other-features/security/index.mdx

@@ -2,8 +2,6 @@
 searchable: false
 ---
 
-import { Callout } from '@theguild/components'
-
 # Secure your Gateway
 
 Building a secure GraphQL API is hard by design because of the “Graph” nature of GraphQL. Libraries
@@ -102,7 +100,7 @@ sequence of characters into a sequence of lexical tokens.
 E.g. given the following GraphQL operation.
 
 ```graphql
-graphql {
+query {
   me {
     id
     user