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

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";