projects page update format. need to fix the icons (github icon showi…

…ng up for write-up links)
MichiganDataScienceTeam · Jul 9, 2024 · 23cd10f · 23cd10f
1 parent 035847e
commit 23cd10f
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 60 deletions.
diff --git a/components/icon.jsx b/components/icon.jsx
@@ -15,6 +15,8 @@ import {
   IoCalendarOutline
 } from "react-icons/io5";
 import { createElement } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGoogleDrive } from "@fortawesome/free-brands-svg-icons";
 
 const iconMap = {
   envelope: IoMail,
@@ -31,13 +33,20 @@ const iconMap = {
   slack: IoLogoSlack,
   copy: IoCopyOutline,
   calendar: IoCalendarOutline,
-
+  googleSlides: faGoogleDrive,
 };
 
-export default function Icon(props) {
-  if (!(props.name in iconMap)) {
-    console.error("Could not find name " + props.name);
+export default function Icon({ name, ...props }) {
+  const IconComponent = iconMap[name];
+
+  if (!IconComponent) {
+    console.error(`Could not find icon with name "${name}"`);
     return null;
   }
-  return createElement(iconMap[props.name], props);
-}
+
+  if (name === 'googleSlides') {
+    return <FontAwesomeIcon icon={IconComponent} {...props} />;
+  }
+
+  return createElement(IconComponent, props);
+}
diff --git a/config/sponsors.json b/config/sponsors.json
@@ -26,6 +26,11 @@
         "name": "Michigan Institute for Data Science",
         "link": "https://midas.umich.edu/",
         "image": "midas.png"
+      },
+      {
+        "name": "University of Michigan School of Information",
+        "link": "https://www.si.umich.edu/",
+        "image": "umsi.png"
       }
     ]
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,10 @@
     "export": "next export -o out"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@fullcalendar/core": "^6.1.10",
     "@fullcalendar/google-calendar": "^6.1.10",
     "@fullcalendar/list": "^6.1.10",

diff --git a/pages/projects/index.jsx b/pages/projects/index.jsx
@@ -1,41 +1,95 @@
+import HeadContent from "@/components/headContent";
+import Hero from "@/components/hero";
 import Layout from "@/components/layout";
-import Link from "next/link";
 import fs from "fs";
 import path from "path";
-import Hero from "@/components/hero";
-import HeadContent from "@/components/headContent";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import Icon from "@/components/icon";
+
+
 export default function Projects({ groupedLinks }) {
+  const router = useRouter();
+  const basePath = router.basePath;
+
   return (
     <Layout>
-      <HeadContent title={"Michigan Data Science Team - Projects"} description={"Michigan Data Science Team - MDST is the largest data science club at the University of Michigan, here are some our past projects"} />
-
-      <Hero title={"Our Past Projects"} />
-      <div className="container mx-auto max-w-2xl">
-        {Object.entries(groupedLinks).map(([subdirectory, links]) => (
-          <div
-            key={subdirectory}
-            className="rounded-lg border-grey border-2 my-2"
-          >
-            <h2 className="p-4 bg-grey">{subdirectory}</h2>
-            <ul className="p-4">
-              {links.map((link, index) => (
-                <li key={index}>
-                  {
-                    link.type != "none" ? <Link target="_blank" className="underline" href={link.href}>
-                      {link.label}
-                    </Link> : link.label
-                  }
-
-                </li>
-              ))}
-            </ul>
-          </div>
+      <HeadContent
+        title={"Michigan Data Science Team - Projects"}
+        description={
+          "Michigan Data Science Team - MDST is the largest data science club at the University of Michigan. Here are some of our past projects."
+        }
+      />
+      <Hero title="Our Past Projects" />
+      {Object.entries(groupedLinks).map(([subdirectory, links], index) => (
+        <ProjectSection key={subdirectory} subdirectory={subdirectory} links={links} basePath={basePath} />
+      ))}
+    </Layout>
+  );
+}
+
+function ProjectSection({ subdirectory, links, basePath }) {
+  return (
+    <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
+      <div className="mx-auto mb-8 max-w-screen-sm lg:mb-16">
+        <h2 className="text-3xl mb-4">{subdirectory}</h2>
+      </div>
+      <div className="flex flex-wrap justify-center gap-4 lg:gap-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+        {links.map((link, index) => (
+          <ProjectCard key={index} basePath={basePath} project={link} />
         ))}
       </div>
-    </Layout>
+    </div>
   );
 }
 
+function ProjectCard({ project, basePath }) {
+  return (
+    <div className="text-left sm:text-center rounded bg-grey py-2 sm:py-4 px-2 sm:px-8 w-full sm:w-60 flex sm:block gap-8">
+      <Image
+        className="sm:mx-auto sm:mb-4 sm:w-44 sm:h-44 w-24 h-24 my-auto rounded-full object-cover"
+        width="176"
+        height="176"
+        src={`${basePath}/images/projects/${project.label.toLowerCase().split(" ").join("_")}.jpg`}
+        alt={project.label}
+      />
+      <div className="">
+        <h3 className="mb-1 text-2xl font-bold tracking-tight">{project.label}</h3>
+        <ul className="flex sm:justify-center mt-2 sm:mt-4 space-x-4">
+          {project.type === "link" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="Github Repo">
+                <Icon name="github" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.type === "md" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="Markdown">
+                <Icon name="file-text" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.type === "pdf" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="PDF">
+                <Icon name="file-pdf" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+          {project.type === "googleSlides" && (
+            <li>
+              <Link href={project.href} className="hover:text-gray" aria-label="Google Slides">
+                <Icon name="googleSlides" className="text-3xl" />
+              </Link>
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}
 
 export async function getStaticProps() {
   const projectsDirectory = path.join(process.cwd(), "public", "projects");
@@ -46,10 +100,10 @@ export async function getStaticProps() {
       name: dirent.name,
     }))
     .sort((a, b) => {
-      const order = ['Fall_', 'Winter_'];
+      const order = ["Fall_", "Winter_"];
 
       const getOrderIndex = (dirName) => {
-        const prefix = order.find(prefix => dirName.startsWith(prefix));
+        const prefix = order.find((prefix) => dirName.startsWith(prefix));
         return prefix ? 0 : 1;
       };
 
@@ -58,17 +112,15 @@ export async function getStaticProps() {
       if (orderComparison !== 0) {
         return orderComparison;
       } else if (getOrderIndex(a.name) === 0) {
-        const aNumber = parseInt(a.name.split('_')[1]);
-        const bNumber = parseInt(b.name.split('_')[1]);
+        const aNumber = parseInt(a.name.split("_")[1]);
+        const bNumber = parseInt(b.name.split("_")[1]);
         return bNumber - aNumber;
       } else {
-        return a.name.localeCompare(b.name)
+        return a.name.localeCompare(b.name);
       }
-
-    });;
+    });
 
   const groupedLinks = {};
-  const paths = []
   subdirectories.forEach((subdirectory) => {
     const subdirectoryPath = path.join(projectsDirectory, subdirectory.name);
     const innerDirectories = fs
@@ -80,38 +132,38 @@ export async function getStaticProps() {
 
     innerDirectories.forEach((innerDir) => {
       const innerDirPath = path.join(subdirectoryPath, innerDir);
-
       const writeupMdPath = path.join(innerDirPath, "writeup.md");
       const writeupPdfPath = path.join(innerDirPath, "writeup.pdf");
       const linkTxtPath = path.join(innerDirPath, "link.txt");
 
-      const label = innerDir.split("_")
-        .join(" ");
-      let type, href
+      const label = innerDir.split("_").join(" ");
+      let type, href;
 
       if (fs.existsSync(linkTxtPath)) {
-        const link = fs.readFileSync(linkTxtPath, 'utf-8').trim();
-        href = link
-        type = "link"
+        const link = fs.readFileSync(linkTxtPath, "utf-8").trim();
+        if (link.toLowerCase().includes('docs.google.com/presentation')) {
+          href = link;
+          type = "googleSlides";
+        } else {
+          href = link;
+          type = "link";
+        }
       } else if (fs.existsSync(writeupMdPath)) {
-        href = `/projects/${subdirectory.name}/${innerDir}`
-        type = "md"
-      }
-      else if (fs.existsSync(writeupPdfPath)) {
-        href = `/projects/${subdirectory.name}/${innerDir}/writeup.pdf`
-        type = "pdf"
+        href = `/projects/${subdirectory.name}/${innerDir}`;
+        type = "md";
+      } else if (fs.existsSync(writeupPdfPath)) {
+        href = `/projects/${subdirectory.name}/${innerDir}/writeup.pdf`;
+        type = "pdf";
       } else {
-        href = ""
-        type = "none"
+        href = "";
+        type = "none";
       }
-      links.push({ label, href, type })
-
+      links.push({ label, href, type });
     });
 
     if (links.length > 0) {
       groupedLinks[subdirectory.name.split("_").join(" ")] = links;
     }
-
   });
 
   return {
@@ -120,4 +172,3 @@ export async function getStaticProps() {
     },
   };
 }
-
diff --git a/public/images/sponsors/umsi.png b/public/images/sponsors/umsi.png