@jxsuite/starters 0.34.0

package/sites/blog/layouts/post.json

@@ -0,0 +1,15 @@
+{
+  "tagName": "div",
+  "$layout": "./layouts/base.json",
+  "children": [
+    {
+      "tagName": "article",
+      "style": {
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto",
+        "padding": "clamp(2.5rem, 6vw, 4.5rem) 1.5rem"
+      },
+      "children": [{ "tagName": "slot" }]
+    }
+  ]
+}

package/sites/blog/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "the-long-field",
+  "private": true,
+  "description": "A personal editorial blog — essays and field notes on design, technology, and the craft of making things well.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "jx build",
+    "dev": "jx dev"
+  },
+  "devDependencies": {
+    "@jxsuite/compiler": "^0.19.0",
+    "@jxsuite/runtime": "^0.19.0"
+  }
+}

package/sites/blog/pages/[slug].json

@@ -0,0 +1,148 @@
+{
+  "$layout": "./layouts/post.json",
+  "$paths": {
+    "contentType": "posts",
+    "param": "slug",
+    "field": "id"
+  },
+  "title": "${state.entry.data.title} — The Long Field",
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": {
+        "name": "description",
+        "content": "${state.entry.data.excerpt}"
+      }
+    }
+  ],
+  "state": {
+    "entry": {
+      "$prototype": "ContentEntry",
+      "contentType": "posts",
+      "field": "id",
+      "id": { "$ref": "#/$params/slug" },
+      "$src": "@jxsuite/parser/ContentEntry.class.json"
+    }
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "href": "/" },
+      "style": {
+        "display": "inline-flex",
+        "alignItems": "center",
+        "gap": "0.4rem",
+        "color": "var(--color-primary)",
+        "textDecoration": "none",
+        "fontWeight": "600",
+        "fontSize": "0.95rem",
+        "marginBottom": "2rem",
+        ":hover": { "textDecoration": "underline" }
+      },
+      "textContent": "← All writing"
+    },
+    {
+      "tagName": "header",
+      "style": { "marginBottom": "2rem" },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "marginBottom": "1.1rem" },
+          "children": [
+            { "tagName": "bl-tag-pill", "$props": { "label": "${state.entry.data.tag}" } }
+          ]
+        },
+        {
+          "tagName": "h1",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(2.1rem, 5vw, 3.2rem)",
+            "fontWeight": "600",
+            "lineHeight": "1.1",
+            "letterSpacing": "-0.02em",
+            "margin": "0 0 1rem",
+            "color": "var(--color-text-primary)"
+          },
+          "textContent": "${state.entry.data.title}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.35rem",
+            "lineHeight": "1.5",
+            "color": "var(--color-text-muted)",
+            "fontStyle": "italic",
+            "margin": "0 0 1.5rem"
+          },
+          "textContent": "${state.entry.data.excerpt}"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "0.6rem",
+            "fontSize": "0.9rem",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.06em",
+            "color": "var(--color-text-muted)",
+            "borderTop": "1px solid var(--color-border)",
+            "paddingTop": "1.25rem"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": { "fontWeight": "600", "color": "var(--color-text-primary)" },
+              "textContent": "${state.entry.data.author}"
+            },
+            { "tagName": "span", "textContent": "·" },
+            { "tagName": "span", "textContent": "${state.entry.data.date}" }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "img",
+      "attributes": {
+        "src": "${state.entry.data.cover}",
+        "alt": "${state.entry.data.title}",
+        "loading": "lazy"
+      },
+      "style": {
+        "width": "100%",
+        "aspectRatio": "16 / 9",
+        "objectFit": "cover",
+        "borderRadius": "var(--radius)",
+        "marginBottom": "2.5rem",
+        "display": "${state.entry.data.cover ? 'block' : 'none'}"
+      }
+    },
+    {
+      "tagName": "bl-prose",
+      "children": "${state.entry.$children}"
+    },
+    {
+      "tagName": "hr",
+      "style": {
+        "border": "none",
+        "borderTop": "1px solid var(--color-border)",
+        "margin": "3rem 0 2.5rem"
+      }
+    },
+    {
+      "tagName": "bl-author-bio",
+      "$props": {
+        "name": "${state.entry.data.author}",
+        "role": "Writer & editor",
+        "bio": "Marren Oda writes The Long Field — slow essays on design, technology, and the craft of making things well.",
+        "avatar": "/images/author.jpg"
+      }
+    },
+    {
+      "tagName": "div",
+      "style": { "marginTop": "2.5rem" },
+      "children": [{ "tagName": "bl-newsletter-cta" }]
+    }
+  ]
+}

package/sites/blog/pages/about.md

@@ -0,0 +1,32 @@
+---
+title: "About — The Long Field"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::bl-section-header{props.eyebrow="About" props.heading="Field notes from the workbench" props.subheading="A one-person publication about design, technology, and making things that last."}
+:::::
+
+:::::section{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+:::bl-prose
+
+The Long Field started as a folder of half-finished notes — things I wanted to think through but had nowhere to put. Eventually the folder got big enough that I gave it a name and a front door.
+
+It is not a content strategy. There is no posting schedule I feel guilty about missing, no growth target, no funnel. It is a place to write slowly and in public about the small number of things I actually care about: clear language, quiet software, and the discipline of finishing work properly.
+
+## What you'll find here
+
+Most essays land in one of three fields. **Design** — how things are made, and why so much of it is made badly. **Technology** — the tools we use to think, and the ones that think for us. And **craft** — the unglamorous, essential work of revision, attention, and doing a thing until it is right.
+
+I write for people who would rather read one careful essay than ten quick takes. If that's you, welcome.
+
+## How it's made
+
+This site is built with Jx and published as plain, fast HTML. No trackers follow you around, no popups interrupt you, and the whole thing is designed to get out of the way so you can read. That's the point of the place.
+:::
+
+::::div{style.marginTop="2.5rem"}
+::bl-author-bio{props.name="Marren Oda" props.role="Writer & editor" props.bio="I've spent fifteen years editing other people's words and a lifetime overthinking my own. The Long Field is where I finally write them down." props.avatar="/images/author.jpg"}
+::::
+:::::
+
+::bl-cta{props.heading="Read along" props.text="New essays land most Sundays. Subscribe and I'll send them straight to your inbox — nothing else." props.cta="Subscribe" props.ctaHref="/contact/"}

package/sites/blog/pages/contact.md

@@ -0,0 +1,18 @@
+---
+title: "Subscribe & Contact — The Long Field"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::bl-section-header{props.eyebrow="Stay in touch" props.heading="Subscribe & say hello" props.subheading="Get new essays in your inbox, or just send a note — I read everything."}
+:::::
+
+:::::section{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::bl-newsletter-cta
+:::::
+
+:::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="0 1.5rem clamp(3.5rem, 8vw, 6rem)"}
+::::div{style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
+::bl-contact-form{}
+::bl-contact-info{}
+::::
+:::::

package/sites/blog/pages/index.md

@@ -0,0 +1,48 @@
+---
+title: "The Long Field — Essays on design, technology & craft"
+state:
+  posts:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: posts
+    sort:
+      field: order
+      order: asc
+---
+
+::bl-masthead{props.eyebrow="Essays · Field notes · Since 2021" props.heading="The Long Field" props.subheading="Slow essays on design, technology, and the craft of making things well — written by hand, published most Sundays." props.cta="Read the latest" props.ctaHref="#latest" props.cta2="About the field" props.cta2Href="/about/" props.bg="/images/hero.jpg"}
+
+::::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+:::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1.4fr" style.gap="clamp(2rem, 5vw, 4rem)" style.alignItems="center" style.--md.gridTemplateColumns="1fr"}
+::img{src="/images/author.jpg" alt="Marren Oda, writer and editor" loading="lazy" style.width="100%" style.height="auto" style.borderRadius="var(--radius)" style.boxShadow="0 12px 40px rgba(17,17,17,0.12)"}
+
+::::div{style.fontSize="1.15rem" style.lineHeight="1.8"}
+
+### A field to think out loud in
+
+The Long Field is a one-person publication about design, technology, and the slow craft of making things well. No hot takes, no hustle — just field notes from the workbench, written when there's something worth saying.
+
+I'm Marren, a writer and editor. I care about clear prose, quiet tools, and the kind of work that ages well. If that's your kind of thing, you're in the right place.
+
+:::a{href="/about/" style.display="inline-block" style.marginTop="0.5rem" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+More about the field →
+:::
+::::
+:::::
+::::::
+
+:::::section{id="latest" style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::bl-section-header{props.eyebrow="Latest writing" props.heading="Recent essays & field notes"}
+
+::::bl-post-list
+:::Array{items.ref="#/state/posts"}
+::bl-post-card{props.title="${item.data.title}" props.excerpt="${item.data.excerpt}" props.date="${item.data.date}" props.tag="${item.data.tag}" props.cover="${item.data.cover}" props.href="/${item.id}/"}
+:::
+::::
+:::::
+
+:::::section{style.padding="0 1.5rem clamp(3.5rem, 8vw, 6rem)"}
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
+::bl-newsletter-cta
+::::
+:::::

package/sites/blog/project.json

@@ -0,0 +1,107 @@
+{
+  "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:opsz,wght@9..144,500;9..144,600;9..144,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#0ea5e9",
+    "--color-primary-hover": "#0284c7",
+    "--color-ink": "#111111",
+    "--color-bg-dark": "#111111",
+    "--color-bg-cream": "#f6f5f2",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#141414",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#6b7280",
+    "--color-border": "#e5e4e0",
+    "--color-accent": "#0ea5e9",
+    "--font-heading": "'Fraunces', Georgia, 'Times New Roman', serif",
+    "--font-body": "'Newsreader', Georgia, 'Times New Roman', serif",
+    "--max-width": "1200px",
+    "--max-width-narrow": "740px",
+    "--radius": "0.5rem",
+    "margin": "0",
+    "padding": "0",
+    "fontFamily": "var(--font-body)",
+    "lineHeight": "1.7",
+    "color": "var(--color-text-primary)",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "imports": {
+    "Markdown": "@jxsuite/parser/Markdown.class.json",
+    "ContentCollection": "@jxsuite/parser/ContentCollection.class.json",
+    "ContentEntry": "@jxsuite/parser/ContentEntry.class.json"
+  },
+  "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
+  },
+  "contentTypes": {
+    "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"
+  }
+}

package/sites/blog/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#0ea5e9"/>
+  <path d="M11 7v14h9" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 11h7M15 15h5" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" opacity="0.85"/>
+  <path d="M8 25h16" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" opacity="0.6"/>
+</svg>

package/sites/course/components/co-application.json

@@ -0,0 +1,170 @@
+{
+  "tagName": "co-application",
+  "state": {
+    "heading": "Start your application"
+  },
+  "style": {
+    "display": "block"
+  },
+  "children": [
+    {
+      "tagName": "form",
+      "attributes": { "action": "#", "method": "post" },
+      "style": { "display": "grid", "gap": "1rem", "alignContent": "start", "marginTop": "1.5rem" },
+      "children": [
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "text",
+            "name": "name",
+            "placeholder": "Your name",
+            "required": "true",
+            "aria-label": "Your name"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem"
+          }
+        },
+        {
+          "tagName": "input",
+          "attributes": {
+            "type": "email",
+            "name": "email",
+            "placeholder": "Email address",
+            "required": "true",
+            "aria-label": "Email address"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr 1fr",
+            "gap": "1rem",
+            "@--sm": { "gridTemplateColumns": "1fr" }
+          },
+          "children": [
+            {
+              "tagName": "select",
+              "attributes": { "name": "cohort", "aria-label": "Preferred cohort" },
+              "style": {
+                "width": "100%",
+                "padding": "0.8rem 0.95rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "backgroundColor": "var(--color-bg-white)"
+              },
+              "children": [
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "", "disabled": "true", "selected": "true" },
+                  "textContent": "Preferred cohort"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "fall" },
+                  "textContent": "Fall 2026 · Sept 8"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "winter" },
+                  "textContent": "Winter 2027 · Jan 12"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "unsure" },
+                  "textContent": "Not sure yet"
+                }
+              ]
+            },
+            {
+              "tagName": "select",
+              "attributes": { "name": "experience", "aria-label": "Coding experience" },
+              "style": {
+                "width": "100%",
+                "padding": "0.8rem 0.95rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "backgroundColor": "var(--color-bg-white)"
+              },
+              "children": [
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "", "disabled": "true", "selected": "true" },
+                  "textContent": "Coding experience"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "none" },
+                  "textContent": "Complete beginner"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "some" },
+                  "textContent": "Some self-taught"
+                },
+                {
+                  "tagName": "option",
+                  "attributes": { "value": "cs" },
+                  "textContent": "CS / bootcamp background"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "textarea",
+          "attributes": {
+            "name": "goals",
+            "rows": "3",
+            "placeholder": "What are you hoping to build or become?",
+            "aria-label": "Your goals"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.8rem 0.95rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit"
+          }
+        },
+        {
+          "tagName": "button",
+          "attributes": { "type": "submit" },
+          "textContent": "Submit Application",
+          "style": {
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.9rem 1.75rem",
+            "border": "none",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontWeight": "700",
+            "cursor": "pointer",
+            "justifySelf": "start",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+          }
+        },
+        {
+          "tagName": "p",
+          "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
+          "textContent": "This is a demo form. Wire it to your CRM or email in pages/enroll.md."
+        }
+      ]
+    }
+  ]
+}

package/sites/course/components/co-cta.json

@@ -0,0 +1,74 @@
+{
+  "tagName": "co-cta",
+  "state": {
+    "heading": "",
+    "text": "",
+    "cta": "Enroll Now",
+    "ctaHref": "/enroll/",
+    "note": ""
+  },
+  "style": {
+    "display": "block",
+    "backgroundImage": "linear-gradient(120deg, var(--color-bg-dark) 0%, #1e293b 55%, var(--color-primary) 130%)",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(3.5rem, 8vw, 5.5rem) 1.5rem",
+    "textAlign": "center"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto" },
+      "children": [
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.9rem, 4vw, 2.75rem)",
+            "fontWeight": "800",
+            "lineHeight": "1.15",
+            "letterSpacing": "-0.02em",
+            "margin": "0 0 1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.1rem",
+            "lineHeight": "1.7",
+            "opacity": "0.85",
+            "margin": "0 0 2rem"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.ctaHref}" },
+          "style": {
+            "display": "inline-block",
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.9rem 2.25rem",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1.05rem",
+            "fontWeight": "700",
+            "textDecoration": "none",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+          },
+          "textContent": "${state.cta}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.note ? 'block' : 'none'}",
+            "margin": "1.25rem 0 0",
+            "fontSize": "0.9rem",
+            "opacity": "0.7"
+          },
+          "textContent": "${state.note}"
+        }
+      ]
+    }
+  ]
+}