feat(about): add opencollective contributors (#5481)

apps/nextjs/src/app/[locale]/manage/about/page.tsx

@@ -25,7 +25,14 @@ import {
   Title,
   UnstyledButton,
 } from "@mantine/core";
-import { IconKeyboard, IconLanguage, IconLibrary, IconPackage, IconUsers } from "@tabler/icons-react";
+import {
+  IconKeyboard,
+  IconLanguage,
+  IconLibrary,
+  IconMoneybagHeart,
+  IconPackage,
+  IconUsers,
+} from "@tabler/icons-react";
 
 import { capitalize, objectEntries } from "@homarr/common";
 import { hotkeys } from "@homarr/definitions";
@@ -37,6 +44,7 @@ import { createMetaTitle } from "~/metadata";
 import type { PackageJsonDependencies } from "~/versions/package-reader";
 import { getPackageVersion } from "~/versions/package-reader";
 import type githubContributorsJson from "../../../../../../../static-data/contributors.json";
+import type openCollectiveContributorsJson from "../../../../../../../static-data/opencollective-contributors.json";
 import type crowdinContributorsJson from "../../../../../../../static-data/translators.json";
 import classes from "./about.module.css";
 
@@ -71,6 +79,10 @@ export default async function AboutPage() {
     res.json(),
   )) as typeof crowdinContributorsJson;
 
+  const openCollectiveContributors = (await fetch(`${baseServerUrl}/api/about/contributors/opencollective`).then(
+    (res) => res.json(),
+  )) as typeof openCollectiveContributorsJson;
+
   return (
     <div>
       <DynamicBreadcrumb />
@@ -136,6 +148,30 @@ export default async function AboutPage() {
             </Flex>
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem value="sponsors">
+          <AccordionControl icon={<IconMoneybagHeart size="1rem" />}>
+            <Stack gap={0}>
+              <Text>{t("accordion.sponsors.title")}</Text>
+              <Text size="sm" c="dimmed">
+                {t("accordion.sponsors.subtitle", {
+                  count: String(openCollectiveContributors.length),
+                })}
+              </Text>
+            </Stack>
+          </AccordionControl>
+          <AccordionPanel>
+            <Flex wrap="wrap" gap="xs">
+              {openCollectiveContributors.map((sponsor) => (
+                <GenericContributorLinkCard
+                  key={sponsor.slug}
+                  link={`https://opencollective.com/${sponsor.slug}`}
+                  image={sponsor.imageUrl}
+                  name={sponsor.name}
+                />
+              ))}
+            </Flex>
+          </AccordionPanel>
+        </AccordionItem>
         <AccordionItem value="libraries">
           <AccordionControl icon={<IconLibrary size="1rem" />}>
             <Stack gap={0}>

apps/nextjs/src/app/api/about/contributors/opencollective/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+import openCollectiveContributors from "../../../../../../../../static-data/opencollective-contributors.json";
+
+export const GET = () => {
+  return NextResponse.json(openCollectiveContributors);
+};
+
+export const dynamic = "force-static";