From 71093a4c88ed41bd51a3387f1e91c7ee05f2203c Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 4 Feb 2024 12:30:02 -0500
Subject: Almost finished implementing guestbook; More consistency in cards

---
 bun.lockb                                       | Bin 278861 -> 280212 bytes
 package.json                                    |   1 +
 src/components/Guestbook.jsx                    |  49 +++++++++++++++++++++
 src/components/GuestbookForm.jsx                |  56 ++++++++++++++++++++++++
 src/layouts/Default.astro                       |   3 +-
 src/layouts/PageMarkdown.astro                  |   1 +
 src/pages/downloads/osft-software-archive.astro |  25 +++++------
 src/pages/guestbook.astro                       |  45 +++++--------------
 src/pages/projects.astro                        |  40 +++++++++--------
 src/services/GuestbookService.js                |  20 +++++++++
 src/services/pocketbase.js                      |   2 +
 11 files changed, 174 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Guestbook.jsx
 create mode 100644 src/components/GuestbookForm.jsx
 create mode 100644 src/services/GuestbookService.js
 create mode 100644 src/services/pocketbase.js

diff --git a/bun.lockb b/bun.lockb
index 0b32480..f9e5b7d 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 1ca0c76..fd6aaf7 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "astro": "4.2.4",
     "astro-icon": "^1.0.2",
     "markdown-it": "^14.0.0",
+    "pocketbase": "^0.21.1",
     "preact": "^10.19.3",
     "sanitize-html": "^2.11.0"
   }
diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
new file mode 100644
index 0000000..91e2a0f
--- /dev/null
+++ b/src/components/Guestbook.jsx
@@ -0,0 +1,49 @@
+import { h, Component } from 'preact';
+import { pb } from '../services/pocketbase';
+import { formatDate } from "../util";
+
+class Guestbook extends Component {
+    state = {
+        message: null,
+        error: null
+    };
+
+    async componentDidMount() {
+        try {
+            const message = await pb.collection('guestbook').getFullList({
+                sort: '-created',
+            });
+            this.setState({ message });
+        } catch (error) {
+            this.setState({ error: `Failed to fetch data: ${error.message}` });
+            console.error('Failed to fetch data:', error);
+        }
+    }
+
+    render() {
+        const { message, error } = this.state;
+
+        if (error) {
+            return <p>{error}</p>;
+        }
+
+        if (!message) {
+            return <p>Loading messages...</p>;
+        }
+
+        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>
+        );
+    }
+}
+
+export default Guestbook;
diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
new file mode 100644
index 0000000..aae5e10
--- /dev/null
+++ b/src/components/GuestbookForm.jsx
@@ -0,0 +1,56 @@
+import { h, Component } from 'preact';
+import { createMessage } from '../services/GuestbookService';
+
+class GuestbookForm extends Component {
+    state = {
+        name: '',
+        email: '',
+        website: '',
+        message: ''
+    };
+
+    handleChange = (e) => {
+        this.setState({ [e.target.name]: e.target.value });
+    }
+
+    handleSubmit = async (e) => {
+        e.preventDefault();
+        await createMessage(this.state);
+        this.setState({
+            name: '',
+            email: '',
+            website: '',
+            message: ''
+        });
+    }
+
+    render() {
+        return (
+            <form class="card" onSubmit={this.handleSubmit}>
+                <h2>Submit Message</h2>
+                <label>
+                    Name<br />
+                    <input type="text" name="name" placeholder="Name" required value={this.state.name} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Email Address<br />
+                    <input type="email" name="email" placeholder="Email Address (optional)" value={this.state.email} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Your Website<br />
+                    <input type="url" name="website" placeholder="https://example.com (optional)" value={this.state.website} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Message<br />
+                    <textarea name="message" placeholder="Message (Up to 1000 characters)" required value={this.state.message} onChange={this.handleChange}></textarea>
+                </label>
+                <button type="submit">Send</button>
+            </form>
+        );
+    }
+}
+
+export default GuestbookForm;
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index db94dfd..4f3c87a 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -42,8 +42,9 @@ const date = new Date();
 	<div transition:name="main" transition:animate="fade">
 		<slot />
 		<footer>
-			<p><a href="https://github.com/Alee14/personal-website">Made with {Astro.generator} and Hosted on Vercel</a></p>
+			<p>Made with {Astro.generator} and Hosted on Vercel</p>
 			<p>Copyright &copy; {date.getFullYear()} Andrew Lee</p>
+			<p><a href="https://github.com/Alee14/personal-website">View source code.</a></p>
 		</footer>
 	</div>
 	</body>
diff --git a/src/layouts/PageMarkdown.astro b/src/layouts/PageMarkdown.astro
index 89bd0f8..4553661 100644
--- a/src/layouts/PageMarkdown.astro
+++ b/src/layouts/PageMarkdown.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from './Default.astro';
 const { frontmatter } = Astro.props;
+import '../styles/cards.css';
 ---
 
 <Layout title=`${frontmatter.title} - Andrew Lee` description={frontmatter.description}>
diff --git a/src/pages/downloads/osft-software-archive.astro b/src/pages/downloads/osft-software-archive.astro
index 2074910..c106cef 100644
--- a/src/pages/downloads/osft-software-archive.astro
+++ b/src/pages/downloads/osft-software-archive.astro
@@ -1,20 +1,21 @@
 ---
 import Page from "../../layouts/Page.astro";
+import '../../styles/cards.css';
 ---
 <Page title="Philip Adams Software Archive" description="The ultimate software collection of Philip Adams' software.">
     <main>
         <div class="content-warning">
-            <h1>Content Warning</h1>
+            <h2>Content Warning</h2>
             <p>Some of the software in this pack contains a jumpscare. If you have epilepsy, please be cautious.</p>
             <p>Disable your antivirus as it can detect false positive, feel free to use a VM in case this feels not safe.</p>
         </div>
-        <div class="box note">
-            <h1>Note</h1>
+        <div class="card note">
+            <h2>Note</h2>
             <p>There was a mention back in the AstralPhaser Chats that the Histacom 1.8.5 (2013) copy in IndieDB is not the original copy from Phil.</p>
             <p>I have retrieved the original 2010 copy from Phil himself which has the original compile date of July 5th 2010, and I will be keeping both versions for the time being.</p>
         </div>
-        <h1>Minimal Requirements</h1>
-        <div class="box requirements">
+        <div class="card requirements">
+            <h2>Minimal Requirements</h2>
             <ul>
                 <li>OS: Windows XP SP3/Vista SP2 (Depends on each program)</li>
                 <li>CPU: Intel/AMD x86 or x64 1 GHz Processor</li>
@@ -23,8 +24,8 @@ import Page from "../../layouts/Page.astro";
                 <li>Frameworks: Adobe Flash Player, .NET Framework 3.5, 4.0 and/or 4.5</li>
             </ul>
         </div>
-        <h1>Programs</h1>
-        <div class="box programs">
+        <div class="card programs">
+            <h2>Programs</h2>
             <ul>
                 <li>Amazing Maze (Requires Flash Player)</li>
                 <li>Artpad (from ShiftOS)</li>
@@ -82,9 +83,10 @@ import Page from "../../layouts/Page.astro";
         padding: 1.2em;
         border-radius: 20px;
         gap: 0.5em;
+        margin: 0.5em;
     }
 
-    .content-warning h1 {
+    .content-warning h2 {
         margin-top: 0.2em;
     }
 
@@ -96,13 +98,6 @@ import Page from "../../layouts/Page.astro";
         margin-top: 0.2em;
     }
 
-    .box {
-        background-color: #3B513B;
-        padding: 1.2em;
-        border-radius: 20px;
-        gap: 0.5em;
-    }
-
     a {
         font-size: 1.5em;
     }
diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index 0aebd9c..3ea4c28 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -1,44 +1,21 @@
 ---
 import Page from '../layouts/Page.astro'
 import "../styles/cards.css";
+import GuestbookForm from '../components/GuestbookForm'
+import Guestbook from '../components/Guestbook'
 ---
 <Page title="Guestbook" description="Use this page to send me a message">
     <main>
-        <form class="card">
-            <h2>Submit Message</h2>
-            <label>
-                Name<br>
-                <input type="text" name="name" placeholder="Name" required />
-            </label>
-            <br>
-            <label>
-                Email Address<br>
-                <input type="email" name="email" placeholder="Email Address (Optional)" />
-            </label>
-            <br>
-            <label>
-                Your Website<br>
-                <input type="url" name="link" placeholder="https://example.com" required />
-            </label>
-            <br>
-            <label>
-                Message<br>
-                <textarea name="message" placeholder="Message" required></textarea>
-            </label>
-            <button type="submit">Send</button>
-        </form>
+        <div class="card">
+            <h2>Welcome to my Guestbook!</h2>
+            <p>Feel free to send a nice message here!</p>
+        </div>
+        <GuestbookForm client:visible />
         <div class="grid">
-            <article class="card">
-                <h1>John Doe</h1>
-                <small>January 1, 2024</small>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Nam id orci non diam bibendum euismod quis sit amet purus.
-                    Fusce fermentum facilisis placerat. Mauris varius ante elit, et
-                    luctus enim blandit sit amet.
-                    Pellentesque ullamcorper dapibus suscipit.
-                </p>
-                <a href="https://google.com">Website</a>
-            </article>
+            <Guestbook client:visible />
         </div>
     </main>
 </Page>
+<script>
+
+</script>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 37cec1a..33452c8 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -4,24 +4,28 @@ import projects from "../data/projects.json";
 import "../styles/cards.css";
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
-    <main class="grid">
-        {
-            projects.map((project) => {
-                return (
-                        <article class="card">
-                            <h1>{project.name}</h1>
-                            <p>{project.description}</p>
-                            <div class="row">
-                                {project.links.map((link) => {
-                                    return (
-                                            <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
-                                    )
-                                })}
-                            </div>
-                        </article>
-                )
-            })
-        }
+    <main>
+        <div class="grid">
+            {
+                projects.map((project) => {
+                    return (
+                            <article class="card">
+                                <h1>{project.name}</h1>
+                                <p>{project.description}</p>
+                                <div class="row">
+                                    {project.links.map((link) => {
+                                        return (
+                                                <a href={link.url} target={link.external ? "_blank" : "_self"}>{link.name}</a>
+                                        )
+                                    })}
+                                </div>
+                            </article>
+                    )
+                })
+            }
+        </div>
+        <h2>Archived Repositories</h2>
+        <p><a href="https://github.com/alee14-projects" target="_blank">Alee Productions/AleeCorp Software</a></p>
     </main>
 </Page>
 <style>
diff --git a/src/services/GuestbookService.js b/src/services/GuestbookService.js
new file mode 100644
index 0000000..3e29c8d
--- /dev/null
+++ b/src/services/GuestbookService.js
@@ -0,0 +1,20 @@
+import { pb } from './pocketbase'
+
+let name;
+let email;
+let website;
+let message;
+
+export async function createMessage() {
+    try {
+        const data = {
+            name: name,
+            email: email,
+            website: website,
+            message: message
+        };
+        return await pb.collection('guestbook').create(data);
+    } catch (error) {
+        console.error(error);
+    }
+}
diff --git a/src/services/pocketbase.js b/src/services/pocketbase.js
new file mode 100644
index 0000000..b82a4b7
--- /dev/null
+++ b/src/services/pocketbase.js
@@ -0,0 +1,2 @@
+import PocketBase from 'pocketbase';
+export const pb = new PocketBase('http://127.0.0.1:8090');
-- 
cgit v1.2.3