feat: parse CAPI & DCR responses

package.json

@@ -33,6 +33,7 @@
     "sass": "1.57.1",
     "svelte": "4.2.8",
     "typescript": "5.1.6",
+    "valibot": "^0.28.1",
     "vite": "5.0.12",
     "web-vitals": "3.5.0"
   },

src/components/BlogFeed.astro

@@ -1,35 +1,43 @@
 ---
+import {
+  parse,
+  object,
+  string,
+  number,
+  literal,
+  array,
+  picklist,
+} from "valibot";
 import { timeAgo } from "@guardian/libs";
 const CAPI_KEY = import.meta.env.CAPI_KEY ?? "test";
 
-type SeriesResult = {
-  id: string;
-  type: string;
-  sectionId: string;
-  sectionName: string;
-  webPublicationDate: string;
-  webTitle: string;
-  webUrl: string;
-  apiUrl: string;
-  isHosted: boolean;
-  pillarId: string;
-  pillarName: string;
-  fields: {
-    byline: string;
-  };
-};
+const searchResponseSchema = object({
+  response: object({
+    status: literal("ok"),
+    results: array(
+      object({
+        webUrl: string(),
+        webPublicationDate: string(),
+        webTitle: string(),
+        fields: object({
+          byline: string(),
+        }),
+      })
+    ),
+  }),
+});
 
 const queryParams = new URLSearchParams({
   tag: "info/series/engineering-blog",
   "show-fields": "byline",
   "api-key": CAPI_KEY,
 });
 
-const posts: SeriesResult[] = await fetch(
+const posts = await fetch(
   `https://content.guardianapis.com/search?${queryParams.toString()}`
 )
   .then((r) => r.json())
-  .then((d) => d.response.results);
+  .then((d) => parse(searchResponseSchema, d).response.results);
 
 /**
  * It would be good to use https://raw.githubusercontent.com/guardian/dotcom-rendering/main/dotcom-rendering/src/model/json-schema.json
@@ -50,6 +58,34 @@ type ArticleResult = {
     }>;
   }>;
 };
+
+const contentResultSchema = object({
+  mainMediaElements: array(
+    object({
+      data: object({
+        alt: string(),
+      }),
+      imageSources: array(
+        object({
+          weighting: picklist([
+            "inline",
+            "thumbnail",
+            "showcase",
+            "immersive",
+            "supporting",
+            "halfwidth",
+          ]),
+          srcSet: array(
+            object({
+              src: string(),
+              width: number(),
+            })
+          ),
+        })
+      ),
+    })
+  ),
+});
 ---
 
 <h3>Latest Engineering blog posts</h3>
@@ -59,9 +95,9 @@ type ArticleResult = {
       const time = new Date(post.webPublicationDate).getTime();
       const pubDate = timeAgo(time);
 
-      const article: ArticleResult = await fetch(
-        post.webUrl + ".json?dcr"
-      ).then((r) => r.json());
+      const article = await fetch(post.webUrl + ".json?dcr")
+        .then((r) => r.json())
+        .then((d) => parse(contentResultSchema, d));
 
       const media = article.mainMediaElements[0];