fix(website): resize showcase images, tighten CI check (#6043)

* fix(website): resize images to width 640

* revert changes first...

* resize images

* final changes

* Add to CI

* refactor tests

* Fix script

* fix script

* Final fixes

* Oops

* relax

* fix

* crop

* Optimize

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

.eslintignore

@@ -6,7 +6,6 @@ build
 coverage
 jest.config.js
 jest.transform.js
-scripts
 examples/
 
 packages/lqip-loader/lib/

.github/workflows/showcase-test.yml

@@ -14,13 +14,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node }}
+      - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: ${{ matrix.node }}
           cache: yarn
       - name: Installation
         run: yarn
       - name: Test
         run: yarn test website/src/data/__tests__/user.test.ts
-  # TODO another job to optimize the images, see https://github.com/facebook/docusaurus/issues/5980

admin/scripts/image-resize.mjs

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import sharp from 'sharp';
+import fs from 'fs/promises';
+import path from 'path';
+
+const images = (
+  await fs.readdir(new URL('../../website/src/data/showcase', import.meta.url))
+).filter((file) => ['.png', 'jpg', '.jpeg'].includes(path.extname(file)));
+
+await Promise.all(
+  images.map(async (img) => {
+    const imgPath = new URL(
+      `../../website/src/data/showcase/${img}`,
+      import.meta.url,
+    ).pathname;
+    const data = await sharp(imgPath)
+      .resize(640, 320, {fit: 'cover', position: 'top'})
+      .png()
+      .toBuffer();
+    await fs.writeFile(imgPath.replace(/jpe?g/, 'png'), data);
+  }),
+);
+
+// You should also run optimizt `find website/src/data/showcase -type f -name '*.png'`.
+// This is not included here because @funboxteam/optimizt doesn't seem to play well with M1
+// so I had to run this in a Rosetta terminal.
+// TODO integrate this as part of the script

package.json

@@ -114,6 +114,7 @@
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "serve": "^12.0.1",
+    "sharp": "^0.29.1",
     "stylelint": "^13.10.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"

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

@@ -6,162 +6,93 @@
  */
 
 import {TagList, sortedUsers, type User} from '../users';
-import {difference} from '@site/src/utils/jsUtils';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {Joi} from '@docusaurus/utils-validation';
 
 import fs from 'fs-extra';
 import path from 'path';
 import imageSize from 'image-size';
 
-describe('users', () => {
-  test('are valid', () => {
-    sortedUsers.forEach(ensureUserValid);
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toHaveGoodDimensions: () => R;
+    }
+  }
+}
+
+expect.extend({
+  toHaveGoodDimensions({width, height}: {width: number; height: number}) {
+    // Put this one first because aspect ratio is harder to fix than resizing (need to take another screenshot)
+    if (width / height < 0.5) {
+      return {
+        pass: false,
+        message: () =>
+          `The preview image's width is ${width} and height is ${height}. To make sure it takes up the entire container in our showcase card, it needs to have a minimum aspect ratio of 2:1. Please make your image taller.`,
+      };
+    } else if (width < 640) {
+      return {
+        pass: false,
+        message: () =>
+          `The preview image's width is ${width}, but we require a minimum 640. You can either resize it locally, or you can wait for the maintainer to resize it for you.`,
+      };
+    }
+    return {
+      pass: true,
+      message: () => "The preview image's dimensions are good",
+    };
+  },
+});
+
+describe('users', () => {
+  sortedUsers.forEach((user) => {
+    test(user.title, () => {
+      Joi.attempt(
+        user,
+        Joi.object<User>({
+          title: Joi.string().required(),
+          description: Joi.string().required(),
+          website: Joi.string()
+            .pattern(/^https?:\/\//)
+            .message('')
+            .required(),
+          // The preview should be jest/emptyModule
+          preview: Joi.object({}).unknown(false).required().messages({
+            'object.base':
+              'The image should be hosted on Docusaurus site, and not use remote HTTP or HTTPS URLs. It must be imported with require().',
+          }),
+          tags: Joi.array()
+            .items(...TagList)
+            .required(),
+          source: Joi.string().allow(null).required().messages({
+            'any.required':
+              "The source attribute is required.\nIf your Docusaurus site is not open-source, please make it explicit with 'source: null'.",
+          }),
+        }).unknown(false),
+      );
+      if (user.tags.includes('opensource') && user.source === null) {
+        throw new Error(
+          "You can't add the 'opensource' tag to a site that does not have a link to source code. Please add your source code, or remove this tag.",
+        );
+      } else if (user.source !== null && !user.tags.includes('opensource')) {
+        throw new Error(
+          "For open-source sites, please add the 'opensource' tag.",
+        );
+      }
+    });
   });
 
-  test('have valid images', async () => {
-    const minCardImageWidth = 304;
-    const minCardImageHeight = 150;
-    const minCardImageHeightScaled = 140;
   const imageDir = path.join(__dirname, '../showcase');
+  const files = fs
+    .readdirSync(imageDir)
+    .filter((file) => ['.png', 'jpg', '.jpeg'].includes(path.extname(file)));
 
-    const files = await fs.readdir(imageDir);
-
-    // eslint-disable-next-line no-restricted-syntax
-    for (const file of files) {
+  files.forEach((file) => {
+    test(file, () => {
       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}`,
-        );
-      }
-    }
+      expect(size).toHaveGoodDimensions();
+    });
   });
 });
-
-// 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 as Error).message
-      }`,
-    );
-  }
-}