Skip to content

Commit 592753f

Browse files
authored
Merge branch 'graphql:source' into update-intro-docs
2 parents b36cd7d + f7e425d commit 592753f

File tree

3 files changed

+61
-27
lines changed

3 files changed

+61
-27
lines changed

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

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
---
22
name: Pylon
3-
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
3+
description: A code-first framework for GraphQL API development, where your schema reflects your functionality. Run `npm create pylon@latest` to get started.
44
url: https://pylon.cronit.io
55
github: getcronit/pylon
66
---
77

8+
1. **Create**
9+
10+
```bash
11+
npm create pylon@latest
12+
```
13+
14+
2. **Develop**
15+
816
Example service:
917

1018
```typescript
11-
import { defineService } from "@getcronit/pylon"
19+
import { app } from "@getcronit/pylon"
1220

1321
class User {
1422
name: string
@@ -25,24 +33,26 @@ const users = [
2533
new User("Charlie", "[email protected]"),
2634
]
2735

28-
export default defineService({
36+
export const graphql = {
2937
Query: {
3038
users,
3139
user: (name: string) => {
3240
return users.find(user => user.name === name)
3341
},
34-
Mutation: {
35-
addUser: (name: string, email: string) => {
36-
const user = new User(name, email)
37-
users.push(user)
38-
return user
39-
},
42+
},
43+
Mutation: {
44+
addUser: (name: string, email: string) => {
45+
const user = new User(name, email)
46+
users.push(user)
47+
return user
4048
},
4149
},
42-
})
50+
}
51+
52+
export default app
4353
```
4454

45-
After running the service, you can query it using GraphQL:
55+
3. **Query**
4656

4757
```graphql
4858
query User {

src/codemirror.less

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -816,6 +816,24 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
816816
inset 4px 0 0 #eee;
817817
border-radius: 3px;
818818
margin-left: -4px;
819+
820+
.editor-name {
821+
position: sticky;
822+
display: block;
823+
padding: 0.5rem 0.75rem;
824+
border-bottom: 1px solid rgb(209, 213, 219);
825+
background-color: rgb(243, 244, 246);
826+
color: rgb(55, 65, 81);
827+
font-size: 0.8rem;
828+
font-weight: 600;
829+
830+
.dark & {
831+
border-bottom-color: rgb(23, 23, 23);
832+
background-color: rgb(8, 8, 8);
833+
color: rgb(209, 213, 219);
834+
font-weight: 400;
835+
}
836+
}
819837
}
820838

821839
.query-editor .CodeMirror {
@@ -846,19 +864,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
846864
margin: 0 7px;
847865
background: none;
848866
}
849-
850-
.variable-editor::before {
851-
background: #eee;
852-
color: white;
853-
content: "VARIABLES";
854-
display: block;
855-
font-size: 10px;
856-
font-weight: bold;
857-
letter-spacing: 1px;
858-
line-height: 1;
859-
padding: 3px 12px 2px;
860-
text-shadow: 0 -1px #ddd;
861-
}
862867
}
863868

864869
.result-window {
@@ -879,6 +884,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
879884
.result-window .CodeMirror {
880885
background: none;
881886
height: 100%;
887+
padding-bottom: 45px;
882888
margin: 0 7px;
883889
box-sizing: border-box;
884890
}
891+
892+
.query-editor,
893+
.variable-editor,
894+
.result-window {
895+
overflow: hidden;
896+
}

src/components/marked/mini-graphiQL.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,11 @@ class QueryEditor extends Component {
256256
}
257257

258258
render() {
259-
return <div className="query-editor" ref={e => (this.domNode = e)} />
259+
return (
260+
<div className="query-editor" ref={e => (this.domNode = e)}>
261+
<span className="editor-name rounded-tl">Operation</span>
262+
</div>
263+
)
260264
}
261265
}
262266

@@ -305,7 +309,11 @@ class ResultViewer extends Component {
305309
}
306310

307311
render() {
308-
return <div className="result-window" ref={e => (this.domNode = e)} />
312+
return (
313+
<div className="result-window" ref={e => (this.domNode = e)}>
314+
<span className="editor-name rounded-tr">Response</span>
315+
</div>
316+
)
309317
}
310318
}
311319

@@ -424,7 +432,11 @@ class VariableEditor extends Component {
424432
}
425433

426434
render() {
427-
return <div className="variable-editor" ref={e => (this.domNode = e)} />
435+
return (
436+
<div className="variable-editor" ref={e => (this.domNode = e)}>
437+
<span className="editor-name">Variables</span>
438+
</div>
439+
)
428440
}
429441

430442
_didLint(annotations) {

0 commit comments

Comments
 (0)