Merge branch 'graphql:source' into update-intro-docs

Author: mandiwise

src/code/language-support/javascript/server/pylon.md

@@ -1,14 +1,22 @@
 ---
 name: Pylon
-description: A code-first approach to GraphQL API development that generates schemas from TypeScript in real-time, enhancing development speed, type safety, and error reduction, with instant reflection of code changes in the API. For more information, go to https://pylon.cronit.io
+description: A code-first framework for GraphQL API development, where your schema reflects your functionality. Run `npm create pylon@latest` to get started.
 url: https://pylon.cronit.io
 github: getcronit/pylon
 ---
 
+1. **Create**
+
+```bash
+npm create pylon@latest
+```
+
+2. **Develop**
+
 Example service:
 
 ```typescript
-import { defineService } from "@getcronit/pylon"
+import { app } from "@getcronit/pylon"
 
 class User {
   name: string
@@ -25,24 +33,26 @@ const users = [
   new User("Charlie", "[email protected]"),
 ]
 
-export default defineService({
+export const graphql = {
   Query: {
     users,
     user: (name: string) => {
       return users.find(user => user.name === name)
     },
-    Mutation: {
-      addUser: (name: string, email: string) => {
-        const user = new User(name, email)
-        users.push(user)
-        return user
-      },
+  },
+  Mutation: {
+    addUser: (name: string, email: string) => {
+      const user = new User(name, email)
+      users.push(user)
+      return user
     },
   },
-})
+}
+
+export default app
 ```
 
-After running the service, you can query it using GraphQL:
+3. **Query**
 
 ```graphql
 query User {

src/codemirror.less

@@ -816,6 +816,24 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     inset 4px 0 0 #eee;
   border-radius: 3px;
   margin-left: -4px;
+
+  .editor-name {
+    position: sticky;
+    display: block;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid rgb(209, 213, 219);
+    background-color: rgb(243, 244, 246);
+    color: rgb(55, 65, 81);
+    font-size: 0.8rem;
+    font-weight: 600;
+
+    .dark & {
+      border-bottom-color: rgb(23, 23, 23);
+      background-color: rgb(8, 8, 8);
+      color: rgb(209, 213, 219);
+      font-weight: 400;
+    }
+  }
 }
 
 .query-editor .CodeMirror {
@@ -846,19 +864,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     margin: 0 7px;
     background: none;
   }
-
-  .variable-editor::before {
-    background: #eee;
-    color: white;
-    content: "VARIABLES";
-    display: block;
-    font-size: 10px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    line-height: 1;
-    padding: 3px 12px 2px;
-    text-shadow: 0 -1px #ddd;
-  }
 }
 
 .result-window {
@@ -879,6 +884,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .result-window .CodeMirror {
   background: none;
   height: 100%;
+  padding-bottom: 45px;
   margin: 0 7px;
   box-sizing: border-box;
 }
+
+.query-editor,
+.variable-editor,
+.result-window {
+  overflow: hidden;
+}

src/components/marked/mini-graphiQL.tsx

@@ -256,7 +256,11 @@ class QueryEditor extends Component {
   }
 
   render() {
-    return <div className="query-editor" ref={e => (this.domNode = e)} />
+    return (
+      <div className="query-editor" ref={e => (this.domNode = e)}>
+        <span className="editor-name rounded-tl">Operation</span>
+      </div>
+    )
   }
 }
 
@@ -305,7 +309,11 @@ class ResultViewer extends Component {
   }
 
   render() {
-    return <div className="result-window" ref={e => (this.domNode = e)} />
+    return (
+      <div className="result-window" ref={e => (this.domNode = e)}>
+        <span className="editor-name rounded-tr">Response</span>
+      </div>
+    )
   }
 }
 
@@ -424,7 +432,11 @@ class VariableEditor extends Component {
   }
 
   render() {
-    return <div className="variable-editor" ref={e => (this.domNode = e)} />
+    return (
+      <div className="variable-editor" ref={e => (this.domNode = e)}>
+        <span className="editor-name">Variables</span>
+      </div>
+    )
   }
 
   _didLint(annotations) {