@jxsuite/starters 3.4.0 → 3.5.0

package/sites/museum/pages/ar/visit.jxn

@@ -0,0 +1,270 @@
+/- kdl-version 2
+$layout "./layouts/ar.jxn"
+$head {
+    meta name=description content="المواعيد والدخول والمواصلات وسبل الوصول إلى أتريوم، متحف المدينة للفنّ والتاريخ. الدخول مجّانيّ، من الثلاثاء إلى الأحد، من ١٠:٠٠ إلى ١٨:٠٠."
+}
+
+$element .title="خطّط لزيارتك — أتريوم" .description="المواعيد والدخول والمواصلات وسبل الوصول إلى أتريوم، متحف المدينة للفنّ والتاريخ. الدخول مجّانيّ، من الثلاثاء إلى الأحد، من ١٠:٠٠ إلى ١٨:٠٠." {
+    state {
+        tourPrice {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 12
+                    - #null
+                    - style=currency currency=CAD
+                }
+            }
+        }
+        membership {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 45
+                    - #null
+                    - style=currency currency=CAD
+                }
+            }
+        }
+        trams {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatList"
+                value {
+                    - ٢ ٦ ١١
+                }
+            }
+        }
+        closedFrom {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - "2026-12-24"
+                    - #null
+                    - day=numeric month=long
+                }
+            }
+        }
+        closedTo {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - "2026-12-26"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+    }
+    mu-pagehead {
+        $props {
+            kicker الزيارة
+            title "من العاشرة إلى السادسة، ستّة أيّام في الأسبوع"
+            standfirst "لا يوجد شبّاك تذاكر، لأنّه لا توجد تذكرة. ادخل من جهة الرصيف، واترك حقيبتك عند المكتب إن كانت أكبر من حقيبة كتف، وابدأ من حيث تشاء."
+            metaLabel العنوان
+            metaValue "٢ رصيف الأهوسة، المرفأ القديم"
+        }
+    }
+    mu-band {
+        $props index=٠١ label=المواعيد tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "الثلاثاء – الجمعة"
+                        value "١٠:٠٠ – ١٨:٠٠"
+                        note "آخر دخول إلى قاعة المطالعة في الساعة ١٧:٠٠."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "السبت – الأحد"
+                        value "١٠:٠٠ – ١٨:٠٠"
+                        note "يبقى الفناء مفتوحًا حتى ١٩:٠٠ من أيّار إلى أيلول."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term الاثنين
+                        value مغلق
+                        note "يوم الصيانة. ويبقى المقهى على جهة الرصيف مفتوحًا."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "الإغلاق الشتويّ"
+                        value "من ${state.closedFrom} إلى ${state.closedTo}"
+                        note "الأيّام الثلاثة المتتالية الوحيدة التي تُغلق فيها القاعة طوال السنة."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٢ label=الدخول tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1fr) minmax(0, 1fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                rowGap "1.5rem"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                style {
+                    border "2px solid var(--color-ink)"
+                    backgroundColor "var(--color-pigment)"
+                    color "var(--color-card)"
+                    padding "clamp(1.5rem, 3.5vw, 2.25rem)"
+                }
+                p "الدخول العامّ" {
+                    style {
+                        margin "0 0 0.9rem"
+                        fontFamily "var(--font-label)"
+                        fontSize "0.66rem"
+                        letterSpacing "var(--label-tracking)"
+                        textTransform "var(--label-case)"
+                        opacity "0.8"
+                    }
+                }
+                p مجّانيّ {
+                    style {
+                        margin "0"
+                        fontFamily "var(--font-display)"
+                        fontSize "clamp(2.4rem, 6vw, 3.6rem)"
+                        fontWeight "700"
+                        lineHeight "calc(1 * var(--leading-scale))"
+                        letterSpacing "var(--display-tracking)"
+                    }
+                }
+                p "مكتوب في اكتتاب التأسيس سنة ١٨٩٧ ولم يتغيّر قطّ. لا تذكرة، ولا حجز، ولا ساعة خاصّة بالأعضاء." {
+                    style margin="1.1rem 0 0" lineHeight="1.8" maxWidth="38ch"
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "جولة مرشدة"
+                        value "${state.tourPrice}"
+                        note "تسعون دقيقة، أيّام السبت في ١١:٠٠ و١٥:٠٠. الحجز عند المكتب."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term العضويّة
+                        value "${state.membership}"
+                        note "سنة من الجولات، والمجلّة الفصليّة، وصوت في الاجتماع السنويّ."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term المدارس
+                        value "بلا مقابل، دائمًا"
+                        note "بما في ذلك الحافلة. راسلوا مكتب التربية قبل ستّة أسابيع."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٣ label="كيف تصل" tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term الترام
+                        value "الخطوط ${state.trams}"
+                        note "المحطّة: الأهوسة. القاعة هي السقف الزجاجيّ الذي تراه أمامك حين تنزل."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term سيرًا
+                        value "إحدى عشرة دقيقة من بوّابة البلدة القديمة"
+                        note "اتبع الرصيف؛ آخر المسافة مرصوف بالحصى وغير مستوٍ."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term بالدرّاجة
+                        value "أربعون حاملًا تحت المظلّة الشماليّة"
+                        note "مغطّاة ومضاءة وعلى مرأى من مكتب الاستقبال."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term بالسيّارة
+                        value "لا موقف خاصّ بالمتحف"
+                        note "موقف عامّ في الحوض الشماليّ، على بعد ستّ دقائق سيرًا فوق جسر الهويس."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index=٠٤ label="سهولة الوصول" tone=card
+        div {
+            style maxWidth="var(--measure)"
+            p "كلّ صالة يمكن بلوغها دون درج من مدخل الرصيف، بما في ذلك الفناء وقاعة المطالعة. الاستثناء الوحيد ممرّ دار الجمارك، وفيه أربع درجات حجريّة بلا درابزين؛ وثمّة طريق مستوٍ يلتفّ حوله، مُشار إليه عند المدخل." {
+                style margin="0 0 1.5rem" lineHeight="1.9"
+            }
+            mu-fact {
+                $props {
+                    term "بلا درج"
+                    value "كلّ الصالات وقاعة المطالعة"
+                    note "مصعدان، كلاهما يتّسع لكرسيّ متحرّك ومرافق."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "أماكن الجلوس"
+                    value "مقعد في كلّ غرفة"
+                    note "وكراسٍ قابلة للطيّ عند المكتب، تُعار مجّانًا وبلا تأمين."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "ساعة الهدوء"
+                    value "الأربعاء، ١٠:٠٠ – ١١:٠٠"
+                    note "إضاءة كاملة، وصوت مطفأ، ونصف عدد الزوّار المعتاد."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "كلاب المساعدة"
+                    value "مرحّب بها في كلّ مكان"
+                    note "أوعية ماء عند المدخلين وفي الفناء."
+                }
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "قبل أن تأتي"
+            heading "انظر ما هو معلّق هذا الأسبوع."
+            text "ثلاثة معارض مفتوحة، والبرنامج يذكر ما سيتغيّر بعدها."
+            label "المعروض الآن"
+            href "/ar/exhibitions/"
+        }
+    }
+}

package/sites/museum/pages/exhibitions/[slug].jxn

@@ -0,0 +1,146 @@
+/- kdl-version 2
+$paths contentType=exhibitions param=slug field=id
+
+$element .title="${state.entry.data.title} — Atrium" .description="${state.entry.data.description}" {
+    state {
+        entry {
+            $prototype ContentEntry
+            $src "@jxsuite/parser/ContentEntry.class.json"
+            contentType exhibitions
+            field enKey
+            id (ref)"#/$params/slug"
+        }
+        opens {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/entry/data/date"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+        closes {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/entry/data/until"
+                    - #null
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+        works {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - (ref)"#/state/entry/data/works"
+                }
+            }
+        }
+    }
+    article {
+        mu-pagehead {
+            $props {
+                kicker "${state.entry.data.gallery}"
+                title "${state.entry.data.title}"
+                standfirst "${state.entry.data.description}"
+                metaLabel "Curated by"
+                metaValue "${state.entry.data.curator}"
+            }
+        }
+        mu-band {
+            $props index="01" label="The exhibition" tone=chalk
+            div {
+                style {
+                    display grid
+                    gridTemplateColumns "minmax(0, 1.35fr) minmax(0, 0.75fr)"
+                    columnGap "clamp(2rem, 5vw, 4rem)"
+                    alignItems start
+                    @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="2.5rem"
+                }
+                div {
+                    style maxWidth="var(--measure)" fontSize="1.08rem" lineHeight="1.8"
+                    .children {
+                        $array items=(ref)"#/state/entry/$children" {
+                            p "${item.textContent}" {
+                                style margin="0 0 1.35rem"
+                            }
+                        }
+                    }
+                }
+                aside {
+                    style {
+                        border "2px solid var(--color-ink)"
+                        backgroundColor "var(--color-card)"
+                        padding "clamp(1.1rem, 2.5vw, 1.6rem)"
+                    }
+                    p "Wall label" {
+                        style {
+                            margin "0 0 0.5rem"
+                            fontFamily "var(--font-label)"
+                            fontSize "0.64rem"
+                            letterSpacing "var(--label-tracking)"
+                            textTransform "var(--label-case)"
+                            color "var(--color-muted)"
+                        }
+                    }
+                    div aria-hidden="true" {
+                        style {
+                            aspectRatio "4 / 3"
+                            border "2px solid var(--color-ink)"
+                            marginBlockEnd "1.1rem"
+                            background "radial-gradient(circle at 62% 40%, hsl(${state.entry.data.hue} 55% 45%) 0 31%, transparent 31.5%), repeating-linear-gradient(${state.entry.data.hue}deg, var(--color-chalk-deep) 0 9px, var(--color-card) 9px 18px)"
+                        }
+                    }
+                    mu-fact {
+                        $props term=Opens value="${state.opens}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=Closes value="${state.closes}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=Objects value="${state.works}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=Where value="${state.entry.data.gallery}" layout=stack
+                    }
+                    mu-fact {
+                        $props term=Curator value="${state.entry.data.curator}" layout=stack
+                    }
+                    p "Every wall label in this room is written in three languages, at the same length. Nothing is abridged for the shorter wall." {
+                        style {
+                            margin "1.25rem 0 0"
+                            paddingBlockStart "0.9rem"
+                            borderBlockStart "1px solid var(--color-hairline)"
+                            fontSize "0.9rem"
+                            lineHeight "1.6"
+                            color "var(--color-muted)"
+                        }
+                    }
+                }
+            }
+        }
+        mu-band {
+            $props index="02" label="Also on" tone=card
+            p "Two other exhibitions are open at the same time, and the same ticket — none — gets you into all three." {
+                style margin="0 0 1.5rem" lineHeight="1.75" maxWidth="var(--measure)"
+            }
+            mu-more {
+                $props label="The whole programme" href="/exhibitions/"
+            }
+        }
+        mu-cta {
+            $props {
+                kicker "Free entry"
+                heading "It is on the ground floor, and it is open now."
+                text "Ten to six, Tuesday to Sunday. Walk in from the quay side and turn left at the customs-house wall."
+                label "Plan your visit"
+                href "/visit/"
+            }
+        }
+    }
+}

package/sites/museum/pages/exhibitions/index.jxn

@@ -0,0 +1,78 @@
+/- kdl-version 2
+
+$element .title="Exhibitions — Atrium" .description="The current programme at Atrium: three exhibitions drawn from the city's own collection, with dates, galleries and curators." {
+    state {
+        shows {
+            $prototype ContentCollection
+            $src "@jxsuite/parser/ContentCollection.class.json"
+            contentType exhibitions
+            filter {
+                - field=lang op="==" value=en
+            }
+            sort {
+                - field=order order=asc
+            }
+        }
+    }
+    mu-pagehead {
+        $props {
+            kicker Programme
+            title "What is hanging, and until when"
+            standfirst "Three exhibitions run at once: one long, one seasonal, one in the courtyard. All of them are drawn from the museum's own store rather than borrowed, so what you see here is the city looking at itself."
+            metaLabel Entry
+            metaValue "Free, no booking"
+        }
+    }
+    mu-band {
+        $props index="01" label="On now" tone=chalk
+        div {
+            style borderBlockEnd="1px solid var(--color-hairline)"
+            .children {
+                $array items=(ref)"#/state/shows" {
+                    mu-exhibition-row {
+                        $props {
+                            index "0${item.data.order}"
+                            title "${item.data.title}"
+                            description "${item.data.description}"
+                            gallery "${item.data.gallery}"
+                            curator "${item.data.curator}"
+                            curatorLabel "Curated by"
+                            href "/exhibitions/${item.id}/"
+                            hue "${item.data.hue}"
+                            date "${item.data.date}"
+                            until "${item.data.until}"
+                            locale "${$page.locale}"
+                        }
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="02" label="How the programme works" tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1fr) minmax(0, 1fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                rowGap "1.25rem"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            p "One exhibition changes each season and two run long, so there is always something you have not seen and something you can come back to. Nothing is ticketed separately and nothing closes for private hire during opening hours." {
+                style margin="0" lineHeight="1.75"
+            }
+            p "Each exhibition is written independently in every language the museum publishes — the curator who wrote the Arabic wall text for Gallery 2 is not translating the English one, and the two disagree in places. The switch at the top of this page lists the languages a page exists in, and only those." {
+                style margin="0" lineHeight="1.75"
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "Guided tours"
+            heading "Ninety minutes, Saturdays, in whichever of the three you prefer."
+            text "Book at the desk on the day, or write ahead if you are bringing a group of more than eight."
+            label "Visitor information"
+            href "/visit/"
+        }
+    }
+}