From 697a6a7a1863b2f1726d0cf39b6a8ae694d8934b Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Tue, 31 Dec 2024 20:08:50 -0600
Subject: [PATCH] Format change, sort by date_updated descending

---
 src/pages/projects.tsx | 88 +++++++++++++++++++++++-------------------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index 6fc76da..17d3108 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -10,61 +10,71 @@ type Props = {
 };
 
 async function getProjects() {
-  return await directus.request(readItems("project", {
-    fields: ["id", "name", "shortDescription", "icon", {links: ["url"]}],
-  }));
+  return await directus.request(
+    readItems("project", {
+      fields: ["id", "name", "shortDescription", "icon", { links: ["url"] }],
+      sort: "-date_updated",
+    }),
+  );
 }
 
-export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {;
-
+export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
   return {
     props: {
       projects: await getProjects(),
-    }
-  }
+    },
+  };
 }
 
-const ProjectsPage: NextPage<Props> = ({projects}) => {
+const ProjectsPage: NextPage<Props> = ({ projects }) => {
   return (
     <AppWrapper dotsClassName="animate-bg-fast">
-      <div className="max-w-500 mx-auto py-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 md:grid-cols-2 lg:grid-cols-3">
-        <div className="md:col-span-2 text-center lg:col-span-3 w-full mb-10">
-          <h1 className="text-4xl md:text-5xl pb-3 text-zinc-200 opacity-100 font-hanken">
-          Projects
+      <div className="max-w-500 mx-auto grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 py-20 md:grid-cols-2 lg:grid-cols-3">
+        <div className="mb-10 w-full text-center md:col-span-2 lg:col-span-3">
+          <h1 className="pb-3 font-hanken text-4xl text-zinc-200 opacity-100 md:text-5xl">
+            Projects
           </h1>
           <span className="text-lg text-zinc-400">
             created, maintained, or contributed to by me...
           </span>
         </div>
-        {projects.map(({ id, name, shortDescription: description, links, icon }) =>
-        {
-          const useAnchor = links?.length ?? 0 > 0;
-          const DynamicLink = useAnchor  ? Link : "div";
-          const linkProps = useAnchor ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {};
+        {projects.map(
+          ({ id, name, shortDescription: description, links, icon }) => {
+            const useAnchor = links?.length ?? 0 > 0;
+            const DynamicLink = useAnchor ? Link : "div";
+            const linkProps = useAnchor
+              ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" }
+              : {};
 
-            return <div className="flex" key={id}>
-              {/* @ts-expect-error because div can't accept href */}
-              <DynamicLink
-                key={name}
-                title={name}
-                className="flex pl-3 pr-5 pt-1 pb-2.5 relative max-w-[30rem] items-center transition-colors rounded-lg text-zinc-400 hover:text-zinc-50 bg-black/10 hover:bg-zinc-500/10"
-                {...linkProps}
-              >
-
-                <div className="w-14 pr-5 h-full flex items-center justify-center">
-                  <i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i>
-                </div>
-                <div className="flex-auto overflow-hidden">
-                  <div className="text-lg">{name}</div>
-                  <div className="text-base font-normal opacity-70 whitespace-nowrap">
-                    {description}
+            return (
+              <div className="flex" key={id}>
+                {/* @ts-expect-error because div can't accept href */}
+                <DynamicLink
+                  key={name}
+                  title={name}
+                  className="relative flex max-w-[30rem] items-center rounded-lg bg-black/10 pb-2.5 pl-3 pr-5 pt-1 text-zinc-400 transition-colors hover:bg-zinc-500/10 hover:text-zinc-50"
+                  {...linkProps}
+                >
+                  <div className="flex h-full w-14 items-center justify-center pr-5">
+                    <i
+                      className={cn(
+                        icon ?? "fa-heart",
+                        "fa-solid text-3xl text-opacity-80 saturate-0",
+                      )}
+                    ></i>
                   </div>
-                </div>
-              </DynamicLink>
-              <div className="grow" />
-            </div>;
-          } 
-)}
+                  <div className="flex-auto overflow-hidden">
+                    <div className="text-lg">{name}</div>
+                    <div className="whitespace-nowrap text-base font-normal opacity-70">
+                      {description}
+                    </div>
+                  </div>
+                </DynamicLink>
+                <div className="grow" />
+              </div>
+            );
+          },
+        )}
       </div>
     </AppWrapper>
   );