diff --git a/assets/reader.css b/assets/reader.css index 83491fd..47bf9f7 100644 --- a/assets/reader.css +++ b/assets/reader.css @@ -457,7 +457,12 @@ } .ap-card__gallery-link { + appearance: none; + background: none; + border: 0; + cursor: pointer; display: block; + padding: 0; position: relative; } @@ -522,6 +527,83 @@ grid-template-rows: 1fr 1fr; } +/* ========================================================================== + Photo Lightbox + ========================================================================== */ + +[x-cloak] { + display: none !important; +} + +.ap-lightbox { + align-items: center; + background: rgba(0, 0, 0, 0.92); + display: flex; + inset: 0; + justify-content: center; + position: fixed; + z-index: 9999; +} + +.ap-lightbox__img { + max-height: 90vh; + max-width: 95vw; + object-fit: contain; +} + +.ap-lightbox__close { + background: none; + border: 0; + color: white; + cursor: pointer; + font-size: 2rem; + line-height: 1; + padding: var(--space-s); + position: absolute; + right: var(--space-m); + top: var(--space-m); +} + +.ap-lightbox__close:hover { + opacity: 0.7; +} + +.ap-lightbox__prev, +.ap-lightbox__next { + background: none; + border: 0; + color: white; + cursor: pointer; + font-size: 3rem; + line-height: 1; + padding: var(--space-m); + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.ap-lightbox__prev { + left: var(--space-s); +} + +.ap-lightbox__next { + right: var(--space-s); +} + +.ap-lightbox__prev:hover, +.ap-lightbox__next:hover { + opacity: 0.7; +} + +.ap-lightbox__counter { + bottom: var(--space-m); + color: white; + font-size: var(--font-size-s); + left: 50%; + position: absolute; + transform: translateX(-50%); +} + /* ========================================================================== Video Embed ========================================================================== */ diff --git a/lib/timeline-store.js b/lib/timeline-store.js index dda8973..73822d0 100644 --- a/lib/timeline-store.js +++ b/lib/timeline-store.js @@ -185,7 +185,7 @@ export async function extractObjectData(object, options = {}) { try { if (typeof object.getTags === "function") { const tags = await object.getTags(); - for (const tag of tags) { + for await (const tag of tags) { if (tag.name) { const tagName = tag.name.toString().replace(/^#/, ""); if (tagName) category.push(tagName); @@ -204,7 +204,7 @@ export async function extractObjectData(object, options = {}) { try { if (typeof object.getAttachments === "function") { const attachments = await object.getAttachments(); - for (const att of attachments) { + for await (const att of attachments) { const mediaUrl = att.url?.href || ""; if (!mediaUrl) continue; diff --git a/package.json b/package.json index 1194d84..bd5b67a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rmdes/indiekit-endpoint-activitypub", - "version": "2.0.16", + "version": "2.0.17", "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.", "keywords": [ "indiekit", diff --git a/views/partials/ap-item-media.njk b/views/partials/ap-item-media.njk index c4a2585..97226b6 100644 --- a/views/partials/ap-item-media.njk +++ b/views/partials/ap-item-media.njk @@ -1,20 +1,36 @@ {# Media attachments partial — included from ap-item-card.njk #} -{# Photo gallery #} +{# Photo gallery with lightbox #} {% if item.photo and item.photo.length > 0 %} {% set displayCount = [item.photo.length, 4] | min %} {% set extraCount = item.photo.length - 4 %} -