From e7c426b6a2f0f6fa40b3600c1d46d2db79d63630 Mon Sep 17 00:00:00 2001
From: Derek Ju <derek.ju@gmail.com>
Date: Mon, 18 Nov 2019 13:06:11 -0800
Subject: [PATCH] Fix broken API docs (#161)

* Fix broken API docs

* Remove console log
---
 gatsby-node.js       |  6 ++++-
 src/templates/api.js | 57 ++++++++++++++++++++++++++++++++++++++++++++
 src/templates/doc.js | 13 ----------
 3 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 src/templates/api.js

diff --git a/gatsby-node.js b/gatsby-node.js
index 98ffa50..161eea7 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,8 +5,10 @@ const {buildPagePath} = require('./src/utils');
 exports.createPages = ({graphql, boundActionCreators}) => {
   const {createPage} = boundActionCreators;
   return new Promise((resolve, reject) => {
+    const apiTemplate = path.resolve('./src/templates/api.js');
     const docTemplate = path.resolve('./src/templates/doc.js');
     const templates = {
+      api: apiTemplate,
       docs: docTemplate,
     };
 
@@ -41,8 +43,10 @@ exports.createPages = ({graphql, boundActionCreators}) => {
           const {localPath, remoteUrl} = buildPagePath(node);
           createPage({
             path: localPath,
-            component: templates[node.sourceInstanceName] || templates.docs,
+            component: templates[node.sourceInstanceName] || templates.api,
             context: {
+              // Needed for api doc query
+              absolutePath: node.absolutePath,
               // Needed for api doc query
               remoteUrl,
               // Used to query for HTML data on the actual page
diff --git a/src/templates/api.js b/src/templates/api.js
new file mode 100644
index 0000000..bdc7cc3
--- /dev/null
+++ b/src/templates/api.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import {styled} from 'styletron-react';
+import {extractChildMarkdownRemark} from '../utils';
+
+const ApiWrapper = styled('div', {
+  position: 'relative',
+});
+
+const ApiContainer = styled('div', {
+  paddingTop: '52px',
+  paddingBottom: '52px',
+});
+
+const EditLink = styled('a', {
+  paddingTop: '4px',
+  paddingBottom: '4px',
+  paddingLeft: '8px',
+  paddingRight: '8px',
+  position: 'absolute',
+  top: '16px',
+  right: 0,
+});
+
+class ApiTemplate extends React.Component {
+  render() {
+    const {data, pathContext} = this.props;
+    let html = extractChildMarkdownRemark(data).html || '';
+
+    return (
+      <ApiWrapper className="apiSearch-content">
+        {pathContext.remoteUrl ? (
+          <EditLink href={pathContext.remoteUrl}>Edit</EditLink>
+        ) : null}
+        <ApiContainer
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{__html: html}}
+        />
+      </ApiWrapper>
+    );
+  }
+}
+
+export const query = graphql`
+  query ApiQuery($absolutePath: String!) {
+    allFile(filter: {absolutePath: {eq: $absolutePath}}) {
+      edges {
+        node {
+          childMarkdownRemark {
+            html
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default ApiTemplate;
diff --git a/src/templates/doc.js b/src/templates/doc.js
index 275ee2b..261cfc1 100644
--- a/src/templates/doc.js
+++ b/src/templates/doc.js
@@ -11,16 +11,6 @@ const DocsContainer = styled('div', {
   paddingBottom: '52px',
 });
 
-const EditLink = styled('a', {
-  paddingTop: '4px',
-  paddingBottom: '4px',
-  paddingLeft: '8px',
-  paddingRight: '8px',
-  position: 'absolute',
-  top: '16px',
-  right: 0,
-});
-
 class DocTemplate extends React.Component {
   render() {
     const {data, pathContext} = this.props;
@@ -28,9 +18,6 @@ class DocTemplate extends React.Component {
 
     return (
       <DocsWrapper className="docSearch-content">
-        {pathContext.remoteUrl ? (
-          <EditLink href={pathContext.remoteUrl}>Edit</EditLink>
-        ) : null}
         <DocsContainer
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{__html: html}}