chore(website): enable eslint in website (#5889)

* chore: enable eslint in website

* Fixes

* prettier users

.eslintignore

@@ -6,7 +6,6 @@ build
 coverage
 jest.config.js
 jest.transform.js
-website/
 scripts
 examples/
 

.eslintrc.js

@@ -49,7 +49,16 @@ module.exports = {
     // Ignore certain webpack alias because it can't be resolved
     'import/no-unresolved': [
       ERROR,
-      {ignore: ['^@theme', '^@docusaurus', '^@generated', 'unist', 'mdast']},
+      {
+        ignore: [
+          '^@theme',
+          '^@docusaurus',
+          '^@generated',
+          '^@site',
+          'unist',
+          'mdast',
+        ],
+      },
     ],
     'import/extensions': OFF,
     'header/header': [

website/_dogfooding/_pages tests/error-boundary-tests.tsx

@@ -1,9 +1,16 @@
+/**
+ * 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 React from 'react';
 import Layout from '@theme/Layout';
 
 import ErrorBoundaryTestButton from '@site/src/components/ErrorBoundaryTestButton';
 
-export default function ErrorBoundaryTests() {
+export default function ErrorBoundaryTests(): JSX.Element {
   return (
     <>
       <ErrorBoundaryTestButton>Crash outside layout</ErrorBoundaryTestButton>

website/_dogfooding/_pages tests/hydration-tests.tsx

@@ -1,3 +1,10 @@
+/**
+ * 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 React from 'react';
 import Layout from '@theme/Layout';
 
@@ -6,15 +13,18 @@ function BuggyText() {
   return (
     <span>
       Built using the{' '}
-      <a href="https://www.electronjs.org/" target="_blank">
+      <a href="https://www.electronjs.org/" target="_blank" rel="noreferrer">
         Electron
       </a>{' '}
       , based on{' '}
-      <a href="https://www.chromium.org/" target="_blank">
+      <a href="https://www.chromium.org/" target="_blank" rel="noreferrer">
         Chromium
       </a>
       , and written using{' '}
-      <a href="https://www.typescriptlang.org/" target="_blank">
+      <a
+        href="https://www.typescriptlang.org/"
+        target="_blank"
+        rel="noreferrer">
         TypeScript
       </a>{' '}
       , Xplorer promises you an unprecedented experience.
@@ -22,7 +32,7 @@ function BuggyText() {
   );
 }
 
-export default function Home() {
+export default function Home(): JSX.Element {
   return (
     <Layout>
       <BuggyText />

website/_dogfooding/clientModuleExample.ts

@@ -7,7 +7,8 @@
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
-export function onRouteUpdate({location}: {location: Location}) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function onRouteUpdate({location}: {location: Location}): void {
   // console.log('onRouteUpdate', {location});
 }
 

website/_dogfooding/docs-tests-sidebars.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -64,7 +64,6 @@ module.exports = {
 };
 
 function generateHugeSidebarItems() {
-  const maxLevel = 4;
   const linksCount = 8;
   const categoriesCount = 8;
 
@@ -88,5 +87,5 @@ function generateHugeSidebarItems() {
     return [...linkItems, ...categoryItems];
   }
 
-  return generateRecursive(maxLevel);
+  return generateRecursive(4);
 }

website/_dogfooding/dogfooding.config.js

@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
+
 const fs = require('fs');
 
 /** @type {import('@docusaurus/types').PluginConfig[]} */

website/babel.config.js

@@ -3,8 +3,6 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @format
  */
 
 module.exports = {

website/docusaurus.config.js

@@ -11,11 +11,16 @@ const versions = require('./versions.json');
 const math = require('remark-math');
 const katex = require('rehype-katex');
 const VersionsArchived = require('./versionsArchived.json');
-const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
-  0,
-  5,
-);
 const {dogfoodingPluginInstances} = require('./_dogfooding/dogfooding.config');
+const FeatureRequestsPlugin = require('./src/featureRequests/FeatureRequestsPlugin');
+const npm2yarn = require('@docusaurus/remark-plugin-npm2yarn');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const lightTheme = require('prism-react-renderer/themes/github');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const darkTheme = require('prism-react-renderer/themes/dracula');
+
+const ArchivedVersionsDropdownItems =
+  Object.entries(VersionsArchived).splice(0, 5);
 
 // This probably only makes sense for the beta phase, temporary
 function getNextBetaVersionName() {
@@ -80,6 +85,7 @@ const config = {
   ],
   i18n: {
     defaultLocale: 'en',
+    // eslint-disable-next-line no-nested-ternary
     locales: isDeployPreview
       ? // Deploy preview: keep it fast!
         ['en']
@@ -109,7 +115,7 @@ const config = {
   clientModules: [require.resolve('./_dogfooding/clientModuleExample.ts')],
   themes: ['@docusaurus/theme-live-codeblock'],
   plugins: [
-    require('./src/featureRequests/FeatureRequestsPlugin'),
+    FeatureRequestsPlugin,
     [
       '@docusaurus/plugin-content-docs',
       /** @type {import('@docusaurus/plugin-content-docs').Options} */
@@ -134,12 +140,13 @@ const config = {
       /** @type {import('@docusaurus/plugin-client-redirects').Options} */
       ({
         fromExtensions: ['html'],
-        createRedirects: function (path) {
+        createRedirects(routePath) {
           // redirect to /docs from /docs/introduction,
           // as introduction has been made the home doc
-          if (allDocHomesPaths.includes(path)) {
-            return [`${path}/introduction`];
+          if (allDocHomesPaths.includes(routePath)) {
+            return [`${routePath}/introduction`];
           }
+          return [];
         },
         redirects: [
           {
@@ -254,11 +261,12 @@ const config = {
           showLastUpdateTime: true,
           remarkPlugins: [
             math,
-            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
+            [npm2yarn, {sync: true}],
           ],
           rehypePlugins: [katex],
           disableVersioning: isVersioningDisabled,
           lastVersion: isDev ? 'current' : undefined,
+          // eslint-disable-next-line no-nested-ternary
           onlyIncludeVersions: isBuildFast
             ? ['current']
             : !isVersioningDisabled && (isDev || isDeployPreview)
@@ -288,7 +296,7 @@ const config = {
           blogSidebarTitle: 'All our posts',
         },
         pages: {
-          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          remarkPlugins: [npm2yarn],
         },
         theme: {
           customCss: [require.resolve('./src/css/custom.css')],
@@ -314,8 +322,8 @@ const config = {
         content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus" >Twitter</a> ${TwitterSvg}`,
       },
       prism: {
-        theme: require('prism-react-renderer/themes/github'),
-        darkTheme: require('prism-react-renderer/themes/dracula'),
+        theme: lightTheme,
+        darkTheme,
         additionalLanguages: ['java'],
       },
       image: 'img/docusaurus-soc.png',

website/package.json

@@ -38,6 +38,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@docusaurus/remark-plugin-npm2yarn": "2.0.0-beta.9",
     "@docusaurus/theme-live-codeblock": "2.0.0-beta.9",
+    "@docusaurus/utils": "2.0.0-beta.9",
     "clsx": "^1.1.1",
     "color": "^4.0.1",
     "esbuild-loader": "2.13.1",

website/sidebars.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the

website/sidebarsCommunity.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the

website/src/components/BrowserWindow/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   url: string;
 }
 
-function BrowserWindow({children, minHeight, url}: Props) {
+function BrowserWindow({children, minHeight, url}: Props): JSX.Element {
   return (
     <div className={styles.browserWindow} style={{minHeight}}>
       <div className={styles.browserWindowHeader}>

website/src/components/ColorGenerator/index.tsx

@@ -66,10 +66,10 @@ const COLOR_SHADES: Record<
 
 const DEFAULT_PRIMARY_COLOR = '3578e5';
 
-function ColorGenerator() {
+function ColorGenerator(): JSX.Element {
   const [baseColor, setBaseColor] = useState(DEFAULT_PRIMARY_COLOR);
   const [shades, setShades] = useState(COLOR_SHADES);
-  const color = Color('#' + baseColor);
+  const color = Color(`#${baseColor}`);
   const adjustedColors = Object.keys(shades)
     .map((shade) => ({
       ...shades[shade],
@@ -83,6 +83,7 @@ function ColorGenerator() {
   return (
     <div>
       <p>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
         <label htmlFor="primary_color">
           <strong className="margin-right--sm">Primary Color:</strong>
         </label>{' '}
@@ -96,7 +97,7 @@ function ColorGenerator() {
             const colorValue = event.target.value.replace(/^#+/, '');
 
             try {
-              Color('#' + colorValue);
+              Color(`#${baseColor}`);
               setBaseColor(colorValue);
             } catch {
               // Don't update for invalid colors.
@@ -150,7 +151,7 @@ function ColorGenerator() {
                               [variableName]: {
                                 ...shades[variableName],
                                 adjustmentInput: event.target.value,
-                                adjustment: isNaN(newValue)
+                                adjustment: Number.isNaN(newValue)
                                   ? adjustment
                                   : newValue / 100.0,
                               },

website/src/components/ErrorBoundaryTestButton/index.tsx

@@ -5,12 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React, {ReactNode, useState} from 'react';
 
-export default function ErrorBoundaryTestButton({children = 'Boom!'}) {
+export default function ErrorBoundaryTestButton({
+  children = 'Boom!',
+}: {
+  children?: ReactNode;
+}): JSX.Element {
   const [state, setState] = useState(false);
   if (state) {
     throw new Error('Boom!');
   }
-  return <button onClick={() => setState(true)}>{children}</button>;
+  return (
+    <button type="button" onClick={() => setState(true)}>
+      {children}
+    </button>
+  );
 }

website/src/components/Playground/index.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable global-require */
+
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
@@ -32,7 +34,7 @@ const Playgrounds = [
         id="playground.stackblitz.description"
         values={{
           webContainersLink: (
-            <Link target="https://blog.stackblitz.com/posts/introducing-webcontainers/">
+            <Link href="https://blog.stackblitz.com/posts/introducing-webcontainers/">
               WebContainers
             </Link>
           ),
@@ -77,7 +79,7 @@ function PlaygroundCard({name, image, url, description}: Props) {
   );
 }
 
-export function PlaygroundCardsRow() {
+export function PlaygroundCardsRow(): JSX.Element {
   return (
     <div className="row">
       {Playgrounds.map((playground) => (

website/src/components/TeamProfileCards/index.tsx

@@ -41,7 +41,7 @@ function TeamProfileCard({
           <div className="avatar avatar--vertical">
             <img
               className="avatar__photo avatar__photo--xl"
-              src={githubUrl + '.png'}
+              src={`${githubUrl}.png`}
               alt={`${name}'s avatar`}
             />
             <div className="avatar__intro">
@@ -71,11 +71,11 @@ function TeamProfileCard({
 
 function TeamProfileCardCol(props: ProfileProps) {
   return (
-    <TeamProfileCard {...props} className={'col col--6 margin-bottom--lg'} />
+    <TeamProfileCard {...props} className="col col--6 margin-bottom--lg" />
   );
 }
 
-export function ActiveTeamRow() {
+export function ActiveTeamRow(): JSX.Element {
   return (
     <div className="row">
       <TeamProfileCardCol
@@ -125,15 +125,15 @@ export function ActiveTeamRow() {
         twitterUrl="https://twitter.com/yangshunz">
         <Translate id="team.profile.Yangshun Tay.body">
           Full Front End Stack developer who likes working on the Jamstack.
-          Working on Docusaurus made him Facebook's unofficial part-time Open
-          Source webmaster, which is an awesome role to be in.
+          Working on Docusaurus made him Facebook&apos;s unofficial part-time
+          Open Source webmaster, which is an awesome role to be in.
         </Translate>
       </TeamProfileCardCol>
     </div>
   );
 }
 
-export function HonoraryAlumniTeamRow() {
+export function HonoraryAlumniTeamRow(): JSX.Element {
   return (
     <div className="row">
       <TeamProfileCardCol
@@ -157,7 +157,7 @@ export function HonoraryAlumniTeamRow() {
   );
 }
 
-export function StudentFellowsTeamRow() {
+export function StudentFellowsTeamRow(): JSX.Element {
   return (
     <div className="row">
       <TeamProfileCardCol
@@ -166,7 +166,7 @@ export function StudentFellowsTeamRow() {
         twitterUrl="https://twitter.com/ar_goyal">
         Fullstack developer who loves to code and try new technologies. In his
         free time, he contributes to open source, writes blog posts on his{' '}
-        <a href="https://anshulgoyal.dev/" target="_blank">
+        <a href="https://anshulgoyal.dev/" target="_blank" rel="noreferrer">
           website
         </a>{' '}
         and watches Anime.
@@ -184,11 +184,14 @@ export function StudentFellowsTeamRow() {
         Fanny got started with web development in high school, building a
         project for the school kitchen. In her free time she loves contributing
         to Open Source, occasionally writing on{' '}
-        <a href="https://dev.to/fannyvieira" target="_blank">
+        <a href="https://dev.to/fannyvieira" target="_blank" rel="noreferrer">
           her blog
         </a>{' '}
         about her experiences, cooking, and creating{' '}
-        <a href="https://open.spotify.com/user/anotherfanny" target="_blank">
+        <a
+          href="https://open.spotify.com/user/anotherfanny"
+          target="_blank"
+          rel="noreferrer">
           Spotify playlists
         </a>
         .

website/src/components/showcase/ShowcaseCheckbox/index.tsx

@@ -14,7 +14,12 @@ interface Props extends ComponentProps<'input'> {
   label: ReactNode;
 }
 
-function ShowcaseCheckbox({title, className, label, ...props}: Props) {
+function ShowcaseCheckbox({
+  title,
+  className,
+  label,
+  ...props
+}: Props): JSX.Element {
   const id = `showcase_checkbox_id_${props.name};`;
   return (
     <div className={clsx(className, styles.checkboxContainer)} title={title}>

website/src/components/showcase/ShowcaseSelect/index.tsx

@@ -13,7 +13,7 @@ interface Props extends ComponentProps<'select'> {
   label: string;
 }
 
-function ShowcaseSelect({label, ...props}: Props) {
+function ShowcaseSelect({label, ...props}: Props): JSX.Element {
   const id = `showcase_select_id_${props.name};`;
   return (
     <div className={styles.selectContainer}>

website/src/data/users.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable global-require */
+
 import React from 'react';
 import {difference, sortBy} from '../utils/jsUtils';
 
@@ -154,7 +156,8 @@ export const Tags: Record<TagType, Tag> = {
 const Users: User[] = [
   {
     title: 'Aide Jeune',
-    description: 'French Discord server that helps young people who have been bullied or feel bad about themselves',
+    description:
+      'French Discord server that helps young people who have been bullied or feel bad about themselves',
     preview: require('./showcase/aide_jeune.png'),
     website: 'https://aidejeune.fr',
     source: 'https://github.com/AideJeune',
@@ -246,7 +249,8 @@ const Users: User[] = [
   },
   {
     title: 'Blink Shell Docs',
-    description: 'Documentation for Blink Shell a professional, desktop grade terminal for iOS',
+    description:
+      'Documentation for Blink Shell a professional, desktop grade terminal for iOS',
     preview: require('./showcase/blinkshell.png'),
     website: 'https://docs.blink.sh/',
     source: 'https://github.com/blinksh/docs',
@@ -266,7 +270,7 @@ const Users: User[] = [
     preview: require('./showcase/Blogasaurus.png'),
     website: 'https://blog.palashsh.me/',
     source: 'https://github.com/BattleOfPlassey/blogasaurus',
-    tags: ['personal', 'opensource']
+    tags: ['personal', 'opensource'],
   },
   {
     title: 'Botonic',
@@ -295,7 +299,8 @@ const Users: User[] = [
   },
   {
     title: 'ClarityChallenge',
-    description: 'Documentation for the Clarity machine learning challenges for improving hearing aid signal processing',
+    description:
+      'Documentation for the Clarity machine learning challenges for improving hearing aid signal processing',
     preview: require('./showcase/claritychallenge.png'),
     website: 'https://claritychallenge.github.io/clarity_CEC1_doc',
     source: 'https://github.com/claritychallenge/clarity_CEC1_doc',
@@ -303,10 +308,12 @@ const Users: User[] = [
   },
   {
     title: 'Cloudy with a chance of Big Data',
-    description: 'A blog only Docusaurus site showcasing cloud, data and full stack design patterns and tutorials',
+    description:
+      'A blog only Docusaurus site showcasing cloud, data and full stack design patterns and tutorials',
     preview: require('./showcase/cloudywithachanceofbigdata.png'),
     website: 'https://cloudywithachanceofbigdata.com/',
-    source: 'https://github.com/cloudywithachanceofbigdata/cloudywithachanceofbigdata.github.io',
+    source:
+      'https://github.com/cloudywithachanceofbigdata/cloudywithachanceofbigdata.github.io',
     tags: ['opensource', 'personal'],
   },
   {
@@ -319,7 +326,8 @@ const Users: User[] = [
   },
   {
     title: 'CodeYourFuture',
-    description: 'The syllabus for CodeYourFuture - a free code school for refugees, asylum seekers and disadvantaged people',
+    description:
+      'The syllabus for CodeYourFuture - a free code school for refugees, asylum seekers and disadvantaged people',
     preview: require('./showcase/codeyourfuture.png'),
     website: 'https://syllabus.codeyourfuture.io/',
     source: 'https://github.com/CodeYourFuture/syllabus',
@@ -351,7 +359,8 @@ const Users: User[] = [
   },
   {
     title: 'Country State City API',
-    description: 'Get simplified countries, states & cities data without bloating up your database.',
+    description:
+      'Get simplified countries, states & cities data without bloating up your database.',
     preview: require('./showcase/countrystatecity.png'),
     website: 'https://countrystatecity.in/',
     source: 'https://github.com/dr5hn/csc-website',
@@ -367,7 +376,8 @@ const Users: User[] = [
   },
   {
     title: 'CryptoDevHub',
-    description: 'The place where Blockchain- and Crypto developers learn, meet and grow.',
+    description:
+      'The place where Blockchain- and Crypto developers learn, meet and grow.',
     preview: require('./showcase/cryptodevhub.png'),
     website: 'https://cryptodevhub.io',
     source: 'https://github.com/cryptodevhub/site',
@@ -384,7 +394,8 @@ const Users: User[] = [
   },
   {
     title: 'Dart Code Metrics',
-    description: 'Static analysis tool that helps analyse and improve Dart code quality.',
+    description:
+      'Static analysis tool that helps analyse and improve Dart code quality.',
     preview: require('./showcase/dart-code-metrics.png'),
     website: 'https://dartcodemetrics.dev/',
     source: 'https://github.com/dart-code-checker/dart-code-metrics',
@@ -459,7 +470,8 @@ const Users: User[] = [
   },
   {
     title: "Evan Tay's Personal Website",
-    description: "A Software Engineer's blog, documentation and project portfolio.",
+    description:
+      "A Software Engineer's blog, documentation and project portfolio.",
     preview: require('./showcase/evantay.png'),
     website: 'https://evantay.com/',
     source: 'https://github.com/DigiPie/kaya-folio',
@@ -637,7 +649,8 @@ const Users: User[] = [
   },
   {
     title: 'Indent',
-    description: 'Indent provides on-demand access control for cloud apps and infrastructure.',
+    description:
+      'Indent provides on-demand access control for cloud apps and infrastructure.',
     preview: require('./showcase/indent.png'),
     website: 'https://indent.com/developers',
     source: null,
@@ -645,7 +658,8 @@ const Users: User[] = [
   },
   {
     title: 'InfraQL Technologies',
-    description: 'InfraQL is a SQL based approach to cloud infrastructure coding, API querying and automation.',
+    description:
+      'InfraQL is a SQL based approach to cloud infrastructure coding, API querying and automation.',
     preview: require('./showcase/infraql-docs.png'),
     website: 'https://docs.infraql.io/',
     source: null,
@@ -661,7 +675,8 @@ const Users: User[] = [
   },
   {
     title: 'Jest',
-    description: 'Jest is a delightful JavaScript Testing Framework with a focus on simplicity.',
+    description:
+      'Jest is a delightful JavaScript Testing Framework with a focus on simplicity.',
     preview: require('./showcase/jest.png'),
     website: 'https://jestjs.io/',
     source: 'https://github.com/facebook/jest/tree/master/website',
@@ -673,7 +688,7 @@ const Users: User[] = [
     preview: require('./showcase/kosko.png'),
     website: 'https://kosko.dev',
     source: 'https://github.com/tommy351/kosko',
-    tags: ['opensource']
+    tags: ['opensource'],
   },
   {
     title: 'Kotest',
@@ -725,7 +740,8 @@ const Users: User[] = [
   },
   {
     title: 'Meli',
-    description: 'Platform to deploy static sites, frontend applications and hosted forms',
+    description:
+      'Platform to deploy static sites, frontend applications and hosted forms',
     preview: require('./showcase/meli.png'),
     website: 'https://docs.meli.sh/',
     source: 'https://github.com/getmeli/meli',
@@ -741,7 +757,8 @@ const Users: User[] = [
   },
   {
     title: 'Mia-Platform',
-    description: 'Mia-Platform is the simplest way to develop and operate modern applications on Kubernetes. Don\'t waste time to set up your platform, just push the code!',
+    description:
+      "Mia-Platform is the simplest way to develop and operate modern applications on Kubernetes. Don't waste time to set up your platform, just push the code!",
     preview: require('./showcase/mia-platform.png'),
     website: 'https://docs.mia-platform.eu/',
     source: null,
@@ -776,7 +793,8 @@ const Users: User[] = [
   },
   {
     title: 'nanos world documentation',
-    description: "nanos world is the next-generation multiplayer open world sandbox game.",
+    description:
+      'nanos world is the next-generation multiplayer open world sandbox game.',
     preview: require('./showcase/nanos-world.png'),
     website: 'https://docs.nanos.world/',
     source: 'https://github.com/nanos-world/docs',
@@ -792,7 +810,8 @@ const Users: User[] = [
   },
   {
     title: 'Netdata Learn',
-    description: 'An educational site for monitoring and troubleshooting systems',
+    description:
+      'An educational site for monitoring and troubleshooting systems',
     preview: require('./showcase/netdata.png'),
     website: 'https://learn.netdata.cloud',
     source: 'https://github.com/netdata/netdata-learn-docusaurus',
@@ -879,7 +898,7 @@ const Users: User[] = [
     preview: require('./showcase/paubox.png'),
     website: 'https://docs.paubox.com/',
     source: null,
-    tags: ["product"],
+    tags: ['product'],
   },
   {
     title: 'Pipeline UI',
@@ -891,7 +910,8 @@ const Users: User[] = [
   },
   {
     title: 'Plausible Analytics Docs',
-    description: 'Plausible Analytics is a simple, open source, lightweight (< 1 KB) and privacy-friendly alternative to Google Analytics. ',
+    description:
+      'Plausible Analytics is a simple, open source, lightweight (< 1 KB) and privacy-friendly alternative to Google Analytics. ',
     preview: require('./showcase/plausible.png'),
     website: 'https://plausible.io/docs',
     source: 'https://github.com/plausible/docs',
@@ -991,7 +1011,8 @@ const Users: User[] = [
   },
   {
     title: 'React Complex Tree',
-    description: 'Unopinionated Accessible React Tree Component with Multi-Select and Drag-And-Drop',
+    description:
+      'Unopinionated Accessible React Tree Component with Multi-Select and Drag-And-Drop',
     preview: require('./showcase/react-complex-tree.png'),
     website: 'https://rct.lukasbach.com/',
     source: 'https://github.com/lukasbach/react-complex-tree',
@@ -1056,18 +1077,21 @@ const Users: User[] = [
   },
   {
     title: 'React Native Reanimated',
-    description: 'React Native\'s Animated library reimplemented',
+    description: "React Native's Animated library reimplemented",
     preview: require('./showcase/react-native-reanimated.png'),
     website: 'https://docs.swmansion.com/react-native-reanimated/',
-    source: 'https://github.com/software-mansion/react-native-reanimated/tree/master/docs',
+    source:
+      'https://github.com/software-mansion/react-native-reanimated/tree/master/docs',
     tags: ['opensource', 'design', 'versioning'],
   },
   {
-    title: "React Native Render HTML",
-    description: "The hackable, full-featured Open Source HTML rendering solution for React Native.",
+    title: 'React Native Render HTML',
+    description:
+      'The hackable, full-featured Open Source HTML rendering solution for React Native.',
     preview: require('./showcase/rnrh.png'),
-    website: "https://meliorence.github.io/react-native-render-html",
-    source: "https://github.com/meliorence/react-native-render-html/tree/master/apps/website",
+    website: 'https://meliorence.github.io/react-native-render-html',
+    source:
+      'https://github.com/meliorence/react-native-render-html/tree/master/apps/website',
     tags: ['opensource', 'design'],
   },
   {
@@ -1319,11 +1343,12 @@ const Users: User[] = [
   },
   {
     title: 'Tinaël Devresse',
-    description: 'Personal website of Tinaël Devresse, a blog about anything that crosses my mind which I think could interest y\'all.',
+    description:
+      "Personal website of Tinaël Devresse, a blog about anything that crosses my mind which I think could interest y'all.",
     preview: require('./showcase/tinaeldevresse.png'),
     website: 'https://tinaeldevresse.eu/',
     source: 'https://github.com/hunteroi/tinaeldevresse.eu',
-    tags: ['personal', 'opensource', 'i18n']
+    tags: ['personal', 'opensource', 'i18n'],
   },
   {
     title: 'TRPG Engine',
@@ -1402,12 +1427,11 @@ const Users: User[] = [
   },
   {
     title: 'Whirl',
-    description:
-      'Whirl\'s Personal Website and Blog',
+    description: "Whirl's Personal Website and Blog",
     preview: require('./showcase/whirlcodes.png'),
     website: 'https://whirl.codes',
     source: 'https://github.com/whirl21/website',
-    tags: ['opensource', 'personal']
+    tags: ['opensource', 'personal'],
   },
   {
     title: 'KubeVela',
@@ -1432,31 +1456,34 @@ const Users: User[] = [
     preview: require('./showcase/joelpo.png'),
     website: 'https://joelpo.github.io',
     source: 'https://github.com/Joelpo/joelpo.github.io',
-    tags: ['personal', 'opensource']
+    tags: ['personal', 'opensource'],
   },
   {
     title: 'LiveKit',
-    description: 'Open source, scalable, real-time audio and video rooms over WebRTC',
+    description:
+      'Open source, scalable, real-time audio and video rooms over WebRTC',
     preview: require('./showcase/livekit.png'),
     website: 'https://docs.livekit.io',
     source: 'https://github.com/livekit/livekit-docs',
-    tags: ['opensource', 'product', 'design']
+    tags: ['opensource', 'product', 'design'],
   },
   {
     title: 'Zowe',
-    description: 'Open source framework for leveraging data and applications in z/OS',
+    description:
+      'Open source framework for leveraging data and applications in z/OS',
     preview: require('./showcase/zowe.png'),
     website: 'https://docs.zowe.org',
     source: 'https://github.com/zowe/docs-site',
-    tags: ['opensource', 'product', 'large', 'design', 'versioning']
+    tags: ['opensource', 'product', 'large', 'design', 'versioning'],
   },
   {
     title: 'Quickwit',
-    description: 'The open source search engine on object storage with subsecond latency',
+    description:
+      'The open source search engine on object storage with subsecond latency',
     preview: require('./showcase/quickwit.png'),
     website: 'https://quickwit.io',
     source: 'https://github.com/quickwit-inc/quickwit',
-    tags: ['favorite', 'opensource', 'design']
+    tags: ['favorite', 'opensource', 'design'],
   },
   {
     title: 'Verdaccio',
@@ -1464,23 +1491,25 @@ const Users: User[] = [
     preview: require('./showcase/verdaccio.png'),
     website: 'https://verdaccio.org',
     source: 'https://github.com/verdaccio/verdaccio',
-    tags: ['favorite', 'opensource', 'large', 'i18n', 'design' ]
+    tags: ['favorite', 'opensource', 'large', 'i18n', 'design'],
   },
   {
     title: 'Unmand',
-    description: 'A business automation platform that liberates users from repetitive tasks.',
+    description:
+      'A business automation platform that liberates users from repetitive tasks.',
     preview: require('./showcase/unmand.png'),
     website: 'https://unmand.com',
     source: null,
-    tags: ['product', 'design']
+    tags: ['product', 'design'],
   },
   {
     title: 'Haochen',
-    description: 'My personal website with a blog section to record all tech-related issues I encountered.',
+    description:
+      'My personal website with a blog section to record all tech-related issues I encountered.',
     preview: require('./showcase/haochen.png'),
     website: 'https://haochenqi.com/',
     source: 'https://github.com/HaochenQ/Haochen-Blog',
-    tags: ['personal', 'opensource']
+    tags: ['personal', 'opensource'],
   },
   {
     title: 'Drayman',
@@ -1488,15 +1517,16 @@ const Users: User[] = [
     preview: require('./showcase/drayman.png'),
     website: 'https://drayman.io/',
     source: 'https://github.com/Claviz/drayman',
-    tags: ['opensource']
+    tags: ['opensource'],
   },
   {
     title: 'Nocalhost',
-    description: 'An open-source toolsets help to build cloud-native applications easier and faster.',
+    description:
+      'An open-source toolsets help to build cloud-native applications easier and faster.',
     preview: require('./showcase/nocalhost.png'),
     website: 'https://nocalhost.dev/',
     source: 'https://github.com/nocalhost/nocalhost',
-    tags: ['opensource', 'i18n']
+    tags: ['opensource', 'i18n'],
   },
   {
     title: 'Patrik Mäsiar',
@@ -1507,7 +1537,6 @@ const Users: User[] = [
     tags: ['personal', 'opensource'],
   },
 
-
   /*
   Pro Tip: add your site in alphabetical order.
   Appending your site here (at the end) is more likely to produce Git conflicts.

website/src/featureRequests/FeatureRequestsPage.tsx

@@ -14,10 +14,11 @@ import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
 
-function FeatureRequests() {
+function FeatureRequests(): JSX.Element {
   useEffect(() => {
     cannyScript();
-    const Canny = (window as any).Canny;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const {Canny} = window as any;
     Canny('render', {
       boardToken: BOARD_TOKEN,
       basePath: '/feature-requests',

website/src/featureRequests/cannyScript.js

@@ -1,11 +1,5 @@
-/**
- * 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.
- */
-
 // Provided by Canny.
+/* eslint-disable */
 
 function cannyScript() {
   !(function (w, d, i, s) {

website/src/pages/index.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable global-require */
+
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
@@ -78,7 +80,7 @@ const QUOTES = [
   },
 ];
 
-function Home() {
+function Home(): JSX.Element {
   const {
     siteConfig: {
       customFields: {description},
@@ -98,6 +100,7 @@ function Home() {
               />
               <span
                 className={styles.heroTitleTextHtml}
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: translate({
                     id: 'homepage.hero.title',
@@ -162,11 +165,11 @@ function Home() {
                 </h2>
                 <p className="padding-horiz--md">
                   <Translate>
-                    Save time and focus on your project's documentation. Simply
-                    write docs and blog posts with Markdown/MDX and Docusaurus
-                    will publish a set of static HTML files ready to serve. You
-                    can even embed JSX components into your Markdown thanks to
-                    MDX.
+                    Save time and focus on your project&apos;s documentation.
+                    Simply write docs and blog posts with Markdown/MDX and
+                    Docusaurus will publish a set of static HTML files ready to
+                    serve. You can even embed JSX components into your Markdown
+                    thanks to MDX.
                   </Translate>
                 </p>
               </div>
@@ -181,9 +184,9 @@ function Home() {
                 </h2>
                 <p className="padding-horiz--md">
                   <Translate>
-                    Extend or customize your project's layout by reusing React.
-                    Docusaurus can be extended while reusing the same header and
-                    footer.
+                    Extend or customize your project&apos;s layout by reusing
+                    React. Docusaurus can be extended while reusing the same
+                    header and footer.
                   </Translate>
                 </p>
               </div>

website/src/pages/showcase/index.tsx

@@ -105,9 +105,10 @@ function ShowcaseHeader() {
       <p>{DESCRIPTION}</p>
       <p>
         <a
-          className={'button button--primary'}
+          className="button button--primary"
           href={EDIT_URL}
-          target={'_blank'}>
+          target="_blank"
+          rel="noreferrer">
           🙏 Add your site now!
         </a>
       </p>
@@ -195,7 +196,7 @@ function ShowcaseCards({filteredUsers}: {filteredUsers: User[]}) {
   );
 }
 
-function Showcase() {
+function Showcase(): JSX.Element {
   const {selectedTags, toggleTag} = useSelectedTags();
   const [operator, setOperator] = useState<Operator>('OR');
   const filteredUsers = useFilteredUsers(SortedUsers, selectedTags, operator);

website/src/pages/versions.tsx

@@ -16,7 +16,7 @@ import VersionsArchived from '@site/versionsArchived.json';
 
 const VersionsArchivedList = Object.entries(VersionsArchived);
 
-function Version() {
+function Version(): JSX.Element {
   const {
     siteConfig: {organizationName, projectName},
   } = useDocusaurusContext();
@@ -128,7 +128,9 @@ function Version() {
               <tr>
                 <th>1.x</th>
                 <td>
-                  <a href={`https://v1.docusaurus.io/docs/en/installation`}>
+                  <a
+                    href="https://v1.docusaurus.io/docs/en/installation"
+                    rel="noreferrer">
                     Documentation
                   </a>
                 </td>

website/src/theme/ReactLiveScope/components.tsx

@@ -1,7 +1,15 @@
+/**
+ * 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 React, {ComponentProps} from 'react';
 
-export const ButtonExample = (props: ComponentProps<'button'>) => (
+export const ButtonExample = (props: ComponentProps<'button'>): JSX.Element => (
   <button
+    type="button"
     {...props}
     style={{
       backgroundColor: 'white',

website/src/types.d.ts

@@ -1 +1,8 @@
+/**
+ * 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.
+ */
+
 /// <reference types="@docusaurus/plugin-ideal-image" />

website/src/utils/jsUtils.ts

@@ -1,21 +1,26 @@
+/**
+ * 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.
+ */
+
 // Inspired by https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_difference
-export function difference<T>(...arrays: T[][]) {
+export function difference<T>(...arrays: T[][]): T[] {
   return arrays.reduce((a, b) => a.filter((c) => !b.includes(c)));
 }
 
 // Inspired by https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_sortby-and-_orderby
-export function sortBy<T>(array: T[], getter: (item: T) => unknown) {
-  function compareBy(getter: (item: T) => unknown) {
-    return (a: T, b: T) =>
-      getter(a) > getter(b) ? 1 : getter(b) > getter(a) ? -1 : 0;
-  }
-
+export function sortBy<T>(array: T[], getter: (item: T) => unknown): T[] {
   const sortedArray = [...array];
-  sortedArray.sort(compareBy(getter));
+  sortedArray.sort((a, b) =>
+    // eslint-disable-next-line no-nested-ternary
+    getter(a) > getter(b) ? 1 : getter(b) > getter(a) ? -1 : 0,
+  );
   return sortedArray;
 }
 
-export function toggleListItem<T>(list: T[], item: T) {
+export function toggleListItem<T>(list: T[], item: T): T[] {
   const itemIndex = list.indexOf(item);
   if (itemIndex === -1) {
     return list.concat(item);

website/waitForCrowdin.js

@@ -39,6 +39,7 @@ async function hasBuildInProgress() {
 
 async function run() {
   const timeBefore = Date.now();
+  // eslint-disable-next-line no-constant-condition
   while (true) {
     if (Date.now() - timeBefore > timeout) {
       console.warn(