finally a place for my pictures

2026-07-28 22:45:30 +12:00
parent e23c854e06
commit 5a2efd1b93
1 changed files with 68 additions and 72 deletions
--- a/src/pages/pictures/index.astro
+++ b/src/pages/pictures/index.astro
@@ -2,98 +2,94 @@
 import BaseHead from '../../components/BaseHead.astro';
 import Header from '../../components/Header.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) {
-			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)
-});
+// console.log(albums)

 ---

+<!-- 
+	albums.map(album => (
+	<h1>{album.data.title}</h1>
+	<img src=\"{album.data.cover}\" alt="">
+ -->
+
 <!doctype html>
 <html lang="en">
 	<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>
 	<body>
 		<Header />
 		<main>
 			<section>
-			<h1>sign the <span style="background-color: blueviolet;">guest</span> book</h1>
-			<form method="POST" style="display: grid">
-				<label for="name">Name</label>
-				<input id="name" name="name" />
-
-				<label for="website_link">Website link(optional)</label>
-				<input id="website_link" name="website_link" />
-
-				<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>
+				<h1>Albums</h1>
+				{( albums.map(album =>
+					<div class="album">
+						<a href={"pictures/" + album.id}>
+							<div class="album-text">
+								<h1>{album.data.title}</h1>
+								<p>{album.data.description}</p>
+							</div>

+							<Image src={album.data.cover} alt="" class="album-image"/>
+						</a>
+					</div>
+					<hr/>
+				))}
 			</section>
 		</main>
 		<Footer />
 	</body>
 </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>