lukeonline - src/pages/photos/[id].astro
---
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[0].data.map((photo) => ({
params: {
id: photo.id.toString(),
},
props: {
photo,
},
}))
}
const { photo } = Astro.props
const photoSourceUrl = '/photos/source/'
const photoExtension = '.jpg'
let coordString = 'None'
if (photo.coordinates) {
coordString = `${photo.coordinates.x}, ${photo.coordinates.y}`
}
const photoPath = `${photoSourceUrl}${photo.id}${photoExtension}`
const tableData = {
Location: photo.location,
Coordinates: coordString,
Tags: photo.tags,
}
---
<Base title={photo.date}>
<div class="flex flex-col gap-4">
<a href={photoPath}>
<img src={photoPath} alt={photo.desc} />
</a>
<div class="flex flex-col gap-1">
<span>{photo.desc}</span>
</div>
<div>
<Table rows={tableData} />
</div>
</div>
</Base>