Remove .description, add graphql-js

Author: hasparus

src/components/code-blocks/describe-your-data.mdx

@@ -2,6 +2,6 @@
 type Project {
   name: String
   tagline: String
-  contributors: [User]
+  contributors: [User!]
 }
 ```

src/components/code-blocks/index.tsx

@@ -4,9 +4,9 @@ import { clsx } from "clsx"
 
 import { Pre } from "@/components/pre"
 
-import _CodeA from "./describe-your-data.mdx"
-import _CodeB from "./ask-for-what-you-want.mdx"
-import _CodeC from "./get-predictable-results.mdx"
+import DescribeYourData from "./describe-your-data.mdx"
+import AskForWhatYouWant from "./ask-for-what-you-want.mdx"
+import GetPredictableResults from "./get-predictable-results.mdx"
 
 import _Code1 from "./code1.mdx"
 import _Code2 from "./code2.mdx"
@@ -48,9 +48,15 @@ export const Code2 = () => <_Code2 components={components} />
 export const Code3 = () => <_Code3 components={components} />
 export const Code4 = () => <_Code4 components={components} />
 
-export const CodeA = () => <_CodeA components={components} />
-export const CodeB = () => <_CodeB components={components} />
-export const CodeC = () => <_CodeC components={components} />
+export const HowItWorks_Schema = () => (
+  <DescribeYourData components={components} />
+)
+export const HowItWorks_Query = () => (
+  <AskForWhatYouWant components={components} />
+)
+export const HowItWorks_Result = () => (
+  <GetPredictableResults components={components} />
+)
 
 export const QueryHeroFriends = () => (
   <_QueryHeroFriends components={components} />

src/components/index-page/how-it-works/index.tsx

@@ -4,7 +4,11 @@ import dynamic from "next/dynamic"
 
 import { Button } from "@/app/conf/_design-system/button"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
-import { CodeA, CodeB, CodeC } from "@/components/code-blocks"
+import {
+  HowItWorks_Schema,
+  HowItWorks_Query,
+  HowItWorks_Result,
+} from "@/components/code-blocks"
 
 import { HowItWorksListItem } from "./how-it-works-list-item"
 import { PlayButton } from "./play-button"
@@ -32,13 +36,19 @@ export function HowItWorks() {
       <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
       <div className="relative">
         <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
-          <HowItWorksListItem text="Describe your data" code={<CodeA />} />
+          <HowItWorksListItem
+            text="Describe your data"
+            code={<HowItWorks_Schema />}
+          />
           <HowItWorksListItem
             text="Ask for what you want"
             icon={<PlayButton disabled={inView} />}
-            code={<CodeB />}
+            code={<HowItWorks_Query />}
+          />
+          <HowItWorksListItem
+            text="Get predictable results"
+            code={<HowItWorks_Result />}
           />
-          <HowItWorksListItem text="Get predictable results" code={<CodeC />} />
         </ol>
         {inView && (
           <ol

src/components/index-page/how-it-works/schema.ts

@@ -8,8 +8,6 @@ import {
 
 const PROJECT_NAME = "GraphQL"
 const PROJECT_TAGLINE = "A query language for APIs"
-const PROJECT_DESCRIPTION =
-  "GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data."
 const PROJECT_WEBSITE = "https://graphql.org"
 
 export const INITIAL_QUERY_TEXT = `{
@@ -27,24 +25,25 @@ export const INITIAL_RESULTS_TEXT = `{
 interface Project {
   name: string
   tagline: string
-  description: string
   website: string
 }
 
 const projects: Project[] = [
   {
     name: PROJECT_NAME,
     tagline: PROJECT_TAGLINE,
-    description: PROJECT_DESCRIPTION,
     website: PROJECT_WEBSITE,
   },
   {
     name: "GraphiQL",
     tagline: "Ecosystem for building browser & IDE tools.",
-    description:
-      "GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT license.",
     website: "https://github.com/graphql/graphiql",
   },
+  {
+    name: "graphql-js",
+    tagline: "A reference implementation of GraphQL for JavaScript",
+    website: "https://graphql.org/graphql-js/",
+  },
 ]
 
 const ProjectType = new GraphQLObjectType<Project>({
@@ -58,10 +57,6 @@ const ProjectType = new GraphQLObjectType<Project>({
       type: GraphQLString,
       description: "A short description of what the project does",
     },
-    description: {
-      type: GraphQLString,
-      description: "A detailed description of the project",
-    },
     website: {
       type: GraphQLString,
       description: "The project website URL",