Merge pull request #35 from coderbunker/revamp-partner

Simplify the partner & client logo/info update process

Author: Carms Ng

gatsby-config.js

@@ -39,7 +39,24 @@ module.exports = {
       }
     },
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaults: {
+          formats: [`auto`, `webp`],
+          placeholder: `dominantColor`,
+          quality: 50,
+          breakpoints: [750, 1080, 1366, 1920],
+          backgroundColor: `transparent`,
+          tracedSVGOptions: {},
+          blurredOptions: {},
+          jpgOptions: {},
+          pngOptions: {},
+          webpOptions: {},
+          avifOptions: {},
+        },
+      },
+    },
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

src/assets/content/01_ricky_ng_adam.jpg renamed to src/assets/content/members/01_ricky_ng_adam.jpg

@@ -0,0 +1,5 @@
+{
+  "name": "Drave développement",
+  "website": "https://drave.quebec/",
+  "logo": "01_drave.png"
+}

src/assets/content/01_ricky_ng_adam.json renamed to src/assets/content/members/01_ricky_ng_adam.json

@@ -0,0 +1,5 @@
+{
+  "name": "Blue Communications Inc.",
+  "website": "https://www.whynotblue.com/",
+  "logo": "03_whynotblue.png"
+}

src/assets/content/02_jeremy_viau_trudel.jpg renamed to src/assets/content/members/02_jeremy_viau_trudel.jpg

@@ -0,0 +1,5 @@
+{
+  "name": "Agrimétrie",
+  "website": "https://www.agrimetrie.com/",
+  "logo": "04_agrimetrie.png"
+}

src/assets/content/02_jeremy_viau_trudel.json renamed to src/assets/content/members/02_jeremy_viau_trudel.json

@@ -0,0 +1,5 @@
+{
+  "name": "E-SMART Control Inc.",
+  "website": "https://esmartcontrol.com/",
+  "logo": "05_esmart.png"
+}

src/assets/content/03_mathieu_gauthier_pilote.jpg renamed to src/assets/content/members/03_mathieu_gauthier_pilote.jpg

@@ -0,0 +1,5 @@
+{
+  "name": "Pipemind",
+  "website": "https://www.pipemind.com/",
+  "logo": "06_pipemind.png"
+}

src/assets/content/03_mathieu_gauthier_pilote.json renamed to src/assets/content/members/03_mathieu_gauthier_pilote.json

@@ -0,0 +1,5 @@
+{
+  "name": "La Console",
+  "website": "https://www.laconsole.org/",
+  "logo": "07_laconsole.png"
+}

src/assets/content/04_angdi_chu.jpg renamed to src/assets/content/members/04_angdi_chu.jpg

@@ -4,8 +4,8 @@ import CarouselCard from "./carousel-card";
 
 export default function Carousel({ teamIndex, setTeamIndex, locale }) {
   // Query all team member info
-  const { content } = useStaticQuery(graphql`{
-    content: allContentJson(sort: {fields: en___image___base, order: ASC}) {
+  const { allMembersJson } = useStaticQuery(graphql`{
+    allMembersJson(sort: {fields: en___image___base, order: ASC}) {
       nodes {
         en {
           name
@@ -44,7 +44,7 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {
     }
   }`);
 
-  const members = content.nodes
+  const members = allMembersJson.nodes
   const membersLocalized = members.map(member => member[locale])
 
   return (

src/assets/content/04_angdi_chu.json renamed to src/assets/content/members/04_angdi_chu.json

@@ -7,39 +7,41 @@ import { Trans } from 'gatsby-plugin-react-i18next';
 
 export default function LogoGarden() {
   // query all partnerlogos
-  const data = useStaticQuery(graphql`{
-    allFile(filter: {absolutePath: {regex: "/logos/"}}) {
-      edges {
-        node {
-          base
+  const { allPartnersJson } = useStaticQuery(graphql`{
+    allPartnersJson(sort: {fields: logo___base, order: ASC}) {
+      nodes {
+        id
+        name
+        website
+        logo {
           childImageSharp {
             gatsbyImageData(
-              width: 150,
-              placeholder: BLURRED,
-              layout: CONSTRAINED
+              width: 120,
+              height: 60,
+              placeholder: TRACED_SVG,
+              layout: CONSTRAINED,
+              transformOptions: {fit: CONTAIN, grayscale: true}
             )
-            id
           }
         }
       }
     }
   }`);
-  const logos = data.allFile.edges;
+
   return (
     <LogoGardenStyles>
       <SiteBorderStyles>
         <p className="text-center">
           <Trans>Trusted by these partners and clients</Trans>
         </p>
-        <div className="logos">
-          {logos.map(({node}) => (
-            <GatsbyImage
-              width={150}
-              image={node.childImageSharp.gatsbyImageData}
-              imgStyle={{ width: `auto`, height: `auto`, top: `50%`, left: `50%`, transform: `translate(-50%, -50%)`}}
-              className="m-4"
-              key={node.childImageSharp.id}
-              alt={node.base.split('.')[0]} />
+        <div className="horizontal-scroll-wrapper">
+          {allPartnersJson.nodes.map(partner => (
+            <a title={partner.name} href={partner.website} target="_blank" rel="noreferrer" key={partner.id}>
+              <GatsbyImage
+                image={partner.logo?.childImageSharp.gatsbyImageData}
+                imgStyle={{ objectFit: `contain` }}
+                alt={partner.name} />
+            </a>
           ))}
         </div>
       </SiteBorderStyles>
@@ -49,31 +51,39 @@ export default function LogoGarden() {
 
 const LogoGardenStyles = styled.div`
   background-color: var(--lightgrey);
-  height: 20vh;
-  padding: 20px 0;
   p {
     color: var(--darkgrey);
   }
-  .logos {
-    scroll-snap-type: x mandatory;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    margin-top: 5px;
-    height: 13vh;
-    place-items: center center;
-    -webkit-overflow-scrolling: touch;
+  > div {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    height: 20vh;
+  }
+  .horizontal-scroll-wrapper {
+    height: 100%;
+    max-width: unset;
     overflow-x: scroll;
     overflow-y: hidden;
-    /* Hide scrollbar for IE, Edge and Firefox */
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
-    & > * {
-      scroll-snap-align: start;
-      min-width: 150px;
-    }
-    /* Hide scrollbar for Chrome, Safari and Opera */
+    white-space: nowrap;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
     &::-webkit-scrollbar {
       display: none;
     }
+    > a {
+      display: inline-table;
+      height: 100%;
+      padding: 0 1rem;
+      > div {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+    @media (min-width: 1024px) {
+      > a {
+        margin: 0 1rem;
+      }
+      margin: 0 auto;
+    }
   }
 `;

src/assets/content/partners/01_drave.json

@@ -4,8 +4,8 @@ import { GatsbyImage } from "gatsby-plugin-image";
 
 export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef }) {
   // Query all team name and image sorted by image file name
-  const { content } = useStaticQuery(graphql`{
-    content: allContentJson(sort: {fields: en___image___base, order: ASC}) {
+  const { allMembersJson } = useStaticQuery(graphql`{
+    allMembersJson(sort: {fields: en___image___base, order: ASC}) {
       nodes {
         en {
           name
@@ -44,7 +44,7 @@ export default function StackedAvatar({ sectionRefs, setTeamIndex, pausedRef })
     }, 25);
   }
 
-  const members = content.nodes.map(member => member.en)
+  const members = allMembersJson.nodes.map(member => member.en)
 
   return (
     <div className="py-8 flex">

src/assets/content/partners/01_drave.png

@@ -30,7 +30,6 @@ export default function IndexPage({ pageContext }) {
     }
   }
 
-  // const [step, setStep] = useState(0)
   useEffect(() => {
     // initialize Animation on Scroll
     AOS.init({ offset: 50 });