Skip to content

Commit ea8b1c0

Browse files
committed
Improve legibility of sub-categories
1 parent 383e5cf commit ea8b1c0

13 files changed

+87
-100
lines changed

site/_core/DocsSidebar.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
var React = require('react');
10+
import { toSlug } from './Header';
1011

1112
// thisPageID is the id of the rendering page
1213
// category is the category object to render a sidebar for
@@ -20,7 +21,7 @@ function sidebarForCategory(thisPageID, category) {
2021
var sublinkUL = page.sublinks &&
2122
<ul>{page.sublinks.split(',').map(sublink =>
2223
<li key={sublink}>
23-
<a target={target} href={page.url + '#' + sublink.toLowerCase()}>
24+
<a target={target} href={page.url + '#' + toSlug(sublink)}>
2425
{sublink}
2526
</a>
2627
</li>

site/_core/Header.js

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,45 @@
88

99
var React = require('react');
1010

11-
var Header = React.createClass({
12-
slug: function(string) {
13-
// var accents = "àáäâèéëêìíïîòóöôùúüûñç";
14-
var accents = "\u00e0\u00e1\u00e4\u00e2\u00e8"
15-
+ "\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef"
16-
+ "\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9"
17-
+ "\u00fa\u00fc\u00fb\u00f1\u00e7";
18-
19-
var without = "aaaaeeeeiiiioooouuuunc";
20-
21-
return string
22-
.toString()
23-
24-
// Handle uppercase characters
25-
.toLowerCase()
26-
27-
// Handle accentuated characters
28-
.replace(
29-
new RegExp('[' + accents + ']', 'g'),
30-
function (c) { return without.charAt(accents.indexOf(c)); })
31-
32-
// Dash special characters
33-
.replace(/[^a-z0-9]/g, '-')
34-
35-
// Compress multiple dash
36-
.replace(/-+/g, '-')
37-
38-
// Trim dashes
39-
.replace(/^-|-$/g, '');
40-
},
41-
42-
render: function() {
43-
var slug = this.slug(this.props.toSlug || this.props.children);
44-
var Heading = 'h' + this.props.level;
45-
var url = this.props.url || '';
46-
47-
return (
48-
<Heading {...this.props}>
49-
<a className="anchor" name={slug}></a>
50-
{this.props.children}
51-
{' '}<a className="hash-link" href={url + '#' + slug}>#</a>
52-
</Heading>
53-
);
54-
}
55-
});
56-
57-
module.exports = Header;
11+
export function toSlug(string) {
12+
// var accents = "àáäâèéëêìíïîòóöôùúüûñç";
13+
var accents = "\u00e0\u00e1\u00e4\u00e2\u00e8" +
14+
"\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef" +
15+
"\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9" +
16+
"\u00fa\u00fc\u00fb\u00f1\u00e7";
17+
18+
var without = "aaaaeeeeiiiioooouuuunc";
19+
20+
return String(string)
21+
22+
// Handle uppercase characters
23+
.toLowerCase()
24+
25+
// Handle accentuated characters
26+
.replace(
27+
new RegExp('[' + accents + ']', 'g'),
28+
function (c) { return without.charAt(accents.indexOf(c)); })
29+
30+
// Dash special characters
31+
.replace(/[^a-z0-9]/g, '-')
32+
33+
// Compress multiple dash
34+
.replace(/-+/g, '-')
35+
36+
// Trim dashes
37+
.replace(/^-|-$/g, '');
38+
}
39+
40+
export default (props) => {
41+
var slug = toSlug(props.toSlug || props.children);
42+
var Heading = 'h' + props.level;
43+
var url = props.url || '';
44+
45+
return (
46+
<Heading {...props}>
47+
<a className="anchor" name={slug}></a>
48+
{props.children}
49+
{' '}<a className="hash-link" href={url + '#' + slug}>#</a>
50+
</Heading>
51+
);
52+
}

site/_core/Marked.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
var React = require('react');
88
var Prism = require('./Prism');
9-
var Header = require('./Header');
9+
import Header from './Header';
1010

1111
export default function Marked(props) {
1212
return <div>{marked(props.children, props)}</div>;

site/_css/docs.less

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,7 @@
8686
// Code blocks
8787
pre.prism {
8888
padding: 7px 14px;
89-
margin-left: -4px;
90-
margin-bottom: 10px;
89+
margin: 1em -4px;
9190
overflow: auto;
9291
}
9392
}

site/_css/graphql.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@ h1 {
3939
}
4040

4141
h2 {
42-
.headline-font(32px);
42+
.headline-font(30px);
4343
}
4444

4545
h3 {
46-
.headline-font(26px);
46+
.headline-font(22px);
4747
}
4848

4949
h4 {
50-
.headline-font(20px);
50+
.headline-font(18px);
5151
}
5252

5353
h5 {
@@ -84,7 +84,7 @@ h6:hover > .hash-link {
8484
}
8585

8686
ul, ol {
87-
margin: 0 0 1em 2em;
87+
margin: 1em 0 1em 2em;
8888
padding: 0;
8989
}
9090

site/_css/index.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,10 +130,11 @@ body.index {
130130
text-align: center;
131131
}
132132

133-
h4 {
133+
h3 {
134134
color: white;
135135
margin: 0 0 1em;
136136
line-height: 1;
137+
white-space: pre;
137138
}
138139

139140
.prism {

site/code/index.html.js

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,32 @@ var Code = React.createClass({
2525
2626
Many different programming languages support GraphQL. This list contains some of the more popular server-side frameworks, client libraries, and other useful stuff.
2727
28-
## GraphQL Server Libraries
28+
## Server Libraries
29+
30+
### JavaScript
2931
3032
- [GraphQL.js](/graphql-js/) ([github](https://github.com/graphql/graphql-js/)) ([npm](https://www.npmjs.com/package/graphql)): The reference implementation of the GraphQL specification, designed for running a GraphQL server in a Node.js environment.
3133
- [express-graphql](/graphql-js/running-an-express-graphql-server/) ([github](https://github.com/graphql/express-graphql)) ([npm](https://www.npmjs.com/package/express-graphql)): The reference implementation of a GraphQL API server over an Express webserver. You can use this to run GraphQL in conjunction with a regular Express webserver, or as a standalone GraphQL server.
32-
- [Graphene](http://graphene-python.org/) ([github](https://github.com/graphql-python/graphene)): A Python library for building GraphQL APIs. Built-in support for [Relay](https://facebook.github.io/relay/), Django, SQLAlchemy, and Google App Engine.
33-
- [graphql-ruby](https://github.com/rmosolgo/graphql-ruby): A Ruby library for building GraphQL APIs. Built-in support for Relay and Rails.
34-
- [graphql-java](https://github.com/graphql-java/graphql-java): A Java library for building GraphQL APIs.
3534
- [graphql-relay](https://github.com/graphql/graphql-relay-js) ([npm](https://www.npmjs.com/package/graphql-relay)): A server library to help construct a Node.js GraphQL API that supports [Relay](https://facebook.github.io/relay/).
36-
- [Sangria](http://sangria-graphql.org/) ([github](https://github.com/sangria-graphql/sangria)) A Scala GraphQL library that supports [Relay](https://facebook.github.io/relay/).
3735
- [Apollo Server](http://dev.apollodata.com/tools/apollo-server/index.html) ([github](https://github.com/apollostack/apollo-server)) ([npm](https://www.npmjs.com/package/apollo-server)): A GraphQL server that works with all Node.js HTTP server frameworks: Express, Connect, HAPI and Koa.
3836
37+
### Ruby
38+
39+
- [graphql-ruby](https://github.com/rmosolgo/graphql-ruby): A Ruby library for building GraphQL APIs. Built-in support for Relay and Rails.
40+
41+
### Python
42+
43+
- [Graphene](http://graphene-python.org/) ([github](https://github.com/graphql-python/graphene)): A Python library for building GraphQL APIs. Built-in support for [Relay](https://facebook.github.io/relay/), Django, SQLAlchemy, and Google App Engine.
44+
45+
### Scala
46+
47+
- [Sangria](http://sangria-graphql.org/) ([github](https://github.com/sangria-graphql/sangria)) A Scala GraphQL library that supports [Relay](https://facebook.github.io/relay/).
48+
49+
### Java
50+
51+
- [graphql-java](https://github.com/graphql-java/graphql-java): A Java library for building GraphQL APIs.
52+
53+
3954
## GraphQL Clients
4055
4156
- [Relay](https://facebook.github.io/relay/) ([github](https://github.com/facebook/relay)) ([npm](https://www.npmjs.com/package/react-relay)): Facebook's framework for building React applications that talk to a GraphQL backend.

site/community/Community-Events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Upcoming Events
33
layout: ../_core/DocsLayout
44
category: Community
55
permalink: /community/upcoming-events/
6-
sublinks: talks,events,meetups
6+
sublinks: Talks,Events,Meetups
77
---
88

99
## Talks

site/community/Community-Resources.md

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ layout: ../_core/DocsLayout
44
category: Community
55
permalink: /community/
66
next: /community/upcoming-events/
7-
sublinks: slack,stack-overflow,twitter,blogs,videos,other
7+
sublinks: Connect,Blogs,Videos
88
---
99

10-
## Slack
10+
## Connect
11+
12+
### Slack
1113

1214
Many developers and users idle on Slack in [**#general** on GraphQL](https://graphql.slack.com/messages/general/). [Get your invite here!](https://graphql-slack.herokuapp.com/)
1315

@@ -16,11 +18,11 @@ Other helpful Slack communities:
1618
- [Reindex Slack](http://slack.reindex.io/)
1719
- [Graph.cool Slack](https://slack.graph.cool/)
1820

19-
## Stack Overflow
21+
### Stack Overflow
2022

2123
Many members of the community use Stack Overflow to ask questions. [Read through the existing questions tagged with **graphql** or ask your own!](http://stackoverflow.com/questions/tagged/graphql)
2224

23-
## Twitter
25+
### Twitter
2426

2527
Use the [**#graphql** hashtag](https://twitter.com/search?q=%23GraphQL&src=tyah) on Twitter to join the conversation.
2628

@@ -62,9 +64,10 @@ Developers inside and outside of Facebook have given talks about GraphQL at conf
6264
- [GraphQL server tutorial for Node.js with SQL, MongoDB and REST ](https://www.youtube.com/watch?v=PHabPhgRUuU) - Jonas Helfer
6365
- [Building Native Mobile Apps with GraphQL](https://www.youtube.com/watch?v=z5rz3saDPJ8) - Martjin Walraven, React Europe 2016
6466

65-
## Other
67+
## More Resources
6668

6769
To explore other community-developed resources and content about GraphQL, take a look at these sites:
6870

6971
- [Building Apollo](https://medium.com/apollo-stack)
7072
- [Learn GraphQL](https://learngraphql.com/basics/introduction)
73+
- [awesome-graphql](https://github.com/chentsulin/awesome-graphql): A fantastic community maintained collection of libraries, resources, and more.

site/index.html.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ var index = React.createClass({
2929
</div>
3030

3131
<div className="marketing-col">
32-
<h4>Describe your data</h4>
32+
<h3>Describe your data</h3>
3333
<Prism language="graphql">
3434
{`type Project {
3535
name: String
@@ -40,7 +40,7 @@ var index = React.createClass({
4040
</div>
4141

4242
<div className="marketing-col">
43-
<h4>Ask for what you want</h4>
43+
<h3>Ask for what you want</h3>
4444
<Prism language="graphql">
4545
{`{
4646
project(name: "GraphQL") {
@@ -51,7 +51,7 @@ var index = React.createClass({
5151
</div>
5252

5353
<div className="marketing-col">
54-
<h4>Get predictable results</h4>
54+
<h3>Get predictable results</h3>
5555
<Prism language="json">
5656
{`{
5757
"project": {

site/learn/Introduction.md

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -56,31 +56,4 @@ Could produce the JSON result:
5656
}
5757
```
5858

59-
Learn more about GraphQL: the query language, type system, how the GraphQL service works, and best practices for using GraphQL:
60-
61-
## Core Concepts
62-
63-
Start here to get a solid understanding of GraphQL and how it works.
64-
65-
- [Query Language](/learn/queries/)
66-
- [Type System](/learn/schema/)
67-
- [Validation](/learn/validation/)
68-
- [Execution](/learn/execution/)
69-
- [Introspection](/learn/introspection/)
70-
71-
## Best Practices
72-
73-
Ready to start using GraphQL? Follow these guidelines to get a better understanding of how to approach common topics.
74-
75-
- [GraphQL Best Practices](/learn/best-practices/)
76-
- [Thinking in Graphs](/learn/thinking-in-graphs/)
77-
- [Serving Over HTTP](/learn/serving-over-http/)
78-
- [Authorization](/learn/authorization/)
79-
80-
<!--
81-
- Domain Modeling
82-
- Pagination
83-
- Versioning
84-
- Performance
85-
- Security
86-
-->
59+
Learn more about GraphQL: the query language, type system, how the GraphQL service works, and as well as best practices for using GraphQL to solve common problems in the articles written in this section.

site/learn/Learn-Queries.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ layout: ../_core/DocsLayout
44
category: Learn
55
permalink: /learn/queries/
66
next: /learn/schema/
7-
sublinks: fields,arguments,aliases,fragments,variables,operation-name,directives,mutations,inline-fragments
7+
sublinks: Fields,Arguments,Aliases,Fragments,Variables,Operation Name,Directives,Mutations,Inline Fragments
88
---
99

1010
On this page, you'll learn in detail about how to query a GraphQL server.

site/learn/Learn-Schema.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ layout: ../_core/DocsLayout
44
category: Learn
55
permalink: /learn/schema/
66
next: /learn/validation/
7-
sublinks: type-system,type-language,object-types-and-fields,arguments,the-query-and-mutation-types,scalar-types,enumeration-types,lists-and-non-null,interfaces,union-types,input-types
7+
sublinks: Type System,Type Language,Object Types and Fields,Arguments,The Query and Mutation Types,Scalar Types,Enumeration Types,Lists and Non-Null,Interfaces,Union Types,Input Types
88
---
99

1010
On this page, you'll learn all you need to know about the GraphQL type system and how it describes what data can be queried. Since GraphQL can be used with any backend framework or programming language, we'll stay away from implementation-specific details and talk only about the concepts.

0 commit comments

Comments
 (0)