Merge pull request #39 from coderbunker/add-portfolio-link

Carms Ng · web-flow · commit 5298b09238ba · 2021-09-17T02:32:12.000-04:00
Create Member Pages
diff --git a/gatsby-config.js b/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']
+          }
+        ]
       }
     }
   ],
diff --git a/gatsby-node.js b/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 }
+        })
+      }
+    })
+  })
+}
diff --git a/src/components/CarouselCard.js b/src/components/CarouselCard.js
diff --git a/src/components/MemberCard.js b/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);
+  }
+`;
diff --git a/src/components/carousel.js b/src/components/carousel.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
-import CarouselCard from "./carousel-card";
+import CarouselCard from "./CarouselCard";
 
 export default function Carousel({ teamIndex, setTeamIndex, locale }) {
   // Query all team member info
diff --git a/src/components/contact.js b/src/components/contact.js
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { StaticImage } from "gatsby-plugin-image";
 
 import SiteBorderStyles from '../styles/SiteBorderStyles';
-import Footer from "./footer";
 
 import { AiTwotoneMail, AiTwotonePhone } from 'react-icons/ai';
 import { FiMapPin } from 'react-icons/fi'
@@ -47,7 +46,6 @@ export default function Contact() {
           <ContactForm />
         </div>
       </SiteBorderStyles>
-      <Footer />
       <div
         className="absolute"
         style={{zIndex: `-1`, width: `50vw`, left: `0`, bottom: `5vh`}}>
@@ -63,6 +61,7 @@ export default function Contact() {
 }
 
 const ContactStyles = styled.section`
+  height: calc(100vh - 56px);
   position: relative;
   display: flex;
   flex-direction: column;
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -5,6 +5,7 @@ import { FiGithub, FiLinkedin } from "react-icons/fi";
 import { Trans } from "react-i18next";
 
 const FooterStyle = styled.footer`
+  padding: 100px;
   background: var(--black);
   padding: 0.5rem 0;
   color: var(--lightgrey);
@@ -15,7 +16,7 @@ export default function Footer() {
     <FooterStyle>
       <SiteBorderStyles>
         {/* social links*/}
-        <div className="flex my-1 md:my-2 items-center justify-between md:justify-center md:text-xl">
+        <div className="flex my-1 md:my-2 items-center justify-between md:justify-center">
           <p className="" style={{ color: `var(--lightgrey)` }}>
             © {new Date().getFullYear()} Coderbunker, inc.
           </p>
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { useStaticQuery, graphql } from "gatsby";
 import GlobalStyles from '../styles/GlobalStyles';
 import Typography from '../styles/Typography';
+import Footer from "./footer";
 
 import Header from "./header";
 
@@ -23,6 +24,7 @@ export default function Layout({ children }) {
       <GlobalStyles/>
       <Typography/>
       <main>{children}</main>
+      <Footer />
     </>
   )
 }
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -3,31 +3,35 @@ import { graphql } from 'gatsby';
 import { Trans } from "gatsby-plugin-react-i18next";
 import Layout from "../components/layout";
 import Seo from "../components/seo";
-import SiteBorderStyles from "../styles/SiteBorderStyles";
+import styled from "styled-components";
 
 export default function NotFoundPage() {
   return (
     <Layout>
       <Seo title="404" />
-      <SiteBorderStyles>
-        <section>
-          <div className="text-left md:text-center py-4 md:pt-16 md:pb-8 lg:pt-24 md:pb-8">
-            <h2 className="text-3xl lg:text-4xl">
-              <span className="highlight-red">
-                404
-              </span>
-              <Trans> Page Not Found</Trans>
-            </h2>
-            <p className="text-xl lg:text-2xl my-4" style={{color: `var(--darkgrey)`}}>
-              <Trans>You just hit a route that doesn&#39;t exist... the sadness.</Trans>
-            </p>
-          </div>
-        </section>
-      </SiteBorderStyles>
+      <FourOhFourStyles>
+        <div className="text-left md:text-center py-4 md:pt-16 md:pb-8 lg:pt-24 md:pb-8">
+          <h2 className="text-3xl lg:text-4xl">
+            <span className="highlight-red">
+              404
+            </span>
+            <Trans> Page Not Found</Trans>
+          </h2>
+          <p className="text-xl lg:text-2xl my-4" style={{color: `var(--darkgrey)`}}>
+            <Trans>You just hit a route that doesn&#39;t exist... the sadness.</Trans>
+          </p>
+        </div>
+      </FourOhFourStyles>
     </Layout>
   )
 }
 
+const FourOhFourStyles = styled.div`
+  height: calc(100vh - 56px);
+  display: grid;
+  place-content: center;
+`
+
 export const query = graphql`
   query($language: String!) {
     locales: allLocale(filter: {language: {eq: $language}}) {
diff --git a/src/templates/MemberPage.js b/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]
+
+  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
+      }
+    }
+  }
+`;

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import PropTypes from "prop-types";`
`3`	`3`	`import { useStaticQuery, graphql } from "gatsby";`
`4`	`4`	`import GlobalStyles from '../styles/GlobalStyles';`
`5`	`5`	`import Typography from '../styles/Typography';`
	`6`	`+import Footer from "./footer";`
`6`	`7`
`7`	`8`	`import Header from "./header";`
`8`	`9`
`@@ -23,6 +24,7 @@ export default function Layout({ children }) {`
`23`	`24`	`<GlobalStyles/>`
`24`	`25`	`<Typography/>`
`25`	`26`	`<main>{children}</main>`
	`27`	`+ <Footer />`
`26`	`28`	`</>`
`27`	`29`	`)`
`28`	`30`	`}`