Component: Project content

[tangollama]

https://www.figma.com/proto/qok2tS0SMOMkh5aBbZUqNp/opensource.newrelic.com?node-id=190%3A1669&viewport=485%2C458%2C0.8222092986106873&scaling=scale-down-width

Using #5, generate output from the markdown file.

Possible implementation: GH markdown-processing library.

[devfreddy]

Initial implementation added e792fd71ccbf3e450d2faf319d790e685ceb001c

Roughly:

1. Added gatsby-plugin-mdx

2. Added a directory for storing the main content, src/data/project-main-content

3. Added a sample file, src/data/project-main-content/newrelic-nr1-workload-geoops.mdx

4. Custom logic in gatsby/on-create-node.js to specifically target mdx files parsed out of the above folder to create a custom node ProjectMainContent which primarily provides a pointer/link between a project and a compiled mdx node

5. Custom graphql relationship in type-defs linking mainContent on the ProjectsJson type to the ProjectMainContent node type

6. Added field which returns the compiled Mdx contents onto the "kitchen sink" project fragment in src/fragments:

     mainContent {
       mdx: parent {
         ... on Mdx {
           compiledMdx: body
         }
       }
     }

7. We can now pass the compiled Mdx down to our src/components/ProjectMainContent.js component which utilizes MDXProvider and MDXRenderer and a custom CodeBlock component to provide code highlighting and rendering the mdx content (i.e. arbitrary JS code in Markdown).

Notes:

Gatsby enforces a single page graphql query. We "stitch" the data we need onto or in relationship to the primary ProjectsJson type to get everything we need to drive the page in a single query.

[devfreddy]

A template for this content was added in 9e556616de7c61475e92c8c639c84e09f0d748a1