Improve legibility of sub-categories

leebyron · leebyron · commit ea8b1c041c80 · 2016-09-13T20:52:14.000-07:00
diff --git a/site/_core/DocsSidebar.js b/site/_core/DocsSidebar.js
@@ -7,6 +7,7 @@
  */
 
 var React = require('react');
+import { toSlug } from './Header';
 
 // thisPageID is the id of the rendering page
 // category is the category object to render a sidebar for
@@ -20,7 +21,7 @@ function sidebarForCategory(thisPageID, category) {
     var sublinkUL = page.sublinks &&
       <ul>{page.sublinks.split(',').map(sublink =>
         <li key={sublink}>
-          <a target={target} href={page.url + '#' + sublink.toLowerCase()}>
+          <a target={target} href={page.url + '#' + toSlug(sublink)}>
             {sublink}
           </a>
         </li>
diff --git a/site/_core/Header.js b/site/_core/Header.js
@@ -8,50 +8,45 @@
 
 var React = require('react');
 
-var Header = React.createClass({
-  slug: function(string) {
-    //  var accents = "àáäâèéëêìíïîòóöôùúüûñç";
-    var accents = "\u00e0\u00e1\u00e4\u00e2\u00e8"
-      + "\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef"
-      + "\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9"
-      + "\u00fa\u00fc\u00fb\u00f1\u00e7";
-
-    var without = "aaaaeeeeiiiioooouuuunc";
-
-    return string
-      .toString()
-
-      // Handle uppercase characters
-      .toLowerCase()
-
-      // Handle accentuated characters
-      .replace(
-        new RegExp('[' + accents + ']', 'g'),
-        function (c) { return without.charAt(accents.indexOf(c)); })
-
-      // Dash special characters
-      .replace(/[^a-z0-9]/g, '-')
-
-      // Compress multiple dash
-      .replace(/-+/g, '-')
-
-      // Trim dashes
-      .replace(/^-|-$/g, '');
-  },
-
-  render: function() {
-    var slug = this.slug(this.props.toSlug || this.props.children);
-    var Heading = 'h' + this.props.level;
-    var url = this.props.url || '';
-
-    return (
-      <Heading {...this.props}>
-        <a className="anchor" name={slug}></a>
-        {this.props.children}
-        {' '}<a className="hash-link" href={url + '#' + slug}>#</a>
-      </Heading>
-    );
-  }
-});
-
-module.exports = Header;
+export function toSlug(string) {
+  // var accents = "àáäâèéëêìíïîòóöôùúüûñç";
+  var accents = "\u00e0\u00e1\u00e4\u00e2\u00e8" +
+    "\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef" +
+    "\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9" +
+    "\u00fa\u00fc\u00fb\u00f1\u00e7";
+
+  var without = "aaaaeeeeiiiioooouuuunc";
+
+  return String(string)
+
+    // Handle uppercase characters
+    .toLowerCase()
+
+    // Handle accentuated characters
+    .replace(
+      new RegExp('[' + accents + ']', 'g'),
+      function (c) { return without.charAt(accents.indexOf(c)); })
+
+    // Dash special characters
+    .replace(/[^a-z0-9]/g, '-')
+
+    // Compress multiple dash
+    .replace(/-+/g, '-')
+
+    // Trim dashes
+    .replace(/^-|-$/g, '');
+}
+
+export default (props) => {
+  var slug = toSlug(props.toSlug || props.children);
+  var Heading = 'h' + props.level;
+  var url = props.url || '';
+
+  return (
+    <Heading {...props}>
+      <a className="anchor" name={slug}></a>
+      {props.children}
+      {' '}<a className="hash-link" href={url + '#' + slug}>#</a>
+    </Heading>
+  );
+}
diff --git a/site/_core/Marked.js b/site/_core/Marked.js
@@ -6,7 +6,7 @@
 
 var React = require('react');
 var Prism = require('./Prism');
-var Header = require('./Header');
+import Header from './Header';
 
 export default function Marked(props) {
   return <div>{marked(props.children, props)}</div>;
diff --git a/site/_css/docs.less b/site/_css/docs.less
@@ -86,8 +86,7 @@
   // Code blocks
   pre.prism {
     padding: 7px 14px;
-    margin-left: -4px;
-    margin-bottom: 10px;
+    margin: 1em -4px;
     overflow: auto;
   }
 }
diff --git a/site/_css/graphql.less b/site/_css/graphql.less
@@ -39,15 +39,15 @@ h1 {
 }
 
 h2 {
-  .headline-font(32px);
+  .headline-font(30px);
 }
 
 h3 {
-  .headline-font(26px);
+  .headline-font(22px);
 }
 
 h4 {
-  .headline-font(20px);
+  .headline-font(18px);
 }
 
 h5 {
@@ -84,7 +84,7 @@ h6:hover > .hash-link {
 }
 
 ul, ol {
-  margin: 0 0 1em 2em;
+  margin: 1em 0 1em 2em;
   padding: 0;
 }
 
diff --git a/site/_css/index.less b/site/_css/index.less
@@ -130,10 +130,11 @@ body.index {
         text-align: center;
       }
 
-      h4 {
+      h3 {
         color: white;
         margin: 0 0 1em;
         line-height: 1;
+        white-space: pre;
       }
 
       .prism {
diff --git a/site/code/index.html.js b/site/code/index.html.js
@@ -25,17 +25,32 @@ var Code = React.createClass({
 
 Many different programming languages support GraphQL. This list contains some of the more popular server-side frameworks, client libraries, and other useful stuff.
 
-## GraphQL Server Libraries
+## Server Libraries
+
+### JavaScript
 
   - [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.
   - [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.
-  - [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.
-  - [graphql-ruby](https://github.com/rmosolgo/graphql-ruby): A Ruby library for building GraphQL APIs. Built-in support for Relay and Rails.
-  - [graphql-java](https://github.com/graphql-java/graphql-java): A Java library for building GraphQL APIs.
   - [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/).
-  - [Sangria](http://sangria-graphql.org/) ([github](https://github.com/sangria-graphql/sangria)) A Scala GraphQL library that supports [Relay](https://facebook.github.io/relay/).
   - [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.
 
+### Ruby
+
+  - [graphql-ruby](https://github.com/rmosolgo/graphql-ruby): A Ruby library for building GraphQL APIs. Built-in support for Relay and Rails.
+
+### Python
+
+  - [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.
+
+### Scala
+
+  - [Sangria](http://sangria-graphql.org/) ([github](https://github.com/sangria-graphql/sangria)) A Scala GraphQL library that supports [Relay](https://facebook.github.io/relay/).
+
+### Java
+
+  - [graphql-java](https://github.com/graphql-java/graphql-java): A Java library for building GraphQL APIs.
+
+
 ## GraphQL Clients
 
   - [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.
diff --git a/site/community/Community-Events.md b/site/community/Community-Events.md
@@ -3,7 +3,7 @@ title: Upcoming Events
 layout: ../_core/DocsLayout
 category: Community
 permalink: /community/upcoming-events/
-sublinks: talks,events,meetups
+sublinks: Talks,Events,Meetups
 ---
 
 ## Talks
diff --git a/site/community/Community-Resources.md b/site/community/Community-Resources.md
@@ -4,10 +4,12 @@ layout: ../_core/DocsLayout
 category: Community
 permalink: /community/
 next: /community/upcoming-events/
-sublinks: slack,stack-overflow,twitter,blogs,videos,other
+sublinks: Connect,Blogs,Videos
 ---
 
-## Slack
+## Connect
+
+### Slack
 
 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/)
 
@@ -16,11 +18,11 @@ Other helpful Slack communities:
 - [Reindex Slack](http://slack.reindex.io/)
 - [Graph.cool Slack](https://slack.graph.cool/)
 
-## Stack Overflow
+### Stack Overflow
 
 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)
 
-## Twitter
+### Twitter
 
 Use the [**#graphql** hashtag](https://twitter.com/search?q=%23GraphQL&src=tyah) on Twitter to join the conversation.
 
@@ -62,9 +64,10 @@ Developers inside and outside of Facebook have given talks about GraphQL at conf
 - [GraphQL server tutorial for Node.js with SQL, MongoDB and REST ](https://www.youtube.com/watch?v=PHabPhgRUuU) - Jonas Helfer
 - [Building Native Mobile Apps with GraphQL](https://www.youtube.com/watch?v=z5rz3saDPJ8) - Martjin Walraven, React Europe 2016
 
-## Other
+## More Resources
 
 To explore other community-developed resources and content about GraphQL, take a look at these sites:
 
 - [Building Apollo](https://medium.com/apollo-stack)
 - [Learn GraphQL](https://learngraphql.com/basics/introduction)
+- [awesome-graphql](https://github.com/chentsulin/awesome-graphql): A fantastic community maintained collection of libraries, resources, and more.
diff --git a/site/index.html.js b/site/index.html.js
@@ -29,7 +29,7 @@ var index = React.createClass({
               </div>
 
               <div className="marketing-col">
-                <h4>Describe your data</h4>
+                <h3>Describe your data</h3>
                 <Prism language="graphql">
                   {`type Project {
   name: String
@@ -40,7 +40,7 @@ var index = React.createClass({
               </div>
 
               <div className="marketing-col">
-                <h4>Ask for what you want</h4>
+                <h3>Ask for what you want</h3>
                 <Prism language="graphql">
                   {`{
   project(name: "GraphQL") {
@@ -51,7 +51,7 @@ var index = React.createClass({
               </div>
 
               <div className="marketing-col">
-                <h4>Get predictable results</h4>
+                <h3>Get predictable results</h3>
                 <Prism language="json">
                   {`{
   "project": {
diff --git a/site/learn/Introduction.md b/site/learn/Introduction.md
@@ -56,31 +56,4 @@ Could produce the JSON result:
 }
 ```
 
-Learn more about GraphQL: the query language, type system, how the GraphQL service works, and best practices for using GraphQL:
-
-## Core Concepts
-
-Start here to get a solid understanding of GraphQL and how it works.
-
-  - [Query Language](/learn/queries/)
-  - [Type System](/learn/schema/)
-  - [Validation](/learn/validation/)
-  - [Execution](/learn/execution/)
-  - [Introspection](/learn/introspection/)
-
-## Best Practices
-
-Ready to start using GraphQL? Follow these guidelines to get a better understanding of how to approach common topics.
-
-  - [GraphQL Best Practices](/learn/best-practices/)
-  - [Thinking in Graphs](/learn/thinking-in-graphs/)
-  - [Serving Over HTTP](/learn/serving-over-http/)
-  - [Authorization](/learn/authorization/)
-
-<!--
-  - Domain Modeling
-  - Pagination
-  - Versioning
-  - Performance
-  - Security
--->
+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.
diff --git a/site/learn/Learn-Queries.md b/site/learn/Learn-Queries.md
@@ -4,7 +4,7 @@ layout: ../_core/DocsLayout
 category: Learn
 permalink: /learn/queries/
 next: /learn/schema/
-sublinks: fields,arguments,aliases,fragments,variables,operation-name,directives,mutations,inline-fragments
+sublinks: Fields,Arguments,Aliases,Fragments,Variables,Operation Name,Directives,Mutations,Inline Fragments
 ---
 
 On this page, you'll learn in detail about how to query a GraphQL server.
diff --git a/site/learn/Learn-Schema.md b/site/learn/Learn-Schema.md
@@ -4,7 +4,7 @@ layout: ../_core/DocsLayout
 category: Learn
 permalink: /learn/schema/
 next: /learn/validation/
-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
+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
 ---
 
 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.

Original file line number	Diff line number	Diff line change
`@@ -86,8 +86,7 @@`
`86`	`86`	`// Code blocks`
`87`	`87`	`pre.prism {`
`88`	`88`	`padding: 7px 14px;`
`89`		`- margin-left: -4px;`
`90`		`- margin-bottom: 10px;`
	`89`	`+ margin: 1em -4px;`
`91`	`90`	`overflow: auto;`
`92`	`91`	`}`
`93`	`92`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,15 +39,15 @@ h1 {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`h2 {`
`42`		`- .headline-font(32px);`
	`42`	`+ .headline-font(30px);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`h3 {`
`46`		`- .headline-font(26px);`
	`46`	`+ .headline-font(22px);`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`h4 {`
`50`		`- .headline-font(20px);`
	`50`	`+ .headline-font(18px);`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`h5 {`
`@@ -84,7 +84,7 @@ h6:hover > .hash-link {`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`ul, ol {`
`87`		`- margin: 0 0 1em 2em;`
	`87`	`+ margin: 1em 0 1em 2em;`
`88`	`88`	`padding: 0;`
`89`	`89`	`}`
`90`	`90`
Original file line number	Diff line number	Diff line change
`@@ -130,10 +130,11 @@ body.index {`
`130`	`130`	`text-align: center;`
`131`	`131`	`}`
`132`	`132`
`133`		`- h4 {`
	`133`	`+ h3 {`
`134`	`134`	`color: white;`
`135`	`135`	`margin: 0 0 1em;`
`136`	`136`	`line-height: 1;`
	`137`	`+ white-space: pre;`
`137`	`138`	`}`
`138`	`139`
`139`	`140`	`.prism {`