← All Wireframes WF-06 IIIF Archives src/pages/iiif.astro · MiradorViewer.jsx · 1440 × 2060 px iiif.astro MiradorViewer.jsx client:only="react" catalog.json deep-link ?manifestId=
Two states: (A) default page load, first catalog item open · (B) deep-link arrival via ?manifestId= from album/poem/film page
STATE A — DEFAULT PAGE LOAD (first catalog item auto-opened) SPACEWAYS OF SUN RA Discography Timeline Videos Musicians Poetry Films Books Magazines IIIF Home / Archives Archives Archival materials from the Alton Abraham Collection, Hamilton College Sun Ra Research zines, and the Smithsonian. Click any item in the sidebar to open it in the viewer. Items can be compared side-by-side. client:only="react" MiradorViewer.jsx INSTITUTIONS All Univ. of Chicago (2) Hamilton College (3) Smithsonian (3) 8 items in catalog.json CATALOG 8 manifests · 3 institutions + Add UNIV. OF CHICAGO Album Art Mockup 1 Abraham Collection ● Open in viewer Photo of Sun Ra, Chicago Abraham Collection photograph HAMILTON COLLEGE ZINE Sun Ra Research, Issue 1 Hinds Zine · 1995 ZINE Sun Ra Research, Supplement Hinds Zine · 1988–99 ZINE Sun Ra Quarterly, 1996 1 issue SMITHSONIAN Sun Ra Screenprint SAAM · McNeill & Stovall, 1968–69 print/artwork Sun Ra Portrait National Portrait Gallery photograph Concert Poster Anacostia Community Museum poster/print catalog from /catalog.json institution field groups manifests Multi-window comparison mode: Right-click item → "Open in new window" MiradorViewer.jsx sidebar · groups from catalog.json + Add window Mirador 4 Workspace npm: mirador · client:only="react" UChicago – Abraham: Album Art Mockup 1 digital.lib.uchicago.edu/iiif/abraham/item1/manifest i 1 2 3 4 1 / 4 ♪ + − ‹ 1 / 4 › MANIFEST INFO TITLE Album ArtMockup 1 INSTITUTION Univ. of Chicago CANVASES 4 COLLECTION Alton Abraham Collection MANIFEST URL digital.lib .uchicago .edu/iiif/… ↗ Institution page ⎘ Copy deep link Mirador.viewer() window · thumbnail strip · info panel + Add window open a second manifest to compare Drag item from sidebar or click "Add window" optional 2nd window (mosaic mode) MiradorViewer.jsx · id="mirador-container" · flex-1 min-h-[70vh] STATE B — DEEP-LINK ARRIVAL via ?manifestId= (linked from album/poem/film/timeline page) ↗ Opened via direct link From: Jazz in Silhouette album page · Manifest: UChicago – Album Art Mockup 1 URL /iiif?manifestId=https://digital.lib.uchicago.edu/iiif/abraham/item1/manifest parsed client-side via window.location.search · initialManifestId prop SPACEWAYS OF SUN RA IIIF Archives Showing item linked from Jazz in Silhouette album page CATALOG UNIV. OF CHICAGO Album Art Mockup 1 ● Opened via deep link from Jazz in Silhouette Photo of Sun Ra, Chicago photograph HAMILTON COLLEGE Sun Ra Research, Issue 1 Sun Ra Research, Supplement Sun Ra Quarterly, 1996 SMITHSONIAN Sun Ra Screenprint Portrait (NPG) Concert Poster (Anacostia) Mirador 4 Workspace + Add window UChicago – Abraham: Album Art Mockup 1 i ♪ DEEP-LINK ORIGIN: ArchivesLink.astro on album detail page <ArchivesLink manifestId="https://digital.lib.uchicago.edu/iiif/abraham/item1/manifest"              label="UChicago – Album Art Mockup 1" /> ↳ renders as: IIIF View in Archives ↗ href="/iiif?manifestId=…" This chip appears on: album detail, poem detail, film detail, timeline event cards Phase 6: ArchivesLink.astro · cross-linking all pages → /iiif IMPLEMENTATION NOTES • Phase 5: MiradorViewer.jsx + iiif.astro · install mirador npm package • client:only="react" — never SSR'd; Mirador manipulates the DOM directly • Deep-link: parse window.location.search client-side (static build) • catalog.json: copy to public/ so Astro serves as static asset • Mirador 4 bundle ~1MB+ — code-split; only loads on /iiif route · verify v4 API before impl. • Multi-window: dispatch Mirador.actions.addWindow({ manifestId }) from sidebar Phase 6: ArchivesLink.astro cross-linker · Phase 7: keyboard nav accessibility (focus-trap, Esc) Copyright 2026 Plencner Labs. See the code on GitLab Footer.astro WF-06 — IIIF Archives · iiif.astro + MiradorViewer.jsx (client:only="react")