ensure malformed entries don't break entire parsing

Author: rmdocherty

src/components/Projects.tsx

@@ -1,6 +1,4 @@
-import * as z from "zod/mini";
-
-import { Project, ProjectSchema } from "../types";
+import { Project, ProjectSchema, gracefulParse } from "../types";
 import projectJSON from "../content/text/projects.json";
 
 const ProjectComponent = ({ projectData }: { projectData: Project }) => {
@@ -28,7 +26,7 @@ const ProjectComponent = ({ projectData }: { projectData: Project }) => {
 };
 
 export const Projects = () => {
-  const projects: Project[] = z.array(ProjectSchema).parse(projectJSON);
+  const projects: Project[] = gracefulParse(ProjectSchema, projectJSON);
 
   return (
     <div className="projects-grid">

src/components/Publications.tsx

@@ -1,6 +1,4 @@
-import * as z from "zod/mini";
-
-import { Publication, PublicationSchema } from "../types";
+import { Publication, PublicationSchema, gracefulParse } from "../types";
 
 // this imports the json from `content` such that we can use it as a variable
 import publicationsJSON from "../content/text/publications.json";
@@ -45,7 +43,7 @@ const PublicationComponent = ({ publicationData }: { publicationData: Publicatio
 // a simple unorderd list of publications which links to the paper with minor styling
 export const Publications = () => {
   // zod is library for parsing json data according to schema (think type / class in other languages). We parse data
-  const publications: Publication[] = z.array(PublicationSchema).parse(publicationsJSON);
+  const publications: Publication[] = gracefulParse(PublicationSchema, publicationsJSON);
 
   // 'map' takes each element in array and applies function to it, in our case this function returns a <li> element with publication component inside
   return (

src/components/Team.tsx

@@ -1,7 +1,6 @@
-import * as z from "zod/mini";
 import { useState } from "react";
 
-import { Person, PersonSchema } from "../types";
+import { Person, PersonSchema, gracefulParse } from "../types";
 
 import teamJSON from "../content/text/team.json";
 
@@ -63,7 +62,7 @@ const PersonComponent = ({ personData }: { personData: Person }) => {
 };
 
 export const Team = () => {
-  const people: Person[] = z.array(PersonSchema).parse(teamJSON);
+  const people: Person[] = gracefulParse(PersonSchema, teamJSON);
 
   // filter takes an array & returns new array with elements that match the boolean expression
   // in the first section, this is filtering for current members

src/components/Videos.tsx

@@ -1,6 +1,4 @@
-import * as z from "zod/mini";
-
-import { Video, VideoSchema } from "../types";
+import { Video, VideoSchema, gracefulParse } from "../types";
 
 import videoJSON from "../content/text/videos.json";
 
@@ -16,7 +14,7 @@ const VideoComponent = ({ videoData }: { videoData: Video }) => {
 };
 
 export const Videos = () => {
-  const videos: Video[] = z.array(VideoSchema).parse(videoJSON);
+  const videos: Video[] = gracefulParse(VideoSchema, videoJSON);
   return (
     <div className="projects-grid">
       {videos.map((v, i) => (