{#key id || src}
- ![{title]()
@@ -203,7 +208,7 @@
:global(.ultrawide-zoom) {
:global([data-smiz-modal]) {
cursor: grab;
-
+
&:active {
cursor: grabbing;
}
@@ -267,4 +272,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/src/lib/components/SingleColumnPhotoGrid.svelte b/src/lib/components/SingleColumnPhotoGrid.svelte
index c21a21a..00ad899 100644
--- a/src/lib/components/SingleColumnPhotoGrid.svelte
+++ b/src/lib/components/SingleColumnPhotoGrid.svelte
@@ -57,4 +57,4 @@
padding: $unit 0;
}
}
-
\ No newline at end of file
+
diff --git a/src/lib/components/TwoColumnPhotoGrid.svelte b/src/lib/components/TwoColumnPhotoGrid.svelte
index 866807c..4f25e38 100644
--- a/src/lib/components/TwoColumnPhotoGrid.svelte
+++ b/src/lib/components/TwoColumnPhotoGrid.svelte
@@ -33,7 +33,7 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: $unit-3x;
-
+
@include breakpoint('phone') {
gap: $unit-2x;
}
@@ -43,9 +43,9 @@
display: flex;
flex-direction: column;
gap: $unit-3x;
-
+
@include breakpoint('phone') {
gap: $unit-2x;
}
}
-
\ No newline at end of file
+
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index 45c01a2..f44a499 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -28,7 +28,9 @@
// Initialize view mode from URL or default
const urlMode = $page.url.searchParams.get('view') as ViewMode
let viewMode = $state(
- urlMode && ['masonry', 'single', 'two-column', 'horizontal'].includes(urlMode) ? urlMode : 'two-column'
+ urlMode && ['masonry', 'single', 'two-column', 'horizontal'].includes(urlMode)
+ ? urlMode
+ : 'two-column'
)
// Track loaded photo IDs to prevent duplicates
diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
index 28d5fe9..9a3da63 100644
--- a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
+++ b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
@@ -333,10 +333,10 @@
{:else}
-
- {#if photoItems.length > 0}
-
- {
+ if (!content) return ''
+ return getContentExcerpt(content, 155)
+ }
+
// Generate metadata
const metaTags = $derived(
type === 'album' && album
? generateMetaTags({
title: album.title,
- description:
- album.description ||
- `Photo album: ${album.title}${album.location ? ` taken in ${album.location}` : ''}`,
+ description: album.content
+ ? extractContentPreview(album.content) ||
+ album.description ||
+ `Photo story: ${album.title}`
+ : album.description ||
+ `Photo album: ${album.title}${album.location ? ` taken in ${album.location}` : ''}`,
url: pageUrl,
image: album.photos?.[0]?.url,
titleFormat: { type: 'by' }
@@ -63,19 +73,60 @@
})
)
+ // Generate enhanced JSON-LD for albums with content
+ const generateAlbumJsonLd = (album: any, pageUrl: string) => {
+ const baseJsonLd = generateImageGalleryJsonLd({
+ name: album.title,
+ description: album.description,
+ url: pageUrl,
+ images:
+ album.photos?.map((photo: any) => ({
+ url: photo.url,
+ caption: photo.caption
+ })) || []
+ })
+
+ // Enhance with Article schema if album has composed content
+ if (album.content) {
+ return {
+ '@context': 'https://schema.org',
+ '@graph': [
+ baseJsonLd,
+ {
+ '@type': 'Article',
+ '@id': `${pageUrl}#article`,
+ headline: album.title,
+ description: album.description,
+ url: pageUrl,
+ datePublished: album.date || album.createdAt,
+ dateModified: album.updatedAt || album.createdAt,
+ author: {
+ '@type': 'Person',
+ name: 'Justin Edmund',
+ url: 'https://jedmund.com'
+ },
+ publisher: {
+ '@type': 'Person',
+ name: 'Justin Edmund',
+ url: 'https://jedmund.com'
+ },
+ image: album.photos?.[0]?.url,
+ mainEntityOfPage: {
+ '@type': 'WebPage',
+ '@id': pageUrl
+ }
+ }
+ ]
+ }
+ }
+
+ return baseJsonLd
+ }
+
// Generate image gallery JSON-LD
const galleryJsonLd = $derived(
type === 'album' && album
- ? generateImageGalleryJsonLd({
- name: album.title,
- description: album.description,
- url: pageUrl,
- images:
- album.photos?.map((photo: any) => ({
- url: photo.url,
- caption: photo.caption
- })) || []
- })
+ ? generateAlbumJsonLd(album, pageUrl)
: type === 'photo' && photo
? {
'@context': 'https://schema.org',
@@ -143,13 +194,22 @@
-
{:else if type === 'photo' && photo}
@@ -286,6 +346,134 @@
color: $grey-40;
}
+ .album-content-wrapper {
+ margin-top: $unit-4x;
+
+ @include breakpoint('phone') {
+ margin-top: $unit-3x;
+ }
+ }
+
+ .edra-rendered-content {
+ max-width: 700px;
+ margin: 0 auto;
+
+ :global(p) {
+ margin: 0 0 $unit-3x;
+ line-height: 1.7;
+ color: $grey-20;
+ }
+
+ :global(h1),
+ :global(h2),
+ :global(h3),
+ :global(h4) {
+ margin: $unit-4x 0 $unit-2x;
+ color: $grey-10;
+ font-weight: 600;
+ }
+
+ :global(h1) {
+ font-size: 2rem;
+ }
+ :global(h2) {
+ font-size: 1.5rem;
+ }
+ :global(h3) {
+ font-size: 1.25rem;
+ }
+ :global(h4) {
+ font-size: 1.125rem;
+ }
+
+ :global(ul),
+ :global(ol) {
+ margin: 0 0 $unit-3x;
+ padding-left: $unit-3x;
+
+ li {
+ margin-bottom: $unit;
+ line-height: 1.7;
+ }
+ }
+
+ :global(blockquote) {
+ margin: $unit-4x 0;
+ padding: $unit-3x;
+ background: $grey-97;
+ border-left: 4px solid $grey-80;
+ border-radius: $unit;
+ color: $grey-30;
+ font-style: italic;
+ }
+
+ :global(a) {
+ color: $red-60;
+ text-decoration: underline;
+ transition: color 0.2s ease;
+
+ &:hover {
+ color: $red-50;
+ }
+ }
+
+ :global(code) {
+ background: $grey-95;
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-family: 'SF Mono', Monaco, monospace;
+ font-size: 0.875em;
+ }
+
+ :global(pre) {
+ background: $grey-95;
+ padding: $unit-3x;
+ border-radius: $unit;
+ overflow-x: auto;
+ margin: 0 0 $unit-3x;
+ }
+
+ :global(hr) {
+ margin: $unit-4x 0;
+ border: none;
+ border-top: 1px solid $grey-90;
+ }
+
+ :global(figure) {
+ margin: $unit-4x 0;
+ text-align: center;
+
+ img {
+ max-width: 100%;
+ height: auto;
+ border-radius: $card-corner-radius;
+ }
+
+ figcaption {
+ margin-top: $unit;
+ font-size: 0.875rem;
+ color: $grey-40;
+ line-height: 1.5;
+ }
+ }
+
+ // Gallery styles
+ :global(.gallery-grid) {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: $unit-2x;
+ margin: $unit-4x 0;
+ }
+
+ // Geolocation styles
+ :global(.geolocation-map) {
+ margin: $unit-4x 0;
+ border-radius: $card-corner-radius;
+ overflow: hidden;
+ height: 400px;
+ }
+ }
+
.photo-page {
width: 100%;
max-width: 1200px;
diff --git a/src/routes/photos/p/[id]/+page.svelte b/src/routes/photos/p/[id]/+page.svelte
index 5944de4..caa4b93 100644
--- a/src/routes/photos/p/[id]/+page.svelte
+++ b/src/routes/photos/p/[id]/+page.svelte
@@ -46,6 +46,7 @@
let defaultRightX = 0
const pageUrl = $derived($page.url.href)
+ const fromAlbum = $derived($page.url.searchParams.get('from'))
// Generate metadata
const metaTags = $derived(
@@ -355,10 +356,10 @@
{:else if photo}
This album doesn't contain any photos yet.
+ + {#if album.content} +
+
+ {:else}
+
+ {#if photoItems.length > 0}
+
+ {@html renderEdraContent(album.content)}
+
+
+ {/if}
{/if}
This album doesn't contain any photos yet.
+
- {
+ if (fromAlbum && photo.albums) {
+ const album = photo.albums.find((a) => a.slug === fromAlbum)
+ return album ? `Back to ${album.title}` : 'Back to Photos'
+ }
+ return photo.album ? `Back to ${photo.album.title}` : 'Back to Photos'
+ })()}
showBackButton={true}
/>