Added cards and mdx rendering

demo/content/data/navItems.json

@@ -1,4 +1,4 @@
 [
-  { "route": "home", "label": "Home", "loadOrder": 1 },
-  { "route": "about", "label": "About", "loadOrder": 2 }
+  { "route": "/", "label": "Home", "loadOrder": 1 },
+  { "route": "/app/about", "label": "About", "loadOrder": 2 }
 ]

demo/content/tools/01/hello-world.mdx

@@ -0,0 +1,42 @@
+---
+slug: app/sdi
+title: SDI (Spudnik Digital Implements)
+description: MDX Example Description ...
+date: 2019-08-14
+categories: ["react", "node"]
+banner: "./images/logo.png"
+published: true
+---
+
+Hello, world! This is a demo post for `gatsby-theme-blog`.
+
+Delete me, and get writing!
+
+```js:title=gatsby-config.js
+module.exports = {
+  __experimentalThemes: [
+    "gatsby-theme-blog", // highlight-line
+    "gatsby-theme-notes",
+  ],
+}
+```
+
+This is another paragraph after the code block.
+
+Showcasing how MDX for Gatsby.js works ... The Counter component is imported explicitly, but since we are using MDXProvider, we can also define global components which don't need to be imported (e.g. Link, YouTube).
+
+## A React component in Markdown (imported component):
+
+## Code Snippet
+
+## This is a secondary heading
+
+```jsx
+import React from "react"
+import { ThemeProvider } from "theme-ui"
+import theme from "./theme"
+
+export default props => (
+  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+)
+```

demo/content/tools/02/hello-world.mdx

@@ -0,0 +1,42 @@
+---
+slug: app/fir
+title: FIR (Field Issue Request)
+description: MDX Example Description ...
+date: 2019-08-15
+categories: ["react", "node"]
+banner: "./images/logo.png"
+published: true
+---
+
+Hello, world! This is a demo post for `gatsby-theme-blog`.
+
+Delete me, and get writing!
+
+```js:title=gatsby-config.js
+module.exports = {
+  __experimentalThemes: [
+    "gatsby-theme-blog", // highlight-line
+    "gatsby-theme-notes",
+  ],
+}
+```
+
+This is another paragraph after the code block.
+
+Showcasing how MDX for Gatsby.js works ... The Counter component is imported explicitly, but since we are using MDXProvider, we can also define global components which don't need to be imported (e.g. Link, YouTube).
+
+## A React component in Markdown (imported component):
+
+## Code Snippet
+
+## This is a secondary heading
+
+```jsx
+import React from "react"
+import { ThemeProvider } from "theme-ui"
+import theme from "./theme"
+
+export default props => (
+  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+)
+```

demo/create-env.js

@@ -1,5 +1,5 @@
 const fs = require("fs")
 fs.writeFileSync(
   "./.env",
-  `AUTH0_DOMAIN=${process.env.GATSBY_AUTH0_DOMAIN}\n AUTH0_CLIENT_ID=${process.env.GATSBY_AUTH0_CLIENT_ID}\n AUTH0_CALLBACK_URL=${process.env.GATSBY_AUTH0_CALLBACK_URL}\n AUTH0_CALLBACK_URL=${process.env.GATSBY_AUTH0_REDIRECT_URL}`,
+  `GATSBY_AUTH0_DOMAIN=${process.env.GATSBY_AUTH0_DOMAIN}\n GATSBY_AUTH0_CLIENT_ID=${process.env.GATSBY_AUTH0_CLIENT_ID}\n GATSBY_AUTH0_CALLBACK_URL=${process.env.GATSBY_AUTH0_CALLBACK_URL}\n GATSBY_AUTH0_REDIRECT_URL=${process.env.GATSBY_AUTH0_REDIRECT_URL}`,
 )

demo/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "gatsby": "^2.13.1",
-    "gatsby-theme-auth-app": "1.0.8",
+    "gatsby-theme-auth-app": "1.0.10",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

theme/gatsby-config.js

@@ -1,6 +1,11 @@
-module.exports = options => {
-  const { mdx = true } = options;
-
+const path = require('path');
+module.exports = ({
+  contentPath = 'content/data',
+  basePath = '/',
+  assetPath = 'content/assets',
+  toolPath = 'content/tools',
+  mdx = true,
+}) => {
   return {
     siteMetadata: {
       title: `Gatsby Theme Auth App`,
@@ -24,6 +29,9 @@ module.exports = options => {
         resolve: `gatsby-plugin-mdx`,
         options: {
           extensions: [`.mdx`, `.md`],
+          defaultLayouts: {
+            default: require.resolve('./src/components/layout.js'),
+          },
           gatsbyRemarkPlugins: [
             {
               resolve: `gatsby-remark-images`,
@@ -43,22 +51,28 @@ module.exports = options => {
       {
         resolve: `gatsby-source-filesystem`,
         options: {
-          path: options.contentPath || `content/data`,
-          name: options.contentPath || `content/data`,
+          path: contentPath || `content/data`,
+          name: contentPath || `content/data`,
         },
       },
       {
         resolve: `gatsby-source-filesystem`,
         options: {
-          path: options.assetPath || `content/assets`,
-          name: options.assetPath || `content/assets`,
+          path: assetPath || `content/assets`,
+          name: assetPath || `content/assets`,
         },
       },
       {
         resolve: `gatsby-source-filesystem`,
         options: {
-          path: options.contentPath || `content/posts`,
-          name: options.contentPath || `content/posts`,
+          path: toolPath || `content/tools`,
+          name: toolPath || `content/tools`,
+        },
+      },
+      {
+        resolve: `gatsby-plugin-page-creator`,
+        options: {
+          path: path.join(__dirname, `src`, `pages`),
         },
       },
       {