doc: order testing library users alphabetically, handle pinned users (testing-library#456)

* doc: order testing library users alphabetically

* Add more users using testing library

* Docs: rendomize users list

* Docs: set to false the pinned property

* handle pinned users

* update pins

Co-authored-by: Oriol Puig <[email protected]>
Co-authored-by: Alex Krolick <[email protected]>

Author: oriolpuig

website/pages/en/index.js

@@ -260,21 +260,41 @@ class Index extends React.Component {
       if ((siteConfig.users || []).length === 0) {
         return null
       }
+      const NUMBER_OF_UNPINNED_USERS_TO_SHOWCASE = 3
 
-      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 randomizedList = (arr, n) => {
+        var result = new Array(n),
+          len = arr.length,
+          taken = new Array(len)
+        if (n > len) return arr
+        while (n--) {
+          var x = Math.floor(Math.random() * len)
+          result[n] = arr[x in taken ? taken[x] : x]
+          taken[x] = --len in taken ? taken[len] : len
+        }
+        return result
+      }
+
+      const userShowcase = [
+        ...siteConfig.users.filter(u => u.pinned),
+        ...randomizedList(
+          siteConfig.users.filter(u => !u.pinned),
+          NUMBER_OF_UNPINNED_USERS_TO_SHOWCASE
+        ),
+      ]
+      
+      const userLogos = userShowcase.map(user => (
+        <a href={user.infoLink} key={user.infoLink}>
+          <img src={user.image} alt={user.caption} title={user.caption} />
+        </a>
+      ))
 
       const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page
 
       return (
         <div className="productShowcaseSection paddingBottom">
           <h2>Who is Using This?</h2>
-          <div className="logos">{showcase}</div>
+          <div className="logos">{userLogos}</div>
           <div className="more-users">
             <a className="button" href={pageUrl('users.html')}>
               More {siteConfig.title} Users

website/siteConfig.js

@@ -11,22 +11,16 @@
 // List of projects/orgs using your project for the users page.
 const users = [
   {
-    caption: 'PayPal',
-    image: '/img/users/paypal.svg',
-    infoLink: 'https://www.paypal.com',
-    pinned: true,
-  },
-  {
-    caption: 'Walmart Labs',
+    caption: 'Autodesk',
+    image: '/img/users/autodesk.svg',
+    infoLink: 'https://www.autodesk.com',
     pinned: true,
-    image: '/img/users/walmart.png',
-    infoLink: 'https://www.walmartlabs.com/',
   },
   {
-    caption: 'Tiller',
-    image: '/img/users/tiller.svg',
-    infoLink: 'https://www.tillersystems.com',
-    pinned: true,
+    caption: 'Coches.net',
+    image: '/img/users/coches.svg',
+    infoLink: 'https://www.coches.net/',
+    pinned: false,
   },
   {
     caption: 'Codecademy',
@@ -35,100 +29,142 @@ const users = [
     pinned: true,
   },
   {
-    caption: 'Autodesk',
-    image: '/img/users/autodesk.svg',
-    infoLink: 'https://www.autodesk.com',
+    caption: 'Expedia Group',
+    image: '/img/users/expediagroup.svg',
+    infoLink: 'https://www.expediagroup.com',
     pinned: true,
   },
   {
-    caption: 'Sweepbright',
-    image: '/img/users/sweepbright.svg',
-    infoLink: 'https://sweepbright.com',
+    caption: 'Facebook Open Source',
+    image: '/img/users/facebook-open-source.png',
+    infoLink: 'https://opensource.facebook.com',
     pinned: true,
   },
   {
-    caption: 'TravelPerk',
-    image: '/img/users/travelperk.svg',
-    infoLink: 'https://www.travelperk.com',
-    pinned: true,
+    caption: 'Fotocasa',
+    image: '/img/users/fotocasa.svg',
+    infoLink: 'https://www.fotocasa.es/',
+    pinned: false,
   },
   {
-    caption: 'Velo Payments',
-    image: '/img/users/velopayments.svg',
-    infoLink: 'https://www.velopayments.com',
-    pinned: true,
+    caption: 'Global CTO Forum',
+    image: '/img/users/global-cto-forum.svg',
+    infoLink: 'https://globalctoforum.org',
+    pinned: false,
   },
   {
-    caption: 'Parsley Health',
-    image: '/img/users/parsleyhealth.svg',
-    infoLink: 'https://www.parsleyhealth.com',
+    caption: 'Gusto',
+    image: '/img/users/gusto.svg',
+    infoLink: 'https://gusto.com/',
     pinned: true,
   },
   {
-    caption: 'Facebook Open Source',
-    image: '/img/users/facebook-open-source.png',
-    infoLink: 'https://opensource.facebook.com',
-    pinned: true,
+    caption: 'Habitaclia',
+    image: '/img/users/habitaclia.svg',
+    infoLink: 'https://www.habitaclia.com/',
+    pinned: false,
   },
   {
-    caption: 'Expedia Group',
-    image: '/img/users/expediagroup.svg',
-    infoLink: 'https://www.expediagroup.com',
-    pinned: true,
+    caption: 'iFood',
+    image: '/img/users/ifood.png',
+    infoLink: 'https://www.ifood.com.br',
+    pinned: false,
   },
   {
-    caption: 'Wix.com',
-    image: '/img/users/wix.svg',
-    infoLink: 'https://www.wix.com',
-    pinned: true,
-  },
-  {
-    caption: 'Testsigma',
-    image: '/img/users/testsigma.svg',
-    infoLink: 'https://www.testsigma.com',
-    pinned: true,
+    caption: 'Infojobs',
+    image: '/img/users/infojobs.svg',
+    infoLink: 'https://www.infojobs.net/',
+    pinned: false,
   },
   {
     caption: 'intelliHR',
     image: '/img/users/intellihr.svg',
     infoLink: 'https://intellihr.com.au',
+    pinned: false,
+  },
+  {
+    caption: 'Milanuncios',
+    image: '/img/users/milanuncios.svg',
+    infoLink: 'https://www.milanuncios.com',
+    pinned: false,
+  },
+  {
+    caption: 'Parsley Health',
+    image: '/img/users/parsleyhealth.svg',
+    infoLink: 'https://www.parsleyhealth.com',
+    pinned: false,
+  },
+  {
+    caption: 'PayPal',
+    image: '/img/users/paypal.svg',
+    infoLink: 'https://www.paypal.com',
     pinned: true,
   },
   {
     caption: 'Quizlet',
     image: '/img/users/quizlet.svg',
     infoLink: 'https://quizlet.com',
-    pinned: true,
+    pinned: false,
   },
   {
     caption: 'Radity',
     image: '/img/users/radity.svg',
     infoLink: 'https://radity.com',
-    pinned: true,
+    pinned: false,
   },
   {
-    caption: 'Global CTO Forum',
-    image: '/img/users/global-cto-forum.svg',
-    infoLink: 'https://globalctoforum.org',
-    pinned: true,
+    caption: 'SUI Components',
+    image: '/img/users/sui.svg',
+    infoLink: 'https://sui-components.now.sh/',
+    pinned: false,
   },
   {
-    caption: 'Gusto',
-    image: '/img/users/gusto.svg',
-    infoLink: 'https://gusto.com/',
+    caption: 'Sweepbright',
+    image: '/img/users/sweepbright.svg',
+    infoLink: 'https://sweepbright.com',
+    pinned: false,
+  },
+  {
+    caption: 'Testsigma',
+    image: '/img/users/testsigma.svg',
+    infoLink: 'https://www.testsigma.com',
+    pinned: false,
+  },
+  {
+    caption: 'Tiller',
+    image: '/img/users/tiller.svg',
+    infoLink: 'https://www.tillersystems.com',
+    pinned: false,
+  },
+  {
+    caption: 'TravelPerk',
+    image: '/img/users/travelperk.svg',
+    infoLink: 'https://www.travelperk.com',
+    pinned: false,
+  },
+  {
+    caption: 'Velo Payments',
+    image: '/img/users/velopayments.svg',
+    infoLink: 'https://www.velopayments.com',
+    pinned: false,
+  },
+  {
+    caption: 'Walmart Labs',
     pinned: true,
+    image: '/img/users/walmart.png',
+    infoLink: 'https://www.walmartlabs.com/',
+  },
+  {
+    caption: 'Wix.com',
+    image: '/img/users/wix.svg',
+    infoLink: 'https://www.wix.com',
+    pinned: false,
   },
   {
     caption: 'Zup I.T. Innovation',
     image: '/img/users/zup.png',
     infoLink: 'https://www.zup.com.br/',
-    pinned: true,
-  },
-  {
-    caption: 'iFood',
-    image: '/img/users/ifood.png',
-    infoLink: 'https://www.ifood.com.br',
-    pinned: true,
+    pinned: false,
   },
 ]