Skip to content

Commit a5bdea6

Browse files
oiahoonoiahoon
committed
feat: curate photography experience
1 parent 417bac1 commit a5bdea6

2 files changed

Lines changed: 288 additions & 461 deletions

File tree

‎src/layouts/PhotographyLayout.astro‎

Lines changed: 56 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,9 @@ const activeWorkIndex = Math.max(photoCollection.findIndex((work) => work.active
4242
const totalWorks = photoCollection.length;
4343
4444
const navigation = [
45-
{ name: '文章', href: '/articles/', icon: 'article' },
46-
{ name: '摄影', href: '/photography/', icon: 'camera' },
47-
{ name: '标签', href: '/tags/', icon: 'tag' },
48-
{ name: '关于', href: '/about/', icon: 'about' },
45+
{ name: 'Photographs', href: '/photography/', icon: 'camera' },
46+
{ name: 'Notes', href: '/articles/', icon: 'article' },
47+
{ name: 'About', href: '/about/', icon: 'about' },
4948
] as const;
5049
---
5150

@@ -69,7 +68,7 @@ const navigation = [
6968
{navigation.map((item) => {
7069
const active = currentPath === item.href || (item.href === '/photography/' && currentPath.startsWith('/posts/'));
7170
return (
72-
<a href={item.href} class={`photo-topbar__link ${active ? 'is-active' : ''}`} data-astro-prefetch>
71+
<a href={item.href} class={`photo-topbar__link ${active ? 'is-active' : ''}`} aria-current={active ? 'page' : undefined} data-astro-prefetch>
7372
<UiIcon name={item.icon} size={14} />
7473
<span>{item.name}</span>
7574
</a>
@@ -84,7 +83,7 @@ const navigation = [
8483
</summary>
8584
<nav class="photo-topbar__menu" aria-label="移动导航">
8685
{navigation.map((item) => (
87-
<a href={item.href} class={`photo-topbar__menu-link ${currentPath === item.href || (item.href === '/photography/' && currentPath.startsWith('/posts/')) ? 'is-active' : ''}`} data-astro-prefetch>
86+
<a href={item.href} class={`photo-topbar__menu-link ${currentPath === item.href || (item.href === '/photography/' && currentPath.startsWith('/posts/')) ? 'is-active' : ''}`} aria-current={currentPath === item.href || (item.href === '/photography/' && currentPath.startsWith('/posts/')) ? 'page' : undefined} data-astro-prefetch>
8887
<UiIcon name={item.icon} size={14} />
8988
<span>{item.name}</span>
9089
</a>
@@ -104,6 +103,10 @@ const navigation = [
104103
class="photo-hero__image"
105104
loading="eager"
106105
decoding="async"
106+
fetchpriority="high"
107+
width={heroPhoto.width}
108+
height={heroPhoto.height}
109+
sizes="100vw"
107110
style={photoTransitionName ? `view-transition-name: ${photoTransitionName};` : undefined}
108111
/>
109112
<button
@@ -136,16 +139,15 @@ const navigation = [
136139
<div class="photo-hero__overlay photo-hero__overlay--bottom" data-photo-overlay-bottom>
137140
<div class="photo-hero__caption">
138141
<p class="photo-hero__date">
139-
{date.toLocaleDateString(lang === 'zh' ? 'zh-CN' : 'en-US')}
140-
{location ? ` · ${location}` : ''}
141-
{publishedDate ? ` · 发布于 ${publishedDate}` : ''}
142+
{location ? `${location} · ` : ''}
143+
{date.toLocaleDateString(lang === 'zh' ? 'zh-CN' : 'en-US', { year: 'numeric', month: 'long' })}
142144
</p>
143-
{title && <h1 class="photo-hero__title">{title}</h1>}
144-
{subtitle && <p class="photo-hero__subtitle">{subtitle}</p>}
145+
{title && <h1 class="photo-hero__title" style={photoTransitionName ? `view-transition-name: photo-title-${slug};` : undefined}>{title}</h1>}
146+
{(subtitle || heroPhoto.caption) && <p class="photo-hero__subtitle">{subtitle || heroPhoto.caption}</p>}
145147
</div>
146148

147-
<div class="photo-hero__info" aria-label="EXIF">
148-
{exifEntries.length > 0 && <p class="photo-hero__eyebrow"><UiIcon name="exif" size={14} /> <span>EXIF</span></p>}
149+
<details class="photo-hero__info" aria-label="Technical details">
150+
<summary><UiIcon name="exif" size={14} /> <span>Technical details</span></summary>
149151
<div class="photo-hero__specs">
150152
{exifEntries.length > 0 ? (
151153
exifEntries.map((entry) => <p>{entry}</p>)
@@ -161,7 +163,7 @@ const navigation = [
161163
))}
162164
</div>
163165
)}
164-
</div>
166+
</details>
165167
</div>
166168
</section>
167169
)}
@@ -197,6 +199,9 @@ const navigation = [
197199
class="photo-gallery__image"
198200
loading={index < 1 ? 'eager' : 'lazy'}
199201
decoding="async"
202+
width={photo.width}
203+
height={photo.height}
204+
sizes="100vw"
200205
/>
201206
<button
202207
type="button"
@@ -234,8 +239,8 @@ const navigation = [
234239
<section class="photo-work-strip" aria-label="更多摄影作品">
235240
<div class="photo-work-strip__head">
236241
<div>
237-
<p class="photo-work-strip__eyebrow"><UiIcon name="image" size={14} /> <span>More Works</span></p>
238-
<h2 class="photo-work-strip__title">继续浏览作品</h2>
242+
<p class="photo-work-strip__eyebrow"><UiIcon name="image" size={14} /> <span>More from this series</span></p>
243+
<h2 class="photo-work-strip__title">Continue browsing photographs</h2>
239244
</div>
240245
{(previousPhoto || nextPhoto) && (
241246
<p class="photo-work-strip__hint">
@@ -296,16 +301,16 @@ const navigation = [
296301
<div class="photo-footer__grid">
297302
<section>
298303
<p class="photo-footer__title">Joey's Notes</p>
299-
<p class="photo-footer__copy">记录软件工程实践与摄影观察，保持长期、可复用、可查阅的写作习惯。</p>
304+
<p class="photo-footer__copy">Photographs, field notes, and a legacy archive of engineering notes.</p>
300305
</section>
301306

302307
<section>
303308
<p class="photo-footer__title">导航</p>
304309
<div class="photo-footer__links">
305-
<a href="/articles/" data-astro-prefetch>文章</a>
306-
<a href="/photography/" data-astro-prefetch>摄影</a>
307-
<a href="/tags/" data-astro-prefetch>标签</a>
308-
<a href="/about/" data-astro-prefetch>关于</a>
310+
<a href="/photography/" data-astro-prefetch>Photographs</a>
311+
<a href="/articles/" data-astro-prefetch>Notes</a>
312+
<a href="/about/" data-astro-prefetch>About</a>
313+
<a href="/tags/" data-astro-prefetch>Tags</a>
309314
</div>
310315
</section>
311316

@@ -608,6 +613,36 @@ const navigation = [
608613
transition: opacity 0.22s ease, transform 0.22s ease;
609614
}
610615

616+
.photo-hero__info {
617+
align-self: end;
618+
border-top: 1px solid rgba(255, 255, 255, 0.16);
619+
padding-top: 0.85rem;
620+
}
621+
622+
.photo-hero__info summary {
623+
display: inline-flex;
624+
align-items: center;
625+
gap: 0.42rem;
626+
color: rgba(226, 232, 240, 0.78);
627+
font-size: 0.86rem;
628+
cursor: pointer;
629+
list-style: none;
630+
}
631+
632+
.photo-hero__info summary::-webkit-details-marker {
633+
display: none;
634+
}
635+
636+
.photo-hero__info summary::after {
637+
content: '+';
638+
margin-left: 0.4rem;
639+
color: rgba(226, 232, 240, 0.58);
640+
}
641+
642+
.photo-hero__info[open] summary::after {
643+
content: '-';
644+
}
645+
611646
.photo-hero__date {
612647
margin: 0;
613648
font-size: 0.84rem;
@@ -639,17 +674,6 @@ const navigation = [
639674
transform: translateY(6px);
640675
}
641676

642-
.photo-hero__eyebrow {
643-
margin: 0;
644-
display: inline-flex;
645-
align-items: center;
646-
gap: 0.42rem;
647-
font-size: 0.78rem;
648-
letter-spacing: 0.18em;
649-
text-transform: uppercase;
650-
color: rgba(226, 232, 240, 0.66);
651-
}
652-
653677
.photo-hero__specs {
654678
margin-top: 0.7rem;
655679
display: grid;

0 commit comments

Comments
 (0)