chore: supporter page and mechanism

Author: ovflowd

apps/site/components/Common/Supporters/SupporterIcon/index.module.css

@@ -0,0 +1,7 @@
+.supporterIcon {
+  @apply h-12
+    w-12
+    rounded-lg
+    bg-neutral-100
+    p-1;
+}

apps/site/components/Common/Supporters/SupporterIcon/index.tsx

@@ -4,6 +4,8 @@ import { cloneElement, type ComponentProps, type FC } from 'react';
 import Skeleton from '@/components/Common/Skeleton';
 import type { Supporter } from '@/types';
 
+import style from './index.module.css';
+
 type SupporterIconProps = Supporter & ComponentProps<typeof Skeleton>;
 
 const SupporterIcon: FC<SupporterIconProps> = ({
@@ -14,9 +16,7 @@ const SupporterIcon: FC<SupporterIconProps> = ({
 }) => (
   <Skeleton loading={loading}>
     <Link href={href} aria-label={name}>
-      {cloneElement(icon, {
-        className: 'h-12 w-12 rounded-lg bg-neutral-100 p-1',
-      })}
+      {cloneElement(icon, { className: style.supporterIcon })}
     </Link>
   </Skeleton>
 );

apps/site/components/Common/Supporters/SupporterIconList/index.module.css

@@ -0,0 +1,8 @@
+.supporterIconList {
+  @apply flex
+    flex-row
+    flex-wrap
+    items-center
+    justify-center
+    gap-4;
+}

apps/site/components/Common/Supporters/SupporterIconList/index.tsx

@@ -7,6 +7,8 @@ import { randomSupporterList } from '@/components/Common/Supporters/utils';
 import { DEFAULT_SUPPORTERS_LIST } from '@/next.supporters.constants';
 import type { Supporter } from '@/types';
 
+import style from './index.module.css';
+
 type SupporterIconListProps = {
   supporters: Array<Supporter>;
   maxLength?: number;
@@ -50,7 +52,7 @@ const SupporterIconList: FC<SupporterIconListProps> = ({
   }, []);
 
   return (
-    <div className="flex flex-row flex-wrap items-center justify-center gap-4">
+    <div className={style.supporterIconList}>
       {seedList.slice(0, maxLength).map((supporter, index) => (
         <SupporterIcon
           {...supporter}

apps/site/components/Common/Supporters/SupporterLogo/index.tsx

@@ -1,9 +1,28 @@
-import type { FC } from 'react';
+import classNames from 'classnames';
+import { cloneElement, type FC } from 'react';
 
+import Link from '@/components/Link';
 import type { Supporter } from '@/types';
 
-// @TODO: This will be used within the MDX page for Supporters
-// to render the Logos of Supporters in the page
-const SupporterLogo: FC<Supporter> = () => null;
+const SupporterLogoSizeByThreshold: Record<Supporter['threshold'], string> = {
+  0.1: 'h-8 w-8',
+  0.2: 'h-10 w-10',
+  0.3: 'h-12 w-12',
+  0.4: 'h-14 w-14',
+  0.5: 'h-16 w-16',
+  0.6: 'h-18 w-18',
+  0.7: 'h-20 w-20',
+  0.8: 'h-22 w-22',
+  0.9: 'h-24 w-24',
+  1: 'h-24 w-24',
+};
+
+const SupporterLogo: FC<Supporter> = ({ href, logo, name, threshold }) => (
+  <Link href={href} aria-label={name}>
+    {cloneElement(logo, {
+      className: classNames('p-1', SupporterLogoSizeByThreshold[threshold]),
+    })}
+  </Link>
+);
 
 export default SupporterLogo;

apps/site/components/Common/Supporters/SupporterLogoList/index.module.css

@@ -0,0 +1,22 @@
+.supporterLogoList {
+  @apply flex
+    flex-col
+    gap-2;
+}
+
+.supporterTier {
+  @apply flex
+    flex-wrap
+    items-center
+    justify-center
+    gap-4
+    last-of-type:mb-0
+    md:gap-6;
+}
+
+.supporterLogo {
+  @apply flex
+    items-center
+    justify-center
+    p-2;
+}

apps/site/components/Common/Supporters/SupporterLogoList/index.tsx

@@ -1,14 +1,51 @@
+'use client';
+
 import type { FC } from 'react';
+import { useMemo } from 'react';
 
+import SupporterLogo from '@/components/Common/Supporters/SupporterLogo';
 import type { Supporter } from '@/types';
 
+import styles from './index.module.css';
+
 type SupporterLogoListProps = {
   supporters: Array<Supporter>;
 };
 
-// @TODO: This will be used within the MDX page for Supporters
-// to render the Logos of Supporters in the page
-// in a grid format that renders logo biggers based on thresholds
-const SupporterLogoList: FC<SupporterLogoListProps> = () => null;
+const SupporterLogoList: FC<SupporterLogoListProps> = ({ supporters }) => {
+  const tiers = useMemo(() => {
+    const sortedSupporters = [...supporters].sort(
+      (a, b) => b.threshold - a.threshold
+    );
+
+    return sortedSupporters.reduce<Record<string, Array<Supporter>>>(
+      (acc, supporter) => ({
+        ...acc,
+        [supporter.threshold]: [...(acc[supporter.threshold] ?? []), supporter],
+      }),
+      {}
+    );
+  }, [supporters]);
+
+  return (
+    <div className={styles.supporterLogoList}>
+      {Object.keys(tiers).map((threshold, index) => (
+        <div className={styles.supporterTier} key={index}>
+          {tiers[threshold].map((supporter, idx) => (
+            <div key={idx} className={styles.supporterLogo}>
+              <SupporterLogo
+                name={supporter.name}
+                logo={supporter.logo}
+                icon={supporter.icon}
+                href={supporter.href}
+                threshold={supporter.threshold}
+              />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
 
 export default SupporterLogoList;

apps/site/components/withSupporterLogoList.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import type { FC } from 'react';
+
+import SupporterLogoList from '@/components/Common/Supporters/SupporterLogoList';
+import supporters from '@/next.supporters.constants';
+
+type WithSupporterLogoListProps = {
+  supporterNames: Array<string>;
+};
+
+const WithSupporterLogoList: FC<WithSupporterLogoListProps> = ({
+  supporterNames,
+}) => (
+  <SupporterLogoList
+    supporters={supporters
+      .filter(({ name }) => supporterNames.includes(name))
+      .slice(0, 3)}
+  />
+);
+
+export default WithSupporterLogoList;

apps/site/next.mdx.use.client.mjs

@@ -18,6 +18,7 @@ import MDXCodeBox from './components/MDX/CodeBox';
 import MDXCodeTabs from './components/MDX/CodeTabs';
 import MDXImage from './components/MDX/Image';
 import WithSupporterIconList from './components/withSupporterIconList';
+import WithSupporterLogoList from './components/withSupporterLogoList';
 import { ReleaseProvider } from './providers/releaseProvider';
 
 /**
@@ -36,6 +37,8 @@ export const clientMdxComponents = {
   LinkWithArrow: LinkWithArrow,
   // A List of supporter Icons
   SupporterIconList: WithSupporterIconList,
+  // A List of supporter Logos
+  SupporterLogoList: WithSupporterLogoList,
   // Group of components that enable you to select versions for Node.js
   // releases and download selected versions. Uses `releaseProvider` as a provider
   Release: {

apps/site/pages/en/about/supporters.mdx

@@ -3,4 +3,78 @@ title: Node.js Supporters
 layout: about
 ---
 
-TBD
+# Supporters
+
+The work of the Node.js project is driven forward by volunteers. Our preferred form of support
+from an organization is sending your people to contribute on a regular and consistent manner.
+
+However, there is some supporting work within the project that is not the best fit for volunteers.
+For example, when vulnerabilities come with a disclosure deadline there is no guarrantee that
+a volunteers will have time to get the vulnerabilty fixed and out in a security release out in time.
+
+In addition, the project needs non-people resources to continue operating. For example machines for
+the CI infrastructure. While the OpenJS Foundation covers some resources which are needed by the
+project it cannot cover all of them.
+
+For cases were volunteers are not a great fit and for non-people resources we are grateful to the
+sponsors listed on their page for their support.
+
+## Releasers
+
+Regular and timely releases are a key goal for the projectsc. Organizations
+and individuals that support the project by committing to do at least 4
+releases per year include:
+
+<SupporterLogoList supporterNames={['Supporter']} />
+
+## CI stability lead
+
+The project has been having ongoing issues with flaky tests and this has been a major pain point.
+The project, therefore, has a goal to hire a short term ci stability lead who can improve
+ci stability and implement tooling and processes that will provide longer term benefits. The following
+sponsors have made this possible:
+
+<SupporterLogoList supporterNames={['Supporter']} />
+
+## Security
+
+Maintaining a good security posture and addressing vulnerabilities in a timely manner is a key goal
+for the project. We thank the following sponsors for their support in helping to do that.
+
+### Security Lead
+
+Organizations and individuals that support the project by funding our security lead for a mininmum of
+10000 US per year include:
+
+<SupporterLogoList supporterNames={['Supporter']} />
+
+### Security Triage
+
+Organizations and individuals who support the project by commiting at least one person to take a regular slot in our
+security triage rotation include:
+
+<SupporterLogoList supporterNames={['Supporter']} />
+
+### Security Steward
+
+Organizations and individuals that support the project by committing at least one person to
+take a regular slot in our security steward rotation include:
+
+<SupporterLogoList supporterNames={['Supporter']} />
+
+## Infrastructure
+
+Organizations and individuals that support the project by contributing at least $5000 of resources
+to the project per year include:
+
+<SupporterLogoList supporterNames={['Supporter']} />
+
+## General supporters
+
+Organizations and individuals who have contributed at least $500 per year to the project. A
+full list of supporters is available on our GitHub sponsors and Open Collective pages:
+
+- https://github.com/sponsors/nodejs
+- https://opencollective.com/nodejs
+
+<SupporterLogoList supporterNames={['Supporter']} />