From 9beca95c6e2a52db62f4703c0da5a3b77857ec39 Mon Sep 17 00:00:00 2001
From: yequari <yequari@32bit.cafe>
Date: Sat, 3 Jan 2026 17:22:01 -0700
Subject: [PATCH] update guestbook

---
 content/guestbook.html | 40 ++++++++++++++++++++++++++++++++++++++--
 static/guestbook.js    |  7 +++++++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/content/guestbook.html b/content/guestbook.html
index 4806757..a2ef6cc 100644
--- a/content/guestbook.html
+++ b/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>
-<guestbook-comments guestbook="https://beta.webweav.ing/websites/26wxzbrx/guestbook"></guestbook-comments>
+        textarea {
+            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>
diff --git a/static/guestbook.js b/static/guestbook.js
index 8a6dcac..ea09bcd 100644
--- a/static/guestbook.js
+++ b/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))
     }
 }