[wip] color projects

Author: aster-void

src/pages/projects.astro

@@ -0,0 +1,87 @@
+---
+import { getCollection } from "astro:content";
+import ProjectList from "+/components/ProjectList.astro";
+import GlobalLayout from "+/layouts/GlobalLayout.astro";
+import { Focus } from "+/schema";
+
+const kinds = [
+  {
+    path: undefined,
+    kind: "long-term",
+    title: "長期プロジェクト",
+    tab: "長期プロジェクト",
+  },
+  {
+    path: "hackathon",
+    kind: "hackathon",
+    title: "ハッカソン",
+    tab: "ハッカソン",
+  },
+  {
+    path: "festival",
+    kind: "festival",
+    title: "学園祭プロジェクト",
+    tab: "学園祭",
+  },
+];
+export function getStaticPaths(params) {
+  return kinds.map((kind) => ({
+    params: { kind: kind.path },
+    props: { kind },
+  }));
+}
+
+const tabFocus = Astro.props.kind.kind;
+const titles = new Map([
+  ["long-term", "長期プロジェクト"],
+  ["festival", "学園祭プロジェクト"],
+  ["hackathon", "ハッカソン"],
+]);
+function getTitle() {
+  return titles.get(Astro.props.kind);
+}
+
+const projects = (await getCollection("projects"))
+  .filter((project) => {
+    return project.data.kind === Astro.props.kind;
+  })
+  .sort((a, b) => {
+    const a_order = a.data.order ?? Number.POSITIVE_INFINITY;
+    const b_order = b.data.order ?? Number.POSITIVE_INFINITY;
+    if (a_order !== b_order) {
+      return a_order - b_order;
+    }
+    return b.data.date.getTime() - a.data.date.getTime();
+  });
+---
+
+<GlobalLayout
+  title="長期プロジェクト"
+  description="ut.code(); で長期間にわたって開発を行っているプロジェクトです。"
+  focus={Focus.projects}
+  image={null}
+>
+  <main class="container mx-auto px-4 py-24">
+    <h1 class="text-center text-4xl">長期プロジェクト</h1>
+    <div role="tablist" class="tabs">
+      <a
+        role="tab"
+        class:list={["tab", { "tab-active": tabFocus === "long-term" }]}
+        href="/projects">長期プロジェクト</a
+      >
+      <a
+        role="tab"
+        class="tab"
+        class:list={["tab", { "tab-active": tabFocus === "festival" }]}
+        href="/projects/festival">学園祭</a
+      >
+      <a
+        role="tab"
+        class="tab"
+        class:list={["tab", { "tab-active": tabFocus === "hackathon" }]}
+        href="/projects/hackathon">ハッカソン</a
+      >
+    </div>
+    <ProjectList {projects} class="mt-16" variant="full" />
+  </main>
+</GlobalLayout>