refactor(website): polish on Showcase page (#5969)

website/src/data/__tests__/user.test.ts

@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {TagList, User, sortedUsers} from '../users';
+import {difference} from '@site/src/utils/jsUtils';
+
+import fs from 'fs-extra';
+import path from 'path';
+import imageSize from 'image-size';
+
+describe('users', () => {
+  test('are valid', () => {
+    sortedUsers.forEach(ensureUserValid);
+  });
+
+  test('have valid images', async () => {
+    const minCardImageWidth = 304;
+    const minCardImageHeight = 150;
+    const minCardImageHeightScaled = 140;
+    const imageDir = path.join(__dirname, '../showcase');
+
+    const files = await fs.readdir(imageDir);
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const file of files) {
+      const size = imageSize(path.join(imageDir, file));
+
+      if (size.width < minCardImageWidth) {
+        throw new Error(
+          `Image width should be >= ${minCardImageWidth}
+Image=${file}`,
+        );
+      }
+      if (size.height < minCardImageHeight) {
+        throw new Error(
+          `Image height should be >= ${minCardImageHeight}
+Image=${file}`,
+        );
+      }
+
+      const scaledHeight = size.height / (size.width / minCardImageWidth);
+      if (scaledHeight < minCardImageHeightScaled) {
+        throw new Error(
+          `Image height is too small compared to width
+After downscaling to width=${minCardImageWidth}, height would be ${scaledHeight} while the minimum is ${minCardImageHeightScaled}
+Image=${file}`,
+        );
+      }
+    }
+  });
+});
+
+// TODO, refactor legacy test code
+// Fail-fast on common errors
+function ensureUserValid(user: User) {
+  function checkFields() {
+    const keys = Object.keys(user);
+    const validKeys = [
+      'title',
+      'description',
+      'preview',
+      'website',
+      'source',
+      'tags',
+    ];
+    const unknownKeys = difference(keys, validKeys);
+    if (unknownKeys.length > 0) {
+      throw new Error(
+        `Site contains unknown attribute names=[${unknownKeys.join(',')}]`,
+      );
+    }
+  }
+
+  function checkTitle() {
+    if (!user.title) {
+      throw new Error('Site title is missing');
+    }
+  }
+
+  function checkDescription() {
+    if (!user.description) {
+      throw new Error('Site description is missing');
+    }
+  }
+
+  function checkWebsite() {
+    if (!user.website) {
+      throw new Error('Site website is missing');
+    }
+    const isHttpUrl =
+      user.website.startsWith('http://') || user.website.startsWith('https://');
+    if (!isHttpUrl) {
+      throw new Error(
+        `Site website does not look like a valid url: ${user.website}`,
+      );
+    }
+  }
+
+  function checkPreview() {
+    if (
+      !user.preview ||
+      (user.preview instanceof String &&
+        (user.preview.startsWith('http') || user.preview.startsWith('//')))
+    ) {
+      throw new Error(
+        `Site has bad image preview=[${user.preview}].\nThe image should be hosted on Docusaurus site, and not use remote HTTP or HTTPS URLs`,
+      );
+    }
+  }
+
+  function checkTags() {
+    if (
+      !user.tags ||
+      !(user.tags instanceof Array) ||
+      (user.tags as string[]).includes('')
+    ) {
+      throw new Error(`Bad showcase tags=[${JSON.stringify(user.tags)}]`);
+    }
+    const unknownTags = difference(user.tags, TagList);
+    if (unknownTags.length > 0) {
+      throw new Error(
+        `Unknown tags=[${unknownTags.join(
+          ',',
+        )}\nThe available tags are ${TagList.join(',')}`,
+      );
+    }
+  }
+
+  function checkOpenSource() {
+    if (typeof user.source === 'undefined') {
+      throw new Error(
+        "The source attribute is required.\nIf your Docusaurus site is not open-source, please make it explicit with 'source: null'",
+      );
+    } else {
+      const hasOpenSourceTag = user.tags.includes('opensource');
+      if (user.source === null && hasOpenSourceTag) {
+        throw new Error(
+          "You can't add the opensource tag to a site that does not have a link to source code.",
+        );
+      } else if (user.source && !hasOpenSourceTag) {
+        throw new Error(
+          "For open-source sites, please add the 'opensource' tag",
+        );
+      }
+    }
+  }
+
+  try {
+    checkFields();
+    checkTitle();
+    checkDescription();
+    checkWebsite();
+    checkPreview();
+    checkTags();
+    checkOpenSource();
+  } catch (e) {
+    throw new Error(
+      `Showcase site with title=${user.title} contains errors:\n${e.message}`,
+    );
+  }
+}

website/src/data/users.tsx

@@ -7,7 +7,7 @@
 
 /* eslint-disable global-require */
 
-import {difference, sortBy} from '@site/src/utils/jsUtils';
+import {sortBy} from '@site/src/utils/jsUtils';
 
 /*
  * ADD YOUR SITE TO THE DOCUSAURUS SHOWCASE:
@@ -54,7 +54,7 @@ export type TagType =
   | 'i18n'
   | 'versioning'
   | 'large'
-  | 'facebook'
+  | 'meta'
   | 'personal'
   | 'rtl';
 
@@ -121,9 +121,9 @@ export const Tags: Record<TagType, Tag> = {
     color: '#8c2f00',
   },
 
-  facebook: {
-    label: 'Facebook',
-    description: 'Docusaurus sites of Facebook projects',
+  meta: {
+    label: 'Meta',
+    description: 'Docusaurus sites of Meta (formerly Facebook) projects',
     color: '#4267b2', // Facebook blue
   },
 
@@ -258,7 +258,7 @@ const Users: User[] = [
   {
     title: 'Blogasaurus',
     description: 'A blog written using Docasaurus.',
-    preview: require('./showcase/Blogasaurus.png'),
+    preview: require('./showcase/blogasaurus.png'),
     website: 'https://blog.palashsh.me/',
     source: 'https://github.com/BattleOfPlassey/blogasaurus',
     tags: ['personal', 'opensource'],
@@ -330,7 +330,7 @@ const Users: User[] = [
     preview: require('./showcase/componentkit.png'),
     website: 'https://componentkit.org',
     source: 'https://github.com/facebook/componentkit',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'ConfigCat Feature Flags',
@@ -363,7 +363,7 @@ const Users: User[] = [
     preview: require('./showcase/create-react-app.png'),
     website: 'https://facebook.github.io/create-react-app/',
     source: 'https://github.com/facebook/create-react-app',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'CryptoDevHub',
@@ -432,7 +432,7 @@ const Users: User[] = [
     preview: require('./showcase/draftjs.png'),
     website: 'https://draftjs.org/',
     source: 'https://github.com/facebook/draft-js',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'Easyjwt',
@@ -483,7 +483,7 @@ const Users: User[] = [
     preview: require('./showcase/fbt.png'),
     website: 'https://facebookincubator.github.io/fbt/',
     source: 'https://github.com/facebook/fbt',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'Fenghua Frontend Developer',
@@ -515,7 +515,7 @@ const Users: User[] = [
     preview: require('./showcase/flipper.png'),
     website: 'https://fbflipper.com',
     source: 'https://github.com/facebook/flipper',
-    tags: ['opensource', 'design', 'facebook'],
+    tags: ['opensource', 'design', 'meta'],
   },
   {
     title: 'FlexIt Analytics',
@@ -531,7 +531,7 @@ const Users: User[] = [
     preview: require('./showcase/flux.png'),
     website: 'https://facebook.github.io/flux/',
     source: 'https://github.com/facebook/flux',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'FoalTS',
@@ -629,7 +629,7 @@ const Users: User[] = [
     preview: require('./showcase/hermes.png'),
     website: 'https://hermesengine.dev',
     source: 'https://github.com/facebook/hermes',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'Home Assistant',
@@ -645,7 +645,7 @@ const Users: User[] = [
     preview: require('./showcase/idb.png'),
     website: 'https://www.fbidb.io/',
     source: 'https://github.com/facebook/idb',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'IntelAGENT Billing',
@@ -736,7 +736,7 @@ const Users: User[] = [
     preview: require('./showcase/mapillaryjs.png'),
     website: 'https://mapillary.github.io/mapillary-js/',
     source: 'https://github.com/mapillary/mapillary-js',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'MediaMachine',
@@ -761,7 +761,7 @@ const Users: User[] = [
     preview: require('./showcase/metro.png'),
     website: 'https://facebook.github.io/metro/',
     source: 'https://github.com/facebook/metro',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'Mia-Platform',
@@ -969,10 +969,10 @@ const Users: User[] = [
   {
     title: 'Profilo',
     description: 'An Android performance library',
-    preview: require('./showcase/profolo.png'),
+    preview: require('./showcase/profilo.png'),
     website: 'https://facebookincubator.github.io/profilo/',
     source: 'https://github.com/facebookincubator/profilo',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'Pyre',
@@ -980,7 +980,7 @@ const Users: User[] = [
     preview: require('./showcase/pyre.png'),
     website: 'https://pyre-check.org',
     source: 'https://github.com/facebook/pyre-check',
-    tags: ['opensource', 'facebook'],
+    tags: ['opensource', 'meta'],
   },
   {
     title: 'QA-Board',
@@ -1042,7 +1042,7 @@ const Users: User[] = [
     source: 'https://github.com/facebook/react-native-website',
     tags: [
       'opensource',
-      'facebook',
+      'meta',
       'large',
       'favorite',
       'design',
@@ -1363,7 +1363,7 @@ const Users: User[] = [
     preview: require('./showcase/the-diff.png'),
     website: 'https://thediffpodcast.com',
     source: null,
-    tags: ['facebook'],
+    tags: ['meta'],
   },
   {
     title: 'Tinaël Devresse',
@@ -1604,114 +1604,3 @@ function sortUsers() {
 }
 
 export const sortedUsers = sortUsers();
-
-// Fail-fast on common errors
-function ensureUserValid(user: User) {
-  function checkFields() {
-    const keys = Object.keys(user);
-    const validKeys = [
-      'title',
-      'description',
-      'preview',
-      'website',
-      'source',
-      'tags',
-    ];
-    const unknownKeys = difference(keys, validKeys);
-    if (unknownKeys.length > 0) {
-      throw new Error(
-        `Site contains unknown attribute names=[${unknownKeys.join(',')}]`,
-      );
-    }
-  }
-
-  function checkTitle() {
-    if (!user.title) {
-      throw new Error('Site title is missing');
-    }
-  }
-
-  function checkDescription() {
-    if (!user.description) {
-      throw new Error('Site description is missing');
-    }
-  }
-
-  function checkWebsite() {
-    if (!user.website) {
-      throw new Error('Site website is missing');
-    }
-    const isHttpUrl =
-      user.website.startsWith('http://') || user.website.startsWith('https://');
-    if (!isHttpUrl) {
-      throw new Error(
-        `Site website does not look like a valid url: ${user.website}`,
-      );
-    }
-  }
-
-  function checkPreview() {
-    if (
-      !user.preview ||
-      (user.preview instanceof String &&
-        (user.preview.startsWith('http') || user.preview.startsWith('//')))
-    ) {
-      throw new Error(
-        `Site has bad image preview=[${user.preview}].\nThe image should be hosted on Docusaurus site, and not use remote HTTP or HTTPS URLs`,
-      );
-    }
-  }
-
-  function checkTags() {
-    if (
-      !user.tags ||
-      !(user.tags instanceof Array) ||
-      (user.tags as string[]).includes('')
-    ) {
-      throw new Error(`Bad showcase tags=[${JSON.stringify(user.tags)}]`);
-    }
-    const unknownTags = difference(user.tags, TagList);
-    if (unknownTags.length > 0) {
-      throw new Error(
-        `Unknown tags=[${unknownTags.join(
-          ',',
-        )}\nThe available tags are ${TagList.join(',')}`,
-      );
-    }
-  }
-
-  function checkOpenSource() {
-    if (typeof user.source === 'undefined') {
-      throw new Error(
-        "The source attribute is required.\nIf your Docusaurus site is not open-source, please make it explicit with 'source: null'",
-      );
-    } else {
-      const hasOpenSourceTag = user.tags.includes('opensource');
-      if (user.source === null && hasOpenSourceTag) {
-        throw new Error(
-          "You can't add the opensource tag to a site that does not have a link to source code.",
-        );
-      } else if (user.source && !hasOpenSourceTag) {
-        throw new Error(
-          "For open-source sites, please add the 'opensource' tag",
-        );
-      }
-    }
-  }
-
-  try {
-    checkFields();
-    checkTitle();
-    checkDescription();
-    checkWebsite();
-    checkPreview();
-    checkTags();
-    checkOpenSource();
-  } catch (e) {
-    throw new Error(
-      `Showcase site with title=${user.title} contains errors:\n${e.message}`,
-    );
-  }
-}
-
-Users.forEach(ensureUserValid);

website/src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -12,7 +12,7 @@ import Link from '@docusaurus/Link';
 
 import styles from './styles.module.css';
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
-import Tooltip from '@site/src/components/showcase/ShowcaseTooltip';
+import Tooltip from '../ShowcaseTooltip';
 import {Tags, TagList, TagType, User, Tag} from '@site/src/data/users';
 import {sortBy} from '@site/src/utils/jsUtils';
 

website/src/pages/showcase/_components/ShowcaseCard/styles.module.css

@@ -7,8 +7,8 @@
 
 .showcaseCardImage {
   overflow: hidden;
-  max-height: 150px;
-  border-bottom: 4px solid var(--ifm-color-primary);
+  height: 150px;
+  border-bottom: 2px solid var(--ifm-color-emphasis-200);
 }
 
 .showcaseCardHeader {

website/src/pages/showcase/_components/ShowcaseFilterToggle/index.tsx

@@ -9,6 +9,7 @@ import React, {useState, useEffect, useCallback} from 'react';
 import {useHistory, useLocation} from '@docusaurus/router';
 
 import styles from './styles.module.css';
+import clsx from 'clsx';
 
 export type Operator = 'OR' | 'AND';
 
@@ -36,7 +37,7 @@ export default function ShowcaseFilterToggle(): JSX.Element {
   }, [operator, location, history]);
 
   return (
-    <div className="shadow--md">
+    <div>
       <input
         type="checkbox"
         id={id}
@@ -51,7 +52,7 @@ export default function ShowcaseFilterToggle(): JSX.Element {
         checked={operator}
       />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label htmlFor={id} className={styles.checkboxLabel}>
+      <label htmlFor={id} className={clsx(styles.checkboxLabel, 'shadow--md')}>
         <span className={styles.checkboxLabelOr}>OR</span>
         <span className={styles.checkboxLabelAnd}>AND</span>
         <span className={styles.checkboxToggle} aria-hidden />

website/src/pages/showcase/index.tsx

@@ -13,14 +13,14 @@ import clsx from 'clsx';
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
 import ShowcaseTagSelect, {
   readSearchTags,
-} from '@site/src/components/showcase/ShowcaseTagSelect';
+} from './_components/ShowcaseTagSelect';
 import ShowcaseFilterToggle, {
   Operator,
   readOperator,
-} from '@site/src/components/showcase/ShowcaseFilterToggle';
-import ShowcaseCard from '@site/src/components/showcase/ShowcaseCard';
+} from './_components/ShowcaseFilterToggle';
+import ShowcaseCard from './_components/ShowcaseCard';
 import {sortedUsers, Tags, TagList, User, TagType} from '@site/src/data/users';
-import Tooltip from '@site/src/components/showcase/ShowcaseTooltip';
+import ShowcaseTooltip from './_components/ShowcaseTooltip';
 
 import {useLocation} from '@docusaurus/router';
 
@@ -82,15 +82,15 @@ function useSelectedTags() {
 
 function ShowcaseHeader() {
   return (
-    <section className="margin-top--lg margin-bottom--xl text--center">
+    <section className="margin-top--lg margin-bottom--lg text--center">
       <h1>{TITLE}</h1>
       <p>{DESCRIPTION}</p>
       <a
-        className={clsx('button button--primary', styles.showcaseCardSrcBtn)}
+        className="button button--primary"
         href={EDIT_URL}
         target="_blank"
         rel="noreferrer">
-        🙏 Add your site
+        🙏 Please add your site
       </a>
     </section>
   );
@@ -99,13 +99,13 @@ function ShowcaseHeader() {
 function ShowcaseFilters() {
   const filteredUsers = useFilteredUsers();
   return (
-    <section className="container margin-top--xl margin-bottom--lg">
+    <section className="container margin-top--l margin-bottom--lg">
       <div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
         <span>
-          <h3>Filter</h3>
-          <p>{`(${filteredUsers.length} site${
+          <h2>Filters</h2>
+          <span>{`(${filteredUsers.length} site${
             filteredUsers.length > 1 ? 's' : ''
-          })`}</p>
+          })`}</span>
         </span>
         <ShowcaseFilterToggle />
       </div>
@@ -116,7 +116,10 @@ function ShowcaseFilters() {
 
           return (
             <li key={i} className={styles.checkboxListItem}>
-              <Tooltip id={id} text={description} anchorEl="#__docusaurus">
+              <ShowcaseTooltip
+                id={id}
+                text={description}
+                anchorEl="#__docusaurus">
                 <ShowcaseTagSelect
                   tag={tag}
                   id={id}
@@ -137,7 +140,7 @@ function ShowcaseFilters() {
                     )
                   }
                 />
-              </Tooltip>
+              </ShowcaseTooltip>
             </li>
           );
         })}
@@ -161,7 +164,7 @@ function ShowcaseCards() {
     return (
       <section className="margin-top--lg margin-bottom--xl">
         <div className="container padding-vert--md text--center">
-          <h3>No result</h3>
+          <h2>No result</h2>
         </div>
       </section>
     );
@@ -178,7 +181,7 @@ function ShowcaseCards() {
                   'margin-bottom--md',
                   styles.showcaseFavoriteHeader,
                 )}>
-                <h3>Our favorites</h3>
+                <h2>Our favorites</h2>
                 <FavoriteIcon svgClass={styles.svgIconFavorite} />
               </div>
               <ul className={clsx('container', styles.showcaseList)}>
@@ -188,8 +191,8 @@ function ShowcaseCards() {
               </ul>
             </div>
           </div>
-          <div className="container margin-top--xl">
-            <h3 className={styles.showcaseHeader}>All sites</h3>
+          <div className="container margin-top--lg">
+            <h2 className={styles.showcaseHeader}>All sites</h2>
             <ul className={styles.showcaseList}>
               {otherUsers.map((user) => (
                 <ShowcaseCard key={user.title} user={user} />

website/src/pages/showcase/styles.module.css

@@ -18,6 +18,7 @@
 .filterCheckbox > span {
   display: flex;
   flex: 1 1 auto;
+  align-items: center;
 }
 
 .filterCheckbox > span > * {
@@ -69,8 +70,8 @@
 }
 
 .showcaseFavorite {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   background-color: var(--site-color-favorite-background);
 }
 
@@ -79,10 +80,15 @@
   align-items: center;
 }
 
-.showcaseFavoriteHeader > h3 {
+.showcaseFavoriteHeader > h2 {
   margin-bottom: 0;
 }
 
+.showcaseFavoriteHeader > svg {
+  width: 30px;
+  height: 30px;
+}
+
 .svgIconFavoriteXs,
 .svgIconFavorite {
   color: var(--site-color-svgIcon-favorite);