refactor: use graphql to query @emdaer/meta

.emdaer/.offline/plugin-contributors-details-github/contributors-data.json

@@ -24,9 +24,9 @@
     "email": null,
     "hireable": null,
     "bio": "I build multi-channel publishing systems and web applications at @fourkitchens.",
-    "public_repos": 51,
+    "public_repos": 52,
     "public_gists": 1,
-    "followers": 24,
+    "followers": 25,
     "following": 62,
     "created_at": "2011-10-14T00:22:53Z",
     "updated_at": "2018-04-10T02:03:08Z"
@@ -61,6 +61,6 @@
     "followers": 37,
     "following": 15,
     "created_at": "2012-01-05T15:20:07Z",
-    "updated_at": "2018-04-02T19:28:45Z"
+    "updated_at": "2018-04-22T05:24:22Z"
   }
 ]

.emdaer/README.emdaer.md

@@ -35,7 +35,7 @@
 Pull Requests will provide a link to a "Deploy Preview" courtesey of [Netlify](https://www.netlify.com/docs/continuous-deployment/#branches-deploys). This can be used for design review and functional testing.
 
 ## Content
-Some of the content on this website is shared from the [emdaer](https://github.com/emdaer/emdaer) readme via the [@emdaer/meta](https://www.npmjs.com/package/@emdaer/meta) package which exports the readme sections as template literals. 
+Some of the content on this website is shared with the [emdaer](https://github.com/emdaer/emdaer) readme via the [@emdaer/meta](https://www.npmjs.com/package/@emdaer/meta) package which contains the README sections as markdown files. `gatsby-source-filesystem` and `gatsby-transformer-remark` are used to pull those files in at which point they are queryable by GraphQL.
 
 ## Contributors
 <!--emdaer-p

.eslintrc.js

@@ -11,6 +11,9 @@ module.exports = {
       'styled-components',
     ],
   },
+  globals: {
+    graphql: true,
+  },
   rules: {
     'import/no-extraneous-dependencies': [
       'error',

README.md

@@ -25,7 +25,7 @@
 <h3 id="pull-requests">Pull Requests</h3>
 <p>Pull Requests will provide a link to a “Deploy Preview” courtesey of <a href="https://www.netlify.com/docs/continuous-deployment/#branches-deploys">Netlify</a>. This can be used for design review and functional testing.</p>
 <h2 id="content">Content</h2>
-<p>Some of the content on this website is shared from the <a href="https://github.com/emdaer/emdaer">emdaer</a> readme via the <a href="https://www.npmjs.com/package/@emdaer/meta">@emdaer/meta</a> package which exports the readme sections as template literals.</p>
+<p>Some of the content on this website is shared with the <a href="https://github.com/emdaer/emdaer">emdaer</a> readme via the <a href="https://www.npmjs.com/package/@emdaer/meta">@emdaer/meta</a> package which contains the README sections as markdown files. <code>gatsby-source-filesystem</code> and <code>gatsby-transformer-remark</code> are used to pull those files in at which point they are queryable by GraphQL.</p>
 <h2 id="contributors">Contributors</h2>
 <details>
 <summary><strong>Contributors</strong></summary><br>

gatsby-config.js

@@ -10,6 +10,14 @@ module.exports = {
         pathToConfigModule: `src/utils/typography.js`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `node_modules/@emdaer/meta/src/README`,
+        name: 'markdown-pages',
+      },
+    },
+    `gatsby-transformer-remark`,
     `gatsby-plugin-glamor`,
   ],
 };

package.json

@@ -55,13 +55,14 @@
     "gatsby-plugin-glamor": "^1.6.8",
     "gatsby-plugin-react-helmet": "^2.0.10",
     "gatsby-plugin-typography": "^1.7.10",
+    "gatsby-source-filesystem": "^1.5.34",
+    "gatsby-transformer-remark": "^1.7.40",
     "glamorous": "^4.11.0",
+    "html-to-react": "^1.3.3",
     "prop-types": "^15.6.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "reactstrap": "^5.0.0-alpha.3",
-    "remark": "^9.0.0",
-    "remark-react": "^4.0.1",
     "typography": "^0.16.6",
     "typography-theme-bootstrap": "^0.16.7"
   }

src/css/index.css

@@ -2,4 +2,13 @@ pre {
   background-color: #f3f6f6;
   padding: 20px;
   border-radius: 3px;
+}
+
+details summary {
+  font-size: 1.1rem;
+  padding-bottom: 20px;
+}
+
+blockquote {
+  font-size: 1rem;
 }

src/pages/index.js

@@ -1,30 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import g, { withTheme } from 'glamorous';
-import remark from 'remark';
-import reactRenderer from 'remark-react';
-
-import whatIsEmdaer from '@emdaer/meta/lib/README/what-is-emdaer';
-import howEmdaerWorks from '@emdaer/meta/lib/README/how-emdaer-works';
-import addingEmdaer from '@emdaer/meta/lib/README/adding-emdaer-to-your-project';
-
+import { Parser } from 'html-to-react';
 import { rhythm } from '../utils/typography';
 import { ExternalLink } from '../utils/styleHelpers';
 import RibbonContainer from '../components/RibbonContainer';
 
-const createMarkup = content =>
-  remark()
-    .use(reactRenderer)
-    .processSync(content).contents;
+const htmlToReactParser = new Parser();
 
 const GET_STARTED =
   'https://github.com/emdaer/emdaer#adding-emdaer-to-your-project';
 
+const EMDAER_META_BASE_PATH = 'node_modules/@emdaer/meta/src/README';
+
+function findHtmlByAbsolutePath(data, path) {
+  return htmlToReactParser.parse(
+    data.allMarkdownRemark.edges.find(
+      edge => edge.node.fileAbsolutePath === `${EMDAER_META_BASE_PATH}/${path}`
+    ).node.html
+  );
+}
+
 const GettingStartedLink = g(ExternalLink)({
   marginTop: rhythm(1),
 });
 
-const IndexPage = ({ theme }) => (
+const IndexPage = ({ theme, data }) => (
   <div>
     <RibbonContainer color="white" textAlign="center" backgroundColor="#F9F9F9">
       <g.H1 color={theme.brand}>emdaer</g.H1>
@@ -46,18 +47,50 @@ const IndexPage = ({ theme }) => (
         Get Started
       </GettingStartedLink>
     </RibbonContainer>
-    <RibbonContainer>{createMarkup(whatIsEmdaer)}</RibbonContainer>
+    <RibbonContainer>
+      {findHtmlByAbsolutePath(data, 'what-is-emdaer.md')}
+    </RibbonContainer>
     <RibbonContainer backgroundColor="#F9F9F9">
-      {createMarkup(howEmdaerWorks)}
+      {findHtmlByAbsolutePath(data, 'how-emdaer-works.md')}
+    </RibbonContainer>
+    <RibbonContainer>
+      {findHtmlByAbsolutePath(data, 'adding-emdaer-to-your-project.md')}
     </RibbonContainer>
-    <RibbonContainer>{createMarkup(addingEmdaer)}</RibbonContainer>
   </div>
 );
 
 IndexPage.propTypes = {
   theme: PropTypes.shape({
     brand: PropTypes.string.isRequired,
   }).isRequired,
+  data: PropTypes.shape({
+    allMarkdownRemark: PropTypes.shape({
+      edges: PropTypes.arrayOf(
+        PropTypes.shape({
+          node: PropTypes.shape({
+            fileAbsolutePath: PropTypes.string.isRequired,
+            html: PropTypes.string.isRequired,
+          }),
+        })
+      ),
+    }),
+  }).isRequired,
 };
 
 export default withTheme(IndexPage);
+
+/**
+ * The query that grabs each markdown file from @emdaer/meta
+ */
+export const query = graphql`
+  query AllContent {
+    allMarkdownRemark {
+      edges {
+        node {
+          fileAbsolutePath
+          html
+        }
+      }
+    }
+  }
+`;