Added previous photo layout, will definitely change. Also going back and forth on font choice still

pb/pb_migrations/1763067509_updated_photos.js

@@ -0,0 +1,20 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("my9ej2vdwzwoqov")
+
+  // update collection data
+  unmarshal({
+    "viewRule": "@request.auth.email=\"site@breadone.net\""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("my9ej2vdwzwoqov")
+
+  // update collection data
+  unmarshal({
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+})

pb/pb_migrations/1763071411_updated_photos.js

@@ -0,0 +1,22 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("my9ej2vdwzwoqov")
+
+  // update collection data
+  unmarshal({
+    "listRule": "",
+    "viewRule": ""
+  }, collection)
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("my9ej2vdwzwoqov")
+
+  // update collection data
+  unmarshal({
+    "listRule": "@request.auth.email=\"site@breadone.net\"",
+    "viewRule": "@request.auth.email=\"site@breadone.net\""
+  }, collection)
+
+  return app.save(collection)
+})

pb/pb_migrations/1763072215_updated_photos.js

@@ -0,0 +1,24 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("my9ej2vdwzwoqov")
+
+  // add field
+  collection.fields.addAt(1, new Field({
+    "hidden": false,
+    "id": "bool1748787223",
+    "name": "published",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "bool"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("my9ej2vdwzwoqov")
+
+  // remove field
+  collection.fields.removeById("bool1748787223")
+
+  return app.save(collection)
+})

web/src/pages/photos/index.astro

@@ -1,17 +1,50 @@
 ---
 import Base from "src/layout/Base.astro"
 import Sidebar from "src/components/sidebar.astro"
+import { authPB } from 'src/utils/pocketbase'
+import type { RecordModel } from 'pocketbase'
+
+export const prerender = false
+
+const pb = await authPB()
+const photos = await pb.collection('photos').getFullList({
+    sort: '-created'
+})
+
+const getImageLink = async (record: RecordModel) => {
+    const link = await pb.files.getURL(record, record.image)
+    return link.substring(21)
+}
 ---
 
 <Base>
-	<div class="flex flex-row">
+    <div class="flex flex-row">
-		<Sidebar>
+        <Sidebar>
             <p class="text-2xl">Photography :)</p>
             Chuck me an email if you'd like a print of these, I'll see what I can do
         </Sidebar>
         
-		<div class="content-panel">
+        <div class="content-panel">
-			PHOTOSSSSSSSSS
+            {
-		</div>
+                photos.map(photo => (
-	</div>
+                <div class="max-w-md  overflow-hidden md:max-w-2xl md:my-2">
+                    <div class="md:flex">
+                        <div class="md:shrink-0">
+                            <img class="h-full w-full object-cover md:h-full md:w-96" src={ pb.files.getURL(photo, photo.image, {'thumb': '1080x0'}) } alt={photo.alt}>
+                        </div>
+                        <div class="md:pl-4 md:mt-2 mb-8 mt-3">
+                            <div class="bold text-xl">{photo.title === "" ? "Untitled" : photo.title}</div>
+                            
+                            <div class="pt-2">
+                                <p>📌 {photo.location}</p>
+                                <p>📷 {photo.camera}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                ))
+            }
+            
+        </div>
+    </div>
 </Base>

web/src/styles/global.css

@@ -9,13 +9,21 @@
     src: url("/fonts/barnum-roman.ttf");
   }
 
+  @font-face {
+    font-family: Warbler;
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url("/fonts/warbler-var.woff2");
+  }
+  
   :root {
     --bg-light: #f4f4f9;
     --accent: #F9DC5C;
   }
   
   html body {
-    @apply font-[Barnum];
+    @apply font-[Georgia];
     @apply w-[68%] mx-auto h-full;
     @apply bg-(--bg-light);
   }
@@ -27,7 +35,7 @@
 }
 
 .content-panel {
-  @apply w-[68%] my-25;
+  @apply w-[68%] my-25 pl-10;
 }
 
 @tailwind utilities;

web/src/utils/pocketbase.ts

@@ -1,6 +1,7 @@
 import PocketBase from "pocketbase";
 
-const pb = new PocketBase("/");
+const pb = new PocketBase("http://localhost:4321");
+pb.autoCancellation(false)
 
 export const authPB = async () => {
   if (!pb.authStore.isValid) {