optimize contributors section (webpack#5436)

* optimize contributors section

* fix e2e test

* fix e2e test

* update gap for mobile

* hide contributors from printer

Author: chenxsan

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/"]';
 

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

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-[10px] lg: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>
+  );
 }

src/components/Contributors/Contributors.scss

@@ -114,8 +114,10 @@ export default function Page(props) {
         )}
 
         {loadContributors && (
-          <div className="contributors__section">
-            <h3>Contributors</h3>
+          <div data-testid="contributors" className="print:hidden">
+            <h2 className="!font-sans !font-normal">
+              {contributors.length} Contributors
+            </h2>
             <Contributors contributors={contributors} />
           </div>
         )}

src/components/Page/Page.jsx

@@ -12,6 +12,9 @@ module.exports = {
       fontSize: {
         14: '14px',
       },
+      gridTemplateColumns: {
+        contributors: 'repeat(auto-fit, 36px)',
+      },
     },
     spacing: {
       0: '0px',