feat(resources): split up topics and languages

gatsby-config.js

@@ -54,8 +54,15 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `resources`,
-        path: `${__dirname}/src/content/resources`,
+        name: `languages`,
+        path: `${__dirname}/src/content/resources/language`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `topics`,
+        path: `${__dirname}/src/content/resources/topic`,
       },
     },
     {

gatsby-node.js

@@ -48,57 +48,81 @@ const validateResourceArticle = node => {
 }
 
 const createResources = async ({ createPage, graphql }) => {
-  const languageResources = path.resolve(`src/templates/languagePost.tsx`)
-  const languageHome = path.resolve(`src/templates/languageHome.tsx`)
+  const resourcePage = path.resolve(`src/templates/resourcePage.tsx`)
+  const resourceHome = path.resolve(`src/templates/resourceHome.tsx`)
 
-  const result = await graphql(`
-    query FetchResources {
-      allFile(filter: { sourceInstanceName: { eq: "resources" } }) {
-        edges {
-          node {
-            relativePath
-            sourceInstanceName
+  const languagesQuery = await graphql(
+    `
+      query FetchLanguages {
+        allFile(filter: { sourceInstanceName: { eq: "languages" } }) {
+          edges {
+            node {
+              relativePath
+              sourceInstanceName
+            }
           }
         }
       }
-    }
-  `)
+    `
+  )
 
-  if (result.errors) {
-    return Promise.reject(result.errors)
+  const topicsQuery = await graphql(
+    `
+      query FetchTopics {
+        allFile(filter: { sourceInstanceName: { eq: "topics" } }) {
+          edges {
+            node {
+              relativePath
+              sourceInstanceName
+            }
+          }
+        }
+      }
+    `
+  )
+
+  const resources = [
+    { key: "topics", query: topicsQuery },
+    { key: "languages", query: languagesQuery },
+  ]
+
+  for ({ key, query } of resources) {
+    if (query.errors) {
+      return Promise.reject(query.errors)
+    }
+
+    const resources = query.data.allFile.edges.reduce((acc, { node }) => {
+      const [resourceCategory] = node.relativePath.split("/")
+      if (!acc.includes(resourceCategory)) {
+        acc.push(resourceCategory)
+      }
+      return acc
+    }, [])
+
+    // create home page for each resources
+    resources.forEach((resource) => {
+      createPage({
+        path: path.join("resources", resource),
+        component: resourceHome,
+        context: {
+          resourceType: key,
+          entry: resource,
+          layout: LAYOUT_RESOURCES,
+        },
+      })
+    })
+
+    query.data.allFile.edges.forEach(({ node }) => {
+      createPage({
+        path: path.join("resources", node.relativePath),
+        component: resourcePage,
+        context: {
+          file: node.relativePath,
+          layout: LAYOUT_RESOURCES,
+        },
+      })
+    })
   }
-
-  const languages = result.data.allFile.edges.reduce((acc, { node }) => {
-    const [language] = node.relativePath.split("/")
-    if (!acc.includes(language)) {
-      acc.push(language)
-    }
-    return acc
-  }, [])
-
-  // create home page for each languages
-  languages.forEach(language => {
-    createPage({
-      path: path.join("resources", language),
-      component: languageHome,
-      context: {
-        language,
-        layout: LAYOUT_RESOURCES,
-      },
-    })
-  })
-
-  // create resource pages
-  return result.data.allFile.edges.forEach(({ node }) => {
-    createPage({
-      path: path.join("resources", node.relativePath),
-      component: languageResources,
-      context: {
-        file: node.relativePath,
-        layout: LAYOUT_RESOURCES,
-      },
-    })
-  })
 }
 
 const createArchives = async ({ createPage, graphql }) => {

src/templates/resourceHome.tsx

@@ -7,7 +7,7 @@ import { PageContent } from "../components/PageContent"
 import useSidebar from "../hooks/useSidebar"
 
 // @todo maybe find alternative type for data
-const LanguageHome: FC<any> = ({ data, pageContext }) => {
+const ResourceHome: FC<any> = ({ data, pageContext }) => {
   const { current: language } = useSidebar()
   const { relativePath } = data.file
   const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post
@@ -43,13 +43,13 @@ const LanguageHome: FC<any> = ({ data, pageContext }) => {
   )
 }
 
-export default LanguageHome
+export default ResourceHome
 
 export const query = graphql`
-  query LanguageHome($language: String!) {
+  query ResourceHome($resourceType: String!, $entry: String!) {
     file(
-      sourceInstanceName: { eq: "resources" }
-      relativeDirectory: { eq: $language }
+      sourceInstanceName: { eq: $resourceType }
+      relativeDirectory: { eq: $entry }
       base: { eq: "intro.md" }
     ) {
       relativePath

src/templates/resourcePage.tsx

@@ -10,7 +10,7 @@ import useSidebar from "../hooks/useSidebar"
 import { buildToc } from "../utils"
 
 // @todo maybe find alternative type for data
-const LanguagePost: FC<any> = ({ data }) => {
+const ResourcePage: FC<any> = ({ data }) => {
   const { current: language } = useSidebar()
   const { relativePath } = data.file
   const {
@@ -61,10 +61,10 @@ const LanguagePost: FC<any> = ({ data }) => {
   )
 }
 
-export default LanguagePost
+export default ResourcePage
 
 export const query = graphql`
-  query LanguagePost($file: String!) {
+  query ResourcePage($file: String!) {
     file(relativePath: { eq: $file }) {
       relativePath
       post: childMarkdownRemark {