Implemented new docs page layout.

gatsby-config.js

@@ -1,6 +1,8 @@
 module.exports = {
   siteMetadata: {
     title: `openFDA`,
+    siteUrl: `https://www.open.fda.gov`,
+    description: `Providing FDA data to the public.`
   },
   plugins: [
     {
@@ -13,7 +15,18 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        plugins: ["gatsby-remark-copy-linked-files"],
+        plugins: [
+          {
+            resolve: `gatsby-remark-responsive-iframe`,
+            options: {
+              wrapperStyle: `margin-bottom: 1.05rem`,
+            },
+          },
+          `gatsby-remark-prismjs`,
+          `gatsby-remark-copy-linked-files`,
+          `gatsby-remark-autolink-headers`,
+          `gatsby-remark-smartypants`,
+        ],
       },
     },
     `gatsby-plugin-stylus`,

gatsby-node.js

@@ -1,17 +1,64 @@
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require(`path`)
 
 exports.modifyWebpackConfig = function (config, env) {
   config.config.plugin('inventory-copy-plugin', CopyWebpackPlugin, [[
     { from: path.join(__dirname, 'src/pages/data.json') , to: path.join(__dirname, 'public/data.json')}
   ]]);
   return config;
-}
+};
+
 exports.modifyWebpackConfig = ({ config, stage }) => {
   if (stage === "build-html") {
     config.loader("null", {
       test: /datamaps/,
       loader: "null-loader",
     })
   }
+};
+
+const { createFilePath } = require(`gatsby-source-filesystem`)
+
+exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
+  const { createNodeField } = boundActionCreators
+  if (node.internal.type === `MarkdownRemark`) {
+    const slug = createFilePath({ node, getNode, basePath: `pages` })
+    createNodeField({
+      node,
+      name: `slug`,
+      value: slug,
+    })
+  }
 }
+
+exports.createPages = ({ graphql, boundActionCreators }) => {
+  const { createPage } = boundActionCreators
+  return new Promise((resolve, reject) => {
+    graphql(`
+      {
+        allMarkdownRemark {
+          edges {
+            node {
+              fields {
+                slug
+              }
+            }
+          }
+        }
+      }
+    `
+    ).then(result => {
+      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+        createPage({
+          path: node.fields.slug,
+          component: path.resolve(`./src/templates/docs-markdown.js`),
+          context: {
+            // Data passed to context is available in page queries as GraphQL variables.
+            slug: node.fields.slug,
+          },
+        })
+      })
+      resolve()
+    })
+  })
+}

package.json

@@ -28,7 +28,11 @@
     "gatsby-link": "1.6.22",
     "gatsby-plugin-react-helmet": "1.0.8",
     "gatsby-plugin-stylus": "1.1.10",
-    "gatsby-remark-copy-linked-files": "1.5.22",
+    "gatsby-remark-autolink-headers": "^1.4.11",
+    "gatsby-remark-copy-linked-files": "^1.5.22",
+    "gatsby-remark-prismjs": "^1.2.11",
+    "gatsby-remark-responsive-iframe": "^1.4.16",
+    "gatsby-remark-smartypants": "^1.4.10",
     "gatsby-source-filesystem": "2.0.0-alpha.1",
     "gatsby-transformer-remark": "1.7.24",
     "html-react-parser": "0.4.0",

src/components/BlogRoll.jsx

@@ -39,7 +39,7 @@ const BlogRoll = (props: tPROPS) => {
   // this is useful because not everything in
   // sortedPosts will get rendered. actually,
   // most won't get rendered, since posts
-  // are really just any markdown file
+  // are really just any docs file
   let tally: number = 0 | 0
 
   return (

src/components/ContentAccordion.jsx

@@ -61,7 +61,7 @@ const ContentAccordion = (props: tPROPS) => {
   const key: string = Object.keys(obj)[0]
   // normalize the key
   const lowerKey: string = key.toLowerCase()
-  // stringified markdown -> html
+  // stringified docs -> html
   const key_html: string = marked(key)
   const wrapperCx: string = 'font-size-2 weight-700 marg-b-2 marg-t-3'
   const sectionCx: string = cx({
@@ -98,7 +98,7 @@ const ContentAccordion = (props: tPROPS) => {
                 />
               )
             } else {
-              // stringified markdown -> html
+              // stringified docs -> html
               const html: string = marked(content)
 
               // kind of a weird way to do this

src/components/DocSidebar.jsx

@@ -0,0 +1,124 @@
+import React from "react"
+import Link from "gatsby-link"
+import cx from 'classnames'
+import DocSidebarContainer from "../containers/DocSidebarContainer";
+
+
+const Section = props => (
+  <div className="pad-l-1 pad-b-4">
+    <h3>
+      {props.title}
+    </h3>
+    <SectionLinks
+      {...props}
+      title={props.title}
+      isTutorial={props.title === `Tutorial`}
+    />
+  </div>
+)
+
+const SectionLinks = props => {
+
+  return (
+    <ul>
+      {props.items.map((item, index) => (
+        <SectionLink
+          node={item}
+          children={item.items}
+          key={index}
+          isInline={props.isInline}
+          toggleSection={props.toggleSection}
+          activeHeader={props.activeHeader}
+        />
+      ))}
+    </ul>
+  )
+}
+
+const SectionLink = props => {
+
+  let childnodes = null
+  if (props.children) {
+    childnodes = props.children.map((childnode, index) => (
+      <SectionLink key={index} node={childnode} children={childnode.items} isChild />
+    ))
+  }
+
+  let item = props.node
+  // If the last character is a * then the doc page is still in draft
+  let isDraft = item.title.slice(-1) === `*`
+  let title = isDraft ? item.title.slice(0, -1) : item.title
+
+  let isHeader = false
+  if (Object.keys(item).indexOf("link") === -1) {
+    isHeader = true
+  }
+  const itemCx = cx({
+    'row': true,
+    'sidebar-item': !isHeader,
+    'sidebar-header': isHeader,
+    'depth-2': !props.isChild,
+    'depth-3': props.isChild,
+  })
+
+  return (
+    <li>
+      {Object.keys(item).indexOf("link") === -1 ? (
+        <span className={itemCx + (props.activeHeader.indexOf(title) > -1 ? ' ': ' collapsed')}
+              title={title}
+              onClick={props.toggleSection}>
+          {title}
+        </span>
+        ) : item.link.charAt(0) === `#` ? (
+          <a href={item.link} className={itemCx}>
+            {title}
+          </a>
+        ) : (
+          <Link
+            to={item.link}
+            key={item.title}
+            className={itemCx}
+            activeClassName="sidebar-item-active"
+            exact
+          >
+            {title}
+          </Link>
+        )
+      }
+      {childnodes ?
+        <ul className={item.collapse ? (props.activeHeader.indexOf(title) > -1 ? 'display-block': 'display-none') : ' '}>
+          {childnodes}
+        </ul> : null}
+    </li>
+  )
+}
+
+class DocSidebar extends React.Component {
+  render() {
+    const menu = this.props.yaml
+    const isInline = this.props.inline
+
+    return (
+      <div className="doc-sidebar">
+        {menu.map((section, index) => (
+          <div
+            key={index}
+
+          >
+            <Section
+              {...section}
+              title={section.title}
+              index={index}
+              isInline={isInline}
+              activeHeader={this.props.activeHeader}
+              toggleSection={this.props.toggleSection}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+DocSidebar.displayName = 'components/DocSidebar'
+export default DocSidebarContainer(DocSidebar)

src/components/FieldExplorer.jsx

@@ -23,7 +23,7 @@ const _renderLi = (props: tLiProps) => {
   let values: ?Object = null
   // of strings
   let type2: string = ''
-  // description text, can have markdown
+  // description text, can have docs
   let desc: string = ''
   // query syntax pattern
   let pattern: string = ''