[ADD] Use gatsby node to create member pages & recycle card component

Author: Carms Ng

gatsby-config.js

@@ -7,12 +7,7 @@ module.exports = {
   },
   plugins: [
     `gatsby-transformer-json`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        path: `${__dirname}/src/assets/content`,
-      },
-    },
+
     `gatsby-plugin-postcss`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
@@ -34,8 +29,15 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
+        name: `content`,
+        path: `${__dirname}/src/assets/content`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `locale`,
         path: `${__dirname}/locales`,
-        name: `locale`
       }
     },
     `gatsby-transformer-sharp`,
@@ -79,7 +81,17 @@ module.exports = {
           keySeparator: false,
           nsSeparator: false
         },
-        pages: []
+        pages: [
+          {
+            matchPath: '/:language?/members/:name',
+            getLanguageFromPath: true,
+            excludeLanguages: []
+          },
+          {
+            matchPath: '/preview',
+            languages: ['en']
+          }
+        ]
       }
     }
   ],

gatsby-node.js

@@ -0,0 +1,52 @@
+const { graphql } = require("gatsby")
+const path = require(`path`)
+
+// create member pages
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions
+
+  const result = await graphql(`
+    query {
+      allMembersJson {
+        nodes {
+          en {
+            name
+          }
+          fr {
+            name
+          }
+          parent {
+            id
+          }
+        }
+      }
+      allFile(
+        filter: {extension: {eq: "json"}, relativeDirectory: {eq: "content/members"}}
+      ) {
+        nodes {
+          name
+          id
+        }
+      }
+    }
+  `)
+
+  result.data.allMembersJson.nodes.forEach(node => {
+    const member = node.en.name
+    const id = node.parent.id
+    const slug = result.data.allFile.nodes.find(node => node.id === id).name.substring(3, )
+
+    Object.keys(node).forEach(key => {
+      if (key !== "parent") {
+        const language = key
+        const template = "MemberPage.js"
+
+        createPage({
+          path: `${language === "en" ? "" : "/fr"}/members/${slug}`,
+          component: path.resolve(`./src/templates/${template}`),
+          context: { slug: slug, language: language, member: member }
+        })
+      }
+    })
+  })
+}

src/components/MemberCard.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import styled from 'styled-components';
+import { FiLinkedin, FiGithub } from 'react-icons/fi';
+import { MdWeb } from 'react-icons/md'
+import { GatsbyImage } from "gatsby-plugin-image";
+
+export default function MemberCard({ member }) {
+  const { name, title, image, linkedin, github, website, highlights } = member
+
+  return (
+    <MemberCardStyles>
+      <div className="flex flex-1 md:flex-row-reverse overflow-hidden bg-peach md:bg-white">
+        <GatsbyImage
+          image={image?.childImageSharp?.gatsbyImageData}
+          className="w-1/3-vw h-1/3-vw md:w-1/3 md:h-auto"
+          imgStyle={{ objectPosition: `top center` }}
+          alt={name}
+        />
+        <div className="p-2 md:p-8 w-2/3">
+          <div className="flex flex-col md:flex-row justify-between h-full md:h-auto">
+            <div>
+              <h1 className="text-sm sm:text-2xl sm:mb-2">{name}</h1>
+              <p className="text-sm sm:text-xl">{title}</p>
+            </div>
+            <div className="text-sm sm:text-2xl md:text-3xl flex">
+              {
+                linkedin &&
+                <a href={linkedin} aria-label="social media icon Linkedin" target="_blank" rel="noreferrer"><FiLinkedin className="mr-3"/></a>
+              }
+              {
+                github &&
+                <a href={github} aria-label="social media icon Github" target="_blank" rel="noreferrer"><FiGithub className="md:ml-3"/></a>
+              }
+              {
+                website &&
+                <a href={website} aria-label="social media icon Website" target="_blank" rel="noreferrer"><MdWeb className="md:ml-3"/></a>
+              }
+            </div>
+          </div>
+          {/* Highlights for large screens, show all */}
+          <ul className="py-4 hidden md:block">
+            {highlights.map(hl => <li key={hl}>{hl}</li>)}
+          </ul>
+        </div>
+      </div>
+      {/* highlights for small screen, show first few */}
+      <ul className="text-sm py-4 block md:hidden">
+        {highlights.map((hl, i) => <li key={hl + i}>{hl}</li>)}
+      </ul>
+    </MemberCardStyles>
+  );
+}
+
+const MemberCardStyles = styled.div`
+  margin: 120px auto;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.5);
+  width: 100%;
+  max-width: 960px;
+  overflow: hidden;
+  ul {
+    list-style-type: "→";
+    padding-left: 2rem;
+    li {
+      padding-left: 0.5rem;
+    }
+  }
+  p, svg {
+    color: var(--darkgrey);
+  }
+  a svg:hover {
+      color: var(--black);
+  }
+`;

src/templates/MemberPage.js

@@ -0,0 +1,69 @@
+import { graphql } from 'gatsby';
+import React from 'react'
+import MemberCard from '../components/MemberCard';
+import Layout from '../components/layout'
+import Seo from '../components/seo';
+import styled from 'styled-components';
+
+export default function MemberPageTemplate({ data, pageContext }) {
+  const locale = pageContext.language
+  const member = data.membersJson[locale]
+  console.log({ data, pageContext })
+  return (
+    <Layout>
+      <Seo title={member.name} />
+      <MemberPageStyles>
+        <MemberCard member={member} />
+      </MemberPageStyles>
+    </Layout>
+  )
+}
+
+const MemberPageStyles = styled.div`
+  min-height: calc(100vh - 56px);
+  display: grid;
+  place-content: center;
+  padding: 20px;
+`
+
+export const data = graphql`
+  query($member: String!) {
+    membersJson(en: { name: { eq: $member } }) {
+      en {
+        name
+        title
+        linkedin
+        website
+        github
+        image {
+          childImageSharp {
+            gatsbyImageData(
+              width: 360,
+              height: 500,
+              placeholder: BLURRED,
+              layout: CONSTRAINED
+            )
+          }
+        }
+        highlights
+      }
+      fr {
+        name
+        title
+        linkedin
+        website
+        github
+        image {
+          childImageSharp {
+            gatsbyImageData(
+              width: 500,
+              placeholder: BLURRED,
+              layout: CONSTRAINED
+            )
+          }
+        }
+        highlights
+      }
+    }
+  }
+`;