sirlilpanda/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finally a place for my pictures

Browse Source
This commit is contained in:
panda
2026-07-28 22:45:30 +12:00
parent e23c854e06
commit 5a2efd1b93
1 changed files with 68 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/pages/pictures/index.astro
View File

@@ -2,98 +2,94 @@
import BaseHead from '../../components/BaseHead.astro'; import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro'; import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro'; import Footer from '../../components/Footer.astro';
import { getCollection } from 'astro:content';
import { actions } from 'astro:actions';
import { Image } from 'astro:assets';
import { drizzle } from "drizzle-orm/d1";
import { GuestLog } from "../../schema";
import { env } from "cloudflare:workers";
export const prerender = false const albums = await getCollection('album');
const db = drizzle(env.DB);
if (Astro.request.method === 'POST') {
// Parse form data
const formData = await Astro.request.formData();
console.log(formData);
const name = formData.get('name');
const message = formData.get('message');
const website_link = formData.get('website_link');
if (
typeof name === 'string' &&
typeof website_link === 'string' &&
typeof message === 'string' &&
name !== "" &&
message !== ""
) {
if (message.length >= 255) { // console.log(albums)
return;
}
await db.insert(GuestLog).values([{
name : name,
message : message,
website_link : website_link,
date_viewed : new Date(),
}]);
}
}
let guest_logs : {id: number; name: string; message: string | null; date: Date;}[] = [];
try {
guest_logs = await db
.select()
.from(GuestLog)
.orderBy(GuestLog.date);
} catch (err) {
console.log(err);
}
guest_logs.forEach(log => {
console.log(log)
});
--- ---
<!--
albums.map(album => (
<h1>{album.data.title}</h1>
<img src=\"{album.data.cover}\" alt="">
-->
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title="guest book" description="a guest book of everyone who have visited my site" /> <BaseHead title="photo albums" description="a collection of nice photos ive taken" />
</head> </head>
<body> <body>
<Header /> <Header />
<main> <main>
<section> <section>
<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1> <h1>Albums</h1>
<form method="POST" style="display: grid"> {( albums.map(album =>
<label for="name">Name</label> <div class="album">
<input id="name" name="name" /> <a href={"pictures/" + album.id}>
<div class="album-text">
<label for="website_link">Website link(optional)</label> <h1>{album.data.title}</h1>
<input id="website_link" name="website_link" /> <p>{album.data.description}</p>
</div>
<label for="message">message</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
<h1>guest book</h1>
<ul>
{
guest_logs.map((log) => (
<li>
<p>[{log.date.toDateString()}] {log.name}
{log.website_link? (<a href={log.website_link}>{log.website_link}</a>) : ""}
: {log.message}</p>
</li>
))
}
</ul>
<Image src={album.data.cover} alt="" class="album-image"/>
</a>
</div>
<hr/>
))}
</section> </section>
</main> </main>
<Footer /> <Footer />
</body> </body>
</html> </html>
<style>
.album {
/* display: flex; */
margin-bottom: 2em;
width: fit-content;
transition: 250ms;
}
.album:hover {
transform: translateY(-1em);
}
.album-image {
border-style: solid;
}
.album-text {
position: absolute;
max-width: 20em;
margin-left: 1em;
margin-top: 1em;
background-color: rgba(250, 235, 215, 0.2);
rotate: -3deg;
transition: 250ms;
}
.album-text h1 {
color: black;
}
.album-text p {
color: black;
}
</style>