lukeonline

commit ddfc2e3b0ad46303ef319c28dfdd525eeb01c949
parent 7b672174c8b4d8235a847d9e8cc101207fbe5778
Author: Luke Jones <luke.jones.2567@gmail.com>
Date:   Tue, 21 Jul 2026 18:45:33 +0100

refactor: table component

Diffstat:
A
public/photos/thumb/1000.jpg
 | 
0

A
public/photos/thumb/2000.jpg
 | 
0

A
public/photos/thumb/3000.jpg
 | 
0

M
src/components/LargeButton.astro
 | 
2
+-
A
src/components/Table.astro
 | 
20
++++++++++++++++++++
M
src/content/photos/photos.json
 | 
30
++++++++++++++++++++++++++++++
A
src/pages/photos/[id].astro
 | 
46
++++++++++++++++++++++++++++++++++++++++++++++
M
src/pages/photos/index.astro
 | 
5
++---

8 files changed, 99 insertions(+), 4 deletions(-)
diff --git a/public/photos/thumb/1000.jpg b/public/photos/thumb/1000.jpg
Binary files differ.
diff --git a/public/photos/thumb/2000.jpg b/public/photos/thumb/2000.jpg
Binary files differ.
diff --git a/public/photos/thumb/3000.jpg b/public/photos/thumb/3000.jpg
Binary files differ.
diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro
@@ -8,7 +8,7 @@ const buttonStyling = "border-solid border-1 border-gray-300" +
 <a href={link} class={buttonStyling}>
   {image && <img src={image.link}
                  alt={image.alt}
-                 class="w-full aspect-4/5"
+                 class="w-full aspect-4/5 object-cover"
   />}
   {title && <span class="font-bold">{title}</span>}
   {desc && <span>{desc}</span>}
diff --git a/src/components/Table.astro b/src/components/Table.astro
@@ -0,0 +1,20 @@
+---
+const { rows } = Astro.props;
+---
+<table class="w-full table-auto">
+  {Object.entries(rows).map(([param, value]) => (
+    <tr class="p-4 even:bg-gray-50 odd:bg-gray-100 w-full">
+      <td class="p-2 pl-4 pr-4 italic">{param}</td>
+      <td class="flex flex-row gap-2 p-2 pl-4 pr-4 h-auto flex-wrap">
+      {
+        Array.isArray(value) ?  
+          value.map(item => 
+            <span class="bg-gray-600 text-white p-1/2 pl-2 pr-2 rounded-sm">
+              {item}
+            </span>
+          ) 
+          : value ?? '-'}
+      </td>
+    </tr>
+  ))}
+</table>
diff --git a/src/content/photos/photos.json b/src/content/photos/photos.json
@@ -4,6 +4,21 @@
         "date": "2026-01-01",
         "id": 1000,
         "location": "Location",
+        "tags": ["tag1", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2", "tag2"],
+        "camera_position": {
+            "x": "52.41884104759987",
+            "y": "-4.063553160306468"
+        },
+        "subject_position": {
+            "x": "52.41824343219751",
+            "y": "-4.065837114623462"
+        }
+    },
+    {
+        "desc": "Photo 2 Desc",
+        "date": "2026-01-02",
+        "id": 2000,
+        "location": "Location",
         "tags": ["tag1", "tag2"],
         "camera_position": {
             "x": "52.41884104759987",
@@ -12,6 +27,21 @@
         "subject_position": {
             "x": "52.41824343219751",
             "y": "-4.065837114623462"
+        }
+    },
+    {
+        "desc": "Photo 3 Desc",
+        "date": "2026-01-03",
+        "id": 3000,
+        "location": "Location",
+        "tags": ["tag1", "tag2"],
+        "camera_position": {
+            "x": "52.41884104759987",
+            "y": "-4.063553160306468"
         },
+        "subject_position": {
+            "x": "52.41824343219751",
+            "y": "-4.065837114623462"
+        }
     }
 ]
diff --git a/src/pages/photos/[id].astro b/src/pages/photos/[id].astro
@@ -0,0 +1,46 @@
+---
+import Base from "../../layouts/Base.astro";
+import Table from "../../components/Table.astro";
+
+import { getCollection, render } from "astro:content";
+
+export async function getStaticPaths() {
+  const photos = await getCollection("photos");
+
+  return photos.map((photo) => ({
+    params: {
+      id: photo.id,
+    },
+    props: {
+      photo,
+    },
+  }));
+}
+
+const { photo } = Astro.props;
+
+const photoSourceUrl = "/photos/source/";
+const photoExtension = ".jpg";
+
+const photoPath = `${photoSourceUrl}${photo.data.id}${photoExtension}`;
+
+const tableData = {
+  "Location": photo.data.location,
+  "Coordinates": photo.data.coordinates,
+  "Tags": photo.data.tags
+}
+---
+<Base title={photo.data.date}>
+  <div class="flex flex-col gap-4">
+    <a href={photoPath}>
+      <img src={photoPath} alt={photo.data.desc} />
+    </a>
+    <div class="flex flex-col gap-1">
+      <span>{photo.data.desc}</span>
+      <span>{photo.data.date}</span>
+    </div>
+    <div>
+      <Table rows={tableData} />
+    </div>
+  </div>
+</Base>
diff --git a/src/pages/photos/index.astro b/src/pages/photos/index.astro
@@ -10,16 +10,15 @@ const photos = await getCollection('photos');
 
 const photoViewUrl = "/photos/";
 const photoThumbUrl = "/photos/thumb/";
+const photoExtension = ".jpg";
 
 const contentData = photos.map((photo) => ({
   desc: `${photo.data.date}`,
   link: `${photoViewUrl}${photo.data.id}`,
   image: {
-    link: `${photoThumbUrl}${photo.data.id}`,
+    link: `${photoThumbUrl}${photo.data.id}${photoExtension}`,
     alt: `${photo.data.desc}`
   }
 }));
-
-console.log(contentData)
 ---
 <ContentGrid title={title} content={contentData} />