add github workflows for linting, formatting, typechecking

.eslintrc.cjs

@@ -24,4 +24,9 @@ module.exports = {
     project: ["./tsconfig.json", "./tsconfig.node.json"],
     tsconfigRootDir: __dirname,
   },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
 };

.github/workflows/ci.yaml

@@ -0,0 +1,27 @@
+name: checks
+
+on: [push]
+
+jobs:
+  build:
+    name: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint (ESLint)
+        run: npm run lint
+
+      - name: Format (Prettier)
+        run: npm run format:ci
+
+      - name: Build project
+        run: npm run build

package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write .",
+    "format:ci": "prettier --check .",
     "preview": "vite preview"
   },
   "dependencies": {

src/pages/events/Events.tsx

@@ -8,7 +8,6 @@ import type { Event } from "../../types/eventsType";
 import ToolbarButton from "../../components/ToolbarButton";
 import EventsCard from "../events/EventsCard";
 
-
 export default function Events() {
   const [isLoading, setIsLoading] = useState(true);
   const [events, setEvents] = useState<Event[]>([]);
@@ -18,9 +17,7 @@ export default function Events() {
     setTimeout(() => {
       // TODO: remove this setTimeout -- just to simulate an artificial delay
       void getEvents().then((data) =>
-        setEvents(
-          data.sort((a, b) => (a.startTime > b.startTime ? -1 : 1))
-        )
+        setEvents(data.sort((a, b) => (a.startTime > b.startTime ? -1 : 1)))
       );
       setIsLoading(false);
     }, 1000);
@@ -41,7 +38,16 @@ export default function Events() {
       </div>
       <div className="flex flex-row flex-wrap items-start justify-start gap-5">
         {events.map((event) => (
-          <EventsCard key={event.id} id={event.id} title={event.title} slug={event.slug} startTime={event.startTime} endTime={event.endTime} location={event.location} photo={event.photo} />
+          <EventsCard
+            key={event.id}
+            id={event.id}
+            title={event.title}
+            slug={event.slug}
+            startTime={event.startTime}
+            endTime={event.endTime}
+            location={event.location}
+            photo={event.photo}
+          />
         ))}
       </div>
     </>

src/pages/events/EventsCard.tsx

@@ -5,42 +5,36 @@ import dayjs from "dayjs";
 import { Trash } from "iconoir-react";
 
 import {
-    getEventImageKey,
+  getEventImageKey,
   getEventImageRoute,
   getGithubLink,
 } from "../../lib/blob";
 
 export default function EventsCard({
-    id,
-    title,
-    slug,
-    startTime,
-    endTime,
-    location,
-    photo,
+  id,
+  title,
+  slug,
+  startTime,
+  endTime,
+  location,
+  photo,
 }: {
-    id: string;
-    title: string;
-    slug: string;
-    startTime: Date;
-    endTime: Date;
-    location: string;
-    photo: string;
+  id: string;
+  title: string;
+  slug: string;
+  startTime: Date;
+  endTime: Date;
+  location: string;
+  photo: string;
 }) {
   return (
     <div className="group relative max-w-xl">
       <div className="absolute left-0 top-0 h-full w-full bg-slate-700/50 p-5 text-white opacity-0 transition-opacity group-hover:opacity-100">
         <p>
-          Event:{" "}
-          <span className="font-mono">
-            {title}
-          </span>
+          Event: <span className="font-mono">{title}</span>
         </p>
         <p>
-          Slug:{" "}
-          <span className="font-mono">
-            {slug}
-          </span>
+          Slug: <span className="font-mono">{slug}</span>
         </p>
         <p>
           photoId:{" "}
@@ -65,10 +59,7 @@ export default function EventsCard({
           </span>
         </p>
         <p>
-          Location:{" "}
-          <span className="font-mono">
-            {location}
-          </span>
+          Location: <span className="font-mono">{location}</span>
         </p>
         <button className="absolute bottom-4 right-4 flex flex-row gap-2 rounded-full bg-red-400 px-4 py-2 transition-colors hover:bg-red-700">
           <Trash />

src/pages/events/index.tsx

@@ -17,13 +17,11 @@ function MainPage() {
     <main className="flex flex-grow flex-col gap-4 p-10 px-12">
       <header className="space-y-4">
         <PageHeading>Events</PageHeading>
-        <PageDescription>
-          List of Datasoc events
-        </PageDescription>
+        <PageDescription>List of Datasoc events</PageDescription>
       </header>
       <div className="flex-grow space-y-4">
-        <Events/>
+        <Events />
       </div>
     </main>
   );
-}
+}

src/pages/resources/ResourceCard.tsx

@@ -3,7 +3,6 @@
 // import { Trash } from "iconoir-react";
 import type { ResourceTag } from "../../types/resources";
 
-
 export default function ResourceCard({
   resource,
 }: {
@@ -17,7 +16,7 @@ export default function ResourceCard({
   };
 }) {
   return (
-    <div className="group relative max-w-xl p-4 border rounded-md shadow-md">
+    <div className="group relative max-w-xl rounded-md border p-4 shadow-md">
       {/* <div className="absolute left-0 top-0 h-full w-full bg-slate-700/50 p-5 text-white opacity-0 transition-opacity group-hover:opacity-100">
         <p>
           ID:{" "}
@@ -40,18 +39,27 @@ export default function ResourceCard({
           Delete
         </button>
       </div> */}
-      <h2 className="font-bold text-lg">{resource.title}</h2>
+      <h2 className="text-lg font-bold">{resource.title}</h2>
       <p>{resource.description}</p>
-      <a href={resource.link} rel="noreferrer" target="_blank" className="text-blue-500 hover:underline">
+      <a
+        href={resource.link}
+        rel="noreferrer"
+        target="_blank"
+        className="text-blue-500 hover:underline"
+      >
         Open Resource
       </a>
       <div className="mt-2">
         {resource.tags.map(({ tag }) => (
-          <span key={tag.id} className="inline-block px-2 py-1 mr-2 text-xs rounded" style={{ backgroundColor: tag.colour, color: "#FFFFFF" }}>
+          <span
+            key={tag.id}
+            className="mr-2 inline-block rounded px-2 py-1 text-xs"
+            style={{ backgroundColor: tag.colour, color: "#FFFFFF" }}
+          >
             {tag.name}
           </span>
         ))}
       </div>
     </div>
   );
-}
+}

src/pages/resources/Resources.tsx

@@ -36,12 +36,9 @@ export default function Resources() {
       </div> */}
       <div className="flex flex-row flex-wrap items-start justify-start gap-5">
         {resources.map((resource) => (
-          <ResourceCard
-            key={resource.id}
-            resource={resource}
-          />
+          <ResourceCard key={resource.id} resource={resource} />
         ))}
       </div>
     </>
   );
-}
+}

src/pages/resources/index.tsx

@@ -17,13 +17,11 @@ function MainPage() {
     <main className="flex flex-grow flex-col gap-4 p-10 px-12">
       <header className="space-y-4">
         <PageHeading>Resources</PageHeading>
-        <PageDescription>
-          The resources page.
-        </PageDescription>
+        <PageDescription>The resources page.</PageDescription>
       </header>
       <div className="flex-grow space-y-4">
         <Resources />
       </div>
     </main>
   );
-}
+}

src/types/eventsType.ts

@@ -1,16 +1,15 @@
 export type Event = {
-    id: string;
-    creator: string;
-    title: string;
-    slug: string;
-    description: string;
-    startTime: Date;
-    endTime: Date;
-    location: string;
-    link: string;
-    public: boolean;
-    lastEditTime: Date;
-    photo: string;
-    tags: unknown[];
-  };
-
+  id: string;
+  creator: string;
+  title: string;
+  slug: string;
+  description: string;
+  startTime: Date;
+  endTime: Date;
+  location: string;
+  link: string;
+  public: boolean;
+  lastEditTime: Date;
+  photo: string;
+  tags: unknown[];
+};

src/types/resources.ts

@@ -1,6 +1,5 @@
 import type { Tag } from "./tag";
 
-
 export interface Resource {
   id: string;
   title: string;
@@ -11,8 +10,8 @@ export interface Resource {
   lastEditTime: Date;
   createdTime: Date;
   tags: ResourceTag[];
-  fileId:string;
-};
+  fileId: string;
+}
 
 export interface ResourceTag {
   resourceId: string;

src/types/tag.ts

@@ -2,4 +2,4 @@ export interface Tag {
   id: string;
   name: string;
   colour: string;
-};
+}