Merge pull request #196 from the-programmers-hangout/feat-intro-page-per-language

feat(resources): create intro page for each language

gatsby-node.js

@@ -44,6 +44,7 @@ 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 result = await graphql(`
     query FetchResources {
@@ -62,6 +63,27 @@ const createResources = async ({ createPage, graphql }) => {
     return Promise.reject(result.errors)
   }
 
+  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),

src/components/ResourcesList/index.tsx

@@ -12,6 +12,7 @@ const ALL_RESOURCES = graphql`
       edges {
         node {
           relativePath
+          relativeDirectory
           childMarkdownRemark {
             frontmatter {
               authors
@@ -51,9 +52,29 @@ const Language = memo(({ item }: { item: IFolder; index: number }) => {
   )
 })
 
-export const ResourcesList: FC<HTMLAttributes<HTMLDivElement>> = props => {
+interface IResourcesList extends HTMLAttributes<HTMLDivElement> {
+  relativeDirectory?: string
+}
+
+export const ResourcesList: FC<IResourcesList> = props => {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
-  const tree = useBuildTree(resources)
+
+  const filteredResources = {
+    ...resources,
+    allFile: {
+      ...resources.allFile,
+      edges: resources.allFile.edges.filter(({ node }) => {
+        if (!props.relativeDirectory) {
+          return true
+        }
+
+        const [language] = node.relativeDirectory.split("/")
+        return props.relativeDirectory === language
+      }),
+    },
+  }
+
+  const tree = useBuildTree(filteredResources)
   const sortedTree = tree.sort((a, b) => a.title.localeCompare(b.title))
 
   return (

src/content/resources/cpp/intro.md

@@ -0,0 +1,10 @@
+---
+authors:
+  - "veksen#1565"
+created_at: 2019/12/15
+title: C++
+---
+
+## C++
+
+The C++ resources ^\_-

src/content/resources/java/intro.md

@@ -0,0 +1,10 @@
+---
+authors:
+  - "veksen#1565"
+created_at: 2019/12/15
+title: Java
+---
+
+## Java
+
+The Java resources ^\_-

src/content/resources/javascript/intro.md

@@ -0,0 +1,10 @@
+---
+authors:
+  - "veksen#1565"
+created_at: 2019/12/15
+title: Javascript
+---
+
+## Javascript
+
+The Javascript resources ^\_-

src/content/resources/kotlin/intro.md

@@ -0,0 +1,10 @@
+---
+authors:
+  - "veksen#1565"
+created_at: 2019/12/15
+title: Kotlin
+---
+
+## Kotlin
+
+The Kotlin resources ^\_-

src/content/resources/php/intro.md

@@ -0,0 +1,10 @@
+---
+authors:
+  - "veksen#1565"
+created_at: 2019/12/15
+title: PHP
+---
+
+## PHP
+
+The PHP resources ^\_-

src/content/resources/python/intro.md

@@ -0,0 +1,10 @@
+---
+authors:
+  - "veksen#1565"
+created_at: 2019/12/15
+title: Python
+---
+
+## Python
+
+The Python resources ^\_-

src/templates/languageHome.tsx

@@ -0,0 +1,62 @@
+import { graphql } from "gatsby"
+import React, { FC, Fragment } from "react"
+import { Header } from "../components/Header"
+import { Markdown } from "../components/Markdown"
+import { ResourcesList } from "../components/ResourcesList"
+import { SEO } from "../components/SEO"
+
+// @todo maybe find alternative type for data
+const LanguageHome: FC<any> = ({ data, pageContext }) => {
+  const { relativePath } = data.file
+  const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post
+
+  return (
+    <Fragment>
+      <SEO title={frontmatter.title} description={excerpt} />
+      <Header
+        relativePath={relativePath}
+        basePath="/resources"
+        title={frontmatter.title}
+        authors={fields.authors}
+        createdAt={frontmatter.created_at}
+        timeToRead={timeToRead}
+        recommendedReading={frontmatter.recommended_reading}
+        externalResources={frontmatter.external_resources}
+      />
+      <Markdown content={html} />
+      <ResourcesList relativeDirectory={pageContext.language} />
+    </Fragment>
+  )
+}
+
+export default LanguageHome
+
+export const query = graphql`
+  query LanguageHome($language: String!) {
+    file(
+      sourceInstanceName: { eq: "resources" }
+      relativeDirectory: { eq: $language }
+      base: { eq: "intro.md" }
+    ) {
+      relativePath
+      post: childMarkdownRemark {
+        html
+        excerpt
+        fields {
+          authors {
+            name
+            hash
+            avatar
+          }
+        }
+        frontmatter {
+          created_at
+          title
+          recommended_reading
+          external_resources
+        }
+        timeToRead
+      }
+    }
+  }
+`

src/types/index.d.ts

@@ -22,6 +22,7 @@ export interface IFileQuery {
 export interface IFileResourceQuery {
   node: {
     relativePath: string
+    relativeDirectory: string
     childMarkdownRemark: {
       frontmatter: {
         author: string