hellina updates

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "plait-lab.org",
+  "name": "plait-lab-next",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -14,20 +14,23 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@types/node": "18.11.19",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "classnames": "^2.3.2",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2",
-    "lodash-es": "^4.17.21",
+    "lodash.orderby": "^4.6.0",
+    "lodash.partition": "^4.6.0",
     "next": "13.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sharp": "^0.32.1"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.12",
+    "@types/lodash.orderby": "^4.6.7",
+    "@types/lodash.partition": "^4.6.7",
     "@types/mdx": "^2.0.5",
     "autoprefixer": "^10.4.13",
     "eslint-config-prettier": "^8.8.0",
@@ -38,4 +41,4 @@
     "tailwindcss": "^3.2.4",
     "typescript": "4.9.5"
   }
-}
+}

src/app/globals.css

@@ -135,11 +135,3 @@
     @apply border-b border-b-primary font-semibold;
   }
 }
-
-a {
-  color:rgb(230 51 102);
-}
-ul {
-  list-style-type: square;
-  list-style-position: inside;
-}

src/app/page.tsx

@@ -1,21 +1,16 @@
-import { partition, orderBy } from "lodash-es";
 import Image from "next/image";
 
+import News from "@/components/news/News";
 import LabMember from "@/components/people/LabMember";
-import LabAlum from "@/components/people/LabAlum";
 import Project from "@/components/projects/Project";
 import Heading from "@/components/shared/Heading";
 import Text from "@/components/shared/Text";
-import { PEOPLE, Role } from "@/content/people";
+import { NEWS } from "@/content/news";
+import { PEOPLE } from "@/content/people";
 import { PROJECTS } from "@/content/projects";
 import BerkeleyMini from "@/../public/images/berkeley-mini.png";
 
 const Index = () => {
-  const [currentLabMembers, alumni] = partition(
-    PEOPLE,
-    (person) => person.role !== Role.Alumni
-  );
-
   return (
     <main className="stack stack-sm py-8">
       <h1 className="text-center text-7xl md:text-mega">
@@ -42,10 +37,10 @@ const Index = () => {
           <div>
             <Heading level="h3">PL for Social Good</Heading>
             <Text>
-              We invent usable programming tools to help teams with little or no 
-              formal computing education&#8212;social scientists, journalists, lawyers, 
-              scientists, advocates for marginalized groups, and other domain experts. 
-              (Working for social good and struggling to write code or process data? Get in touch!)
+              We invent usable programming tools to help teams working for
+              social good—social scientists, journalists, lawyers, domain
+              experts focused on marginalized groups. (Working for social good
+              and struggling to write code or process data? Get in touch!)
             </Text>
           </div>
           <div>
@@ -59,54 +54,26 @@ const Index = () => {
           </div>
         </div>
       </section>
+      <section className="stack stack-xs relative p-4">
+        <Heading level="h2">News</Heading>
+        <News news={NEWS} />
+      </section>
+      <section className="stack stack-xs p-4">
+        <Heading level="h2">People</Heading>
+        <div className="grid grid-cols-12 gap-5">
+          {PEOPLE.map((person) => {
+            return <LabMember key={person.id} {...person} />;
+          })}
+        </div>
+      </section>
       <section className="stack stack-xs p-4">
         <Heading level="h2">Projects</Heading>
         <div className="grid grid-cols-12 gap-y-20 md:gap-12">
-          {orderBy(PROJECTS, (p) => p.order, ["desc"]).map((project) => {
+          {PROJECTS.map((project) => {
             return <Project key={project.title} {...project} />;
           })}
         </div>
       </section>
-      <section className="stack stack-lg p-4">
-        <Heading level="h2">People</Heading>
-        <div className="stack stack-sm">
-          <div className="grid grid-cols-12 gap-5">
-            {currentLabMembers.map((person) => {
-              return <LabMember key={person.id} {...person} />;
-            })}
-          </div>
-        </div>
-        <div className="stack stack-sm">
-          <Heading level="h3">Alums</Heading>
-          <div className="grid grid-cols-12 gap-5">
-            {alumni.map((person) => {
-              return <LabAlum key={person.id} {...person} />;
-            })}
-          </div>
-        </div>
-      </section>
-      <section className="stack stack-md p-4">
-        <Heading level="h2">Collaborations Outside Computing</Heading>
-        <div className="stack stack-sm">
-          <div>
-              Our work in PLAIT Lab is only possible because of close collaborations with our partners from outside of computing.  This list will be incomplete, but we'd especially like to thank (in alphabetical order):
-              <ul>
-                <li><a href="https://www.david-anthoff.com" target="_blank">David Anthoff</a>'s Energy and Resources Lab, and especially <a href="https://www.lisarennels.com" target="_blank">Lisa Rennels</a>;</li>
-                <li>the <a href="https://www.czbiohub.org/sf/" target="_blank">Chan Zuckerberg Biohub</a>;</li>
-                <li>Computational Research for Equity in Legal Systems (<a href="https://crels.berkeley.edu" target="_blank">CRELS</a>);</li>
-                <li>the <a href="https://grist.org">Grist</a> climate reporting newsroom;</li>
-                <li><a href="https://soc.washington.edu/people/kyle-crowder" target="_blank">Kyle Crowder</a> and the Crowder Sociology lab and especially <a href="https://hesscl.com" target="_blank">Chris Hess</a> and <a href="https://www.ian-kennedy.com" target="_blank">Ian Kennedy</a>;</li>
-                <li><a href="https://socialwelfare.berkeley.edu/people/erin-michelle-turner-kerrison" target="_blank">Erin Kerrison</a> and the Kerrison Lab in Social Welfare;</li>
-                <li><a href="https://www.kqed.org" target="_blank">KQED</a> and especially <a href="https://www.kqed.org/author/lisapickoffwhite-2" target="_blank">Lisa Pickoff-White</a>;</li>
-                <li>the National Association of Criminal Defense Lawyers and especially the <a href="https://www.nacdl.org/Landing/FullDisclosureProject" target="_blank">Full Disclosure Project</a>;</li>
-                <li>James Nuñez and the <a href="https://www.nunezlab.org" target="_blank">Nuñez Lab</a> in Molecular and Cell Biology;</li>
-                <li>Mercedes Paredes and the UCSF <a href="https://paredeslab.ucsf.edu" target="_blank">Paredes Lab</a> on Neurodevelopment and Disease;</li>
-                <li><a href="https://journalism.stanford.edu/people/cheryl-phillips" target="_blank">Cheryl Phillips</a> and <a href="https://biglocalnews.org/">Big Local News</a>; </li>
-                <li>the <a href="https://www.urbandisplacement.org" target="_blank">Urban Displacement Project</a> and especially <a href="https://www.urbandisplacement.org/team/tim-thomas-ph-d/" target="_blank">Tim Thomas</a></li>
-              </ul>
-          </div>
-        </div>
-      </section>
     </main>
   );
 };

src/app/publications/page.tsx

@@ -1,4 +1,5 @@
-import { orderBy, partition } from "lodash-es";
+import partition from "lodash.partition";
+import orderBy from "lodash.orderby";
 
 import Publication from "@/components/publications/Publication";
 import Heading from "@/components/shared/Heading";
@@ -14,7 +15,12 @@ const Publications = () => {
   return (
     <main className="stack stack-sm py-8">
       <section className="stack stack-lg p-4">
-        <Heading level="h2">Conference and Journal Publications</Heading>
+        <Heading level="h1">Publications</Heading>
+        <Text>
+          At PLAIT Lab, we publish in a range of venues spanning Programming
+          Languages (PL), Human-Computer Interaction (HCI), and fairness,
+          accountability, and transparency in algorithmic systems.
+        </Text>
         <ul className="stack stack-xl">
           {publications.map((publication) => (
             <Publication key={publication.title} {...publication} />

src/components/news/News.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as Tabs from "@radix-ui/react-tabs";
+
+import NewsItem from "@/components/news/NewsItem";
+import HoriztonalScrollList from "@/components/shared/HorizontalScrollList";
+import type { NewsItem as NewsItemType } from "@/content/news";
+
+interface Props {
+  news: Record<string, NewsItemType[]>;
+}
+
+const News: React.FC<Props> = ({ news }) => {
+  return (
+    <Tabs.Root className="stack stack-xs" defaultValue="2023">
+      <Tabs.List className="stack-h stack-h-xs">
+        {Object.keys(news).map((year) => {
+          return (
+            <Tabs.Trigger key={year} value={year} className="trigger px-2 py-1">
+              {year}
+            </Tabs.Trigger>
+          );
+        })}
+      </Tabs.List>
+      {Object.entries(news).map(([year, items]) => {
+        return (
+          <Tabs.Content value={year} key={year}>
+            <HoriztonalScrollList>
+              {items
+                .sort((a, b) => b.date.getTime() - a.date.getTime())
+                .map((node, i, arr) => {
+                  return (
+                    <NewsItem
+                      key={node.title}
+                      {...node}
+                      last={i === arr.length - 1}
+                    />
+                  );
+                })}
+            </HoriztonalScrollList>
+          </Tabs.Content>
+        );
+      })}
+    </Tabs.Root>
+  );
+};
+
+export default News;

src/components/news/NewsItem.tsx

@@ -0,0 +1,48 @@
+import { NewsItem as NewsItemProps } from "@/content/news";
+
+interface Props extends NewsItemProps {
+  last: boolean;
+}
+
+const NewsItem: React.FC<Props> = ({ title, date, description, last }) => {
+  return (
+    <div className="flex shrink-0 basis-64 pr-2 group-last:pr-0">
+      <svg viewBox="0 0 20 20" width={20} height={20} className="shrink-0">
+        <circle
+          cx="10"
+          cy="10"
+          r="3"
+          fill="#E63366"
+          stroke="#E63366"
+          strokeWidth={2}
+        />
+        <circle
+          cx="10"
+          cy="10"
+          r="3"
+          fill="#FFFFFF"
+          stroke="#E63366"
+          strokeWidth={2}
+          style={{ transformOrigin: "10px 10px" }}
+          className="pulse"
+        />
+      </svg>
+      <div className="stack stack-xs">
+        {last ? (
+          <p className="text-sm font-bold">{title}</p>
+        ) : (
+          <div className="flex items-center">
+            <p className="pr-1 text-sm font-bold">{title}</p>
+            <div className="timeline -mr-2 h-1 w-full flex-1" />
+          </div>
+        )}
+        <p className="text-xs font-bold text-slate-600">
+          {date.toLocaleDateString()}
+        </p>
+        {description}
+      </div>
+    </div>
+  );
+};
+
+export default NewsItem;

src/components/people/LabMember.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import cs from "classnames";
 
-import { type Person, Role } from "@/content/people";
+import type { Person } from "@/content/people";
 
 type Props = Person;
 
@@ -23,7 +23,7 @@ const LabMember: React.FC<Props> = ({ name, role, website, headshot }) => {
       />
       <div className={cs(website ? "text-primary" : "text-black")}>
         <p className="text-sm font-bold">{name}</p>
-        {role !== Role.Alumni ? <p className="text-xs italic">{role}</p> : null}
+        <p className="text-xs italic">{role}</p>
       </div>
     </a>
   );