From 6cd9fb7c8964f8f1b3cc8137bbda45a633e62587 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 4 Feb 2024 16:48:49 -0500
Subject: Update AstroJS; sanitize HTML and markdown support in Guestbook form

---
 src/components/Guestbook.jsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

(limited to 'src/components/Guestbook.jsx')

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index 91e2a0f..498bbbe 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { pb } from '../services/pocketbase';
 import { formatDate } from "../util";
+import sanitizeHtml from 'sanitize-html';
 
 class Guestbook extends Component {
     state = {
@@ -8,7 +9,7 @@ class Guestbook extends Component {
         error: null
     };
 
-    async componentDidMount() {
+    fetchMessages = async () => {
         try {
             const message = await pb.collection('guestbook').getFullList({
                 sort: '-created',
@@ -20,6 +21,10 @@ class Guestbook extends Component {
         }
     }
 
+    async componentDidMount() {
+        await this.fetchMessages();
+    }
+
     render() {
         const { message, error } = this.state;
 
@@ -33,14 +38,16 @@ class Guestbook extends Component {
 
         return (
             <div>
-                {message.map((g) => (
-                    <article class="card">
-                        <h1>Message from: {g.name}</h1>
-                        <small>{formatDate(g.created)}</small>
-                        <p>{g.message}</p>
-                        {g.website && <a href={g.website}>Website</a>}
-                    </article>
-                ))}
+                <div class="grid">
+                    {message.map((g) => (
+                        <article class="card">
+                            <h1>Message from: {g.name}</h1>
+                            <small>{formatDate(g.created)}</small>
+                            <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
+                            {g.website && <a href={g.website}>Website</a>}
+                        </article>
+                    ))}
+                </div>
             </div>
         );
     }
-- 
cgit v1.2.3