Merge pull request #2 from joshuap/content

Source pages and blocks, display page content

Author: joshuap

NOTES.md

@@ -2,13 +2,19 @@
 
 I'm new to Gatsby. These are my dumb notes.
 
-## Getting data from Roam into Gatsby
+## Schema
 
-I'm sourcing the raw JSON from the filestem into Gatsby's GraphQL schema with the following plugins:
+Because of peculiarities of Roam's export format and limitations of Gatsby's JSON transformer plugin (the property name "children" collides w/ Gatsby's internals), I've built my own source plugin for Roam exports based in part on the following plugins:
 
 - https://www.gatsbyjs.org/packages/gatsby-source-filesystem/
 - https://www.gatsbyjs.org/packages/gatsby-transformer-json/
 
+Mine goes a step further and creates nodes for both pages and blocks, which should be useful for cross-referencing.
+
+The display of blocks on pages is currently limited to 10 levels of nesting [due to GraphQL's lack of recursion](https://github.com/graphql/graphql-spec/issues/91#issuecomment-254895093). I think the fragment approach is probably OK (you can use whatever limit makes sense for you), however it may be possible to take a two-pronged approach and embed the full document from the export in each page in addition to adding block nodes.
+
+## Database import
+
 Here's how to export your database in Roam and import it into this Gatsby project:
 
 1. Go to https://roamresearch.com/#/app/yourdb -> Export All
@@ -23,7 +29,7 @@ http://localhost:8000/___graphql
 
 ```graphql
 {
-  allRoamJson {
+  allRoamPage {
     edges {
       node {
         title

gatsby-config.js

@@ -27,14 +27,6 @@ module.exports = {
         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `roam`,
-        path: `${__dirname}/db/roam.json`,
-      },
-    },
-    `gatsby-transformer-json`,
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

gatsby-node.js

@@ -1,10 +1,61 @@
+const _ = require(`lodash`)
 const path = require(`path`)
+const fs = require(`fs-extra`)
 const crypto = require(`crypto`)
 
+exports.sourceNodes = async ({ actions, createNodeId, createContentDigest },
+  pluginOptions
+) => {
+  const { createNode, createParentChildLink } = actions
+
+  if (typeof(pluginOptions.path) === 'undefined') { pluginOptions.path = `db/roam.json` }
+  if (!path.isAbsolute(pluginOptions.path)) {
+    pluginOptions.path = path.resolve(process.cwd(), pluginOptions.path)
+  }
+
+  const content = await fs.readFile(pluginOptions.path, `utf-8`)
+  const parsedContent = JSON.parse(content)
+
+  function createChildren(parent, children) {
+    if (!_.isArray(children)) { return }
+    children.forEach((obj, i) => {
+      const nodeMeta = {
+        id: createNodeId(`roam-block-${parent.id}-${i}`),
+        parent: parent.id,
+        children: [],
+        internal: {
+          type: `RoamBlock`,
+          contentDigest: createContentDigest(obj),
+        },
+      }
+      const node = Object.assign({}, obj, nodeMeta)
+      createNode(node)
+      createParentChildLink({ parent: parent, child: node })
+      createChildren(node, obj.children)
+    })
+  }
+
+  parsedContent.forEach((obj, i) => {
+    const nodeMeta = {
+      id: createNodeId(`roam-page-${i}`),
+      parent: null,
+      children: [],
+      internal: {
+        type: `RoamPage`,
+        contentDigest: createContentDigest(obj),
+      },
+    }
+    const node = Object.assign({}, obj, nodeMeta)
+    createNode(node)
+    createChildren(node, obj.children)
+  })
+}
+
 const roamDayRegexp = /(?<month>January|February|March|April|May|June|July|August|September|October|November|December) (?<day>[0-9]{1,2})(?:[a-z]{2})?, (?<year>[0-9]{4})/
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions
-  if (node.internal.type === `RoamJson`) {
+
+  if (node.internal.type === `RoamPage`) {
     let slug
     const dayMatch = node.title.match(roamDayRegexp)
     if (dayMatch) {
@@ -22,7 +73,7 @@ exports.onCreateNode = ({ node, actions }) => {
     createNodeField({
       node,
       name: `slug`,
-      value: `pages/${slug}`,
+      value: `/pages/${slug}`,
     })
   }
 }
@@ -33,7 +84,7 @@ exports.createPages = async ({ graphql, actions }) => {
   // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
   const result = await graphql(`
     query {
-      allRoamJson {
+      allRoamPage {
         edges {
           node {
             fields {
@@ -44,7 +95,7 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     }
   `)
-  result.data.allRoamJson.edges.forEach(({ node }) => {
+  result.data.allRoamPage.edges.forEach(({ node }) => {
     createPage({
       path: node.fields.slug,
       component: path.resolve(`./src/templates/page.js`),
@@ -55,4 +106,4 @@ exports.createPages = async ({ graphql, actions }) => {
       },
     })
   })
-}
+}

src/components/block.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+export default function Block({ parent }) {
+  if (!Array.isArray(parent.children)) { return ""; }
+  return (
+    <ul>
+      {parent.children.map((node) => (
+          <li key={node.id}>
+            {node.string}{" "}
+            <Block parent={node}></Block>
+          </li>
+      ))}
+    </ul>
+  )
+}

src/pages/index.js

@@ -12,8 +12,8 @@ export default function IndexPage({ data }) {
         <h1>
           All Pages
         </h1>
-        <h4>{data.allRoamJson.totalCount} Pages</h4>
-        {data.allRoamJson.edges.map(({ node }) => (
+        <h4>{data.allRoamPage.totalCount} Pages</h4>
+        {data.allRoamPage.edges.map(({ node }) => (
           <div key={node.id}>
             <Link to={node.fields.slug}>
               <h3>
@@ -29,7 +29,7 @@ export default function IndexPage({ data }) {
 
 export const query = graphql`
   query {
-    allRoamJson {
+    allRoamPage {
       totalCount
       edges {
         node {

src/templates/page.js

@@ -1,20 +1,59 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
+import Block from "../components/block"
 
 export default function Page({ data }) {
-  const page = data.roamJson
+  const page = data.roamPage
   return (
     <Layout>
       <h1>{page.title}</h1>
+      <Block parent={page}></Block>
     </Layout>
   )
 }
 
+// Supports 10-levels of nesting.
+// [Why can't it do infinite levels?](https://github.com/graphql/graphql-spec/issues/91#issuecomment-254895093)
 export const query = graphql`
   query($slug: String!) {
-    roamJson(fields: { slug: { eq: $slug } }) {
+    roamPage(fields: { slug: { eq: $slug } }) {
       title
+      children {
+        ...BlockFields
+        children {
+          ...BlockFields
+          children {
+            ...BlockFields
+            children {
+              ...BlockFields
+              children {
+                ...BlockFields
+                children {
+                  ...BlockFields
+                  children {
+                    ...BlockFields
+                    children {
+                      ...BlockFields
+                      children {
+                        ...BlockFields
+                        children {
+                          ...BlockFields
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
+  fragment BlockFields on RoamBlock {
+    id
+    uid
+    string
+  }
 `