create ability to list comments on guestbook pages

basic testing for now. will need to style and
add conditionals

src/pages/site/guestbook.astro

@@ -67,6 +67,10 @@ const pageTitle = "emma's guestbook"
             <h3>comments</h3>
             <ul class="comments">
             </ul>
+
+            <script>
+                import "../../scripts/guestbook-list-comments"
+            </script>
         </BasicLayout>
     </body>
 </html>

src/scripts/guestbook-list-comments.js

@@ -10,3 +10,25 @@ const { data, error } = await supabase
   .from("guestbook-comments")
   .select()
   .eq("approved", true);
+
+const commentList = document.querySelector(".comments");
+
+data.forEach((el) => {
+  const listItem = document.createElement("li");
+  const container = document.createElement("div");
+  const commenter = document.createElement("div");
+  const commenterData = document.createElement("p");
+
+  commenterData.textContent = `name: ${el.name} website: ${el.website}`;
+  const commentData = document.createElement("div");
+  const commentText = document.createElement("p");
+
+  commentText.textContent = el.comment;
+  commentData.appendChild(commentText);
+  commenter.appendChild(commenterData);
+  container.appendChild(commenter);
+  container.appendChild(commentData);
+  listItem.appendChild(container);
+
+  commentList.appendChild(listItem);
+});