@jxsuite/starters 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/starters",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Starter site templates for new Jx projects",
   "license": "MIT",
   "repository": {
@@ -26,12 +26,12 @@
     "test:coverage": "bun test --isolate --coverage"
   },
   "dependencies": {
-    "@jxsuite/protocol": "^6.2.5"
+    "@jxsuite/protocol": "^6.3.0"
   },
   "devDependencies": {
-    "@jxsuite/parser": "^4.3.3",
-    "@jxsuite/runtime": "^6.2.2",
-    "@jxsuite/schema": "^5.5.0",
+    "@jxsuite/parser": "^4.3.4",
+    "@jxsuite/runtime": "^6.3.0",
+    "@jxsuite/schema": "^5.6.0",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1"
   }

package/sites/blog/components/bl-author-bio.jxn

@@ -0,0 +1,64 @@
+/- kdl-version 2
+
+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"
+    }
+    div {
+        style display=flex gap="1.5rem" alignItems=center {
+            @--sm flexDirection=column textAlign=center
+        }
+        img 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)"
+            }
+        }
+        div {
+            div "Written by · ${state.role}" {
+                style {
+                    fontFamily "var(--font-body)"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    fontSize "0.7rem"
+                    fontWeight "600"
+                    color "var(--color-primary)"
+                    marginBottom "0.4rem"
+                }
+            }
+            div "${state.name}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.5rem"
+                    fontWeight "700"
+                    letterSpacing "-0.01em"
+                    margin "0 0 0.4rem"
+                }
+            }
+            p "${state.bio}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-heading)"
+                    fontStyle italic
+                    color "var(--color-text-muted)"
+                    fontSize "1.1rem"
+                    lineHeight "1.6"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+/- kdl-version 2
+
+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
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.6rem"
+            fontWeight "600"
+            margin "0 0 1.25rem"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start
+        input 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)"
+            }
+        }
+        input 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)"
+            }
+        }
+        textarea 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)"
+            }
+        }
+        button type=submit "${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)"
+            }
+        }
+        p "${state.note}" {
+            style {
+                display "${state.note ? 'block' : 'none'}"
+                fontSize "0.85rem"
+                color "var(--color-text-muted)"
+                margin "0"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+/- kdl-version 2
+
+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)"
+    }
+    h3 "${state.heading}" {
+        style fontFamily="var(--font-heading)" fontSize="1.4rem" fontWeight="600" margin="0 0 1rem"
+    }
+    p "${state.intro}" {
+        style margin="0 0 0.5rem" color="var(--color-text-muted)"
+    }
+    p {
+        style margin="0 0 1.25rem"
+        a href="mailto:${state.email}" "${state.email}" {
+            style color="var(--color-primary)" textDecoration=none fontWeight="600"
+        }
+    }
+    p "${state.note}" {
+        style margin="0" color="var(--color-text-muted)"
+    }
+}

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

@@ -0,0 +1,52 @@
+/- kdl-version 2
+
+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
+    }
+    div {
+        style maxWidth="var(--max-width-narrow)" margin="0 auto"
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(2rem, 5vw, 3.25rem)"
+                fontWeight "700"
+                lineHeight "1.05"
+                letterSpacing "-0.02em"
+                margin "0 0 1rem"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontStyle italic
+                fontSize "1.2rem"
+                lineHeight "1.6"
+                opacity "0.8"
+                margin "0 auto 2rem"
+                maxWidth "46ch"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta} →" {
+            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"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,85 @@
+/- kdl-version 2
+
+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"
+    }
+    div {
+        style maxWidth="var(--max-width)" margin="0 auto" textAlign=center
+        div "${state.brand}" {
+            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)"
+            }
+        }
+        p "${state.tagline}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontStyle italic
+                fontSize "1.15rem"
+                color "var(--color-text-muted)"
+                margin "0 auto 1.75rem"
+                maxWidth "42ch"
+            }
+        }
+        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"
+            }
+            a href="/#latest" Essays {
+                style color="var(--color-text-primary)" textDecoration=none {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/about/" About {
+                style color="var(--color-text-primary)" textDecoration=none {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/contact/" Contact {
+                style color="var(--color-text-primary)" textDecoration=none {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="mailto:${state.email}" "${state.email}" {
+                style color="var(--color-text-primary)" textDecoration=none {
+                    :hover color="var(--color-primary)"
+                }
+            }
+        }
+        p "© The Long Field · Set in Fraunces & Newsreader · Built with Jx" {
+            style {
+                margin "1.75rem 0 0"
+                fontFamily "var(--font-body)"
+                fontSize "0.72rem"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                color "var(--color-text-muted)"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,111 @@
+/- kdl-version 2
+
+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)"
+    }
+    div {
+        style maxWidth="var(--max-width)" margin="0 auto"
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "1.25rem"
+                marginBottom "clamp(1.25rem, 3vw, 2rem)"
+            }
+            span {
+                style flex="1" height="1px" backgroundColor="var(--color-rule)"
+            }
+            span "${state.edition}" {
+                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"
+                }
+            }
+            span {
+                style flex="1" height="1px" backgroundColor="var(--color-rule)"
+            }
+        }
+        h1 "${state.heading}" {
+            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)"
+            }
+        }
+        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"
+            }
+            p "${state.subheading}" {
+                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)"
+                }
+            }
+            p "${state.colophon}" {
+                style {
+                    fontFamily "var(--font-body)"
+                    fontSize "0.76rem"
+                    fontWeight "500"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    color "var(--color-text-muted)"
+                    textAlign center
+                    margin "0"
+                }
+            }
+            a href="${state.ctaHref}" "${state.cta} ↓" {
+                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"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,62 @@
+/- kdl-version 2
+
+bl-nav {
+    style {
+        position sticky
+        top "0"
+        zIndex "50"
+        display block
+        backgroundColor "var(--color-paper)"
+        borderBottom "1.5px solid var(--color-rule)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "0.55rem 1.5rem"
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1rem"
+        }
+        a href="/" "The Long Field" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontWeight "700"
+                fontSize "1.05rem"
+                letterSpacing "0.01em"
+                color "var(--color-text-primary)"
+                textDecoration none
+                whiteSpace nowrap
+            }
+        }
+        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"
+            }
+            a href="/#latest" Essays {
+                style color="var(--color-text-primary)" textDecoration=none transition="color 0.15s" {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/about/" About {
+                style color="var(--color-text-primary)" textDecoration=none transition="color 0.15s" {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/contact/" Subscribe {
+                style color="var(--color-primary)" textDecoration=none transition="opacity 0.15s" {
+                    :hover opacity="0.65"
+                }
+            }
+        }
+    }
+}

package/sites/blog/components/bl-newsletter-cta.jxn

@@ -0,0 +1,104 @@
+/- kdl-version 2
+
+bl-newsletter-cta {
+    state {
+        eyebrow "The Sunday Dispatch"
+        heading "One essay, most Sundays."
+        text "Field notes on design, technology, and craft — sent when there's something worth saying. No noise, unsubscribe anytime."
+        placeholder you@example.com
+        cta Subscribe
+        note "Demo form — wire it to your email provider in components/bl-newsletter-cta.json."
+    }
+    style {
+        display block
+        backgroundColor "var(--color-ink)"
+        color "var(--color-text-white)"
+        padding "clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem)"
+    }
+    div {
+        style maxWidth="var(--max-width-narrow)" margin="0 auto" textAlign=center
+        p "${state.eyebrow}" {
+            style {
+                display "${state.eyebrow ? 'block' : 'none'}"
+                fontFamily "var(--font-body)"
+                fontSize "0.74rem"
+                fontWeight "500"
+                textTransform uppercase
+                letterSpacing "0.24em"
+                color "var(--color-text-white)"
+                opacity "0.6"
+                margin "0 0 1.25rem"
+            }
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontWeight "700"
+                fontSize "clamp(2rem, 5vw, 3.2rem)"
+                lineHeight "1.05"
+                letterSpacing "-0.02em"
+                margin "0 0 1rem"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontStyle italic
+                fontSize "1.2rem"
+                lineHeight "1.6"
+                opacity "0.8"
+                margin "0 auto 2rem"
+                maxWidth "48ch"
+            }
+        }
+        form action="#" method=post {
+            style {
+                display flex
+                gap "0"
+                maxWidth "440px"
+                margin "0 auto"
+                borderBottom "1.5px solid rgba(246, 241, 231, 0.5)"
+                @--sm flexDirection=column gap="1rem" borderBottom=none
+            }
+            input type=email name=email placeholder="${state.placeholder}" required="true" aria-label="Email address" {
+                style {
+                    flex "1"
+                    padding "0.75rem 0.25rem"
+                    border none
+                    borderBottom "1.5px solid transparent"
+                    backgroundColor transparent
+                    color "var(--color-text-white)"
+                    fontSize "1.05rem"
+                    fontFamily "var(--font-heading)"
+                    outline none
+                    @--sm borderBottom="1.5px solid rgba(246, 241, 231, 0.5)" textAlign=center
+                }
+            }
+            button type=submit "${state.cta} →" {
+                style {
+                    backgroundColor transparent
+                    color "var(--color-text-white)"
+                    padding "0.75rem 0.5rem"
+                    border none
+                    fontFamily "var(--font-body)"
+                    fontSize "0.8rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    cursor pointer
+                    whiteSpace nowrap
+                    transition "opacity 0.15s"
+                    :hover opacity="0.6"
+                }
+            }
+        }
+        p "${state.note}" {
+            style {
+                display "${state.note ? 'block' : 'none'}"
+                fontSize "0.75rem"
+                opacity "0.5"
+                margin "1.5rem 0 0"
+            }
+        }
+    }
+}