update guestbook

content/guestbook.html

@@ -3,6 +3,42 @@ title: "Guestbook"
 date: 2025-06-26T20:17:07-07:00
 ---
 <script type="module" src="/guestbook.js"></script>
+<template id="custom-guestbook-comments">
+    <style>
+        .comment-list {
+            font-size: large;
+            color: #226F54;
+            padding: 10px;
+            background: #F2F8DD;
+            box-sizing: border-box;
+            min-height: 45px;
+            border: 1px solid #226F54;
+            border-radius: 10px;
+        }
+    </style>
+</template>
+<template id="custom-guestbook-form">
+    <style>
+        input[type="text"],
+        textarea {
+            font-size: large;
+            color: #226F54;
+            padding: 10px;
+            background: #F2F8DD;
+            box-sizing: border-box;
+            min-height: 45px;
+            border: 1px solid #226F54;
+            border-radius: 10px;
+        }
 
-<guestbook-form guestbook="https://beta.webweav.ing/websites/26wxzbrx/guestbook"></guestbook-form>
+        textarea {
-<guestbook-comments guestbook="https://beta.webweav.ing/websites/26wxzbrx/guestbook"></guestbook-comments>
+            height: 150px;
+        }
+
+        label {
+            color: #226F54;
+        }
+    </style>
+</template>
+<guestbook-form guestbook="https://webweav.ing/websites/2f4bnb2z/guestbook"></guestbook-form>
+<guestbook-comments guestbook="https://webweav.ing/websites/2f4bnb2z/guestbook"></guestbook-comments>

static/guestbook.js

@@ -6,6 +6,8 @@ class GuestbookForm extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
+        let template = document.getElementById("custom-guestbook-form");
+        this.templateContent = template.content;
         this._guestbook = this.getAttribute('guestbook') || '';
         this._postUrl = `${this._guestbook}/comments/create/remote`
         this.render();
@@ -63,6 +65,7 @@ class GuestbookForm extends HTMLElement {
         </div>
       </form>
     `;
+        this.shadowRoot.appendChild(document.importNode(this.templateContent, true))
     }
 }
 
@@ -74,9 +77,12 @@ class CommentList extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
+        let template = document.getElementById("custom-guestbook-comments");
+        this.templateContent = template.content;
         this.comments = [];
         this.loading = false;
         this.error = null;
+
     }
 
     connectedCallback() {
@@ -169,6 +175,7 @@ class CommentList extends HTMLElement {
             }
       </div>
     `;
+        this.shadowRoot.appendChild(document.importNode(this.templateContent, true))
     }
 }