@jxsuite/starters 3.4.0 → 3.5.0

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} ↓"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,90 +0,0 @@
-{
-  "tagName": "bl-nav",
-  "style": {
-    "position": "sticky",
-    "top": "0",
-    "zIndex": "50",
-    "display": "block",
-    "backgroundColor": "var(--color-paper)",
-    "borderBottom": "1.5px solid var(--color-rule)"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "0.55rem 1.5rem",
-        "display": "flex",
-        "alignItems": "center",
-        "justifyContent": "space-between",
-        "gap": "1rem"
-      },
-      "children": [
-        {
-          "tagName": "a",
-          "attributes": { "href": "/" },
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontWeight": "700",
-            "fontSize": "1.05rem",
-            "letterSpacing": "0.01em",
-            "color": "var(--color-text-primary)",
-            "textDecoration": "none",
-            "whiteSpace": "nowrap"
-          },
-          "textContent": "The Long Field"
-        },
-        {
-          "tagName": "nav",
-          "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "gap": "1.75rem",
-            "fontFamily": "var(--font-body)",
-            "fontSize": "0.72rem",
-            "fontWeight": "500",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.16em",
-            "@--sm": { "gap": "1.1rem" }
-          },
-          "children": [
-            {
-              "tagName": "a",
-              "attributes": { "href": "/#latest" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "transition": "color 0.15s",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Essays"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
-              "style": {
-                "color": "var(--color-text-primary)",
-                "textDecoration": "none",
-                "transition": "color 0.15s",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "About"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/contact/" },
-              "style": {
-                "color": "var(--color-primary)",
-                "textDecoration": "none",
-                "transition": "opacity 0.15s",
-                ":hover": { "opacity": "0.65" }
-              },
-              "textContent": "Subscribe"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}