lukeonline

commit f4369daf791f145f7795963fba887d6baf138f4e
parent 81ba1d7ea96634173b8298d3356697db1f7434af
Author: Luke Jones <luke.jones.2567@gmail.com>
Date:   Mon, 20 Jul 2026 22:48:24 +0100

feat: create photo loader

Diffstat:
M
src/components/LargeButton.astro
 | 
12
++++++++----
M
src/components/LargeButtonRow.astro
 | 
1
+
M
src/content.config.ts
 | 
8
++++++--
A
src/content/photos/photos.json
 | 
17
+++++++++++++++++
A
src/layouts/ContentGrid.astro
 | 
13
+++++++++++++
A
src/pages/photos/index.astro
 | 
25
+++++++++++++++++++++++++
M
src/styles/global.css
 | 
3
+--

7 files changed, 71 insertions(+), 8 deletions(-)
diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro
@@ -1,11 +1,15 @@
 ---
-const { ...props } = Astro.props;
+const { image, title, desc, link } = Astro.props;
 
 const buttonStyling = "border-solid border-1 border-gray-300" +
   " bg-gray-50 flex flex-col gap-1 p-2 hover:text-blue-500" +
   " hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200";
 ---
-<a href={props.link} class={buttonStyling}>
-  {props.title && <span class="font-bold">{props.title}</span>}
-  {props.desc && <span>{props.desc}</span>}
+<a href={link} class={buttonStyling}>
+  {image && <img src={image.link}
+                 alt={image.alt}
+                 class="w-full aspect-4/5"
+  />}
+  {title && <span class="font-bold">{title}</span>}
+  {desc && <span>{desc}</span>}
 </a>
diff --git a/src/components/LargeButtonRow.astro b/src/components/LargeButtonRow.astro
@@ -10,6 +10,7 @@ const entries = props.entries;
       <LargeButton title={entry.title}
                    desc={entry.desc}
                    link={entry.link}
+                   image={entry.image}
         />
   )}
 </div>
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -1,5 +1,5 @@
 import { defineCollection } from 'astro:content';
-import { glob } from 'astro/loaders';
+import { glob, file } from 'astro/loaders';
 
 const blog = defineCollection({
   loader: glob({
@@ -8,4 +8,8 @@ const blog = defineCollection({
   }),
 });
 
-export const collections = { blog };
+const photos = defineCollection({
+  loader: file('./src/content/photos/photos.json')
+});
+
+export const collections = { blog, photos };
diff --git a/src/content/photos/photos.json b/src/content/photos/photos.json
@@ -0,0 +1,17 @@
+[
+    {
+        "desc": "Photo 1 Desc",
+        "date": "2026-01-01",
+        "id": 1000,
+        "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/layouts/ContentGrid.astro b/src/layouts/ContentGrid.astro
@@ -0,0 +1,13 @@
+---
+import Base from "./Base.astro";
+import LargeButtonRow from "../components/LargeButtonRow.astro";
+
+const { ...props } = Astro.props;
+
+const postStyling = "flex flex-col bg-gray-50 " +
+  "p-1 pl-3 pr-3 hover:bg-gray-200 focus:bg-blue-50 focus:rounded"
+---
+<Base title={props.title}>
+  <slot />
+  <LargeButtonRow entries={props.content} />
+</Base>
diff --git a/src/pages/photos/index.astro b/src/pages/photos/index.astro
@@ -0,0 +1,25 @@
+---
+import ContentGrid from "../../layouts/ContentGrid.astro";
+import TextSection from "../../components/TextSection.astro";
+
+import { getCollection, getEntry } from 'astro:content';
+
+const title = "Photos";
+
+const photos = await getCollection('photos');
+
+const photoViewUrl = "/photos/";
+const photoThumbUrl = "/photos/thumb/";
+
+const contentData = photos.map((photo) => ({
+  desc: `${photo.data.date}`,
+  link: `${photoViewUrl}${photo.data.id}`,
+  image: {
+    link: `${photoThumbUrl}${photo.data.id}`,
+    alt: `${photo.data.desc}`
+  }
+}));
+
+console.log(contentData)
+---
+<ContentGrid title={title} content={contentData} />
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1 +1 @@
-@import "tailwindcss";-
\ No newline at end of file
+@import "tailwindcss";