From a350f58efcd699ce3e23bc1961f38ca4436a3a4e Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Fri, 8 Dec 2023 21:17:34 +0100
Subject: [PATCH] feat: catch all yaml parse errors

---
 components/Checkbox.tsx  | 2 +-
 components/Rating.tsx    | 4 ++--
 components/Stars.tsx     | 2 +-
 islands/Search.tsx       | 6 +++---
 lib/resource/articles.ts | 7 ++++++-
 lib/resource/recipes.ts  | 6 +++++-
 static/global.css        | 4 ++++
 7 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
index 09539c8..c35fdc1 100644
--- a/components/Checkbox.tsx
+++ b/components/Checkbox.tsx
@@ -73,7 +73,7 @@ const Checkbox = (
   const id = `checkbox-${_id}`;
   return (
     <label
-      className="flex items-center py-3 px-4 rounded-xl"
+      className="flex items-center py-3 px-4 rounded-2xl"
       style={{ color: "var(--foreground)", background: "var(--background)" }}
     >
       <input
diff --git a/components/Rating.tsx b/components/Rating.tsx
index 1857b0d..26e3a5c 100644
--- a/components/Rating.tsx
+++ b/components/Rating.tsx
@@ -32,13 +32,13 @@ export const Rating = (
 
   return (
     <div
-      class="flex gap-2 px-5 rounded-2xl bg-gray-200 z-10"
+      class="flex items-center gap-2 px-5 rounded-2xl bg-gray-200 z-10"
       style={{ color: "var(--foreground)", background: "var(--background)" }}
     >
       {Array.from({ length: max.value }).map((_, i) => {
         return (
           <span
-            class={`my-5 cursor-pointer opacity-${
+            class={`cursor-pointer opacity-${
               (i + 1) <= rating ? 100 : (i + 1) <= hover ? 20 : 100
             }`}
             onMouseOver={() => setHover(i + 1)}
diff --git a/components/Stars.tsx b/components/Stars.tsx
index cccc41e..ff87634 100644
--- a/components/Stars.tsx
+++ b/components/Stars.tsx
@@ -5,7 +5,7 @@ export const Star = (
 ) => {
   return (
     <div
-      class="flex gap-2 px-4 py-2 rounded-2xl bg-gray-200 z-10"
+      class="flex items-center gap-2 px-4 py-2 rounded-2xl bg-gray-200 z-10"
       style={{ color: "#1F1F1F" }}
     >
       {Array.from({ length: max }).map((_, i) => {
diff --git a/islands/Search.tsx b/islands/Search.tsx
index 778452b..377fdfd 100644
--- a/islands/Search.tsx
+++ b/islands/Search.tsx
@@ -170,9 +170,9 @@ const Search = (
 
   return (
     <div class="mt-2">
-      <header class="flex items-center gap-4">
+      <header class="flex items-center gap-4 items-52">
         <div
-          class="flex items-center gap-1 rounded-xl w-full shadow-2xl"
+          class="flex items-center gap-1 rounded-2xl w-full shadow-2xl"
           style={{ background: "#2B2930", color: "#818181" }}
         >
           {isLoading.value && searchQuery.value
@@ -187,7 +187,7 @@ const Search = (
             onInput={handleInputChange}
           />
         </div>
-        <Checkbox label="not-seen" checked={showSeenStatus} />
+        <Checkbox label="seen" checked={showSeenStatus} />
         <Rating rating={4} />
       </header>
       {data?.value?.hits?.length && !isLoading.value
diff --git a/lib/resource/articles.ts b/lib/resource/articles.ts
index 01e9c5a..b034a6a 100644
--- a/lib/resource/articles.ts
+++ b/lib/resource/articles.ts
@@ -53,7 +53,12 @@ function parseArticle(original: string, id: string): Article {
 
   for (const child of doc.children) {
     if (child.type === "yaml") {
-      meta = parse(child.value) as Article["meta"];
+      try {
+        meta = parse(child.value) as Article["meta"];
+      } catch (err) {
+        console.log("Error parsing YAML", err);
+        console.log("YAML:", child.value);
+      }
 
       if (meta["rating"] && typeof meta["rating"] === "string") {
         meta.rating = [...meta.rating?.matchAll("⭐")].length;
diff --git a/lib/resource/recipes.ts b/lib/resource/recipes.ts
index 4da3fe5..1e18402 100644
--- a/lib/resource/recipes.ts
+++ b/lib/resource/recipes.ts
@@ -138,7 +138,11 @@ export function parseRecipe(original: string, id: string): Recipe {
   let group: DocumentChild[] = [];
   for (const child of doc.children) {
     if (child.type === "yaml") {
-      meta = parse(child.value) as Recipe["meta"];
+      try {
+        meta = parse(child.value) as Recipe["meta"];
+      } catch (_) {
+        // console.log("Error parsing YAML", err);
+      }
       continue;
     }
     if (
diff --git a/static/global.css b/static/global.css
index 84d72c2..8c081a4 100644
--- a/static/global.css
+++ b/static/global.css
@@ -57,3 +57,7 @@ input[type=number] {
 .octicon-link path {
   fill: #dcdbdc;
 }
+
+.items-52 > * {
+    height: 52px;
+}