feat: add caption to user links

v1/lib/core/CompLibrary.js

@@ -8,10 +8,12 @@
 const MarkdownBlock = require('./MarkdownBlock.js');
 const Container = require('./Container.js');
 const GridBlock = require('./GridBlock.js');
+const Showcase = require('./Showcase.js');
 
 // A collection of components to provide to users
 module.exports = {
   MarkdownBlock,
   Container,
   GridBlock,
+  Showcase,
 };

v1/lib/core/Showcase.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const PropTypes = require('prop-types');
+
+class UserLink extends React.Component {
+  render() {
+    const {infoLink, image, caption} = this.props;
+
+    return (
+      <a className="link" href={infoLink} key={infoLink}>
+        <img src={image} alt={caption} title={caption} />
+        <span className="caption">{caption}</span>
+      </a>
+    );
+  }
+}
+
+UserLink.propTypes = {
+  infoLink: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
+  caption: PropTypes.string.isRequired,
+};
+
+class Showcase extends React.Component {
+  render() {
+    const {users} = this.props;
+    return (
+      <div className="showcase">
+        {users.map(user => (
+          <UserLink key={user.infoLink} {...user} />
+        ))}
+      </div>
+    );
+  }
+}
+
+Showcase.propTypes = {
+  users: PropTypes.array.isRequired,
+};
+
+Showcase.defaultProps = {
+  users: [],
+};
+
+module.exports = Showcase;

v1/lib/static/css/main.css

@@ -2173,29 +2173,52 @@ input::placeholder {
   padding: 0.8em 0;
 }
 
-.productShowcaseSection .logos {
+/* Start of Showcase */
+.showcase {
   align-items: center;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
-  padding: 20px;
+  margin-bottom: 20px;
 }
 
-.productShowcaseSection .logos img {
+.showcase .link {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 170px;
+  margin: 5px;
+  padding: 5px;
+}
+
+.showcase .link:hover {
+  text-decoration: underline;
+}
+
+.showcase .link .caption {
+  line-height: 20px;
+  height: 20px;
+}
+
+.showcase .link img {
   max-height: 110px;
   padding: 20px;
   width: 110px;
+  align-self: center;
 }
 
 @media only screen and (max-width: 735px) {
-  .productShowcaseSection .logos img {
+  .showcase .link {
+    height: 134px;
+  }
+
+  .showcase .link img {
     max-height: 64px;
     padding: 20px;
     width: 64px;
   }
 }
 
-/* Start of Showcase */
 .showcaseSection {
   margin: 0 auto;
   max-width: 900px;
@@ -2211,27 +2234,6 @@ input::placeholder {
   max-width: 560px;
   text-align: center;
 }
-
-.showcaseSection .logos {
-  align-items: center;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
-
-.showcaseSection .logos img {
-  max-height: 128px;
-  padding: 20px;
-  width: 128px;
-}
-
-@media only screen and (max-width: 735px) {
-  .showcaseSection .logos img {
-    max-height: 64px;
-    padding: 20px;
-    width: 64px;
-  }
-}
 /* End of Showcase */
 
 /* Start of Footer */

v1/website/pages/en/index.js

@@ -10,6 +10,7 @@ const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
+const Showcase = CompLibrary.Showcase;
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translate = require('../../server/translate.js').translate;
 
@@ -74,11 +75,7 @@ class HomeSplash extends React.Component {
 class Index extends React.Component {
   render() {
     const language = this.props.language || 'en';
-    const showcase = siteConfig.users.filter(user => user.pinned).map(user => (
-      <a href={user.infoLink} key={user.infoLink}>
-        <img src={user.image} alt={user.caption} title={user.caption} />
-      </a>
-    ));
+    const pinnedUsersToShowcase = siteConfig.users.filter(user => user.pinned);
 
     return (
       <div>
@@ -234,7 +231,7 @@ class Index extends React.Component {
                 Docusaurus is building websites for these projects...
               </translate>
             </p>
-            <div className="logos">{showcase}</div>
+            <Showcase users={pinnedUsersToShowcase} />
             <div className="more-users">
               <a
                 className="button"

v1/website/pages/en/users.js

@@ -9,26 +9,27 @@ const React = require('react');
 const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
+const Showcase = CompLibrary.Showcase;
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translate = require('../../server/translate.js').translate;
 
 class Users extends React.Component {
-  renderUser(user) {
-    return (
-      <a href={user.infoLink} key={user.infoLink}>
-        <img src={user.image} alt={user.caption} title={user.caption} />
-      </a>
-    );
+  getUsersToShowcase() {
+    const fbUsersToShowcase = [];
+    const restToShowcase = [];
+    siteConfig.users.forEach(user => {
+      if (user.fbOpenSource) fbUsersToShowcase.push(user);
+      else restToShowcase.push(user);
+    });
+
+    return {
+      fbUsersToShowcase,
+      restToShowcase,
+    };
   }
 
   render() {
-    const fbShowcase = siteConfig.users
-      .filter(user => user.fbOpenSource)
-      .map((user, i) => this.renderUser(user, i));
-
-    const showcase = siteConfig.users
-      .filter(user => !user.fbOpenSource)
-      .map((user, i) => this.renderUser(user, i));
+    const {fbUsersToShowcase, restToShowcase} = this.getUsersToShowcase();
 
     return (
       <div className="mainContainer">
@@ -46,15 +47,15 @@ class Users extends React.Component {
                 .
               </p>
             </div>
-            <div className="logos">{fbShowcase}</div>
+            <Showcase users={fbUsersToShowcase} />
             <div className="prose">
               <p>
                 <translate>
                   Docusaurus is also used by open source projects of all sizes.
                 </translate>
               </p>
             </div>
-            <div className="logos">{showcase}</div>
+            <Showcase users={restToShowcase} />
             <div className="prose">
               <p>
                 <translate>Is your project using Docusaurus?</translate>