@museumwnf/viewer-layout 3.3.0 → 3.5.0

package/README.md

@@ -20,6 +20,7 @@ all the packages:
 | `@museumwnf/viewer-layout/dxa` | DXA family layer | the gallery and exhibition pages and shells, the family-only blocks, `standardRoutes`, `galleryConfig` / `exhibitionConfig` | the entries above, `@museumwnf/viewer-core` and `@museumwnf/viewer-core/dxa` |
 | `@museumwnf/viewer-layout/dxa/gallery.css`, `/dxa/exhibition.css` | DXA family layer | each family's stylesheet: its fonts, page reset and page column, and its theme as a function of the palette | the palette a site's `theme/tokens.css` sets |
 | `@museumwnf/viewer-layout/dxa/testing` | DXA family layer | each family's smoke test, `describeGallerySmoke` / `describeExhibitionSmoke` | the site's config, texts and package, in the site's own Vitest |
+| `@museumwnf/viewer-layout/standalone` | standalone family layer | the chrome, home page, item sheet, text page and blocks of Discover Islamic Art, Discover Baroque Art and Sharing History | the entries above and `@museumwnf/viewer-core` |
 | `@museumwnf/viewer-layout/style.css` | — | one stylesheet for every entry, the family styles included | — |
 | `@museumwnf/viewer-layout/tokens.reference.css` | — | every token the package reads, with its fallback | — |
 
@@ -35,7 +36,8 @@ view does.
 1. **Into the lowest layer that fits.** A block comes before a composed view,
    and a composed view before a family page. A block is promoted here when
    several websites need the same thing; a whole page is shared only inside
-   the DXA family, under `/dxa`.
+   a family: the DXA family under `/dxa`, the standalone family under
+   `/standalone`.
 2. **A generic component never defaults to one family's texts.** A block or a
    composed view defaults to a shared entry (`core.*`, `record.*`,
    `partner.*`, …) or takes the entry name as a prop; it never defaults to a
@@ -43,7 +45,8 @@ view does.
 3. **A component only the DXA family uses belongs under `/dxa`.**
 
 **The dependency runs one way.** The root, `/content`, `/views` and
-`/components` never import from `/dxa`. `/dxa` imports only what the other
+`/components` never import from `/dxa` or `/standalone`, and the two
+families never import from each other. Each imports only what the other
 entries publish, and `@museumwnf/viewer-core`. A component that moves
 between entries keeps its old export as an alias until the websites have
 moved; a major release then removes the alias.
@@ -138,23 +141,25 @@ section — the mark in the header, the active view — not for rebuilding the
 section. A website that needs something no prop expresses adds the prop
 here, so the next website has it too.
 
-Sections render top to bottom in this fixed order. Every section is optional: it renders nothing unless its slot or driving props are set. The default slot (→ `AppContent`) is where the router-view goes.
+Sections render top to bottom in this fixed order, except that `navigation-placement="before-banner"` puts the navigation above the banner. Every section is optional: it renders nothing unless its slot or driving props are set. The default slot (→ `AppContent`) is where the router-view goes.
 
 | Section | Slot | Props (on PageShell) | Events |
 |---|---|---|---|
-| `AppHeader` | `#header`, `#header-brand` | `header-home`, `header-brand`, `header-eyebrow`, `header-title`, `header-title-href`, `header-subtitle`, `header-logos`, `header-logos-title`, `header-links`, `search`, `languages`, `language`, `language-placement`, `language-style` | `search`, `update:language` |
+| `AppHeader` | `#header`, `#header-brand` | `header-home`, `header-brand`, `header-brand-logo`, `header-eyebrow`, `header-title`, `header-title-href`, `header-subtitle`, `header-logos`, `header-logos-title`, `header-links`, `search`, `languages`, `language`, `language-placement`, `language-style` | `search`, `update:language` |
 | `AppBanner` | `#banner` | `banner-variant`, `banner-image`, `banner-image-alt`, `banner-text`, `banner-caption`, `banner-caption-label`, `banner-eyebrow`, `banner-title`, `banner-title-href`, `banner-subtitle`, `banner-headline`, `banner-enter`, `banner-strapline` | — |
-| `AppNavigation` | `#navigation` | `nav-links`, `notice`, `languages`, `language` | `update:language` |
+| `AppNavigation` | `#navigation` | `nav-links`, `notice`, `languages`, `language`, `navigation-placement` | `update:language` |
 | `AppContent` | default | — | — |
 | `AppHyperlinks` | `#hyperlinks` | `hyperlinks-variant`, `hyperlinks-title`, `hyperlinks-title-href`, `hyperlinks-subtitle`, `hyperlinks` | — |
 | `AppSponsors` | `#sponsors` | `sponsors-title`, `sponsors`, `sponsor-groups` | — |
-| `AppFooter` | `#footer` | `footer-text`, `footer-links`, `footer-attribution-label`, `footer-attribution-text`, `footer-terms-href`, `footer-terms-label` | — |
+| `AppFooter` | `#footer` | `footer-text`, `footer-links`, `footer-social`, `footer-attribution-label`, `footer-attribution-text`, `footer-terms-href`, `footer-terms-label` | — |
 
 ### The language switcher
 
 `languages` is `['en']` or `[{ code, label }]`, `language` the active code.
 `language-placement` says where the switcher renders: `navigation` (the
-default, a select at the end of the navigation bar) or `header`;
+default, a select at the end of the navigation bar), `header`, or `none` (no
+site-language switcher at all: legacy's galleries had only the record's own
+bar);
 `language-style` says how, `select` or `buttons`. Whichever renders emits
 `update:language` with the code chosen.
 
@@ -241,13 +246,122 @@ renders before the routed content, `#after-content` after it (a dismissible
 sponsor notice next to the router-view, say); `#header`, `#navigation`,
 `#hyperlinks`, `#sponsors`, `#footer` pass straight through to `PageShell`.
 
-Once the loaded package's `manifest.rights` names a holder (`useSiteRights()`),
-the footer also renders the attribution sentence — `rights.attribution`, or
+The footer is legacy's unless the site says otherwise: MWNF's five portal
+links and "© Museum With No Frontiers (MWNF) 2004–<year>" (since 3.4.0). With
+`config.footer.rightsHolder: true`, and once the loaded package's
+`manifest.rights` names a holder (`useSiteRights()`), it also renders the
+attribution sentence — `rights.attribution`, or
 the holder's name when the package carries no separate attribution text —
 labelled `record.source.rightsHolder`, with a link labelled
-`record.source.termsOfUse` to `rights.termsUrl`. A package built before the
-`rights` block existed carries no holder, so the footer renders exactly as
-it did before: `footer-text` alone.
+`record.source.termsOfUse` to `rights.termsUrl`. Legacy printed no such line,
+so it is off by default.
+
+### Site chrome: the logo, the chrome pictures, the social links
+
+Since 3.4.0 a site supplies its own chrome files (decision D7 of
+inventory-app#2233: logos, banners, tiles and backgrounds belong to their
+website, not to the inventory nor to `images.museumwnf.org`). It keeps them
+in its repository under `theme/assets/` and hands the layout one map of
+them, built by Vite so every file is fingerprinted with the build:
+
+```js
+// src/dataset.config.js
+const chrome = import.meta.glob('../theme/assets/**/*.{jpg,jpeg,png,gif,svg}', {
+  eager: true, query: '?url', import: 'default',
+})
+
+export default { /* … */ chrome, brand: { logo: 'logo.png', alt: 'MWNF Logo' } }
+// a DXA site: galleryConfig({ …, chrome }) / exhibitionConfig({ …, chrome })
+```
+
+The map's keys are normalised to the path after `theme/assets/`, so
+`'../theme/assets/chrome/thematic_gallery/thg_galleries/9/banner.jpg'` is
+`chrome/thematic_gallery/thg_galleries/9/banner.jpg`. Two kinds of key:
+
+| Key | What reads it |
+| --- | --- |
+| a file name at the root (`logo.png`, `dia.jpg`, …) | the part of the layout that names it (`brand.logo`, the DXA keys below) |
+| `chrome/<path>` | an image the data package names by its legacy path (`banner_image_path`, `image_path`, `homepage_image_path`, a sibling gallery's `image_path`): the file is the package's path under `theme/assets/chrome/`. One file per path, whatever size the layout asks for |
+
+A key a site doesn't supply falls back to what the layout drew before:
+the package path on `config.media.legacyHost`, the "MWNF" text mark for the
+logo, nothing for a background. So a site that supplies nothing renders as
+it did on 3.3.
+
+| Config | Shape | Notes |
+| --- | --- | --- |
+| `config.chrome` | `{ [path]: url }` | the map above |
+| `config.brand` | `{ logo, alt }` | `logo` a key of `chrome` (or a URL), drawn in the header's brand cell; `alt` an entry name or text. The DXA configs set it (below) |
+| `config.navigation.placement` | `'after-banner'` (default) \| `'before-banner'` \| `({ section }) => …` | where the menu goes: PageShell's `navigation-placement` |
+| `config.navigation.socialLinks` | `[{ label, href, icon }]` | the footer's social-network icons, opt-in for any site; `mwnfSocialLinks` (package root) is legacy's six. `icon` is one of `youtube`, `x`, `facebook`, `instagram`, `weibo`, `linkedin` |
+| `config.footer` | `{ rightsHolder }` | the footer is legacy's by default on every site: MWNF's five portal links (`config.navigation.footerLinks` replaces them) and "© Museum With No Frontiers (MWNF) 2004–<year>" (a `footer-text` the caller passes replaces it). `rightsHolder: true` adds the package's rights-holder attribution, which legacy never printed |
+
+`SocialLinks` (package root, prop `links`) draws the icon links on their own,
+for a site that writes its own `#footer`:
+`<SocialLinks :links="mwnfSocialLinks" />`.
+
+The favicon is not the layout's: every site ships `public/favicon.ico` and
+declares it in its own `index.html` (`<link rel="icon" href="%BASE_URL%favicon.ico">`).
+
+**DXA families.** `galleryConfig` sets `brand.logo` to `logo.png` (legacy
+dxa-client's white mark), `exhibitionConfig` to `logo_black.png`. Besides
+the logo, the family reads:
+
+| Key | Family | Where | Legacy source |
+| --- | --- | --- | --- |
+| `logo.png` | gallery (and the hub) | the header | `dxa-client/src/assets/logo.png` |
+| `logo_black.png` | exhibition | the header | `exhibitions-client/src/assets/logo_black.png` |
+| `dia.jpg`, `dba.jpg`, `sh.jpg` | gallery | the home's Other Virtual Museums banners (flat colour blocks without them) | `dxa-client/src/assets/` |
+| `world.png` | gallery | the glossary entry's header on the item sheet | `dxa-client/src/sites/<site>/world.png` (one per gallery) |
+| `chrome/<gallery.banner_image_path>` | gallery | the banner, every page | `images.museumwnf.org/hi_res/<path>` |
+| `chrome/<sibling_galleries[].image_path>` | gallery | the "Visit MWNF Galleries" tiles | `images.museumwnf.org/zoom/<path>` (legacy's tile size) |
+| `chrome/<exhibition.banner_image_path>` | exhibition | the banner on inner pages | `images.museumwnf.org/hi_res/<path>` |
+| `chrome/<exhibition.homepage_image_path>` | exhibition | the home banner (`home_image.jpg`) | `images.museumwnf.org/full/<path>` |
+| `chrome/<exhibition.logos[].legacy_path>` | exhibition | the sponsors' logos (header and footer strip), unless `sponsorLogos` lists the site's own | `images.museumwnf.org/full/<path>` |
+| `chrome/<homeLogos[].image>` | gallery (Glass) | the home's "Set up on the occasion of" logos | `images.museumwnf.org/gallery_logo/<path>` |
+
+**Exhibition sponsors.** The sponsors' logos are the site's, not the
+inventory's. `exhibitionConfig({ sponsorLogos })` takes the site's own list,
+`[{ image, href, alt, category_id, display_order }]` (`image` a chrome key or a
+URL, `alt` an entry name or text), in place of the package's. Without it each
+entry of `exhibition.json`'s `logos` draws `chrome/<legacy_path>`, else legacy's
+media host at that path; never the inventory's `image_url`. A picture in the
+popup notice whose legacy address the site keeps a copy of
+(`chrome/<the path after legacy's size segment>`, e.g. `chrome/upload/toronto.jpg`
+for `…/full/upload/toronto.jpg`) is drawn from that copy.
+
+Glass's home logo slot is the one gallery-specific block, declared by the
+site because no package carries it:
+
+```js
+galleryConfig({
+  // …
+  homeLogos: [
+    { image: 'thematic_gallery/thg_logos/dga/1.jpg', href: 'https://iyog2022.org/', alt: 'glass.home.iyogLogo' },
+  ],
+})
+```
+
+`image` is a `chrome/` path (the file at
+`theme/assets/chrome/thematic_gallery/thg_logos/dga/1.jpg`), `alt` an entry
+name in the site's own locales; the strip's heading is viewer-i18n's
+`gallery.home.logosLabel` ("Set up on the occasion of").
+
+A gallery shell for a site without a gallery package (the galleries hub,
+legacy's gallery 45) takes its chrome from `config.galleryShell` instead,
+each field optional and each winning over the package:
+
+| `config.galleryShell` field | Shape |
+| --- | --- |
+| `headerEyebrow`, `headerTitle` | entry name or text: the header's title cell on inner pages |
+| `bannerEyebrow`, `bannerTitle` | entry name or text: the line over the home banner's title ("Welcome to") and the title ("MWNF Galleries") |
+| `bannerImage` | a `chrome` key or a URL |
+| `bannerCaption` | `{ name, partner, location, country }` or a string, after "Detail from" |
+| `notice` | `false` drops the menu's tip about the search bar (a site with no search) |
+
+An empty string is "no line" (`bannerEyebrow: ''` drops "Discover MWNF
+Galleries"); a field left out keeps the gallery's own. The header fields
+apply on inner pages only, as the home page's header has no title.
 
 ## Sections (standalone use)
 
@@ -591,6 +705,71 @@ Since 3.3.0 what every site of a family shared by copy is here once:
   which processes this package (viewer-core's `defineViewerConfig` inlines
   it).
 
+## Standalone family pages
+
+`@museumwnf/viewer-layout/standalone` is the family layer of Discover Islamic
+Art, Discover Baroque Art and Sharing History: three sites legacy built from
+one PHP template family, whose layouts match legacy's
+(inventory-app#2233, decision D1). What they share is here once; what
+differs is a config value, a token or a slot.
+
+The shell is a `SiteShell`, so everything the site chrome contract above
+reads works as on any site: `chrome` (the site's files under `theme/assets/`),
+`navigation.placement` (legacy's menu sits under the home page's picture and
+above every other page's band) and `navigation.socialLinks`. A site names
+the shell in its `dataset.config.js` and sets `config.standalone` beside its
+`navigation` (every key optional). Every picture is a key of the chrome map,
+or a URL:
+
+```js
+import { mwnfSocialLinks } from '@museumwnf/viewer-layout'
+import { StandaloneShell } from '@museumwnf/viewer-layout/standalone'
+
+const chrome = import.meta.glob('../theme/assets/**/*.{jpg,jpeg,png,gif,svg}', {
+  eager: true, query: '?url', import: 'default',
+})
+
+export default {
+  shell: StandaloneShell,
+  chrome,
+  navigation: {
+    languages, links, footerLinks, sectionTitles,              // as on every site
+    placement: ({ section }) => (section === 'home' ? 'after-banner' : 'before-banner'),
+    socialLinks: mwnfSocialLinks,
+  },
+  standalone: {
+    logo: { src: 'legacy/logo_isl_en.png', alt: 'islamicart.identity.title', href: mwnfLinks.portal, print: { en: 'legacy/logo_print.gif', fr: 'legacy/logo_print_fr.gif' } },
+    heading: 'islamicart.identity.heading',      // the header's title on every page but the home page
+    headerLinks: [{ label, href | to, on: 'home' | 'inner' | 'all' }],
+    banner: { home: 'legacy/banner.jpg', inner: 'legacy/banner_inside.jpg' },
+    languages: true,                             // false: chrome in one language, no switcher
+    copyright: 'islamicart.footer.copyright',    // the footer line; the year follows it
+    sponsors: { on: 'home' | 'all', columns: [{ lead, text, break, title, logos, links, width }] },
+    home: { links: [...], highlight: { list, heading, alsoKnownAs, action, route }, tiles: { caption, items } },
+    areas: { [section]: { logo, banner, class } },   // a section with chrome of its own
+  },
+}
+```
+
+The shell hands the logo to SiteShell's `brand`. The logo, the print logo and
+the banners may each be given once or per language (`{ en, ar }`).
+
+| Export | What it is |
+| --- | --- |
+| `StandaloneShell` | `SiteShell` with legacy's chrome: the logo per language, the inner pages' centred heading and "Portal \| Home" links, the home page's picture banner, the inner pages' titled band (`navigation.sectionTitles`), the menu above or below the banner, the band above the footer on the home page, the copyright line with the year, a print-only logo. The page gets `.mwnf-standalone`, the scope of the family stylesheet |
+| `StandaloneHome` | the home page's content: the side links and the record of the day, or a tile grid |
+| `TodayHighlight` | legacy's "Today's highlight": the record for the day of the year from legacy's own list (`home_items_img.txt`), its picture and legacy's lines |
+| `StandaloneItemSheet` | `RecordView` in legacy's three columns: the way back and the pictures; the sheet with its short-description toggle; the coloured Related Content column (`RelatedContent`), which takes the site's own blocks in its `sidebar` slot |
+| `StandaloneTextPage` | a text page in legacy's centred column: a Markdown entry, an optional drop cap, a "→" link and Print |
+| `StandaloneSponsors` | the band above the footer, in columns of text, logos and links |
+| `StandaloneSubNav`, `StandaloneTileGrid`, `StandaloneSlider` | Sharing History's tab strip, picture tiles and slider |
+| `byLanguage`, `dayOfYear`, `pickForDay`, `legacyHomeItemKey` | the plain functions the chrome reads with |
+
+Every rule of the family's stylesheet is scoped to `.mwnf-standalone`, and
+every value is a `--mwnf-standalone-*` token with a neutral fallback
+(`tokens.reference.css`); a site's `theme/tokens.css` sets legacy's. It ships
+in `style.css`, so a site imports nothing more.
+
 ## Theming
 
 Every color, font, spacing, radius comes from a `--mwnf-*` CSS custom property with a neutral fallback. Full list: [`tokens.reference.css`](src/tokens.reference.css) (also exported as `@museumwnf/viewer-layout/tokens.reference.css`) — copy it into your website as `theme/tokens.css` and set values.

package/dist/{FeaturedRecord-BJ8LaWGP.js → FeaturedRecord-DJfyvfqt.js}

@@ -1,4 +1,4 @@
-import { y as e } from "./TimelineEventList-COjkXEzS.js";
+import { d as e } from "./GlossaryPopover-DcptyNWI.js";
 import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, openBlock as s, renderList as c, renderSlot as l, toDisplayString as u, useSlots as d, withCtx as f } from "vue";
 //#region src/content/FeaturedRecord.vue
 var p = {