Fix broken API docs (#161)

* Fix broken API docs * Remove console log
fusionjs · Nov 18, 2019 · e7c426b · e7c426b
1 parent 352e950
commit e7c426b
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 14 deletions.
diff --git 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
@@ -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
@@ -11,26 +11,13 @@ 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;
     let html = extractChildMarkdownRemark(data).html || '';
 
     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}}