@jxsuite/starters 3.3.2 → 3.5.0

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.jxn" 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/components/bl-author-bio.json

@@ -1,86 +0,0 @@
-{
-  "tagName": "bl-author-bio",
-  "state": {
-    "name": "",
-    "role": "Writer & editor",
-    "bio": "",
-    "avatar": { "type": "string", "format": "image", "default": "" }
-  },
-  "style": {
-    "display": "block",
-    "borderTop": "1.5px solid var(--color-rule)",
-    "borderBottom": "1.5px solid var(--color-rule)",
-    "padding": "1.75rem 0"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "display": "flex",
-        "gap": "1.5rem",
-        "alignItems": "center",
-        "@--sm": { "flexDirection": "column", "textAlign": "center" }
-      },
-      "children": [
-        {
-          "tagName": "img",
-          "attributes": {
-            "src": "${state.avatar}",
-            "alt": "${state.name}",
-            "loading": "lazy"
-          },
-          "style": {
-            "display": "${state.avatar ? 'block' : 'none'}",
-            "width": "84px",
-            "height": "84px",
-            "borderRadius": "999px",
-            "objectFit": "cover",
-            "flexShrink": "0",
-            "filter": "grayscale(1)"
-          }
-        },
-        {
-          "tagName": "div",
-          "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "fontFamily": "var(--font-body)",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.16em",
-                "fontSize": "0.7rem",
-                "fontWeight": "600",
-                "color": "var(--color-primary)",
-                "marginBottom": "0.4rem"
-              },
-              "textContent": "Written by · ${state.role}"
-            },
-            {
-              "tagName": "div",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.5rem",
-                "fontWeight": "700",
-                "letterSpacing": "-0.01em",
-                "margin": "0 0 0.4rem"
-              },
-              "textContent": "${state.name}"
-            },
-            {
-              "tagName": "p",
-              "style": {
-                "margin": "0",
-                "fontFamily": "var(--font-heading)",
-                "fontStyle": "italic",
-                "color": "var(--color-text-muted)",
-                "fontSize": "1.1rem",
-                "lineHeight": "1.6"
-              },
-              "textContent": "${state.bio}"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/sites/blog/components/bl-contact-form.json

@@ -1,114 +0,0 @@
-{
-  "tagName": "bl-contact-form",
-  "state": {
-    "heading": "Send a note",
-    "cta": "Send note",
-    "note": "This is a demo form. Wire it to your email provider or inbox in components/bl-contact-form.json."
-  },
-  "style": {
-    "display": "block"
-  },
-  "children": [
-    {
-      "tagName": "h3",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.6rem",
-        "fontWeight": "600",
-        "margin": "0 0 1.25rem"
-      },
-      "textContent": "${state.heading}"
-    },
-    {
-      "tagName": "form",
-      "attributes": { "action": "#", "method": "post" },
-      "style": { "display": "grid", "gap": "1rem", "alignContent": "start" },
-      "children": [
-        {
-          "tagName": "input",
-          "attributes": {
-            "type": "text",
-            "name": "name",
-            "placeholder": "Your name",
-            "required": "true",
-            "aria-label": "Your name"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontFamily": "inherit",
-            "backgroundColor": "var(--color-bg-white)"
-          }
-        },
-        {
-          "tagName": "input",
-          "attributes": {
-            "type": "email",
-            "name": "email",
-            "placeholder": "Email address",
-            "required": "true",
-            "aria-label": "Email address"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontFamily": "inherit",
-            "backgroundColor": "var(--color-bg-white)"
-          }
-        },
-        {
-          "tagName": "textarea",
-          "attributes": {
-            "name": "message",
-            "rows": "5",
-            "placeholder": "What's on your mind?",
-            "aria-label": "Message"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.75rem 0.9rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontFamily": "inherit",
-            "backgroundColor": "var(--color-bg-white)"
-          }
-        },
-        {
-          "tagName": "button",
-          "attributes": { "type": "submit" },
-          "textContent": "${state.cta}",
-          "style": {
-            "backgroundColor": "var(--color-primary)",
-            "color": "var(--color-text-white)",
-            "padding": "0.85rem 1.5rem",
-            "border": "none",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontWeight": "600",
-            "cursor": "pointer",
-            "justifySelf": "start",
-            "transition": "background-color 0.15s",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
-          }
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "display": "${state.note ? 'block' : 'none'}",
-            "fontSize": "0.85rem",
-            "color": "var(--color-text-muted)",
-            "margin": "0"
-          },
-          "textContent": "${state.note}"
-        }
-      ]
-    }
-  ]
-}

package/sites/blog/components/bl-contact-info.json

@@ -1,54 +0,0 @@
-{
-  "tagName": "bl-contact-info",
-  "state": {
-    "heading": "Elsewhere",
-    "intro": "For letters, pitches, or corrections:",
-    "email": "hello@thelongfield.co",
-    "note": "New essays publish most Sundays. Replies to the newsletter come straight to me."
-  },
-  "style": {
-    "display": "block",
-    "padding": "2rem",
-    "backgroundColor": "var(--color-bg-cream)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)"
-  },
-  "children": [
-    {
-      "tagName": "h3",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.4rem",
-        "fontWeight": "600",
-        "margin": "0 0 1rem"
-      },
-      "textContent": "${state.heading}"
-    },
-    {
-      "tagName": "p",
-      "style": { "margin": "0 0 0.5rem", "color": "var(--color-text-muted)" },
-      "textContent": "${state.intro}"
-    },
-    {
-      "tagName": "p",
-      "style": { "margin": "0 0 1.25rem" },
-      "children": [
-        {
-          "tagName": "a",
-          "attributes": { "href": "mailto:${state.email}" },
-          "style": {
-            "color": "var(--color-primary)",
-            "textDecoration": "none",
-            "fontWeight": "600"
-          },
-          "textContent": "${state.email}"
-        }
-      ]
-    },
-    {
-      "tagName": "p",
-      "style": { "margin": "0", "color": "var(--color-text-muted)" },
-      "textContent": "${state.note}"
-    }
-  ]
-}

package/sites/blog/components/bl-cta.json

@@ -1,68 +0,0 @@
-{
-  "tagName": "bl-cta",
-  "state": {
-    "heading": "",
-    "text": "",
-    "cta": "Subscribe",
-    "ctaHref": "/contact/"
-  },
-  "style": {
-    "display": "block",
-    "backgroundColor": "var(--color-bg-dark)",
-    "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(2rem, 5vw, 3.25rem)",
-            "fontWeight": "700",
-            "lineHeight": "1.05",
-            "letterSpacing": "-0.02em",
-            "margin": "0 0 1rem"
-          },
-          "textContent": "${state.heading}"
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontStyle": "italic",
-            "fontSize": "1.2rem",
-            "lineHeight": "1.6",
-            "opacity": "0.8",
-            "margin": "0 auto 2rem",
-            "maxWidth": "46ch"
-          },
-          "textContent": "${state.text}"
-        },
-        {
-          "tagName": "a",
-          "attributes": { "href": "${state.ctaHref}" },
-          "style": {
-            "display": "inline-block",
-            "color": "var(--color-text-white)",
-            "fontFamily": "var(--font-body)",
-            "fontSize": "0.82rem",
-            "fontWeight": "600",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.18em",
-            "textDecoration": "none",
-            "borderBottom": "1.5px solid var(--color-primary)",
-            "paddingBottom": "0.35rem",
-            "transition": "opacity 0.15s",
-            ":hover": { "opacity": "0.65" }
-          },
-          "textContent": "${state.cta} →"
-        }
-      ]
-    }
-  ]
-}

package/sites/blog/components/bl-footer.json

@@ -1,122 +0,0 @@
-{
-  "tagName": "bl-footer",
-  "state": {
-    "brand": "The Long Field",
-    "tagline": "Slow essays on design, technology, and the craft of making things well.",
-    "email": "hello@thelongfield.co",
-    "cadence": "A new essay most Sundays."
-  },
-  "style": {
-    "display": "block",
-    "backgroundColor": "var(--color-paper)",
-    "borderTop": "1.5px solid var(--color-rule)",
-    "padding": "clamp(3rem, 6vw, 4.5rem) 1.5rem 2.5rem"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "textAlign": "center"
-      },
-      "children": [
-        {
-          "tagName": "div",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontWeight": "900",
-            "fontSize": "clamp(2rem, 6vw, 3.25rem)",
-            "letterSpacing": "-0.03em",
-            "lineHeight": "1",
-            "margin": "0 0 1rem",
-            "color": "var(--color-text-primary)"
-          },
-          "textContent": "${state.brand}"
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontStyle": "italic",
-            "fontSize": "1.15rem",
-            "color": "var(--color-text-muted)",
-            "margin": "0 auto 1.75rem",
-            "maxWidth": "42ch"
-          },
-          "textContent": "${state.tagline}"
-        },
-        {
-          "tagName": "nav",
-          "style": {
-            "display": "flex",
-            "justifyContent": "center",
-            "flexWrap": "wrap",
-            "gap": "1.75rem",
-            "paddingTop": "1.75rem",
-            "borderTop": "1px solid var(--color-border)",
-            "fontFamily": "var(--font-body)",
-            "fontSize": "0.74rem",
-            "fontWeight": "500",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.16em"
-          },
-          "children": [
-            {
-              "tagName": "a",
-              "attributes": { "href": "/#latest" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Essays"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "About"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/contact/" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Contact"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "mailto:${state.email}" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "${state.email}"
-            }
-          ]
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "margin": "1.75rem 0 0",
-            "fontFamily": "var(--font-body)",
-            "fontSize": "0.72rem",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.14em",
-            "color": "var(--color-text-muted)"
-          },
-          "textContent": "© The Long Field · Set in Fraunces & Newsreader · Built with Jx"
-        }
-      ]
-    }
-  ]
-}

package/sites/blog/components/bl-masthead.json

@@ -1,134 +0,0 @@
-{
-  "tagName": "bl-masthead",
-  "state": {
-    "edition": "Field Notes · Vol. IV · Published most Sundays",
-    "heading": "The Long Field",
-    "subheading": "Slow essays on design, technology, and the craft of making things well — written by hand, one at a time.",
-    "colophon": "Est. 2021 · Set in Fraunces & Newsreader · Marren Oda, editor",
-    "cta": "Read the latest",
-    "ctaHref": "#latest"
-  },
-  "style": {
-    "display": "block",
-    "backgroundColor": "var(--color-paper)",
-    "padding": "clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(2.5rem, 6vw, 4rem)"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": { "maxWidth": "var(--max-width)", "margin": "0 auto" },
-      "children": [
-        {
-          "tagName": "div",
-          "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "gap": "1.25rem",
-            "marginBottom": "clamp(1.25rem, 3vw, 2rem)"
-          },
-          "children": [
-            {
-              "tagName": "span",
-              "style": { "flex": "1", "height": "1px", "backgroundColor": "var(--color-rule)" }
-            },
-            {
-              "tagName": "span",
-              "style": {
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.74rem",
-                "fontWeight": "500",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.22em",
-                "color": "var(--color-text-muted)",
-                "textAlign": "center",
-                "whiteSpace": "nowrap",
-                "@--sm": { "whiteSpace": "normal", "letterSpacing": "0.14em" }
-              },
-              "textContent": "${state.edition}"
-            },
-            {
-              "tagName": "span",
-              "style": { "flex": "1", "height": "1px", "backgroundColor": "var(--color-rule)" }
-            }
-          ]
-        },
-        {
-          "tagName": "h1",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontWeight": "900",
-            "fontSize": "clamp(3.2rem, 15vw, 11rem)",
-            "lineHeight": "0.9",
-            "letterSpacing": "-0.035em",
-            "textAlign": "center",
-            "margin": "0",
-            "color": "var(--color-text-primary)"
-          },
-          "textContent": "${state.heading}"
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "marginTop": "clamp(1.5rem, 3vw, 2.25rem)",
-            "paddingTop": "clamp(1.5rem, 3vw, 2.25rem)",
-            "borderTop": "3px double var(--color-rule)",
-            "display": "flex",
-            "flexDirection": "column",
-            "alignItems": "center",
-            "gap": "1.1rem"
-          },
-          "children": [
-            {
-              "tagName": "p",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontStyle": "italic",
-                "fontWeight": "400",
-                "fontSize": "clamp(1.3rem, 3vw, 1.9rem)",
-                "lineHeight": "1.4",
-                "textAlign": "center",
-                "maxWidth": "30ch",
-                "margin": "0",
-                "color": "var(--color-text-primary)"
-              },
-              "textContent": "${state.subheading}"
-            },
-            {
-              "tagName": "p",
-              "style": {
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.76rem",
-                "fontWeight": "500",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.16em",
-                "color": "var(--color-text-muted)",
-                "textAlign": "center",
-                "margin": "0"
-              },
-              "textContent": "${state.colophon}"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "${state.ctaHref}" },
-              "style": {
-                "marginTop": "0.5rem",
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.8rem",
-                "fontWeight": "600",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.16em",
-                "color": "var(--color-primary)",
-                "textDecoration": "none",
-                "borderBottom": "1px solid var(--color-primary)",
-                "paddingBottom": "0.15rem",
-                "transition": "opacity 0.15s",
-                ":hover": { "opacity": "0.6" }
-              },
-              "textContent": "${state.cta} ↓"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}