Update AstroJS; sanitize HTML and markdown support in Guestbook form

1 files changed, 16 insertions, 9 deletions

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