From 93325bd256c274c7912d0d060a96c60592850477 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Fri, 10 Sep 2021 12:53:47 +0800
Subject: [PATCH 1/5] optimize contributors section

---
 src/components/Contributors/Contributors.jsx  | 106 +++++++++---------
 src/components/Contributors/Contributors.scss |  47 --------
 src/components/Page/Page.jsx                  |   6 +-
 tailwind.config.js                            |   3 +
 4 files changed, 60 insertions(+), 102 deletions(-)
 delete mode 100644 src/components/Contributors/Contributors.scss

diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index 75d0e0981ede..3430a749ba15 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/src/components/Contributors/Contributors.jsx
@@ -1,66 +1,66 @@
-import { Component } from 'react';
+import { useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
-import './Contributors.scss';
 import PropTypes from 'prop-types';
 import { contributorsNotFound } from './404.js';
 
-export default class Contributors extends Component {
-  static propTypes = {
-    contributors: PropTypes.array,
-  };
-  state = {
-    inView: false,
-  };
+Contributors.propTypes = {
+  contributors: PropTypes.array.isRequired,
+};
 
-  handleInView = (inView) => {
+Contributor.propTypes = {
+  contributor: PropTypes.string.isRequired,
+  inView: PropTypes.bool.isRequired,
+};
+function Contributor({ contributor, inView }) {
+  return (
+    <a key={contributor} href={`https://github.com/${contributor}`}>
+      <img
+        width={45}
+        height={45}
+        alt={contributor}
+        title={contributor}
+        className="w-full rounded-full shadow"
+        src={
+          inView ? `https://github.com/${contributor}.png?size=90` : SmallIcon
+        }
+      />
+    </a>
+  );
+}
+
+export default function Contributors({ contributors }) {
+  const [inView, setInView] = useState(false);
+  const handleInView = (inView) => {
     if (!inView) {
       return;
     }
-    this.setState({ inView });
+    setInView(inView);
   };
+  if (!contributors.length) {
+    return <noscript />;
+  }
 
-  render() {
-    const { inView } = this.state;
-    const { contributors } = this.props;
-
-    if (!contributors.length) {
-      return <noscript />;
-    }
-
-    return (
-      <VisibilitySensor
-        delayedCall
-        partialVisibility
-        intervalDelay={300}
-        onChange={this.handleInView}
-      >
-        <div className="contributors">
-          <div className="contributors__list">
-            {contributors
-              .filter((c) => contributorsNotFound.includes(c) === false)
-              .map((contributor) => (
-                <a
-                  key={contributor}
-                  className="contributor"
-                  href={`https://github.com/${contributor}`}
-                >
-                  <img
-                    width={45}
-                    height={45}
-                    alt={contributor}
-                    src={
-                      inView
-                        ? `https://github.com/${contributor}.png?size=90`
-                        : SmallIcon
-                    }
-                  />
-                  <span className="contributor__name"> {contributor}</span>
-                </a>
-              ))}
-          </div>
+  return (
+    <VisibilitySensor
+      delayedCall
+      partialVisibility
+      intervalDelay={300}
+      onChange={handleInView}
+    >
+      <div>
+        <div className="grid gap-[15px] grid-cols-contributors">
+          {contributors
+            .filter((c) => contributorsNotFound.includes(c) === false)
+            .map((contributor) => (
+              <Contributor
+                key={contributor}
+                contributor={contributor}
+                inView={inView}
+              />
+            ))}
         </div>
-      </VisibilitySensor>
-    );
-  }
+      </div>
+    </VisibilitySensor>
+  );
 }
diff --git a/src/components/Contributors/Contributors.scss b/src/components/Contributors/Contributors.scss
deleted file mode 100644
index 31862010bcc3..000000000000
--- a/src/components/Contributors/Contributors.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import 'functions';
-@import 'mixins';
-
-.contributors__section {
-  @media print {
-    display: none;
-  }
-}
-
-.contributors__list {
-  font-size: 14px;
-  margin-left: -0.5em;
-}
-
-.contributor {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 0.5em;
-
-  img {
-    height: 45px;
-    width: 45px;
-    border-radius: 50%;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
-  }
-
-  .contributor__name {
-    width: 110px;
-    margin-top: -6px;
-    padding: 0 6px;
-    line-height: 1.4;
-    border-radius: 2px;
-    text-align: center;
-    overflow-wrap: break-word;
-    hyphens: auto;
-    color: getColor(fiord);
-    background: transparentize(getColor(white), 0.05);
-    transition: color 0.1s;
-  }
-
-  &:hover {
-    .contributor__name {
-      color: lighten(getColor(denim), 5%);
-    }
-  }
-}
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index 2b6454ec08fc..f0c91b1c99c7 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -114,8 +114,10 @@ export default function Page(props) {
         )}
 
         {loadContributors && (
-          <div className="contributors__section">
-            <h3>Contributors</h3>
+          <div className="">
+            <h2 className="!font-sans !font-normal">
+              {contributors.length} Contributors
+            </h2>
             <Contributors contributors={contributors} />
           </div>
         )}
diff --git a/tailwind.config.js b/tailwind.config.js
index f2359ca5321c..b379c2d54fc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,9 @@ module.exports = {
       fontSize: {
         14: '14px',
       },
+      gridTemplateColumns: {
+        contributors: 'repeat(auto-fit, 36px)',
+      },
     },
     spacing: {
       0: '0px',

From 01778e339e14b3b3c8ff96d4e0bef04e1ea1fb1e Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Fri, 10 Sep 2021 13:20:41 +0800
Subject: [PATCH 2/5] fix e2e test

---
 cypress/integration/scroll_spec.js | 6 +++---
 src/components/Page/Page.jsx       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/scroll_spec.js b/cypress/integration/scroll_spec.js
index 37e2c0fc17a0..dc2ac68f3d3f 100644
--- a/cypress/integration/scroll_spec.js
+++ b/cypress/integration/scroll_spec.js
@@ -5,17 +5,17 @@ describe('Scroll Test', () => {
       cy.viewport(size);
       cy.visit('/guides/getting-started');
       // scroll to Contributors section
-      cy.get('.contributors__section').scrollIntoView();
+      cy.get('[data-testid="contributors"]').scrollIntoView();
 
       cy.isNotInViewport('#basic-setup');
 
       cy.visit('/guides/build-performance/');
-      cy.isNotInViewport('.contributors__section');
+      cy.isNotInViewport('[data-testid="contributors"]');
     });
     it(`scroll to fragment when accessing new page with fragment on ${size}`, () => {
       cy.viewport(size);
       cy.visit('/guides/getting-started');
-      cy.get('.contributors__section').scrollIntoView();
+      cy.get('[data-testid="contributors"]').scrollIntoView();
 
       cy.visit('/guides/build-performance/#development');
       // since we lazy load notification bar now, #development element is a little out of viewport now
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index f0c91b1c99c7..e16a291247ea 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -114,7 +114,7 @@ export default function Page(props) {
         )}
 
         {loadContributors && (
-          <div className="">
+          <div data-testid="contributors">
             <h2 className="!font-sans !font-normal">
               {contributors.length} Contributors
             </h2>

From 81d4babfd1c53581f276af5ce4f48799223ba718 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Fri, 10 Sep 2021 13:26:55 +0800
Subject: [PATCH 3/5] fix e2e test

---
 cypress/integration/click-menu-scroll-top_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/click-menu-scroll-top_spec.js b/cypress/integration/click-menu-scroll-top_spec.js
index 932144da8186..266d0397cee6 100644
--- a/cypress/integration/click-menu-scroll-top_spec.js
+++ b/cypress/integration/click-menu-scroll-top_spec.js
@@ -3,7 +3,7 @@ describe('Click menu', () => {
     cy.visit('/concepts/modules/');
     // scroll to Contributors section
     // note that there's no hash in url
-    cy.get('.contributors__section').scrollIntoView();
+    cy.get('[data-testid="contributors"]').scrollIntoView();
 
     const selector = '.sidebar-item__title[href="/concepts/modules/"]';
 

From 306ffcf69bf0e79d0267bc26b3bc968bc21e8353 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 11 Sep 2021 11:32:54 +0800
Subject: [PATCH 4/5] update gap for mobile

---
 src/components/Contributors/Contributors.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index 3430a749ba15..8d0eca7cc0b5 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/src/components/Contributors/Contributors.jsx
@@ -49,7 +49,7 @@ export default function Contributors({ contributors }) {
       onChange={handleInView}
     >
       <div>
-        <div className="grid gap-[15px] grid-cols-contributors">
+        <div className="grid gap-[10px] lg:gap-[15px] grid-cols-contributors">
           {contributors
             .filter((c) => contributorsNotFound.includes(c) === false)
             .map((contributor) => (

From b8aec8949280b8d87806f3e67b9a6ad9b324e9d4 Mon Sep 17 00:00:00 2001
From: chenxsan <chenxsan@gmail.com>
Date: Sat, 11 Sep 2021 11:55:34 +0800
Subject: [PATCH 5/5] hide contributors from printer

---
 src/components/Page/Page.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index e16a291247ea..82faeabd4a6e 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -114,7 +114,7 @@ export default function Page(props) {
         )}
 
         {loadContributors && (
-          <div data-testid="contributors">
+          <div data-testid="contributors" className="print:hidden">
             <h2 className="!font-sans !font-normal">
               {contributors.length} Contributors
             </h2>