@museumwnf/viewer-core 2.14.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@museumwnf/viewer-core",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "Application engine for MWNF websites: turns a dataset.config.js into a mounted Vue application.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -33,19 +33,19 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "marked": "^18.0.11"
+    "marked": "^18.1.3"
   },
   "peerDependencies": {
     "vue": "^3.5.0",
     "vue-router": "^4.5.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.8",
-    "@vue/test-utils": "^2.4.11",
-    "jsdom": "^30.0.1",
-    "vite": "^8.2.2",
-    "vitest": "^4.1.11",
-    "vue": "^3.5.0",
-    "vue-router": "^5.0.0"
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vue/test-utils": "^2.5.1",
+    "jsdom": "^30.1.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
   }
 }

package/src/catalogue/dates.js

@@ -182,6 +182,16 @@ export function eraLabel(year, t) {
   return year < 0 ? `${Math.abs(year)} ${t('catalogue.era.bc')}` : `${year} ${t('catalogue.era.ad')}`
 }
 
+/**
+ * `t`, with a family's own era words: `words` maps a `catalogue.era.*`
+ * entry to the one to read instead (the galleries' "A.D." and "B.C.",
+ * `GALLERY_ERA_WORDS`). Every other entry reads as before; no `words`, `t`.
+ */
+export function withEraWords(t, words) {
+  if (!words) return t
+  return (key, ...rest) => t(words[key] ?? key, ...rest)
+}
+
 /**
  * A record's dates rounded outward to the century, the window legacy's
  * "Timeline for this item" opens, so a single-year object still lands on a

package/src/catalogue/legacySearch.js

@@ -56,15 +56,18 @@ function byStartDate(a, b) {
 }
 
 /**
- * `fields`: `{ [field]: (record, text) => string | string[] }`, what each
- * field of the form searches in a record and one of its translations.
+ * `fields`: `{ [field]: (record, text, language) => string | string[] }`,
+ * what each field of the form searches in a record and one of its
+ * translations, given that translation's language (so a field can read a
+ * related record's text in the same language, as legacy's joins did).
  * `countryFields`: the fields in which a word naming a country (in any of
  * its names) also finds the records of that country.
  * `glossaryFields`: the fields in which a glossary term also searches its
  * spellings in the site's language.
- * `score`: `{ [field]: (like, record, text, inCountry) => number }`, the
- * relevance a matching row adds, `like(value)` telling whether a value holds
- * the row's own word. Summed over the rows, the best translation counting.
+ * `score`: `{ [field]: (like, record, text, inCountry, language) => number }`,
+ * the relevance a matching row adds, `like(value)` telling whether a value
+ * holds the row's own word. Summed over the rows, the best translation
+ * counting.
  *
  * Returns `narrow(list, filters, helpers)` for a results spec (pass it
  * `sort: false`): the records of `list` that match, in legacy's order.
@@ -88,13 +91,13 @@ export function useLegacySearch({
   // translation object, so a file loaded again starts afresh.
   const folded = new WeakMap()
 
-  function hayOf(field, record, text) {
+  function hayOf(field, record, text, language) {
     let byField = folded.get(text)
     if (!byField) folded.set(text, (byField = new Map()))
     let hay = byField.get(field)
     if (!hay) {
       const getter = fields[field] ?? fields.keyword
-      byField.set(field, (hay = strings(getter(record, text)).map(collate)))
+      byField.set(field, (hay = strings(getter(record, text, language)).map(collate)))
     }
     return hay
   }
@@ -161,13 +164,13 @@ export function useLegacySearch({
         let relevance = 0
         for (const row of active) {
           const inCountry = row.countries.has(record.country_id)
-          const hay = hayOf(row.field, record, text)
+          const hay = hayOf(row.field, record, text, language)
           const hit = inCountry || hay.some((h) => row.needles.some((n) => h.includes(n)))
           if (result === null) result = hit
           else if (String(row.cond).toUpperCase() === 'OR') result = result || hit
           else result = result && hit
           const rank = score[row.field]
-          if (rank) relevance += rank((value) => strings(value).some((v) => collate(v).includes(row.needle)), record, text, inCountry)
+          if (rank) relevance += rank((value) => strings(value).some((v) => collate(v).includes(row.needle)), record, text, inCountry, language)
         }
         if (result === null || result) best = Math.max(best ?? 0, relevance)
       }

package/src/catalogue/pagination.js

@@ -45,13 +45,20 @@ export function usePagination(list, { page = 1, size = DEFAULT_SIZE } = {}) {
 /**
  * Chronological order by `key` (a record's `start_date`), undated records
  * last — or first, with `undated: 'first'`. Stable: two records of the same
- * year keep the order they arrived in. Returns a new array.
+ * year keep the order they arrived in, or the order `tiebreak(a, b)` gives
+ * them (a family's own, e.g. the galleries' `legacyOrder`). Returns a new
+ * array.
  */
-export function sortChronological(list, { key = 'start_date', undated = 'last' } = {}) {
+export function sortChronological(list, { key = 'start_date', undated = 'last', tiebreak = null } = {}) {
   const missing = undated === 'first' ? -Infinity : Infinity
   const year = (record) => {
     const value = record?.[key]
     return typeof value === 'number' && Number.isFinite(value) ? value : missing
   }
-  return [...(list ?? [])].sort((a, b) => year(a) - year(b))
+  const byYear = (a, b) => {
+    const ya = year(a)
+    const yb = year(b)
+    return ya === yb ? 0 : ya - yb
+  }
+  return [...(list ?? [])].sort((a, b) => byYear(a, b) || (tiebreak ? tiebreak(a, b) : 0))
 }

package/src/dxa/gallery/eraWords.js

@@ -0,0 +1,8 @@
+// Legacy's galleries wrote an era "A.D." and "B.C." (dxa-client: the timeline
+// and collection year lists, the item sheet, the timeline results), where
+// every other website writes "AD" and "BC". A gallery reads its own words
+// for them (`withEraWords`, inventory-app#2423).
+export const GALLERY_ERA_WORDS = {
+  'catalogue.era.ad': 'gallery.era.ad',
+  'catalogue.era.bc': 'gallery.era.bc',
+}

package/src/dxa/gallery/useGalleryCollection.js

@@ -1,7 +1,7 @@
 import { projectLabel } from '../../conventions.js'
 import { DATE_MODE, FACET_CATEGORIES, PAGE_SIZE } from '../shared.js'
 
-export { DATE_MODE, FACET_CATEGORIES, FACET_LABEL_KEYS, PAGE_SIZE, useFacetLabels } from '../shared.js'
+export { DATE_MODE, FACET_CATEGORIES, FACET_LABEL_KEYS, GALLERY_PAGE_SIZE, PAGE_SIZE, useFacetLabels } from '../shared.js'
 
 // The catalogue spec: what a DXA gallery's lists filter and search on. The
 // engine — query state, options, dates, pages, the boolean grammar — is
@@ -97,25 +97,41 @@ export function useGalleryCollection(data, config = {}) {
   /**
    * A record as viewer-layout's grid contract: the thumbnail, the name, the
    * lines legacy's hover card carried (date, holder, place, source
-   * project).
+   * project). The same lines one by one (`date`, `partner`, `place`,
+   * `project`), for a card that sets each its own way, as legacy's
+   * ObjectGrid did.
    */
   function tile(item, t) {
     const text = tr('items', item.id, defaultLang)
+    const date = text.dates ?? ''
+    const partner = labelOf('partners', item.partner_id)
+    const place = [text.location, labelOf('countries', item.country_id)].filter(Boolean).join(', ')
+    const project = projectLabel(manifest, item.project_id, defaultLang) ?? ''
     return {
       id: item.id,
       image: item.images?.[0]?.url ?? '',
       imageAlt: labelOf('items', item.id),
       name: mdInline(text.name ?? item.internal_name ?? ''),
-      meta: [
-        text.dates ?? '',
-        labelOf('partners', item.partner_id),
-        [text.location, labelOf('countries', item.country_id)].filter(Boolean).join(', '),
-        `${t('catalogue.results.forProject')} ${projectLabel(manifest, item.project_id, defaultLang) ?? ''}`,
-      ].filter(Boolean),
+      meta: [date, partner, place, `${t('catalogue.results.forProject')} ${project}`].filter(Boolean),
+      date,
+      partner,
+      place,
+      project,
       to: itemRoute(item),
     }
   }
 
+  // Legacy's order among records of one year (a gallery page's
+  // `sort.tiebreak`, viewer-layout's dxa/gallery pages):
+  // dxa-api's `ORDER BY startDate, countryName, partnerName`, then MySQL's
+  // own order, which is the table's key: the record's legacy key, its
+  // numbers compared as numbers (inventory-app#2423).
+  function legacyOrder(a, b) {
+    return compareText(labelOf('countries', a.country_id), labelOf('countries', b.country_id))
+      || compareText(labelOf('partners', a.partner_id), labelOf('partners', b.partner_id))
+      || compareKeys(a.backward_compatibility, b.backward_compatibility)
+  }
+
   // ── The results page, as a spec ──────────────────────────────────────
   //
   // What viewer-layout's `CatalogueResultsView` renders on
@@ -166,7 +182,26 @@ export function useGalleryCollection(data, config = {}) {
   }
 
   return {
-    FACETS, hasEveryTag, haystack, tile, collectionResults,
+    FACETS, hasEveryTag, haystack, tile, legacyOrder, collectionResults,
     countryIdForCode, tagIdForLegacy, tagLabelForLegacy,
   }
 }
+
+function compareText(a, b) {
+  return String(a ?? '').localeCompare(String(b ?? ''), 'en', { sensitivity: 'base' })
+}
+
+// Two legacy keys (`mwnf3:objects:ISL:dz:Mus01:24`), segment by segment, a
+// number against a number as numbers.
+function compareKeys(a, b) {
+  const left = String(a ?? '').split(':')
+  const right = String(b ?? '').split(':')
+  for (let i = 0; i < Math.max(left.length, right.length); i++) {
+    const x = left[i] ?? ''
+    const y = right[i] ?? ''
+    if (x === y) continue
+    if (/^\d+$/.test(x) && /^\d+$/.test(y)) return Number(x) - Number(y)
+    return x.localeCompare(y, 'en')
+  }
+  return 0
+}

package/src/dxa/gallery/useGalleryItemDetail.js

@@ -1,4 +1,5 @@
-import { eraLabel, roundOutward } from '../../catalogue/dates.js'
+import { eraLabel, roundOutward, withEraWords } from '../../catalogue/dates.js'
+import { GALLERY_ERA_WORDS } from './eraWords.js'
 import { useSiteConfig } from '../../siteConfig.js'
 import { useGallerySheet } from './useGallerySheet.js'
 
@@ -72,7 +73,7 @@ export function useGalleryItemDetail(data, timeline) {
       },
       events: (country) => findEvents({ country, begin: from, end: to }),
       range: [from, to],
-      era: (year) => eraLabel(year, ctx.t),
+      era: (year) => eraLabel(year, withEraWords(ctx.t, GALLERY_ERA_WORDS)),
       searchTo: (country, [begin, end]) => ({ name: 'timeline-results', query: { country, begin, end } }),
     }
   }

package/src/dxa/gallery/useGalleryPartner.js

@@ -59,7 +59,7 @@ export function useGalleryPartner(data, collection, config = {}) {
   // results and the timeline gallery use. `scope` is built per-page in the
   // site's own PartnerObjects.vue, over the route's own id —
   // `CatalogueResultsView` takes no record id of its own, unlike
-  // `RecordView`.
+  // `RecordView`. Legacy's page (PartnerObjects.vue) printed no count.
   const partnerObjects = {
     entity: 'items',
     sort: { undated: 'first' },
@@ -70,7 +70,7 @@ export function useGalleryPartner(data, collection, config = {}) {
     empty: 'gallery.partner.noObjects',
     pagination: { jump: true },
     record: (item, { t }) => tile(item, t),
-    summary: ({ pageInfo, t }) => [{ count: pageInfo.total, value: t('partner.item.objectsInSite') }],
+    summary: () => [],
   }
 
   return { partnerList, partnerSheet, partnerObjects }

package/src/dxa/gallery/useGalleryTimeline.js

@@ -1,4 +1,5 @@
-import { dateRange, eraLabel, roundOutward, yearBucketsFromRange } from '../../catalogue/dates.js'
+import { dateRange, eraLabel, roundOutward, withEraWords, yearBucketsFromRange } from '../../catalogue/dates.js'
+import { GALLERY_ERA_WORDS } from './eraWords.js'
 import { useTimelineEvents } from '../../catalogue/timeline.js'
 import { PAGE_SIZE } from '../shared.js'
 
@@ -84,9 +85,10 @@ export function useGalleryTimeline(data, collection, config = {}) {
     route: 'timeline-results',
     controls: [
       { key: 'country' },
-      { key: 'begin', options: (ctx) => yearBucketsFromRange(ctx.years.min, ctx.years.max, ctx.t) },
-      { key: 'end', options: (ctx) => yearBucketsFromRange(ctx.years.min, ctx.years.max, ctx.t) },
+      { key: 'begin', options: (ctx) => yearBucketsFromRange(ctx.years.min, ctx.years.max, withEraWords(ctx.t, GALLERY_ERA_WORDS)) },
+      { key: 'end', options: (ctx) => yearBucketsFromRange(ctx.years.min, ctx.years.max, withEraWords(ctx.t, GALLERY_ERA_WORDS)) },
     ],
+    eraWords: GALLERY_ERA_WORDS,
     gallery: {
       route: 'timeline-gallery',
       items: (ctx) => timelineGalleryItems(ctx.filters),
@@ -127,8 +129,8 @@ export function useGalleryTimeline(data, collection, config = {}) {
         value: countryId ? labelOf('countries', countryId) : t('timeline.form.allCountries'),
       }]
       if (begin != null || end != null) {
-        const from = begin != null ? eraLabel(begin, t) : t('timeline.form.earliest')
-        const to = end != null ? eraLabel(end, t) : t('timeline.form.latest')
+        const from = begin != null ? eraLabel(begin, withEraWords(t, GALLERY_ERA_WORDS)) : t('timeline.form.earliest')
+        const to = end != null ? eraLabel(end, withEraWords(t, GALLERY_ERA_WORDS)) : t('timeline.form.latest')
         parts.push({ value: `${from} ${t('timeline.form.to')} ${to}` })
       }
       parts.push({ count: pageInfo.total, value: t('catalogue.results.objects') })

package/src/dxa/index.js

@@ -19,11 +19,12 @@
 //   const sheet = useGallerySheet(data)
 
 // Shared verbatim by both families — see shared.js.
-export { DATE_MODE, FACET_CATEGORIES, FACET_LABEL_KEYS, PAGE_SIZE, useFacetLabels } from './shared.js'
+export { DATE_MODE, FACET_CATEGORIES, FACET_LABEL_KEYS, GALLERY_PAGE_SIZE, PAGE_SIZE, useFacetLabels } from './shared.js'
 
 export { useGalleryData } from './gallery/useGalleryData.js'
 export { useGalleryCollection } from './gallery/useGalleryCollection.js'
 export { useGalleryTimeline } from './gallery/useGalleryTimeline.js'
+export { GALLERY_ERA_WORDS } from './gallery/eraWords.js'
 export { useGalleryPartner } from './gallery/useGalleryPartner.js'
 export { useGallerySheet } from './gallery/useGallerySheet.js'
 export { useGalleryItemDetail } from './gallery/useGalleryItemDetail.js'

package/src/dxa/shared.js

@@ -10,6 +10,13 @@ import { useI18n } from '../i18n/index.js'
 /** Nine tiles a page, as legacy's grids showed. */
 export const PAGE_SIZE = 9
 
+/**
+ * A gallery's pages show twenty tiles: dxa-api's own page size
+ * (`API_PAGESIZE`), which the gallery client never overrode — measured on
+ * Ceramics' collection results, 20 tiles a page (inventory-app#2423).
+ */
+export const GALLERY_PAGE_SIZE = 20
+
 /**
  * Decision D5: the DXA sites test containment — `na <= start_date` and
  * `nz >= coalesce(end_date, start_date)` in `Objects.blade.php` — so an

package/src/i18n/I18nText.vue

@@ -3,13 +3,16 @@ import { computed } from 'vue'
 import { useI18n } from './index.js'
 import { renderBlock } from './markdown.js'
 
+// `blankLines`: each blank line between two blocks a `<br>` (renderBlock),
+// for a page that sets legacy's line spacing.
 const props = defineProps({
   keypath: { type: String, required: true },
   tag: { type: String, default: 'div' },
+  blankLines: { type: Boolean, default: false },
 })
 
 const { t } = useI18n()
-const html = computed(() => renderBlock(t(props.keypath)))
+const html = computed(() => renderBlock(t(props.keypath), { blankLines: props.blankLines }))
 </script>
 
 <template>

package/src/i18n/markdown.js

@@ -61,7 +61,30 @@ const record = new Marked({ async: false, gfm: true, breaks: true })
 prose.use(escaping, noCode)
 record.use(escaping, noCode)
 
-const pipeline = (breaks) => (breaks ? record : prose)
+// `blankLines` keeps the number of blank lines between two blocks. Legacy's
+// text pages were HTML, a blank line a `<br>`, and some put two blank lines
+// where others put one; Markdown reads any run of blank lines as one
+// paragraph break. With it, each blank line of the source is a `<br>`
+// between the blocks, and the page sets its paragraphs without margins (a
+// gallery's Credits, inventory-app#2423). A run of N blank lines is one
+// `space` token holding N + 1 newlines.
+const blankLineSpacing = {
+  renderer: {
+    space(token) {
+      const newlines = String(token?.raw ?? '').split('\n').length - 1
+      return '<br>'.repeat(Math.max(0, newlines - 1))
+    },
+  },
+}
+const proseLines = new Marked({ async: false, gfm: true, breaks: false })
+const recordLines = new Marked({ async: false, gfm: true, breaks: true })
+proseLines.use(escaping, noCode, blankLineSpacing)
+recordLines.use(escaping, noCode, blankLineSpacing)
+
+const pipeline = (breaks, blankLines = false) => {
+  if (blankLines) return breaks ? recordLines : proseLines
+  return breaks ? record : prose
+}
 
 const REGEXP_SPECIAL = /[.*+?^${}()|[\]\\]/g
 function escapeRegExp(text) {
@@ -153,8 +176,10 @@ function withGlossary(breaks, glossary) {
   return entry ? (breaks ? entry.record : entry.prose) : pipeline(breaks)
 }
 
-function engineFor(breaks, glossary) {
-  return glossary && glossary.length > 0 ? withGlossary(breaks, glossary) : pipeline(breaks)
+// `blankLines` is for a page's own text, which has no glossary; a glossary
+// wins over it.
+function engineFor(breaks, glossary, blankLines = false) {
+  return glossary && glossary.length > 0 ? withGlossary(breaks, glossary) : pipeline(breaks, blankLines)
 }
 
 // The same key as the render pipelines, for the same reason: a glossary list
@@ -195,9 +220,12 @@ export function glossaryIdsIn(text, glossary) {
   return [...found]
 }
 
-/** A text as one or more paragraphs. `glossary`: `[{ id, spelling }]` to highlight. */
-export function renderBlock(text, { breaks = false, glossary } = {}) {
-  return engineFor(breaks, glossary).parse(String(text ?? ''))
+/**
+ * A text as one or more paragraphs. `glossary`: `[{ id, spelling }]` to
+ * highlight. `blankLines`: each blank line between two blocks a `<br>`.
+ */
+export function renderBlock(text, { breaks = false, glossary, blankLines = false } = {}) {
+  return engineFor(breaks, glossary, blankLines).parse(String(text ?? ''))
 }
 
 /** A text without the surrounding paragraph, for a heading or a table cell. */

package/src/index.js

@@ -26,7 +26,7 @@ export { useListQuery } from './catalogue/listQuery.js'
 export { paginate, sortChronological, usePagination } from './catalogue/pagination.js'
 export { facetOptions, useFacets } from './catalogue/facets.js'
 export {
-  centuryPresets, dateRange, eraLabel, inDateRange, roundOutward, yearBuckets, yearBucketsFromRange,
+  centuryPresets, dateRange, eraLabel, inDateRange, roundOutward, withEraWords, yearBuckets, yearBucketsFromRange,
 } from './catalogue/dates.js'
 export { useSearchLanguage } from './catalogue/searchLanguage.js'
 export {

package/src/testing/viteConfig.js

@@ -54,6 +54,9 @@ export function defineViewerConfig({
     test: {
       environment: 'jsdom',
       testTimeout: 60000,
+      // Node 26 has a `localStorage` of its own, which hides jsdom's from the
+      // tests: without a storage file it is undefined.
+      execArgv: ['--no-experimental-webstorage'],
       server: {
         deps: {
           // viewer-core ships .vue source; Node cannot load it unless Vitest