lukeonline - commit f4369da

diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro index d5f5c2e..2756fd2 100644 --- 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 index ac976fe..09c5e42 100644 --- 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 index 0016bae..a65b386 100644 --- 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 new file mode 100644 index 0000000..946333b --- /dev/null +++ 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 new file mode 100644 index 0000000..13e9ac0 --- /dev/null +++ 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 new file mode 100644 index 0000000..e181043 --- /dev/null +++ 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 index a461c50..f1d8c73 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1 +1 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss";