From a2f081601e6eade8c9e5f5a5c698e97e1a4b2284 Mon Sep 17 00:00:00 2001
From: kit <1304340+ksen0@users.noreply.github.com>
Date: Thu, 2 Oct 2025 14:28:32 +0200
Subject: [PATCH] Merge pull request #974 from NalinDalal/2.0

Fix `<ul>` and `<ol>` Direct Children for HTML Compliance
---
 src/components/RelatedItems/index.astro | 44 ++++++++++++++++---------
 src/layouts/SketchesLayout.astro        |  6 +++-
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/RelatedItems/index.astro b/src/components/RelatedItems/index.astro
index 4de7cafc49..683c029652 100644
--- a/src/components/RelatedItems/index.astro
+++ b/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>
diff --git a/src/layouts/SketchesLayout.astro b/src/layouts/SketchesLayout.astro
index 0c8481b840..ff1a9e448c 100644
--- a/src/layouts/SketchesLayout.astro
+++ b/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}