@jxsuite/starters 3.3.1 → 3.4.0

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.json" 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/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.1"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.3.0",
-    "@jxsuite/runtime": "^6.2.0"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/nonprofit/project.jxn

@@ -0,0 +1,99 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Rivertown Foundation"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.json" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Rivertown Foundation is a community nonprofit running local programs in food security, youth mentoring, housing, and job training — powered by neighbors helping neighbors."
+    link rel=icon href="/favicon.svg"
+    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=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Nunito:wght@400;500;600;700;800&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 560px)"
+}
+
+style {
+    --color-primary "#2f7d55"
+    --color-primary-hover "#256845"
+    --color-primary-deep "#173a2b"
+    --color-primary-soft "#e3efe6"
+    --color-accent "#f26a3d"
+    --color-accent-hover "#e0552b"
+    --color-accent-soft "#ffe6da"
+    --color-gold "#e9a63d"
+    --color-gold-soft "#fbeccf"
+    --color-ink "#22332a"
+    --color-bg-dark "#173a2b"
+    --color-bg-cream "#fbf5ec"
+    --color-bg-cream-deep "#f6ecda"
+    --color-bg-mint "#eef6ef"
+    --color-bg-white "#ffffff"
+    --color-text-primary "#23342b"
+    --color-text-secondary "#3f5147"
+    --color-text-muted "#61715f"
+    --color-text-white "#ffffff"
+    --color-border "#eadfce"
+    --color-border-strong "#dccdb4"
+    --font-display "'Fraunces', Georgia, 'Times New Roman', serif"
+    --font-heading "'Fraunces', Georgia, 'Times New Roman', serif"
+    --font-body "'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1180px"
+    --max-width-wide "1300px"
+    --max-width-narrow "760px"
+    --radius "1.25rem"
+    --radius-sm "0.75rem"
+    --radius-lg "2rem"
+    --radius-pill "999px"
+    --shadow-card "0 2px 6px rgba(23,58,43,0.05), 0 20px 44px -26px rgba(23,58,43,0.3)"
+    --shadow-float "0 34px 74px -32px rgba(23,58,43,0.4)"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.7"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-white)"
+    WebkitFontSmoothing antialiased
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    programs {
+        source "./content/programs/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                summary type=string
+                image type=string format=image
+                order type=number
+            }
+            required title summary
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/portfolio/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.1"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.3.0",
-    "@jxsuite/runtime": "^6.2.0"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/portfolio/project.jxn

@@ -0,0 +1,85 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Aperture Studio"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.json" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Aperture Studio — a photography and creative studio crafting image-forward stories across weddings, portraits, editorial, travel, food, and architecture."
+    link rel=icon href="/favicon.svg"
+    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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Fraunces:opsz,wght@9..144,300;9..144,400&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#c8a45c"
+    --color-primary-hover "#dcbd77"
+    --color-ink "#ece9e3"
+    --color-bg-dark "#161619"
+    --color-bg-cream "#161619"
+    --color-bg-white "#0c0c0d"
+    --color-bg "#0c0c0d"
+    --color-bg-elev "#161619"
+    --color-text-primary "#ece9e3"
+    --color-text-white "#ece9e3"
+    --color-text-muted "#8f8b82"
+    --color-border "#2a2a2e"
+    --color-line "#2a2a2e"
+    --color-accent "#c8a45c"
+    --font-heading "'Cormorant Garamond', Georgia, 'Times New Roman', serif"
+    --font-label "'Fraunces', Georgia, serif"
+    --max-width "1400px"
+    --max-width-narrow "760px"
+    --radius "0"
+    margin "0"
+    padding "0"
+    fontFamily "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg)"
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    projects {
+        source "./content/projects/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                category type=string
+                cover type=string format=image
+                year type=number
+                order type=number
+                slug type=string
+            }
+            required title category slug
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/professional-firm/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.1"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.3.0",
-    "@jxsuite/runtime": "^6.2.0"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/professional-firm/project.jxn

@@ -0,0 +1,94 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Meridian Advisory"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.json" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Meridian Advisory is a boutique CPA and advisory firm for founders and growing companies — tax, assurance, and fractional CFO counsel, published as a quarterly of practical financial thinking."
+    link rel=icon href="/favicon.svg"
+    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=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Archivo:wght@400;500;600;700&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-ink "#161a2c"
+    --color-ink-deep "#0d101d"
+    --color-navy "#1d2748"
+    --color-paper "#f4f1e9"
+    --color-paper-2 "#ece7da"
+    --color-surface "#fbf9f3"
+    --color-accent "#9a7b3c"
+    --color-accent-deep "#7c6230"
+    --color-muted "#605e55"
+    --color-rule "#161a2c"
+    --color-hairline "#d5cdba"
+    --color-primary "#161a2c"
+    --color-primary-hover "#242c4a"
+    --color-bg-dark "#0d101d"
+    --color-bg-cream "#ece7da"
+    --color-bg-white "#fbf9f3"
+    --color-text-primary "#161a2c"
+    --color-text-white "#f4f1e9"
+    --color-text-muted "#605e55"
+    --color-border "#d5cdba"
+    --font-serif "'Spectral', Georgia, 'Times New Roman', serif"
+    --font-sans "'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --font-heading "'Spectral', Georgia, 'Times New Roman', serif"
+    --max-width "1180px"
+    --max-width-narrow "720px"
+    --measure "660px"
+    --radius "0"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-sans)"
+    fontSize "17px"
+    lineHeight "1.6"
+    color "var(--color-ink)"
+    backgroundColor "var(--color-paper)"
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    insights {
+        source "./content/insights/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                excerpt type=string
+                date type=string
+                author type=string
+                category type=string
+                order type=number
+            }
+            required title excerpt date
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/real-estate/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.1"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.3.0",
-    "@jxsuite/runtime": "^6.2.0"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/real-estate/project.jxn

@@ -0,0 +1,103 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Northshore Realty"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.json" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Northshore Realty is the north shore's property index — search live listings by neighborhood, price, and bedrooms, then work with agents who actually live here."
+    link rel=icon href="/favicon.svg"
+    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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#0f766e"
+    --color-primary-hover "#115e59"
+    --color-accent "#0d9488"
+    --color-accent-bright "#14b8a6"
+    --color-accent-soft "#ccfbf1"
+    --color-teal-tint "#f0fdfa"
+    --color-ink "#0b1220"
+    --color-navy "#0f172a"
+    --color-bg-dark "#0b1220"
+    --color-bg-ink-soft "#152238"
+    --color-bg-cream "#f6f8fb"
+    --color-bg-tint "#eef2f7"
+    --color-bg-white "#ffffff"
+    --color-text-primary "#0f172a"
+    --color-text-secondary "#334155"
+    --color-text-muted "#64748b"
+    --color-text-white "#ffffff"
+    --color-border "#e4e9f0"
+    --color-border-strong "#cbd5e1"
+    --color-status-new "#0d9488"
+    --font-display "'Spectral', Georgia, 'Times New Roman', serif"
+    --font-heading "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --font-ui "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --font-body "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1240px"
+    --max-width-narrow "760px"
+    --radius "0.75rem"
+    --radius-sm "0.5rem"
+    --radius-lg "1.25rem"
+    --shadow-card "0 1px 2px rgba(15,23,42,0.04), 0 10px 26px -14px rgba(15,23,42,0.18)"
+    --shadow-float "0 30px 70px -28px rgba(11,18,32,0.42)"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-white)"
+    WebkitFontSmoothing antialiased
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    listings {
+        source "./content/listings.csv"
+        format Csv
+        schema {
+            type object
+            properties {
+                Title type=string
+                slug type=string
+                price type=number
+                beds type=number
+                baths type=number
+                sqft type=number
+                city type=string
+                image type=string format=image
+                status type=string
+                order type=number
+            }
+            required Title slug
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/restaurant/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.1"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.3.0",
-    "@jxsuite/runtime": "^6.2.0"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/restaurant/project.jxn

@@ -0,0 +1,93 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Bistro & Café"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.json" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="A neighborhood bistro and café serving seasonal plates, house pastries, and small-batch coffee."
+    link rel=icon href="/favicon.svg"
+    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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Mulish:wght@300;400;500;600;700;800&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#bd5a34"
+    --color-primary-hover "#a44827"
+    --color-amber "#c98a3c"
+    --color-ink "#241b14"
+    --color-espresso "#1e150f"
+    --color-bg-dark "#1e150f"
+    --color-bg-cream "#efe3d1"
+    --color-bg-paper "#f6ecdb"
+    --color-bg-white "#fffaf2"
+    --color-text-primary "#2a1f17"
+    --color-text-white "#f6ecdb"
+    --color-text-muted "#7c6a58"
+    --color-border "#e2d5bf"
+    --color-border-strong "#cbb99d"
+    --color-accent "#bd5a34"
+    --font-heading "'Playfair Display', Georgia, 'Times New Roman', serif"
+    --font-body "'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif"
+    --max-width "1200px"
+    --max-width-wide "1320px"
+    --max-width-narrow "780px"
+    --radius "0.25rem"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.7"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-paper)"
+    "& a" {
+        color "var(--color-primary)"
+        textUnderlineOffset "0.2em"
+        textDecorationColor "var(--color-border-strong)"
+    }
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    menu {
+        source "./content/menu/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                name type=string
+                course type=string
+                price type=string
+                description type=string
+                image type=string format=image
+                order type=number
+            }
+            required name course
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}