Fix <ul> and <ol> Direct Children for HTML Compliance

src/components/RelatedItems/index.astro

@@ -26,21 +26,35 @@ const { title, items, class: className } = Astro.props;
   <section class={className}>
     <h2>{title}</h2>
     <ul class="content-grid-simple">
-      {
-        items.map((i) => {
-          if (isCurationResponse(i)) {
-            return <GridItemSketch item={i} />;
-          }
-          switch (i.collection) {
-            case "reference":
-              return <GridItemReference item={i} />;
-            case "examples":
-              return <GridItemExample item={i} />;
-            case "events":
-              return <GridItemEvent item={i} />;
-          }
-        })
-      }
+      {items.map((i) => {
+        if (isCurationResponse(i)) {
+          return (
+            <li>
+              <GridItemSketch item={i} />
+            </li>
+          );
+        }
+        switch (i.collection) {
+          case "reference":
+            return (
+              <li>
+                <GridItemReference item={i} />
+              </li>
+            );
+          case "examples":
+            return (
+              <li>
+                <GridItemExample item={i} />
+              </li>
+            );
+          case "events":
+            return (
+              <li>
+                <GridItemEvent item={i} />
+              </li>
+            );
+        }
+      })}
     </ul>
   </section>
 </div>

src/layouts/SketchesLayout.astro

@@ -26,7 +26,11 @@ const { entries, totalNumSketches, currentPage } = Astro.props;
 <BaseLayout title="Sketches" variant="item" topic="community">
   <section>
     <ul class="content-grid-simple">
-      {entries.map((entry) => <GridItemSketch item={entry} />)}
+      {entries.map((entry) => (
+        <li>
+          <GridItemSketch item={entry} />
+        </li>
+      ))}
     </ul>
     <PaginationNav
       maxNumItems={totalNumSketches}