Create Frequently Asked Questions (FAQ) Page

src/components/HeaderLink.js

@@ -6,6 +6,7 @@ const links = [
   { section: 'learn', text: 'Learn', href: '/learn/' },
   { section: 'code', text: 'Code', href: '/code/' },
   { section: 'community', text: 'Community', href: '/community/' },
+  { section: 'faq', text: 'FAQ', href: '/faq/' },
   { section: 'spec', text: 'Spec', href: 'https://graphql.github.io/graphql-spec/', outsideDomain: true },
   { section: 'codeofconduct', text: 'Code of Conduct', href: '/codeofconduct/' },
   { section: 'foundation', text: 'Foundation', href: 'https://foundation.graphql.org/', outsideDomain: true },

src/content/faq/General.md

@@ -0,0 +1,78 @@
+---
+title: Frequently Asked Questions (FAQ)
+sidebarTitle: General
+category: FAQ
+layout: FAQLayout
+permalink: /faq/
+questions: Why should I use GraphQL?,Is GraphQL a database language like SQL?,Does GraphQL replace REST?,How can I learn GraphQL?,Is GraphQL frontend or backend?,Does GraphQL replace Redux or other state management libraries?,Is GraphQL only for React or JavaScript developers?,What is a GraphQL client and why would I use one?,What is the GraphQL Foundation?,How can I contribute to the GraphQL specification?
+---
+
+## Why should I use GraphQL?
+
+<!-- TODO -->
+
+Soufflé candy lollipop [dragée cake chocolate](). Marzipan lemon drops sweet roll I love cake ice cream muffin chupa chups gummi bears. Ice cream fruitcake I love sweet roll croissant ice cream. Gummi bears sesame snaps cake apple pie cake jelly. Gingerbread powder I love apple pie marzipan jelly beans sugar plum sesame snaps. Tiramisu chupa chups I love bear claw cake. Macaroon muffin topping ice cream bear claw cookie I love marshmallow. Pie gummies toffee candy pastry soufflé. Chupa chups toffee gummi bears I love cake lemon drops.
+
+## Is GraphQL a database language like SQL?
+
+<!-- TODO -->
+
+Sugar plum gummies donut cheesecake marshmallow donut caramels. Chocolate cake jelly beans ice cream halvah topping lemon drops liquorice croissant. Jelly-o chocolate gummies chocolate I love toffee danish sweet roll. Marzipan I love I love jujubes cupcake bear claw. Soufflé caramels caramels marzipan icing macaroon. Tootsie roll I love jelly beans halvah sweet donut fruitcake. Icing gummi bears tart marshmallow biscuit candy. Candy canes cotton candy soufflé muffin chocolate cake sweet. Candy canes dragée tiramisu gummies danish gummies gingerbread sugar plum gummies.
+
+## Does GraphQL replace REST?
+
+<!-- TODO -->
+
+Jelly-o cupcake marshmallow marshmallow. Lemon drops cake caramels donut halvah cupcake topping tootsie roll. Jelly cotton candy candy cheesecake danish [jelly-o icing bonbon]().
+
+## How can I learn GraphQL?
+
+<!-- TODO -->
+
+[Gummies lollipop chocolate dragée liquorice.]() Pastry marzipan pie sugar plum halvah topping halvah soufflé marzipan. Biscuit liquorice marshmallow.
+
+Pie gummies apple pie marzipan halvah cotton candy toffee tootsie roll oat cake. Brownie pudding pastry candy chupa chups liquorice bear claw pudding jujubes. Pie jelly liquorice dessert sweet roll bonbon. Danish macaroon cupcake jelly beans liquorice brownie dessert muffin candy canes.
+
+## Is GraphQL frontend or backend?
+
+<!-- TODO -->
+
+Brownie candy jelly candy wafer cake macaroon I love. Pastry I love jelly beans powder carrot cake wafer chocolate gingerbread soufflé. I love dragée I love macaroon sugar plum topping icing cotton candy. Chupa chups [powder wafer]().
+
+## Does GraphQL replace Redux or other state management libraries?
+
+<!-- TODO -->
+
+Sweet roll candy danish cupcake bonbon biscuit. Jelly-o soufflé chocolate cake fruitcake cookie croissant ice cream tart.
+
+Cupcake soufflé sweet roll cake fruitcake caramels pastry pie. Dragée donut icing pudding ice cream cake cheesecake lemon drops. Apple pie icing tart topping jelly beans sweet marshmallow. Oat cake chocolate lollipop brownie sesame snaps croissant cupcake. Gummies jelly-o chocolate cake chocolate bar. Oat cake sweet powder jelly.
+
+## Is GraphQL only for React or JavaScript developers?
+
+<!-- TODO -->
+
+Jelly pastry pudding jelly beans candy canes. Carrot cake sesame snaps chocolate cake topping cotton candy sesame snaps cake. Tart cheesecake gummies. Sugar plum apple pie ice cream danish tootsie roll. Chocolate brownie cake lemon drops lemon drops. Brownie chupa chups caramels pastry. Donut bear claw chocolate cake. Candy canes jujubes cake apple pie pudding gummies tootsie roll tootsie roll. [Jujubes cake liquorice.]() Pastry apple pie chocolate icing cake jelly-o. Cookie [cheesecake soufflé]() cake cheesecake tart liquorice. Cake donut jelly beans [bonbon soufflé croissant](). Soufflé tart chocolate cake cake jelly-o dessert.
+
+Candy danish cupcake topping donut jujubes dragée dessert cotton candy. Sweet roll lollipop tootsie roll gummi bears. Fruitcake powder dessert gummies. Icing I love danish pudding cake.
+
+## What is a GraphQL client and why would I use one?
+
+<!-- TODO -->
+
+Powder powder chocolate cake cookie bear claw. Marshmallow gummi bears sweet roll. Apple pie fruitcake sweet roll tart candy canes chocolate. Gummi bears I love danish halvah tootsie roll sweet roll cupcake tootsie roll dessert. Gummies cake pastry tootsie roll. Carrot cake gingerbread marshmallow I love chocolate. 
+
+## What is the GraphQL Foundation?
+
+<!-- TODO -->
+
+[Chupa chups gummies I love.]()
+
+Gummies marzipan dessert lemon drops muffin. Chocolate chocolate bar fruitcake toffee powder I love gummies. Donut tart cheesecake. Lollipop sweet roll apple pie I love. Pie candy canes jelly macaroon. Biscuit sugar plum chocolate bar cupcake pudding cake sugar plum bear claw. Cheesecake chocolate I love jelly beans I love tiramisu. Chocolate cake biscuit caramels halvah cotton candy pie. Gingerbread powder candy carrot cake jelly I love. Dessert I love chupa chups caramels lollipop candy canes gingerbread I love gummi bears. 
+
+Fruitcake lollipop danish cheesecake liquorice cookie cheesecake toffee oat cake.
+
+## How can I contribute to the GraphQL specification?
+
+<!-- TODO -->
+
+Carrot cake tootsie roll ice cream candy canes bonbon. Pudding macaroon I love danish dragée tart biscuit. [Biscuit cake wafer.]()

src/css/docs.less

@@ -42,6 +42,11 @@
     }
   }
 
+  .faq-questions::before {
+    content: "\A";
+    white-space: pre;
+  }
+
   img {
     max-width: 100%;
   }

src/templates/FAQLayout.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { shape } from 'prop-types'
+
+import FAQTemplate from './FAQTemplate'
+
+export const query = graphql`
+  query FAQPagesLayout($id: String ) {
+    markdownRemark(id: { eq: $id }, frontmatter: { layout: { eq:"FAQLayout" } }) {
+      html
+      frontmatter {
+        title
+        questions
+      }
+    }
+  }
+`
+
+const FAQLayout = ( { data } ) => <FAQTemplate data={data} />
+
+FAQLayout.propTypes = {
+  data: shape( { markdownRemark: shape( {} ).isRequired } ).isRequired,
+}
+
+export default FAQLayout

src/templates/FAQTemplate.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import { shape, string } from 'prop-types'
+import { toSlug } from '../lib/utils'
+
+import Layout from '../components/Layout'
+
+const FAQTemplate = ( {
+  data: {
+    markdownRemark: {
+      html,
+      frontmatter: { title, questions },
+    },
+  },
+  layoutSection,
+} ) => (
+  <Layout section={layoutSection} title={title}>
+    <section>
+      <div className="documentationContent">
+        <div className="inner-content">
+
+          <h1>{title}</h1>
+
+          {questions && (
+          <div>
+            {questions
+              .split( ',' )
+              .map( question => (
+                  <Link className="faq-questions" key={question} to={`#${toSlug( question )}`}>
+                    {question}
+                  </Link>
+              ) )}
+          </div>
+          )}
+
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+
+      </div>
+    </section>
+
+  </Layout>
+)
+
+FAQTemplate.propTypes = {
+  data: shape( { markdownRemark: shape( {} ).isRequired } ).isRequired,
+  layoutSection: string,
+}
+
+FAQTemplate.defaultProps = {
+  layoutSection: 'docs'
+}
+
+export default FAQTemplate