wip: fixed more styling

Author: brynblack

package-lock.json

@@ -11,15 +11,15 @@
   },
   "dependencies": {
     "@docusaurus/plugin-client-redirects": "^3.8.0",
-    "@tanstack/react-query": "^5.80.2",
+    "@tanstack/react-query": "^5.80.6",
     "chart.js": "^4.4.9",
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-zoom": "^2.2.0",
     "date-fns": "^4.1.0",
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250604.0",
+    "@cloudflare/workers-types": "^4.20250605.0",
     "@docusaurus/core": "^3.8.0",
     "@docusaurus/module-type-aliases": "^3.8.0",
     "@docusaurus/preset-classic": "^3.8.0",

package.json

@@ -54,6 +54,7 @@
 .navbar__inner {
   max-width: 1100px;
   margin: 0 auto;
+  color: #fff;
 }
 
 .navbar__logo {
@@ -115,11 +116,27 @@
   }
 }
 
-/**
- * Footer
- */
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  border: 1px solid var(--ifm-table-border-color);
+  padding: 0.6em 1em;
+}
+
 .footer {
   background: #000;
-  /*height: 6em;*/
   padding: 1.5em 0;
+  display: flex;
+  justify-content: center;
 }
+
+.footer__bottom {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+

src/css/custom.css

@@ -54,25 +54,57 @@ export default function Home(): React.JSX.Element {
     queryFn: () =>
       fetch(`${siteConfig.url}/api/deployments`).then(async (response) => {
         const resp = await utils.unwrapJson(response);
-        if (Array.isArray(resp)) {
-          resp.length = 5;
-        }
-        return resp;
+        return Array.isArray(resp) ? resp.slice(0, 5) : [];
       }),
     refetchInterval: 60 * 1000,
   });
 
-  const versionMetadataKeys = deploymentsQuery.data?.reduce(
-    (acc, deployment) => {
-      for (const key of Object.keys(deployment.versionMetadata)) {
-        acc.add(key);
+  const preferredOrder = [
+    'commitHash',
+    'version',
+    'libVersion',
+    'libSourceVersion',
+    'libStateVersion',
+    'libNetworkVersion',
+  ];
+
+  const versionMetadataLabels: Record<string, string> = {
+    version: 'Version',
+    commitHash: 'Commit',
+    libVersion: 'LibVersion',
+    libStateVersion: 'StVer',
+    libSourceVersion: 'LibSrcVer',
+    libNetworkVersion: 'Net',
+  };
+
+  function formatLocalDateTime(ms: number): string {
+    return new Date(ms).toLocaleString(undefined, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  }
+
+  const versionMetadataKeysSorted = React.useMemo(() => {
+    if (!Array.isArray(deploymentsQuery.data)) return [];
+
+    const keySet = new Set<string>();
+    for (const deployment of deploymentsQuery.data) {
+      if (
+        deployment &&
+        typeof deployment.versionMetadata === 'object' &&
+        deployment.versionMetadata != null
+      ) {
+        for (const key of Object.keys(deployment.versionMetadata)) {
+          keySet.add(key);
+        }
       }
-      return acc;
-    },
-    new Set<string>(),
-  );
-  const versionMetadataKeysSorted =
-    versionMetadataKeys != null ? [...versionMetadataKeys].sort() : undefined;
+    }
+    return Array.from(keySet).sort();
+  }, [deploymentsQuery.data]);
   return (
     <Layout
       description="Polykey, a new approach to secrets management."
@@ -142,17 +174,19 @@ export default function Home(): React.JSX.Element {
           )}
           <div className="rounded-2xl bg-[#E4F6F2] p-3">
             <span className="font-semibold">Deployments:</span>
-            <table className="mt-3 w-full">
-              <tbody className="table w-full">
+            <table className="mt-3 w-full table-auto">
+              <thead>
                 <tr>
                   <th>ID</th>
-                  {(versionMetadataKeysSorted ?? []).map((key) => (
-                    <th key={key}>{key}</th>
+                  {preferredOrder.map((key) => (
+                    <th key={key}>{versionMetadataLabels[key] ?? key}</th>
                   ))}
                   <th>Started On</th>
                   <th>Finished On</th>
                   <th>Progress</th>
                 </tr>
+              </thead>
+              <tbody>
                 {deploymentsQuery.isLoading ? (
                   <tr>
                     <td align="center" colSpan={5}>
@@ -174,7 +208,7 @@ export default function Home(): React.JSX.Element {
                     return (
                       <tr key={deployment.id}>
                         <td>{deployment.id}</td>
-                        {(versionMetadataKeysSorted ?? []).map((key) => {
+                        {preferredOrder.map((key) => {
                           const value = deployment.versionMetadata[key];
                           if (value == null) {
                             return <td key={key}></td>;
@@ -195,11 +229,11 @@ export default function Home(): React.JSX.Element {
                               return <td key={key}>{value}</td>;
                           }
                         })}
-                        <td>{new Date(deployment.startedOn).toISOString()}</td>
+                        <td>{formatLocalDateTime(deployment.startedOn)}</td>
                         <td>
-                          {deployment.finishedOn == null
-                            ? ''
-                            : new Date(deployment.finishedOn).toISOString()}
+                          {deployment.finishedOn
+                            ? formatLocalDateTime(deployment.finishedOn)
+                            : ''}
                         </td>
                         <td className="text-center">
                           <div className="relative inline-flex items-center justify-center overflow-hidden rounded-full">