Initial commit of FAQ page

Author: carolstran

src/assets/css/_css/docs.less

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

src/components/FAQLayout/index.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Link } from "gatsby"
+import Marked from '../Marked'
+import { toSlug } from '../../utils/slug'
+
+interface Props {
+  title: string
+  questions: string
+  rawMarkdownBody: string
+}
+
+const index = ({ title, questions, rawMarkdownBody }: Props) => {
+  return (
+    <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>
+          )}
+          <Marked>{rawMarkdownBody}</Marked>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default index

src/components/HeaderLinks/index.tsx

@@ -11,6 +11,7 @@ const links: LinkItem[] = [
   { 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",

src/content/faq/General.md

@@ -0,0 +1,27 @@
+---
+title: Frequently Asked Questions (FAQ)
+layout: faq
+category: General
+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?
+
+## 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?

src/templates/doc.tsx

@@ -4,6 +4,7 @@ import Layout from "../components/Layout"
 import DocsLayout from "../components/DocsLayout"
 import BlogLayout from '../components/BlogLayout';
 import CodeLayout from "../components/CodeLayout";
+import FAQLayout from "../components/FAQLayout";
 
 interface Props {
   data: any
@@ -14,12 +15,13 @@ const layoutMap: any = {
   docs: DocsLayout,
   blog: BlogLayout,
   code: CodeLayout,
+  faq: FAQLayout,
 }
 
 const Blog = ({ data, pageContext }: Props) => {
   const {
     doc: {
-      frontmatter: { title, date, permalink, byline, guestBio, layout },
+      frontmatter: { title, date, permalink, byline, guestBio, layout, questions },
       rawMarkdownBody,
     },
     nextDoc,
@@ -33,6 +35,7 @@ const Blog = ({ data, pageContext }: Props) => {
         permalink={permalink}
         byline={byline}
         guestBio={guestBio}
+        questions={questions}
         rawMarkdownBody={rawMarkdownBody}
         nextDoc={nextDoc}
         sideBarData={pageContext.sideBarData}
@@ -52,6 +55,7 @@ export const query = graphql`
         guestBio
         sublinks
         layout
+        questions
       }
       id
       rawMarkdownBody