diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Guestbook.jsx | 49 | ||||
| -rw-r--r-- | src/components/GuestbookForm.jsx | 56 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 3 | ||||
| -rw-r--r-- | src/layouts/PageMarkdown.astro | 1 | ||||
| -rw-r--r-- | src/pages/downloads/osft-software-archive.astro | 25 | ||||
| -rw-r--r-- | src/pages/guestbook.astro | 45 | ||||
| -rw-r--r-- | src/pages/projects.astro | 40 | ||||
| -rw-r--r-- | src/services/GuestbookService.js | 20 | ||||
| -rw-r--r-- | src/services/pocketbase.js | 2 |
9 files changed, 173 insertions, 68 deletions
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 © {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'); |