jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve album page functionality and design

Browse source 
- Fix renderEdraContent to accept albumSlug option parameter
- Fix album listing links from /photos/{slug} to /albums/{slug}
- Remove album header section for cleaner photo story presentation
- Remove broken photo page conditional that was preventing render
- Pass album slug to content renderer for proper photo linking

Creates more immersive experience where content speaks for itself.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-07-11 20:12:43 -07:00
parent df3a68885d
commit f24b79da2f
3 changed files with 3 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/utils/content.ts
View file

@ -1,5 +1,5 @@
// Render Edra/BlockNote JSON content to HTML
export const renderEdraContent = (content: any): string => {
export const renderEdraContent = (content: any, options: { albumSlug?: string } = {}): string => {
if (!content) return ''
// Handle Tiptap format first (has type: 'doc')

2
src/routes/albums/+page.svelte
View file

@ -149,7 +149,7 @@
{:else}
<div class="albums-grid">
{#each allAlbums as album}
<a href="/photos/{album.slug}" class="album-card">
<a href="/albums/{album.slug}" class="album-card">
{#if album.coverPhoto}
<div class="album-cover">
<SmartImage

101
src/routes/albums/[slug]/+page.svelte
View file

@ -154,35 +154,11 @@
{:else if album}
<div class="album-wrapper">
<Page>
{#snippet header()}
<div class="album-header">
<h1 class="album-title">{album.title}</h1>
{#if album.description}
<p class="album-description">{album.description}</p>
{/if}
<div class="album-meta">
{#if album.date}
<span class="meta-item">📅 {formatDate(album.date)}</span>
{/if}
{#if album.location}
<span class="meta-item">📍 {album.location}</span>
{/if}
<span class="meta-item"
>📷 {album.photos?.length || 0} photo{(album.photos?.length || 0) !== 1
? 's'
: ''}</span
>
</div>
</div>
{/snippet}
<!-- Album Content -->
{#if album.content}
<div class="album-content">
<div class="edra-rendered-content">
{@html renderEdraContent(album.content)}
{@html renderEdraContent(album.content, { albumSlug: album.slug })}
</div>
</div>
{:else}
@ -199,34 +175,6 @@
{/if}
</Page>
</div>
{:else if type === 'photo' && photo}
<div class="photo-wrapper">
<Page>
<div class="photo-header">
<BackButton href="/photos" label="Back to Photos" />
</div>
<div class="photo-container">
<img src={photo.url} alt={photo.title || photo.caption || 'Photo'} class="photo-image" />
</div>
<div class="photo-info">
{#if photo.title}
<h1 class="photo-title">{photo.title}</h1>
{/if}
{#if photo.caption || photo.description}
<p class="photo-description">{photo.caption || photo.description}</p>
{/if}
{#if photo.exifData}
<div class="photo-exif">
<!-- EXIF data could be displayed here -->
</div>
{/if}
</div>
</Page>
</div>
{/if}
<style lang="scss">
@ -260,53 +208,6 @@
}
/* Album Styles */
.album-header {
text-align: center;
padding-bottom: $unit-3x;
border-bottom: 1px solid $gray-90;
margin-bottom: $unit-4x;
}
.album-title {
font-size: 2rem;
font-weight: 700;
margin: 0 0 $unit-2x;
color: $gray-10;
@include breakpoint('phone') {
font-size: 1.75rem;
}
}
.album-description {
font-size: 1rem;
color: $gray-30;
margin: 0 0 $unit-3x;
line-height: 1.5;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.album-meta {
display: flex;
justify-content: center;
gap: $unit-3x;
flex-wrap: wrap;
.meta-item {
font-size: 0.875rem;
color: $gray-40;
display: flex;
align-items: center;
gap: $unit-half;
}
@include breakpoint('phone') {
gap: $unit-2x;
}
}
.album-content {
padding: $unit-2x 0;
}