Various fixes to docs (#4256)

cspell.yml

@@ -5,14 +5,13 @@ ignorePaths:
   # Excluded from spelling check
   - cspell.yml
   - package.json
+  - package-lock.json
+  - tsconfig.json
   - benchmark/github-schema.graphql
   - benchmark/github-schema.json
+  - website/icons
+  - website/css
 overrides:
-  - filename: '**/docs-old/APIReference-*.md'
-    ignoreRegExpList: ['/href="[^"]*"/']
-    words:
-      - sublinks
-      - instanceof
   - filename: 'website/**'
     dictionaries:
       - fullstack
@@ -36,6 +35,8 @@ words:
   - graphiql
   - uncoerce
   - uncoerced
+  - sublinks
+  - instanceof
 
   # Different names used inside tests
   - Skywalker
@@ -45,14 +46,68 @@ words:
   - Artoo
   - Threepio
   - Odie
+  - Odie's
   - Damerau
   - Alderaan
   - Tatooine
   - astromech
 
   # TODO: contribute upstream
   - deno
-  - hashbang
+  - codecov
+
+  # Website tech
+  - Nextra
+  - headlessui
+  - Fastify
+  - tailwindcss
+  - svgr
+  - ruru
+
+  # used as href anchors
+  - graphqlerror
+  - syntaxerror
+  - formaterror
+  - graphqlschema
+  - graphqlscalartype
+  - graphqlobjecttype
+  - graphqlinterfacetype
+  - graphqluniontype
+  - graphqlenumtype
+  - graphqlinputobjecttype
+  - graphqllist
+  - graphqlnonnull
+  - graphqlint
+  - graphqlfloat
+  - graphqlstring
+  - graphqlboolean
+  - graphqlid
+  - getlocation
+  - isinputtype
+  - isoutputtype
+  - isleaftype
+  - iscompositetype
+  - isabstracttype
+  - getnullabletype
+  - getnamedtype
+  - introspectionquery
+  - buildclientschema
+  - buildschema
+  - printschema
+  - printintrospectionschema
+  - buildastschema
+  - typefromast
+  - astfromvalue
+  - typeinfo
+  - isvalidjsvalue
+  - isvalidliteralvalue
+  - specifiedrules
+  - Wordmark
+  - codeofconduct
+  - graphqlconf
+
+  # website words
+  - runtimes
 
   # TODO: remove bellow words
   - QLID # GraphQLID

website/css/globals.css

@@ -48,7 +48,9 @@ footer {
 
   &:hover {
     mask-position: 100%;
-    transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+    transition:
+      mask-position 1s ease,
+      -webkit-mask-position 1s ease;
   }
 }
 

website/pages/authentication-and-express-middleware.mdx

@@ -10,11 +10,11 @@ To use middleware with a GraphQL resolver, just use the middleware like you woul
 For example, let's say we wanted our server to log the IP address of every request, and we also want to write an API that returns the IP address of the caller. We can do the former with middleware, and the latter by accessing the `request` object in a resolver. Here's server code that implements this:
 
 ```js
-var express = require('express');
-var { createHandler } = require('graphql-http/lib/use/express');
-var { buildSchema } = require('graphql');
+const express = require('express');
+const { createHandler } = require('graphql-http/lib/use/express');
+const { buildSchema } = require('graphql');
 
-var schema = buildSchema(`
+const schema = buildSchema(`
   type Query {
     ip: String
   }
@@ -25,13 +25,13 @@ function loggingMiddleware(req, res, next) {
   next();
 }
 
-var root = {
+const root = {
   ip(args, context) {
     return context.ip;
   },
 };
 
-var app = express();
+const app = express();
 app.use(loggingMiddleware);
 app.all(
   '/graphql',

website/pages/basic-types.mdx

@@ -13,12 +13,12 @@ To use a list type, surround the type in square brackets, so `[Int]` is a list o
 Each of these types maps straightforwardly to JavaScript, so you can just return plain old JavaScript objects in APIs that return these types. Here's an example that shows how to use some of these basic types:
 
 ```js
-var express = require('express');
-var { createHandler } = require('graphql-http/lib/use/express');
-var { buildSchema } = require('graphql');
+const express = require('express');
+const { createHandler } = require('graphql-http/lib/use/express');
+const { buildSchema } = require('graphql');
 
 // Construct a schema, using GraphQL schema language
-var schema = buildSchema(`
+const schema = buildSchema(`
   type Query {
     quoteOfTheDay: String
     random: Float!
@@ -27,7 +27,7 @@ var schema = buildSchema(`
 `);
 
 // The root provides a resolver function for each API endpoint
-var root = {
+const root = {
   quoteOfTheDay() {
     return Math.random() < 0.5 ? 'Take it easy' : 'Salvation lies within';
   },
@@ -39,7 +39,7 @@ var root = {
   },
 };
 
-var app = express();
+const app = express();
 app.all(
   '/graphql',
   createHandler({

website/pages/constructing-types.mdx

@@ -9,11 +9,11 @@ When you are using the `GraphQLSchema` constructor to create a schema, instead o
 For example, let's say we are building a simple API that lets you fetch user data for a few hardcoded users based on an id. Using `buildSchema` we could write a server with:
 
 ```js
-var express = require('express');
-var { createHandler } = require('graphql-http/lib/use/express');
-var { buildSchema } = require('graphql');
+const express = require('express');
+const { createHandler } = require('graphql-http/lib/use/express');
+const { buildSchema } = require('graphql');
 
-var schema = buildSchema(`
+const schema = buildSchema(`
   type User {
     id: String
     name: String
@@ -25,7 +25,7 @@ var schema = buildSchema(`
 `);
 
 // Maps id to User object
-var fakeDatabase = {
+const fakeDatabase = {
   a: {
     id: 'a',
     name: 'alice',
@@ -36,13 +36,13 @@ var fakeDatabase = {
   },
 };
 
-var root = {
+const root = {
   user({ id }) {
     return fakeDatabase[id];
   },
 };
 
-var app = express();
+const app = express();
 app.all(
   '/graphql',
   createHandler({
@@ -57,12 +57,12 @@ console.log('Running a GraphQL API server at localhost:4000/graphql');
 We can implement this same API without using GraphQL schema language:
 
 ```js
-var express = require('express');
-var { createHandler } = require('graphql-http/lib/use/express');
-var graphql = require('graphql');
+const express = require('express');
+const { createHandler } = require('graphql-http/lib/use/express');
+const graphql = require('graphql');
 
 // Maps id to User object
-var fakeDatabase = {
+const fakeDatabase = {
   a: {
     id: 'a',
     name: 'alice',
@@ -74,7 +74,7 @@ var fakeDatabase = {
 };
 
 // Define the User type
-var userType = new graphql.GraphQLObjectType({
+const userType = new graphql.GraphQLObjectType({
   name: 'User',
   fields: {
     id: { type: graphql.GraphQLString },
@@ -83,7 +83,7 @@ var userType = new graphql.GraphQLObjectType({
 });
 
 // Define the Query type
-var queryType = new graphql.GraphQLObjectType({
+const queryType = new graphql.GraphQLObjectType({
   name: 'Query',
   fields: {
     user: {
@@ -99,9 +99,9 @@ var queryType = new graphql.GraphQLObjectType({
   },
 });
 
-var schema = new graphql.GraphQLSchema({ query: queryType });
+const schema = new graphql.GraphQLSchema({ query: queryType });
 
-var app = express();
+const app = express();
 app.all(
   '/graphql',
   createHandler({

website/pages/error.mdx

@@ -11,7 +11,7 @@ GraphQL errors. You can import either from the `graphql/error` module, or from t
 
 ```js
 import { GraphQLError } from 'graphql'; // ES6
-var { GraphQLError } = require('graphql'); // CommonJS
+const { GraphQLError } = require('graphql'); // CommonJS
 ```
 
 ## Overview

website/pages/execution.mdx

@@ -11,7 +11,7 @@ fulfilling a GraphQL request. You can import either from the `graphql/execution`
 
 ```js
 import { execute } from 'graphql'; // ES6
-var { execute } = require('graphql'); // CommonJS
+const { execute } = require('graphql'); // CommonJS
 ```
 
 ## Overview

website/pages/going-to-production.mdx

@@ -1,5 +1,5 @@
 ---
-title: Enabling Defer & Stream
+title: Going to Production
 ---
 
 The `@defer` and `@stream` directives are not enabled by default. In order to use these directives, you must add them to your GraphQL Schema and use the `experimentalExecuteIncrementally` function instead of `execute`.

website/pages/graphql.mdx

@@ -11,7 +11,7 @@ of GraphQL type systems and servers.
 
 ```js
 import { graphql } from 'graphql'; // ES6
-var { graphql } = require('graphql'); // CommonJS
+const { graphql } = require('graphql'); // CommonJS
 ```
 
 ## Overview
@@ -95,27 +95,27 @@ var { graphql } = require('graphql'); // CommonJS
 <ul className="apiIndex">
   <li>
     <a href="../type/#graphqlint">
-      `var GraphQLInt` A scalar type representing integers.
+      `const GraphQLInt` A scalar type representing integers.
     </a>
   </li>
   <li>
     <a href="../type/#graphqlfloat">
-      `var GraphQLFloat` A scalar type representing floats.
+      `const GraphQLFloat` A scalar type representing floats.
     </a>
   </li>
   <li>
     <a href="../type/#graphqlstring">
-      `var GraphQLString` A scalar type representing strings.
+      `const GraphQLString` A scalar type representing strings.
     </a>
   </li>
   <li>
     <a href="../type/#graphqlboolean">
-      `var GraphQLBoolean` A scalar type representing booleans.
+      `const GraphQLBoolean` A scalar type representing booleans.
     </a>
   </li>
   <li>
     <a href="../type/#graphqlid">
-      `var GraphQLID` A scalar type representing IDs.
+      `const GraphQLID` A scalar type representing IDs.
     </a>
   </li>
 </ul>

website/pages/language.mdx

@@ -10,7 +10,7 @@ The `graphql/language` module is responsible for parsing and operating on the Gr
 
 ```js
 import { Source } from 'graphql'; // ES6
-var { Source } = require('graphql'); // CommonJS
+const { Source } = require('graphql'); // CommonJS
 ```
 
 ## Overview
@@ -56,7 +56,7 @@ var { Source } = require('graphql'); // CommonJS
   </li>
   <li>
     <a href="#kind">
-      `var Kind` Represents the various kinds of parsed AST nodes.
+      `const Kind` Represents the various kinds of parsed AST nodes.
     </a>
   </li>
 </ul>
@@ -72,7 +72,7 @@ var { Source } = require('graphql'); // CommonJS
   </li>
   <li>
     <a href="#break">
-      `var BREAK` A token to allow breaking out of the visitor.
+      `const BREAK` A token to allow breaking out of the visitor.
     </a>
   </li>
 </ul>
@@ -198,7 +198,7 @@ a new version of the AST with the changes applied will be returned from the
 visit function.
 
 ```js
-var editedAST = visit(ast, {
+const editedAST = visit(ast, {
   enter(node, key, parent, path, ancestors) {
     // @return
     //   undefined: no action