feat: read all packages on about page (#391)

apps/nextjs/package.json

@@ -47,6 +47,7 @@
     "chroma-js": "^2.4.2",
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.5",
+    "glob": "^10.3.12",
     "jotai": "^2.8.0",
     "next": "^14.2.3",
     "postcss-preset-mantine": "^1.15.0",
@@ -60,10 +61,10 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/chroma-js": "2.4.4",
     "@types/node": "^20.12.7",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@types/chroma-js": "2.4.4",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "prettier": "^3.2.5",

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

@@ -13,10 +13,11 @@ import {
   Title,
 } from "@mantine/core";
 import { IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
+import { setStaticParamsLocale } from "next-international/server";
 
-import { getScopedI18n } from "@homarr/translation/server";
+import { getScopedI18n, getStaticParams } from "@homarr/translation/server";
 
-import { getPackageAttributes } from "~/versions/package-reader";
+import { getPackageAttributesAsync } from "~/versions/package-reader";
 import logo from "../../../../../public/logo/logo.png";
 import classes from "./accordion.module.css";
 
@@ -29,9 +30,16 @@ export async function generateMetadata() {
   };
 }
 
-export default async function AboutPage() {
+interface PageProps {
+  params: {
+    locale: string;
+  };
+}
+
+export default async function AboutPage({ params: { locale } }: PageProps) {
+  setStaticParamsLocale(locale);
   const t = await getScopedI18n("management.page.about");
-  const attributes = getPackageAttributes();
+  const attributes = await getPackageAttributesAsync();
   return (
     <div>
       <Center w="100%">
@@ -75,15 +83,17 @@ export default async function AboutPage() {
           </AccordionControl>
           <AccordionPanel>
             <List>
-              {Object.entries(attributes.dependencies).map(([key, value]) => (
-                <ListItem key={key}>
-                  {value.includes("workspace:") ? (
-                    <Text>{key}</Text>
-                  ) : (
-                    <a href={`https://www.npmjs.com/package/${key}`}>{key}</a>
-                  )}
-                </ListItem>
-              ))}
+              {Object.entries(attributes.dependencies)
+                .sort(([key1], [key2]) => key1.localeCompare(key2))
+                .map(([key, value]) => (
+                  <ListItem key={key}>
+                    {value.includes("workspace:") ? (
+                      <Text>{key}</Text>
+                    ) : (
+                      <a href={`https://www.npmjs.com/package/${key}`}>{key}</a>
+                    )}
+                  </ListItem>
+                ))}
             </List>
           </AccordionPanel>
         </AccordionItem>
@@ -91,3 +101,9 @@ export default async function AboutPage() {
     </div>
   );
 }
+
+export function generateStaticParams() {
+  return getStaticParams();
+}
+
+export const dynamic = "force-static";

apps/nextjs/src/versions/package-reader.ts

@@ -1,13 +1,40 @@
+import fsPromises from "fs/promises";
+import { glob } from "glob";
+
 import packageJson from "~/../package.json";
 
 const getPackageVersion = () => packageJson.version;
-const getDependencies = (): PackageJsonDependencies => packageJson.dependencies;
+const getDependenciesAsync = async (): Promise<PackageJsonDependencies> => {
+  const pathNames = await glob("**/package.json", {
+    ignore: "node_modules/**",
+    cwd: "../../",
+    absolute: true,
+  });
+  const packageContents = await Promise.all(
+    pathNames.map(async (path) => await fsPromises.readFile(path, "utf-8")),
+  );
+  const packageDependencies = packageContents
+    .map(
+      (packageContent) =>
+        (JSON.parse(packageContent) as PackageJson).dependencies,
+    )
+    .filter((dependencies) => dependencies !== undefined);
 
-export const getPackageAttributes = () => {
+  let dependencies = {};
+  for (const dependenciesOfPackage of packageDependencies) {
+    dependencies = { ...dependencies, ...dependenciesOfPackage };
+  }
+  return dependencies;
+};
+
+export const getPackageAttributesAsync = async () => {
   return {
     version: getPackageVersion(),
-    dependencies: getDependencies(),
+    dependencies: await getDependenciesAsync(),
   };
 };
 
 type PackageJsonDependencies = { [key in string]: string };
+interface PackageJson {
+  dependencies: PackageJsonDependencies | undefined;
+}