Add user showcase to website

website/core/Showcase.js

@@ -0,0 +1,35 @@
+/**
+ * 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 href={infoLink} key={infoLink}>
+        <img src={image} alt={caption} title={caption} />
+    </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,
+};
+
+module.exports = Showcase;

website/data/users.json

@@ -0,0 +1,64 @@
+[   {
+        "caption": "Adaptive Financial Consulting",
+        "image": "/img/users/adaptive.webp",
+        "infoLink": "https://weareadaptive.com/",
+        "pinned": true,
+        "isMember": false
+    },
+    {
+        "caption": "FactSet",
+        "image": "/img/users/FactSet.webp",
+        "infoLink": "https://www.factset.com/",
+        "pinned": true,
+        "isMember": true
+    },
+    {
+        "caption": "Glue42",
+        "image": "/img/users/GLUE42.webp",
+        "infoLink": "https://glue42.com/",
+        "pinned": true,
+        "isMember": true
+    },
+    {
+        "caption": "GreenKey",
+        "image": "/img/users/GreenKey.webp",
+        "infoLink": "https://www.greenkey.global/",
+        "pinned": true,
+        "isMember": true
+    },
+    {
+        "caption": "IHS Markit",
+        "image": "/img/users/IHSMarkit.webp",
+        "infoLink": "https://ihsmarkit.com/",
+        "pinned": true,
+        "isMember": true
+    },
+    {
+        "caption": "JP Morgan",
+        "image": "/img/users/JPMorgan.webp",
+        "infoLink": "https://www.jpmorgan.com/",
+        "pinned": true,
+        "isMember": true
+    },    
+    {
+        "caption": "OpenFin",
+        "image": "/img/users/Openfin.webp",
+        "infoLink": "https://openfin.co/",
+        "pinned": true,
+        "isMember": true
+    },
+    {
+        "caption": "Refinitv",
+        "image": "/img/users/Refinitiv.webp",
+        "infoLink": "https://www.refinitiv.com/",
+        "pinned": true,
+        "isMember": true
+    },
+    {
+        "caption": "Scott Logic",
+        "image": "/img/users/scottlogic.png",
+        "infoLink": "https://www.scottlogic.com/",
+        "pinned": true,
+        "isMember": true
+    }
+]

website/pages/en/index.js

@@ -9,6 +9,8 @@ const React = require('react');
 
 const CompLibrary = require('../../core/CompLibrary.js');
 
+const Showcase = require(`${process.cwd()}/core/Showcase.js`);
+
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
@@ -97,55 +99,6 @@ class Index extends React.Component {
       </Container>
     );
 
-    const FeatureCallout = () => (
-      <div
-        className="productShowcaseSection paddingBottom"
-        style={{textAlign: 'center'}}>
-        <h2>Use Cases</h2>
-        <MarkdownBlock>{`Document business [use cases](${docUrl('use-cases/overview')}) that drive FDC3 interoperability standards.`}</MarkdownBlock>
-      </div>
-    );
-
-    const TryOut = () => (
-      <Block id="try">
-        {[
-          {
-            content: 'Talk about trying this out',
-            image: `${baseUrl}img/docusaurus.svg`,
-            imageAlign: 'left',
-            title: 'Try it Out',
-          },
-        ]}
-      </Block>
-    );
-
-    const Description = () => (
-      <Block background="dark">
-        {[
-          {
-            content:
-              'This is another description of how this project is useful',
-            image: `${baseUrl}img/docusaurus.svg`,
-            imageAlign: 'right',
-            title: 'Description',
-          },
-        ]}
-      </Block>
-    );
-
-    const LearnHow = () => (
-      <Block background="light">
-        {[
-          {
-            content: 'Talk about learning how to use this',
-            image: `${baseUrl}img/docusaurus.svg`,
-            imageAlign: 'right',
-            title: 'Learn How',
-          },
-        ]}
-      </Block>
-    );
-
     const Features = () => (
       <Block background="light" layout="fourColumn">
         {[
@@ -179,31 +132,42 @@ class Index extends React.Component {
       </Block>
     );
 
-    const Showcase = () => {
+    const FeatureCallout = () => (
+      <div className="productShowcaseSection paddingBottom" style={{textAlign: 'center'}}>
+        <h2>Use Cases</h2>
+        <MarkdownBlock>{`Document business [use cases](${docUrl('use-cases/overview')}) that drive FDC3 interoperability standards.`}</MarkdownBlock>
+      </div>
+    );
+
+    const FinosBanner = () => (
+      <div className="finos lightBackground">
+        <h2>Proud member of the Fintech Open Source Foundation</h2>
+        <a href="https://www.finos.org">
+          <img src={`${baseUrl}img/finos_wordmark.svg`} height='150px' alt="FINOS" title="FINOS"/>
+        </a>
+      </div>
+    );
+
+    const UserShowcase = () => {
       if ((siteConfig.users || []).length === 0) {
         return null;
       }
 
-      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 pinnedUsers = siteConfig.users.filter(user => user.pinned);
 
       const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
 
       return (
         <div className="productShowcaseSection paddingBottom">
-          <h2>Who is Using This?</h2>
-          <p>This project is used by all these people</p>
-          <div className="logos">{showcase}</div>
-          <div className="more-users">
+          <h2>Who is Using FDC3?</h2>
+          <p>FDC3 is used by several industry-leading organisations...</p>
+          <Showcase users={pinnedUsers} />
+          {/* exclude button to users page for now, all users shown on main page */}
+          {/* <div className="more-users">
             <a className="button" href={pageUrl('users.html')}>
-              More {siteConfig.title} Users
+              All {siteConfig.title} Users
             </a>
-          </div>
+          </div> */}
         </div>
       );
     };
@@ -214,10 +178,8 @@ class Index extends React.Component {
         <div className="mainContainer">
           <Features />
           <FeatureCallout />
-          {/* <LearnHow />
-          <TryOut />
-          <Description />
-          <Showcase /> */}
+          <FinosBanner />
+          <UserShowcase />
         </div>
       </div>
     );

website/pages/en/users.js

@@ -11,14 +11,22 @@ const CompLibrary = require('../../core/CompLibrary.js');
 
 const Container = CompLibrary.Container;
 
+const Showcase = require(`${process.cwd()}/core/Showcase.js`);
+
 class Users extends React.Component {
   render() {
     const {config: siteConfig} = this.props;
     if ((siteConfig.users || []).length === 0) {
       return null;
     }
 
-    const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
+    const editUrl = `${siteConfig.repoUrl}/edit/master/website/data/users.json`;
+
+    const membersToShowcase = siteConfig.users.filter(
+      user => user.isMember,
+    );
+    const othersToShowcase = siteConfig.users.filter(user => !user.isMember);
+
     const showcase = siteConfig.users.map(user => (
       <a href={user.infoLink} key={user.infoLink}>
         <img src={user.image} alt={user.caption} title={user.caption} />
@@ -27,14 +35,19 @@ class Users extends React.Component {
 
     return (
       <div className="mainContainer">
-        <Container padding={['bottom', 'top']}>
+        <Container>
           <div className="showcaseSection">
             <div className="prose">
-              <h1>Who is Using This?</h1>
-              <p>This project is used by many folks</p>
+              <h1>Who is Using FDC3?</h1>
+              <p>FDC3 has several industry-leading <a href="https://www.finos.org/become-a-member">member participants.</a></p>
+            </div>
+            <Showcase users={membersToShowcase} />
+            {/* <div className="logos">{showcase}</div> */}
+            <div className="prose paddingTop">
+              <p>FDC3 is also used by financial organizations of all sizes.</p>
             </div>
-            <div className="logos">{showcase}</div>
-            <p>Are you using this project?</p>
+            <Showcase users={othersToShowcase} />
+            <p>Are you using FDC3?</p>
             <a href={editUrl} className="button">
               Add your company
             </a>

website/siteConfig.js

@@ -9,16 +9,8 @@
 // site configuration options.
 
 // List of projects/orgs using your project for the users page.
-const users = [
-  {
-    caption: 'User1',
-    // You will need to prepend the image path with your baseUrl
-    // if it is not '/', like: '/test-site/img/docusaurus.svg'.
-    image: '/img/docusaurus.svg',
-    infoLink: 'https://www.facebook.com',
-    pinned: true,
-  },
-];
+
+const users = require('./data/users.json');
 
 const siteConfig = {
   title: 'FDC3', // Title for your website.
@@ -53,7 +45,7 @@ const siteConfig = {
   /* Colors for website */
   colors: {
     primaryColor: '#00b5e2',
-    secondaryColor: '#0086bf',
+    secondaryColor: '#0086bf'
   },
 
   /* Custom fonts for website */

website/static/css/custom.css

@@ -25,4 +25,33 @@ header.postHeader:empty + article h1 {
 
 .imageAlignTop .blockImage {
   max-width: 220px;
-}
+}
+
+.productShowcaseSection .logos img {
+  width: 200px;
+}
+
+.showcaseSection .logos img {
+  width: 250px;
+}
+
+.showcase {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  padding: 20px;
+}
+
+.showcase img {
+  width: 250px;
+  max-height: 150px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.finos {
+  padding-top: 10px;
+  padding-bottom: 40px;
+  text-align: center;
+}