@jxsuite/starters 3.3.2 → 3.5.0

package/sites/museum/pages/visit.jxn

@@ -0,0 +1,266 @@
+/- kdl-version 2
+
+$element .title="Plan your visit — Atrium" .description="Hours, admission, transport and access for Atrium, the city museum of art and history. Free entry, Tuesday to Sunday, 10:00 to 18:00." {
+    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 {
+                    - "2" "6" "11"
+                }
+            }
+        }
+        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 Visit
+            title "Ten to six, six days a week"
+            standfirst "There is no ticket desk, because there is no ticket. Walk in from the quay side, leave your bag at the counter if it is bigger than a satchel, and start wherever you like."
+            metaLabel Address
+            metaValue "2 Quai des Écluses, Old Harbour"
+        }
+    }
+    mu-band {
+        $props index="01" label=Hours 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 "Tue – Fri"
+                        value "10:00 – 18:00"
+                        note "Last entry to the reading room at 17:00."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "Sat – Sun"
+                        value "10:00 – 18:00"
+                        note "The courtyard stays open until 19:00 from May to September."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term Monday
+                        value Closed
+                        note "Conservation day. The café on the quay side stays open."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "Winter closure"
+                        value "From ${state.closedFrom} to ${state.closedTo}"
+                        note "The only three consecutive days the hall is shut all year."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="02" label=Admission 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 "General admission" {
+                    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 Free {
+                    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 "Written into the founding subscription of 1897 and never changed. No ticket, no booking, no members-only hour." {
+                    style margin="1.1rem 0 0" lineHeight="1.65" maxWidth="34ch"
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "Guided tour"
+                        value "${state.tourPrice}"
+                        note "Ninety minutes, Saturdays at 11:00 and 15:00. Book at the desk."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term Membership
+                        value "${state.membership}"
+                        note "A year of tours, the quarterly, and a vote at the annual meeting."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term Schools
+                        value "No charge, ever"
+                        note "Including the coach. Write to the education desk six weeks ahead."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="03" label="Getting here" 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 Tram
+                        value "Lines ${state.trams}"
+                        note "Stop: Écluses. The hall is the glass roof on your left as you step down."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "On foot"
+                        value "Eleven minutes from the old town gate"
+                        note "Follow the quay; the last stretch is cobbled and uneven."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term "By bicycle"
+                        value "Forty racks under the north canopy"
+                        note "Covered, lit, and in view of the front desk."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "By car"
+                        value "No museum car park"
+                        note "Public parking at Bassin Nord, six minutes' walk over the lock bridge."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="04" label=Access tone=card
+        div {
+            style maxWidth="var(--measure)"
+            p "Every gallery is reachable step-free from the quay-side entrance, including the courtyard and the reading room. The only exception is the customs-house walk, which has four stone steps and no handrail; a level route around it is signed at the entrance." {
+                style margin="0 0 1.5rem" lineHeight="1.75"
+            }
+            mu-fact {
+                $props {
+                    term Step-free
+                    value "All galleries and the reading room"
+                    note "Two lifts, both large enough for a wheelchair and a companion."
+                }
+            }
+            mu-fact {
+                $props {
+                    term Seating
+                    value "A bench in every room"
+                    note "Folding stools at the desk, free to borrow, no deposit."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "Quiet hour"
+                    value "Wednesdays, 10:00 – 11:00"
+                    note "Lights up, sound off, and half the usual visitor numbers."
+                }
+            }
+            mu-fact {
+                $props {
+                    term "Assistance dogs"
+                    value "Welcome everywhere"
+                    note "Water bowls at both entrances and in the courtyard."
+                }
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "Before you come"
+            heading "See what is hanging this week."
+            text "Three exhibitions are open, and the programme lists what changes next."
+            label "What's on"
+            href "/exhibitions/"
+        }
+    }
+}

package/sites/museum/project.jxn

@@ -0,0 +1,130 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project Atrium
+
+url "https://example.com"
+
+defaults layout="./layouts/base.jxn" lang=en
+
+i18n {
+    defaultLocale en
+    locales en fr-CA ar
+    routing prefix-except-default
+}
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Atrium is the city museum of art and history — four centuries of the harbour, its makers and its maps, in a glass hall open to everyone, in English, French and Arabic."
+    link rel=icon href="/favicon.svg" type="image/svg+xml"
+    link rel=preconnect href="https://fonts.googleapis.com"
+    link rel=preconnect href="https://fonts.gstatic.com" crossorigin=""
+    link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&family=Noto+Serif:wght@400;500;600&family=Noto+Kufi+Arabic:wght@400;500;700&family=Noto+Naskh+Arabic:wght@400;500;600&display=swap"
+}
+
+$media {
+    --lg "(max-width: 1080px)"
+    --md "(max-width: 840px)"
+    --sm "(max-width: 600px)"
+}
+
+style {
+    --color-ink "#17181d"
+    --color-ink-deep "#0b0c10"
+    --color-chalk "#e7e3da"
+    --color-chalk-deep "#d8d3c6"
+    --color-card "#f7f5f0"
+    --color-pigment "#2438c8"
+    --color-pigment-deep "#182a9c"
+    --color-pigment-tint "rgba(36, 56, 200, 0.09)"
+    --color-clay "#ad4529"
+    --color-muted "#5c5a66"
+    --color-hairline "#cbc5b8"
+    --font-display "'Noto Sans Display', 'Noto Kufi Arabic', system-ui, -apple-system, sans-serif"
+    --font-text "'Noto Serif', 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif"
+    --font-label "'Noto Sans Mono', 'Noto Kufi Arabic', ui-monospace, SFMono-Regular, Menlo, monospace"
+    --label-tracking "0.16em"
+    --label-case uppercase
+    --display-tracking "-0.035em"
+    --radius "0"
+    --max-width "1240px"
+    --measure "62ch"
+    --label-column "9.5rem"
+    --gutter "clamp(1.25rem, 4vw, 3rem)"
+    --band-space "clamp(3.25rem, 7vw, 6rem)"
+    --flip-inline "1"
+    --leading-scale "1"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-text)"
+    fontSize "17px"
+    lineHeight "1.7"
+    color "var(--color-ink)"
+    backgroundColor "var(--color-chalk)"
+    WebkitFontSmoothing antialiased
+    ":lang(ar)" {
+        --label-tracking "0"
+        --label-case none
+        --display-tracking "0"
+        --flip-inline "-1"
+        --leading-scale "1.35"
+    }
+    ":dir(rtl)" {
+        --flip-inline "-1"
+    }
+    ":lang(ar) h1, :lang(ar) h2, :lang(ar) h3" {
+        textWrap balance
+    }
+}
+
+images optimize=#false lazyLoad=#true
+
+content {
+    exhibitions {
+        source "./content/exhibitions/{locale}/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string description="Exhibition title, as it appears on the wall."
+                description {
+                    type string
+                    description "One-sentence standfirst for cards and search results."
+                }
+                date {
+                    type string
+                    description "Opening date, ISO 8601 (YYYY-MM-DD) — Intl/formatDate renders it in each page's own language."
+                }
+                until type=string description="Closing date, ISO 8601 (YYYY-MM-DD)."
+                gallery type=string description="Where in the building it hangs."
+                curator {
+                    type string
+                    description "Curator's name — a proper noun, so it stays the same in every language."
+                }
+                works {
+                    type number
+                    description "Number of objects on show; formatted with Intl/formatNumber, so Arabic pages get Arabic-Indic digits."
+                }
+                hue {
+                    type number
+                    description "Hue (0–360) of this exhibition's drawn plate. The starter ships no photographs; each card's art is CSS, generated from this one number."
+                }
+                enKey {
+                    type string
+                    description "This entry's id, repeated as a field only the English entries carry. Three translations share one id, and ContentEntry matches a field value across the whole collection — so each locale's detail route matches its own key field, and the value being the id is what keeps the three URLs parallel."
+                }
+                lang {
+                    type string
+                    description "BCP 47 tag of the directory this entry came from. One collection holds every language at once, so a locale's index filters on this to list only its own."
+                }
+                order type=number description="Running order on the exhibitions index."
+            }
+            required title description date until gallery lang
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/nonprofit/components/np-contact-form.jxn

@@ -0,0 +1,97 @@
+/- kdl-version 2
+
+np-contact-form {
+    state heading="Send us a message"
+    style {
+        display block
+        padding "clamp(1.75rem, 4vw, 2.5rem)"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius-lg)"
+        boxShadow "var(--shadow-card)"
+    }
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.75rem"
+            fontWeight "600"
+            color "var(--color-primary-deep)"
+            margin "0 0 1.5rem"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name" {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address" {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        select name=interest aria-label="I'm interested in" {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                backgroundColor "var(--color-bg-cream)"
+                fontFamily inherit
+            }
+            option value=general "General question"
+            option value=volunteer "I want to volunteer"
+            option value=donate "I want to donate or fundraise"
+            option value=partner "Partnership or sponsorship"
+        }
+        textarea name=message rows="4" placeholder="How can we help?" aria-label=Message {
+            style {
+                width "100%"
+                padding "0.85rem 1rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-cream)"
+            }
+        }
+        button type=submit "Send message" {
+            style {
+                display inline-flex
+                alignItems center
+                justifyContent center
+                gap "0.4rem"
+                backgroundColor "var(--color-accent)"
+                color "var(--color-text-white)"
+                padding "0.95rem 1.75rem"
+                border none
+                borderRadius "999px"
+                fontSize "1rem"
+                fontFamily inherit
+                fontWeight "800"
+                cursor pointer
+                justifySelf start
+                boxShadow "0 12px 26px -12px rgba(242,106,61,0.8)"
+                transition "background-color 0.15s, transform 0.15s"
+                :hover backgroundColor="var(--color-accent-hover)" transform="translateY(-1px)"
+            }
+        }
+        p "This is a demo form. Wire it to your email or CRM in pages/contact.md." {
+            style fontSize="0.85rem" fontWeight="600" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

package/sites/nonprofit/components/np-contact-info.jxn

@@ -0,0 +1,104 @@
+/- kdl-version 2
+
+np-contact-info {
+    state {
+        line1 "240 Riverside Avenue"
+        line2 "Rivertown, CA 90210"
+        phone "(555) 204-7788"
+        phoneHref tel:+15552047788
+        email hello@rivertownfoundation.org
+        emailHref mailto:hello@rivertownfoundation.org
+    }
+    style display=block
+    div {
+        style {
+            padding "2rem"
+            backgroundColor "var(--color-primary-deep)"
+            color "var(--color-text-white)"
+            borderRadius "var(--radius-lg)"
+        }
+        h3 "Visit us" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "1.5rem"
+                fontWeight "600"
+                margin "0 0 1rem"
+            }
+        }
+        p "${state.line1}" {
+            style margin="0 0 0.35rem" opacity="0.85" fontWeight="600"
+        }
+        p "${state.line2}" {
+            style margin="0 0 0.35rem" opacity="0.85" fontWeight="600"
+        }
+        p {
+            style margin="0.85rem 0 0.35rem"
+            a href="${state.phoneHref}" "${state.phone}" {
+                style color="var(--color-gold)" textDecoration=none fontWeight="800"
+            }
+        }
+        p {
+            style margin="0"
+            a href="${state.emailHref}" "${state.email}" {
+                style color="var(--color-gold)" textDecoration=none fontWeight="800"
+            }
+        }
+    }
+    div {
+        style {
+            marginTop "1.5rem"
+            padding "2rem"
+            backgroundColor "var(--color-bg-cream)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius-lg)"
+        }
+        h3 "Office hours" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "1.5rem"
+                fontWeight "600"
+                color "var(--color-primary-deep)"
+                margin "0 0 1.25rem"
+            }
+        }
+        div {
+            style {
+                display flex
+                justifyContent space-between
+                padding "0.6rem 0"
+                borderBottom "1px solid var(--color-border)"
+                fontWeight "600"
+            }
+            span "Monday – Friday" {
+                style fontWeight="700"
+            }
+            span "9:00am – 5:00pm" {
+                style color="var(--color-text-muted)"
+            }
+        }
+        div {
+            style {
+                display flex
+                justifyContent space-between
+                padding "0.6rem 0"
+                borderBottom "1px solid var(--color-border)"
+                fontWeight "600"
+            }
+            span Saturday {
+                style fontWeight="700"
+            }
+            span "9:00am – 1:00pm (Pantry)" {
+                style color="var(--color-text-muted)"
+            }
+        }
+        div {
+            style display=flex justifyContent=space-between padding="0.6rem 0" fontWeight="600"
+            span Sunday {
+                style fontWeight="700"
+            }
+            span Closed {
+                style color="var(--color-text-muted)"
+            }
+        }
+    }
+}