Using this as an extension

[jletey]

As I'm a starter with Gatsby, this may be a stupid question: I was wondering if I can somehow incorporate this into eggheadio/gatsby-starter-egghead-blog?

[johno]

You can! It's not as straightforward as it should be right now since you need to filter the way they're querying MDX files, but you can add it to that starter with the following steps:

Add dependency

yarn add gatsby-theme-digital-garden

Add a note

mkdir -p notes/test
echo '# Hello, world' > notes/test/hello.mdx

And then edit gatsby-config.js and gatsby-node.js

gatsby-config.js

       fbAppID: '',
     },
   },
+  __experimentalThemes: [
+    {
+      resolve: 'gatsby-theme-digital-garden',
+      options: {
+        mdx: false
+      }
+    }
+  ],
   plugins: [
     {
       resolve: 'gatsby-source-filesystem',

gatsby-node.js

@@ -72,8 +72,9 @@ exports.createPages = ({ actions, graphql }) =>
     }

     const { edges } = data.allMdx
+    const posts = edges.filter(edge => edge.node.parent.sourceInstanceName === 'posts')
     const { createRedirect, createPage } = actions
-    createPosts(createPage, createRedirect, edges)
+    createPosts(createPage, createRedirect, posts)
     createPaginatedPages(actions.createPage, edges, '/blog', {
       categories: [],
     })

---

There are also some missing pieces on digital-garden's end for heading config for links, but you will now be able to navigate to /notes!

[jletey]

@johno You are the best ... I’ll try this in a little bit

I’ll close the issue if it works fine (it should as you basically did everything for me)!

[jletey]

@johno An issue: when I query for the blog posts, the notes show up as well. Do you know how to fix this? Also, how to you set the layout that you want to use for the note pages?

[ChristopherBiscardi]

@johnletey as @johno described originally, the query in the egghead starter is for allMdx, so you'll have to modify it to be more specific. For example in my own blog, I add the filesystem source name as a field to the Mdx nodes, then filter by it in my query.

For the layout, you can shadow the note page by creating a file in your site at src/gatsby-theme-digital-garden/components/note.js. Then you can use whatever you want to set the layout, etc and export the component as default.

[jletey]

@ChristopherBiscardi Trying this out now ... thanks for the advice!

[johno]

When we replace the internals for the notes/blogs this will fix itself since they will introduce their own custom types. See #58