@jxsuite/starters 3.3.2 → 3.4.0

package/sites/saas/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.2"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.4.0",
-    "@jxsuite/runtime": "^6.2.1"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/saas/project.jxn

@@ -0,0 +1,119 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project Flowlark
+
+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="Flowlark is the modern product platform that helps teams plan, ship, and scale — with pricing that flexes from your first project to your thousandth."
+    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=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#7c74ff"
+    --color-primary-hover "#948dff"
+    --color-ink "#050509"
+    --color-bg-dark "#0a0a14"
+    --color-bg-cream "#14141f"
+    --color-bg-surface "#14141f"
+    --color-bg-white "#0a0a14"
+    --color-bg "#0a0a14"
+    --color-bg-elev "#14141f"
+    --color-bg-elev2 "#1c1c2b"
+    --color-text-primary "#edecf5"
+    --color-text-white "#ffffff"
+    --color-text-muted "#9494ac"
+    --color-border "#262636"
+    --color-line "#262636"
+    --color-accent "#7c74ff"
+    --color-accent-soft "rgba(124, 116, 255, 0.14)"
+    --grad "linear-gradient(120deg, #8b7bff 0%, #22d3ee 55%, #f472b6 100%)"
+    --grad-btn "linear-gradient(120deg, #7c74ff, #a06bff)"
+    --glow "rgba(124, 116, 255, 0.45)"
+    --font-heading "'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif"
+    --font-body "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1200px"
+    --max-width-narrow "820px"
+    --radius "0.9rem"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg)"
+    table {
+        width "100%"
+        borderCollapse collapse
+        fontSize "0.95rem"
+        textAlign left
+        backgroundColor "var(--color-bg-white)"
+        thead {
+            borderBottom "1px solid var(--color-border)"
+            th {
+                padding "1rem 1.1rem"
+                fontFamily "var(--font-heading)"
+                fontSize "0.9rem"
+                fontWeight "600"
+                color "var(--color-text-primary)"
+            }
+        }
+        tbody {
+            tr {
+                borderBottom "1px solid var(--color-border)"
+            }
+            td {
+                padding "0.9rem 1.1rem"
+                color "var(--color-text-muted)"
+                :first-child {
+                    color "var(--color-text-primary)"
+                    fontWeight "600"
+                }
+            }
+        }
+    }
+}
+
+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 {
+    testimonials {
+        source "./content/testimonials/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                quote type=string
+                author type=string
+                company type=string
+                order type=number
+            }
+            required quote author
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/shop/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.2"
+    "@jxsuite/parser": "^4.3.3"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.4.0",
-    "@jxsuite/runtime": "^6.2.1"
+    "@jxsuite/compiler": "^8.5.0",
+    "@jxsuite/runtime": "^6.2.2"
   }
 }

package/sites/shop/project.jxn

@@ -0,0 +1,100 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Cadence Cycles"
+
+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="Cadence Cycles is a neighborhood bike shop — shop road, mountain, gravel, and kids' bikes plus gear, with free shipping over $50, expert fittings, and in-house service."
+    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=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap"
+}
+
+$media {
+    -- "1240px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#0a9d54"
+    --color-primary-hover "#08823f"
+    --color-brand-bright "#26d07c"
+    --color-brand-tint "#e7f8ef"
+    --color-ink "#0d1117"
+    --color-bg-dark "#0d1117"
+    --color-bg-ink-soft "#161c24"
+    --color-bg-cream "#f4f6f5"
+    --color-panel "#eef1f1"
+    --color-bg-white "#ffffff"
+    --color-text-primary "#0d1117"
+    --color-text-secondary "#39424c"
+    --color-text-muted "#69727c"
+    --color-text-white "#ffffff"
+    --color-border "#e3e7e8"
+    --color-line-strong "#ccd3d5"
+    --color-accent "#f59e0b"
+    --color-sale "#e11d48"
+    --color-sale-tint "#ffe4ea"
+    --color-gold "#e8890c"
+    --color-gold-tint "#fdf0d5"
+    --font-heading "'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --font-body "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1240px"
+    --max-width-narrow "760px"
+    --radius "0.9rem"
+    --radius-sm "0.55rem"
+    --radius-lg "1.4rem"
+    --shadow-card "0 1px 2px rgba(13,17,23,0.05), 0 14px 34px -18px rgba(13,17,23,0.22)"
+    --shadow-float "0 34px 80px -34px rgba(13,17,23,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 {
+    product {
+        source "./content/product/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                sku type=string
+                price type=string
+                oldPrice type=string
+                badge type=string
+                category type=string
+                image type=string format=image
+                order type=number
+            }
+            required title sku
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/blog/project.json

@@ -1,140 +0,0 @@
-{
-  "$schema": "./project.schema.json",
-  "name": "The Long Field",
-  "url": "https://example.com",
-  "defaults": {
-    "layout": "./layouts/base.json",
-    "lang": "en"
-  },
-  "$head": [
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "viewport",
-        "content": "width=device-width, initial-scale=1"
-      }
-    },
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "description",
-        "content": "The Long Field — essays and field notes on design, technology, and the craft of making things well."
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "icon",
-        "href": "/favicon.svg"
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "preconnect",
-        "href": "https://fonts.googleapis.com"
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "preconnect",
-        "href": "https://fonts.gstatic.com",
-        "crossorigin": ""
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap"
-      }
-    }
-  ],
-  "$media": {
-    "--": "1200px",
-    "--lg": "(max-width: 1024px)",
-    "--md": "(max-width: 768px)",
-    "--sm": "(max-width: 640px)"
-  },
-  "style": {
-    "--color-primary": "#9a2f1a",
-    "--color-primary-hover": "#7a2412",
-    "--color-ink": "#1c1a17",
-    "--color-bg-dark": "#1c1a17",
-    "--color-bg-cream": "#efe9db",
-    "--color-bg-white": "#f6f1e7",
-    "--color-paper": "#f6f1e7",
-    "--color-text-primary": "#1c1a17",
-    "--color-text-white": "#f6f1e7",
-    "--color-text-muted": "#6f685c",
-    "--color-border": "#d8cfbd",
-    "--color-rule": "#1c1a17",
-    "--color-accent": "#9a2f1a",
-    "--font-heading": "'Fraunces', Georgia, 'Times New Roman', serif",
-    "--font-body": "'Newsreader', Georgia, 'Times New Roman', serif",
-    "--max-width": "1160px",
-    "--max-width-narrow": "680px",
-    "--radius": "0",
-    "margin": "0",
-    "padding": "0",
-    "fontFamily": "var(--font-body)",
-    "fontSize": "19px",
-    "lineHeight": "1.7",
-    "color": "var(--color-text-primary)",
-    "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": {
-    "posts": {
-      "source": "./content/posts/",
-      "format": "Markdown",
-      "schema": {
-        "type": "object",
-        "properties": {
-          "title": {
-            "type": "string"
-          },
-          "excerpt": {
-            "type": "string"
-          },
-          "date": {
-            "type": "string"
-          },
-          "author": {
-            "type": "string"
-          },
-          "tag": {
-            "type": "string"
-          },
-          "cover": {
-            "type": "string",
-            "format": "image"
-          },
-          "order": {
-            "type": "number"
-          }
-        },
-        "required": ["title", "excerpt", "date"]
-      }
-    }
-  },
-  "build": {
-    "outDir": "./dist",
-    "format": "directory",
-    "trailingSlash": "always"
-  },
-  "extensions": ["@jxsuite/parser"]
-}

package/sites/course/project.json

@@ -1,141 +0,0 @@
-{
-  "$schema": "./project.schema.json",
-  "name": "Craft & Code Academy",
-  "url": "https://example.com",
-  "defaults": {
-    "layout": "./layouts/base.json",
-    "lang": "en"
-  },
-  "$head": [
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "viewport",
-        "content": "width=device-width, initial-scale=1"
-      }
-    },
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "description",
-        "content": "Craft & Code Academy is a project-based web development bootcamp — 14 weeks, six guided modules, live mentorship, and a deployed full-stack capstone."
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "icon",
-        "href": "/favicon.svg"
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "preconnect",
-        "href": "https://fonts.googleapis.com"
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "preconnect",
-        "href": "https://fonts.gstatic.com",
-        "crossorigin": ""
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-      }
-    }
-  ],
-  "$media": {
-    "--": "1200px",
-    "--lg": "(max-width: 1024px)",
-    "--md": "(max-width: 768px)",
-    "--sm": "(max-width: 640px)"
-  },
-  "style": {
-    "--color-primary": "#4f46e5",
-    "--color-primary-hover": "#4338ca",
-    "--color-primary-light": "#6366f1",
-    "--color-indigo-050": "#eef2ff",
-    "--color-indigo-soft": "rgba(79, 70, 229, 0.08)",
-    "--color-indigo-line": "rgba(79, 70, 229, 0.16)",
-    "--color-accent": "#a3e635",
-    "--color-accent-cyan": "#22d3ee",
-    "--color-ink": "#0b1020",
-    "--color-terminal": "#0b1020",
-    "--color-terminal-2": "#141c39",
-    "--color-terminal-line": "#243056",
-    "--color-bg-dark": "#0b1020",
-    "--color-bg-cream": "#f4f5fb",
-    "--color-bg-soft": "#f9fafd",
-    "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#0f1424",
-    "--color-ink-2": "#20263f",
-    "--color-text-white": "#ffffff",
-    "--color-text-muted": "#5b6479",
-    "--color-text-faint": "#8a93a8",
-    "--color-border": "#e4e7f2",
-    "--color-border-strong": "#cdd3e6",
-    "--font-heading": "'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
-    "--font-body": "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
-    "--font-mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-    "--max-width": "1200px",
-    "--max-width-narrow": "820px",
-    "--radius": "0.85rem",
-    "--radius-sm": "0.55rem",
-    "margin": "0",
-    "padding": "0",
-    "fontFamily": "var(--font-body)",
-    "lineHeight": "1.6",
-    "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)"
-  },
-  "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": {
-    "modules": {
-      "source": "./content/modules/",
-      "format": "Markdown",
-      "schema": {
-        "type": "object",
-        "properties": {
-          "title": {
-            "type": "string"
-          },
-          "summary": {
-            "type": "string"
-          },
-          "duration": {
-            "type": "string"
-          },
-          "order": {
-            "type": "number"
-          }
-        },
-        "required": ["title", "order"]
-      }
-    }
-  },
-  "build": {
-    "outDir": "./dist",
-    "format": "directory",
-    "trailingSlash": "always"
-  },
-  "extensions": ["@jxsuite/parser"]
-}

package/sites/event/project.json

@@ -1,163 +0,0 @@
-{
-  "$schema": "./project.schema.json",
-  "name": "Horizon Conf 2026",
-  "url": "https://example.com",
-  "defaults": {
-    "layout": "./layouts/base.json",
-    "lang": "en"
-  },
-  "$head": [
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "viewport",
-        "content": "width=device-width, initial-scale=1"
-      }
-    },
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "description",
-        "content": "Horizon Conf 2026 — a one-day tech and design conference. Two stages, hands-on workshops, and the people building what's next. Save the date: June 12, 2026."
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "icon",
-        "href": "/favicon.svg"
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "preconnect",
-        "href": "https://fonts.googleapis.com"
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "preconnect",
-        "href": "https://fonts.gstatic.com",
-        "crossorigin": ""
-      }
-    },
-    {
-      "tagName": "link",
-      "attributes": {
-        "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap"
-      }
-    }
-  ],
-  "$media": {
-    "--": "1200px",
-    "--lg": "(max-width: 1024px)",
-    "--md": "(max-width: 768px)",
-    "--sm": "(max-width: 640px)"
-  },
-  "style": {
-    "--color-primary": "#ff3d9a",
-    "--color-primary-hover": "#ff6bb4",
-    "--color-ink": "#050308",
-    "--color-bg": "#0a0711",
-    "--color-bg-dark": "#0a0711",
-    "--color-bg-cream": "#0f0b1c",
-    "--color-bg-white": "#150f28",
-    "--color-bg-elev": "#150f28",
-    "--color-bg-elev2": "#1e1638",
-    "--color-text-primary": "#f3eefe",
-    "--color-text-white": "#ffffff",
-    "--color-text-muted": "#a99fc8",
-    "--color-border": "#2b2148",
-    "--color-accent": "#22e0ff",
-    "--color-cyan": "#22e0ff",
-    "--color-violet": "#a855f7",
-    "--color-lime": "#c6ff4d",
-    "--grad": "linear-gradient(115deg, #22e0ff 0%, #a855f7 50%, #ff3d9a 100%)",
-    "--grad-btn": "linear-gradient(120deg, #ff3d9a 0%, #a855f7 100%)",
-    "--grad-cyan": "linear-gradient(120deg, #22e0ff 0%, #7c74ff 100%)",
-    "--glow": "rgba(255, 61, 154, 0.5)",
-    "--glow-cyan": "rgba(34, 224, 255, 0.4)",
-    "--font-heading": "'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif",
-    "--font-body": "'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
-    "--max-width": "1200px",
-    "--max-width-narrow": "860px",
-    "--radius": "1rem",
-    "margin": "0",
-    "padding": "0",
-    "fontFamily": "var(--font-body)",
-    "lineHeight": "1.6",
-    "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg)",
-    "h1": {
-      "fontFamily": "var(--font-heading)",
-      "color": "var(--color-text-primary)"
-    },
-    "h2": {
-      "fontFamily": "var(--font-heading)",
-      "color": "var(--color-text-primary)"
-    },
-    "h3": {
-      "fontFamily": "var(--font-heading)",
-      "color": "var(--color-text-primary)"
-    },
-    "h4": {
-      "fontFamily": "var(--font-heading)",
-      "color": "var(--color-text-primary)"
-    },
-    "strong": {
-      "color": "var(--color-text-primary)"
-    },
-    "a": {
-      "color": "var(--color-primary)"
-    }
-  },
-  "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": {
-    "sessions": {
-      "source": "./content/sessions/",
-      "format": "Markdown",
-      "schema": {
-        "type": "object",
-        "properties": {
-          "title": {
-            "type": "string"
-          },
-          "time": {
-            "type": "string"
-          },
-          "track": {
-            "type": "string"
-          },
-          "speaker": {
-            "type": "string"
-          },
-          "order": {
-            "type": "number"
-          }
-        },
-        "required": ["title", "track"]
-      }
-    }
-  },
-  "build": {
-    "outDir": "./dist",
-    "format": "directory",
-    "trailingSlash": "always"
-  },
-  "extensions": ["@jxsuite/parser"]
-}