feat: catch all yaml parse errors

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

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)}

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) => {

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

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") {
+      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;

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") {
+      try {
         meta = parse(child.value) as Recipe["meta"];
+      } catch (_) {
+        // console.log("Error parsing YAML", err);
+      }
       continue;
     }
     if (

static/global.css

@@ -57,3 +57,7 @@ input[type=number] {
 .octicon-link path {
   fill: #dcdbdc;
 }
+
+.items-52 > * {
+    height: 52px;
+}