From 97e9b8ce53710114ffca63d4dcfd97c0446cfb5c Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Sun, 15 Dec 2019 16:22:43 -0500 Subject: [PATCH] feat(resources): create intro page for each language --- gatsby-node.js | 22 ++++++++ src/components/ResourcesList/index.tsx | 25 ++++++++- src/content/resources/cpp/intro.md | 10 ++++ src/content/resources/java/intro.md | 10 ++++ src/content/resources/javascript/intro.md | 10 ++++ src/content/resources/kotlin/intro.md | 10 ++++ src/content/resources/php/intro.md | 10 ++++ src/content/resources/python/intro.md | 10 ++++ src/templates/languageHome.tsx | 62 +++++++++++++++++++++++ src/types/index.d.ts | 1 + 10 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 src/content/resources/cpp/intro.md create mode 100644 src/content/resources/java/intro.md create mode 100644 src/content/resources/javascript/intro.md create mode 100644 src/content/resources/kotlin/intro.md create mode 100644 src/content/resources/php/intro.md create mode 100644 src/content/resources/python/intro.md create mode 100644 src/templates/languageHome.tsx diff --git a/gatsby-node.js b/gatsby-node.js index 8227128..e078a5b 100644 --- a/gatsby-node.js +++ b/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), diff --git a/src/components/ResourcesList/index.tsx b/src/components/ResourcesList/index.tsx index 07ca805..eead565 100644 --- a/src/components/ResourcesList/index.tsx +++ b/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> = props => { +interface IResourcesList extends HTMLAttributes { + relativeDirectory?: string +} + +export const ResourcesList: FC = props => { const resources = useStaticQuery(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 ( diff --git a/src/content/resources/cpp/intro.md b/src/content/resources/cpp/intro.md new file mode 100644 index 0000000..836e525 --- /dev/null +++ b/src/content/resources/cpp/intro.md @@ -0,0 +1,10 @@ +--- +authors: + - "veksen#1565" +created_at: 2019/12/15 +title: C++ +--- + +## C++ + +The C++ resources ^\_- diff --git a/src/content/resources/java/intro.md b/src/content/resources/java/intro.md new file mode 100644 index 0000000..7b5a4d5 --- /dev/null +++ b/src/content/resources/java/intro.md @@ -0,0 +1,10 @@ +--- +authors: + - "veksen#1565" +created_at: 2019/12/15 +title: Java +--- + +## Java + +The Java resources ^\_- diff --git a/src/content/resources/javascript/intro.md b/src/content/resources/javascript/intro.md new file mode 100644 index 0000000..7391005 --- /dev/null +++ b/src/content/resources/javascript/intro.md @@ -0,0 +1,10 @@ +--- +authors: + - "veksen#1565" +created_at: 2019/12/15 +title: Javascript +--- + +## Javascript + +The Javascript resources ^\_- diff --git a/src/content/resources/kotlin/intro.md b/src/content/resources/kotlin/intro.md new file mode 100644 index 0000000..a1e6183 --- /dev/null +++ b/src/content/resources/kotlin/intro.md @@ -0,0 +1,10 @@ +--- +authors: + - "veksen#1565" +created_at: 2019/12/15 +title: Kotlin +--- + +## Kotlin + +The Kotlin resources ^\_- diff --git a/src/content/resources/php/intro.md b/src/content/resources/php/intro.md new file mode 100644 index 0000000..0b6c4bd --- /dev/null +++ b/src/content/resources/php/intro.md @@ -0,0 +1,10 @@ +--- +authors: + - "veksen#1565" +created_at: 2019/12/15 +title: PHP +--- + +## PHP + +The PHP resources ^\_- diff --git a/src/content/resources/python/intro.md b/src/content/resources/python/intro.md new file mode 100644 index 0000000..e98d88d --- /dev/null +++ b/src/content/resources/python/intro.md @@ -0,0 +1,10 @@ +--- +authors: + - "veksen#1565" +created_at: 2019/12/15 +title: Python +--- + +## Python + +The Python resources ^\_- diff --git a/src/templates/languageHome.tsx b/src/templates/languageHome.tsx new file mode 100644 index 0000000..befb607 --- /dev/null +++ b/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 = ({ data, pageContext }) => { + const { relativePath } = data.file + const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post + + return ( + + +
+ + + + ) +} + +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 + } + } + } +` diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 895a679..8b045fd 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -22,6 +22,7 @@ export interface IFileQuery { export interface IFileResourceQuery { node: { relativePath: string + relativeDirectory: string childMarkdownRemark: { frontmatter: { author: string