Merge pull request #273 from the-programmers-hangout/feat-topics

feat(resources): support for topics

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/components/ArchivesSidebar/index.tsx

@@ -11,7 +11,9 @@ import * as SC from "./styles"
 
 const ALL_ARCHIVES = graphql`
   query {
-    allFile(filter: { sourceInstanceName: { eq: "what-is-archive" } }) {
+    archives: allFile(
+      filter: { sourceInstanceName: { eq: "what-is-archive" } }
+    ) {
       edges {
         node {
           relativePath
@@ -41,7 +43,7 @@ function Tree({ item }: { item: IFileOrFolder }) {
 }
 
 export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-  const archives = useStaticQuery<IAllArchivesQuery>(ALL_ARCHIVES)
+  const { archives } = useStaticQuery(ALL_ARCHIVES)
   const tree = useBuildTree(archives, "/archives")
   const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 

src/components/ResourcesSidebar/index.tsx

@@ -1,21 +1,33 @@
 import { graphql, useStaticQuery } from "gatsby"
 import descend from "ramda/es/descend"
-import sort from "ramda/es/sort"
 import sortWith from "ramda/es/sortWith"
 import React, { FC, HTMLAttributes, memo, useState } from "react"
-import useBuildTree from "../../hooks/useBuildTree"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import useSidebar from "../../hooks/useSidebar"
 import TriangleDown from "../../icons/triangle-down.svg"
-import { IAllResourcesQuery, IFileOrFolder, IFolder } from "../../types"
+import { IFileOrFolder, IFolder } from "../../types"
 import { getPath, humanize } from "../../utils"
 import { Sidebar } from "../Sidebar"
 import * as SC from "./styles"
 import useMatchingPath from "./useMatchingPath"
+import useTree from "./useTree"
 
 const ALL_RESOURCES = graphql`
-  query {
-    allFile(filter: { sourceInstanceName: { eq: "resources" } }) {
+  query AllTopicsAndAllLanguages {
+    languages: allFile(filter: { sourceInstanceName: { eq: "languages" } }) {
+      edges {
+        node {
+          relativePath
+          childMarkdownRemark {
+            frontmatter {
+              authors
+              title
+            }
+          }
+        }
+      }
+    }
+    topics: allFile(filter: { sourceInstanceName: { eq: "topics" } }) {
       edges {
         node {
           relativePath
@@ -129,16 +141,16 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => {
   )
 })
 
-const LanguageList: FC<{
+const ResourceList: FC<{
   items: IFileOrFolder[]
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>
 }> = ({ items, setExpanded }) => {
   const { current, setCurrent } = useSidebar()
 
   return (
-    <SC.StyledLanguageList>
+    <SC.StyledResourceList>
       {items.map((item) => (
-        <SC.Language
+        <SC.Resource
           key={item.title}
           className={current === item.title ? "active" : ""}
           onClick={() => {
@@ -147,55 +159,52 @@ const LanguageList: FC<{
           }}
         >
           {item.title}
-        </SC.Language>
+        </SC.Resource>
       ))}
-    </SC.StyledLanguageList>
+    </SC.StyledResourceList>
   )
 }
 
-const AllLanguages: FC<{
-  items: IFileOrFolder[]
+const ExpandResources: FC<{
   expanded: boolean
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({ items, expanded, setExpanded }) => {
+}> = ({ children, expanded, setExpanded }) => {
   const { current } = useSidebar()
 
-  if (!current) {
-    return <LanguageList items={items} setExpanded={setExpanded} />
-  }
+  const showList = expanded || !current
 
   return (
-    <SC.ExpandLanguages>
-      <SC.ExpandLanguagesHeader
-        onClick={() => setExpanded((prevState) => !prevState)}
-      >
-        Expand languages {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
-      </SC.ExpandLanguagesHeader>
-      {expanded && <LanguageList items={items} setExpanded={setExpanded} />}
-    </SC.ExpandLanguages>
+    <SC.ExpandResources>
+      {current && (
+        <SC.ExpandResourcesHeader
+          onClick={() => setExpanded((prevState) => !prevState)}
+        >
+          Expand resources {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
+        </SC.ExpandResourcesHeader>
+      )}
+      {showList && children}
+    </SC.ExpandResources>
   )
 }
 
 export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-  const [expandedLanguages, setExpandedLanguages] = useState(false)
-  const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
-  const languages = useBuildTree(resources, "/resources")
+  const [expanded, setExpanded] = useState(false)
+  const resources = useStaticQuery(ALL_RESOURCES)
+  const languagesTree = useTree(resources.languages)
+  const topicsTree = useTree(resources.topics)
   const { current } = useSidebar()
-  const sortedLanguages = sort(
-    (a, b) => a.title.localeCompare(b.title),
-    languages
-  )
 
-  const currentLanguage = sortedLanguages.find((lang) => lang.title === current)
+  const currentLanguage = languagesTree.find((lang) => lang.title === current)
+  const currentTopic = topicsTree.find((topic) => topic.title === current)
 
   return (
     <Sidebar {...props}>
-      <AllLanguages
-        items={sortedLanguages}
-        expanded={expandedLanguages}
-        setExpanded={setExpandedLanguages}
-      />
+      <ExpandResources expanded={expanded} setExpanded={setExpanded}>
+        <ResourceList items={languagesTree} setExpanded={setExpanded} />
+        <ResourceList items={topicsTree} setExpanded={setExpanded} />
+      </ExpandResources>
       {currentLanguage && <Tree item={currentLanguage} firstLevel={true} />}
+      {currentTopic && <Tree item={currentTopic} firstLevel={true} />}
     </Sidebar>
   )
 }

src/components/ResourcesSidebar/styles.tsx

@@ -79,6 +79,8 @@ export const TreeWrapper = styled.div<{ collapsed?: boolean }>`
 
   &.firstLevel {
     overflow: hidden;
+    border-top: 1px solid
+      ${(props) => transparentize(0.8, props.theme.sidebar.foreground)};
   }
 
   ${Children} {
@@ -109,15 +111,12 @@ export const ExpandIcon = styled(Expand)`
   }
 `
 
-export const ExpandLanguages = styled.div`
-  padding: 12px 15px 12px 0;
-
-  border-bottom: 1px solid
-    ${(props) => transparentize(0.8, props.theme.sidebar.foreground)};
-  margin-bottom: 8px;
+export const ExpandResources = styled.div`
+  padding-right: 15px;
+  margin: 20px 0;
 `
 
-export const ExpandLanguagesHeader = styled.div`
+export const ExpandResourcesHeader = styled.div`
   user-select: none;
   display: flex;
   align-items: center;
@@ -130,12 +129,18 @@ export const ExpandLanguagesHeader = styled.div`
   }
 `
 
-export const StyledLanguageList = styled.div`
-  padding: 8px 0;
+export const StyledResourceList = styled.div`
+  padding-top: 16px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   overflow: hidden;
+
+  & + & {
+    margin-top: 16px;
+    border-top: 1px solid
+      ${(props) => transparentize(0.8, props.theme.sidebar.foreground)};
+  }
 `
 
 const item = css`
@@ -167,7 +172,7 @@ const item = css`
   }
 `
 
-export const Language = styled.div`
+export const Resource = styled.div`
   ${item};
 `
 

src/components/ResourcesSidebar/useTree.tsx

@@ -0,0 +1,13 @@
+import sort from "ramda/es/sort"
+import useBuildTree from "../../hooks/useBuildTree"
+import { IAllResourcesQuery } from "../../types"
+
+export default function useTree(resources: IAllResourcesQuery["allFile"]) {
+  const resourcesTree = useBuildTree(resources, "/resources")
+  const sortedResources = sort(
+    (a, b) => a.title.localeCompare(b.title),
+    resourcesTree
+  )
+
+  return sortedResources
+}

src/hooks/useBuildTree.tsx

@@ -2,10 +2,10 @@ import { IAllFilesQuery, IFileQuery } from "../types"
 import { join, traversePaths } from "../utils"
 
 export default function useBuildTree(
-  resources: IAllFilesQuery,
+  resources: IAllFilesQuery["allFile"],
   basePath: string
 ) {
-  const objects = resources.allFile.edges.map(({ node: file }: IFileQuery) =>
+  const objects = resources.edges.map(({ node: file }: IFileQuery) =>
     traversePaths(file.relativePath.split("/"), basePath)
   )
 

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 {