feat(Docs): Generate documentation site from JSON instead of YAML files

Signed-off-by: Alex Ketch <alex@ketch.me>
stencila · Apr 15, 2019 · e43ebf1 · e43ebf1
1 parent 837112c
commit e43ebf1
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 30 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -26,12 +26,20 @@ module.exports = {
     },
 
     `gatsby-transformer-yaml`,
+    `gatsby-transformer-json`,
 
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `schemas`,
-        path: `${__dirname}/schema`
+        path: `${__dirname}/dist`
+      }
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `schemas`,
+        path: `${__dirname}/dist`
       }
     },
     {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -11,17 +11,15 @@ exports.createPages = ({ graphql, actions }) => {
   return new Promise((resolve, reject) => {
     graphql(`
       {
-        allFile(
-          filter: {
-            internal: { mediaType: { eq: "text/yaml" } }
-            sourceInstanceName: { eq: "schemas" }
-          }
-        ) {
+        allFile(filter: { sourceInstanceName: { eq: "schemas" } }) {
           edges {
             node {
               id
               name
               relativePath
+              childDistJson {
+                title
+              }
             }
           }
         }
@@ -33,9 +31,12 @@ exports.createPages = ({ graphql, actions }) => {
 
       const schemas = result.data.allFile.edges.map(edge => edge.node)
       schemas.forEach(schema => {
-        const title = schema.name.split('.')[0]
+        const title = schema.childDistJson
+          ? schema.childDistJson.title
+          : schema.name.split('.')[0]
+
         createPage({
-          path: title,
+          path: `/${title}`,
           component: slash(path.resolve('src/templates/page.tsx')),
           context: {
             fileRegex: `/${title}\./i`,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
     "build:ts": "gulp ts && tsc",
     "release": "semantic-release",
     "docs": "npm run docs:build",
-    "docs:develop": "gatsby develop",
-    "docs:build": "gatsby build --prefix-paths",
+    "docs:build": "npm run build && gatsby build --prefix-paths",
+    "docs:develop": "npm run build && gatsby develop",
     "watch": "gulp watch",
     "clean": "gulp clean"
   },
@@ -62,6 +62,7 @@
     "gatsby-remark-autolink-headers": "^2.0.16",
     "gatsby-remark-images": "^3.0.10",
     "gatsby-source-filesystem": "^2.0.29",
+    "gatsby-transformer-json": "^2.1.11",
     "gatsby-transformer-yaml": "^2.1.11",
     "gulp": "^4.0.0",
     "husky": "^1.3.1",

diff --git a/schema/text/blockContent.schema.yaml b/schema/text/blockContent.schema.yaml
@@ -1,3 +1,4 @@
+title: Blockcontent
 $schema: http://json-schema.org/draft-07/schema#
 $id: https://stencila.github.com/schema/blockContent.schema.json
 description: Block content.

diff --git a/src/components/CodeTabs.tsx b/src/components/CodeTabs.tsx
@@ -23,7 +23,7 @@ export const CodeTabs = ({ relativePath, data }: Props) => {
 
   const schemas = files.map(file => {
     try {
-      return require('../../schema/' + file)
+      return require('../../dist/' + file)
     } catch {
       try {
         return require('../../examples/' + file)
@@ -42,7 +42,10 @@ export const CodeTabs = ({ relativePath, data }: Props) => {
             active={schemaIndex === index}
             onClick={() => changeSchema(index)}
           >
-            {file.split('/').reverse()[0]}
+            {file
+              .split('/')
+              .reverse()[0]
+              .replace('yaml', 'json')}
           </Tab>
         ))}
       </Tab.Group>

diff --git a/src/components/SidebarMenu.tsx b/src/components/SidebarMenu.tsx
@@ -4,13 +4,14 @@ import * as React from 'react'
 
 export const SidebarMenu = () => {
   const data = useStaticQuery(sidebarQuery)
-  const schemas = data.allFile.edges.map(({ node }) => {
+  const schemas = data.allDistJson.edges.map(({ node }) => {
     return {
       ...node,
-      title: node.name.split('.')[0],
-      group: node.relativeDirectory
+      title: node.title || '',
+      category: node.category
     }
   })
+
   return (
     <Column narrow={true} className="has-background-light">
       <Menu>
@@ -19,7 +20,9 @@ export const SidebarMenu = () => {
           {schemas.map(schema => (
             <Menu.List.Item as={Link} to={schema.title} key={schema.id}>
               {schema.title}{' '}
-              {schema.group && <Tag color="info">{schema.group}</Tag>}
+              {schema.category && schema.category !== '.' && (
+                <Tag color="info">{schema.category}</Tag>
+              )}
             </Menu.List.Item>
           ))}
         </Menu.List>
@@ -30,19 +33,12 @@ export const SidebarMenu = () => {
 
 const sidebarQuery = graphql`
   query SidebarQuery {
-    allFile(
-      filter: {
-        sourceInstanceName: { eq: "schemas" }
-        internal: { mediaType: { eq: "text/yaml" } }
-      }
-      sort: { fields: [name] }
-    ) {
+    allDistJson(filter: { title: { ne: null } }, sort: { fields: [title] }) {
       edges {
         node {
           id
-          name
-          relativePath
-          relativeDirectory
+          title
+          category
         }
       }
     }

diff --git a/src/templates/page.tsx b/src/templates/page.tsx
@@ -20,7 +20,7 @@ const Documentation = (props: DocumentationPageProps) => {
     return <div>done</div>
   }
 
-  const schema = require(`../../schema/${file.relativePath}`)
+  const schema = require(`../../dist/${file.relativePath}`)
   const allOf = schema.allOf ? schema.allOf[1].properties : {}
   const anyOf = schema.anyOf ? schema.anyOf[1].properties : {}
   const properties = { ...schema.properties, ...allOf, ...anyOf }
@@ -29,8 +29,11 @@ const Documentation = (props: DocumentationPageProps) => {
     <Column className="is-clipped">
       <Title>
         {schema.title}
-        <Tag color="info">{file.relativeDirectory}</Tag>
+        {file.childDistJson.category && file.childDistJson !== '.' && (
+          <Tag color="info">{file.childDistJson.category}</Tag>
+        )}
       </Title>
+
       <Title subtitle={true} as="h2">
         <code>{schema.$id}</code>
       </Title>
@@ -72,13 +75,17 @@ export const pageQuery = graphql`
       filter: {
         relativePath: { eq: $relativePath }
         sourceInstanceName: { eq: "schemas" }
-        internal: { mediaType: { eq: "text/yaml" } }
       }
     ) {
       edges {
         node {
           relativePath
           relativeDirectory
+          childDistJson {
+            title
+            role
+            category
+          }
         }
       }
     }