feat: add caption to user links (#1075)

* feat: add caption to users links

created a shared component `Showcase`

* Cleans linter

* revert main.css changes — update custom.css

* Move Showcase comp to website out of lib - fix layout

v1/website/core/Showcase.js

@@ -0,0 +1,40 @@
+/**
+ * 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');
+
+const UserLink = ({infoLink, image, caption}) => (
+  <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,
+};
+
+const Showcase = ({users}) => (
+  <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/website/pages/en/index.js

@@ -6,10 +6,12 @@
  */
 
 const React = require('react');
+
 const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
+const Showcase = require(`${process.cwd()}/core/Showcase.js`);
 const siteConfig = require(`${process.cwd()}/siteConfig.js`);
 const translate = require('../../server/translate.js').translate;
 
@@ -74,11 +76,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 => (
+    const pinnedUsersToShowcase = siteConfig.users.filter(user => user.pinned);
-      <a href={user.infoLink} key={user.infoLink}>
-        <img src={user.image} alt={user.caption} title={user.caption} />
-      </a>
-    ));
 
     return (
       <div>
@@ -234,7 +232,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,16 @@ const React = require('react');
 const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
+const Showcase = require(`${process.cwd()}/core/Showcase.js`);
 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>
-    );
-  }
-
   render() {
-    const fbShowcase = siteConfig.users
+    const fbUsersToShowcase = siteConfig.users.filter(
-      .filter(user => user.fbOpenSource)
+      user => user.fbOpenSource,
-      .map((user, i) => this.renderUser(user, i));
+    );
-
+    const restToShowcase = siteConfig.users.filter(user => !user.fbOpenSource);
-    const showcase = siteConfig.users
-      .filter(user => !user.fbOpenSource)
-      .map((user, i) => this.renderUser(user, i));
 
     return (
       <div className="mainContainer">
@@ -46,7 +36,7 @@ class Users extends React.Component {
                 .
               </p>
             </div>
-            <div className="logos">{fbShowcase}</div>
+            <Showcase users={fbUsersToShowcase} />
             <div className="prose">
               <p>
                 <translate>
@@ -54,7 +44,7 @@ class Users extends React.Component {
                 </translate>
               </p>
             </div>
-            <div className="logos">{showcase}</div>
+            <Showcase users={restToShowcase} />
             <div className="prose">
               <p>
                 <translate>Is your project using Docusaurus?</translate>

v1/website/static/css/custom.css

@@ -12,3 +12,48 @@
 table td:first-child > code {
   white-space: nowrap;
 }
+
+.showcase {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.showcase .link {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 180px;
+  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) {
+  .showcase .link {
+    height: 134px;
+  }
+
+  .showcase .link img {
+    max-height: 64px;
+    padding: 20px;
+    width: 64px;
+  }
+}