@jxsuite/starters 0.34.0

package/sites/nonprofit/pages/index.md

@@ -0,0 +1,87 @@
+---
+title: "Rivertown Foundation — Neighbors helping neighbors"
+state:
+  programs:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: programs
+    sort:
+      field: order
+      order: asc
+    limit: 3
+---
+
+::np-hero{props.eyebrow="Rivertown · Est. 2007" props.heading="Together, we build a stronger Rivertown." props.subheading="We're a community nonprofit turning everyday generosity into food, mentorship, housing, and jobs for our neighbors — right here at home." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="See Our Programs" props.cta2Href="/programs/" props.bg="/images/hero.jpg"}
+
+:::np-intro{props.image="/images/about.jpg" props.imageAlt="Rivertown Foundation volunteers gathered together"}
+
+### Our mission
+
+Rivertown Foundation exists to make sure no neighbor faces hard times alone. We connect local generosity to the people and programs that need it most — meeting immediate needs today while opening doors to a more stable tomorrow.
+
+Every dollar, every hour, and every box of groceries stays right here in our community.
+:::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 5rem) 1.5rem" style.backgroundColor="var(--color-primary)" style.color="var(--color-text-white)"}
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto 2.5rem" style.textAlign="center"}
+:::p{style.textTransform="uppercase" style.letterSpacing="0.16em" style.fontSize="0.8rem" style.fontWeight="600" style.color="#bbf7d0" style.margin="0 0 0.75rem"}
+Our impact in 2024
+:::
+
+:::h2{style.fontFamily="var(--font-heading)" style.fontSize="clamp(1.9rem, 4vw, 2.6rem)" style.fontWeight="700" style.lineHeight="1.15" style.margin="0"}
+What we did together last year
+:::
+::::
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="2rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::np-stat{props.number="128k" props.label="Meals provided" props.note="Fresh groceries and hot meals for local families."}
+
+::np-stat{props.number="640" props.label="Active volunteers" props.note="Neighbors giving their time every month."}
+
+::np-stat{props.number="180" props.label="Households housed" props.note="Families kept in stable, safe homes."}
+
+::np-stat{props.number="17" props.label="Years serving Rivertown" props.note="Rooted here since 2007."}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::np-section-header{props.eyebrow="What we do" props.heading="Programs that meet real needs" props.subheading="Five community programs, one goal: helping every neighbor thrive."}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
+:::Array{items.ref="#/state/programs"}
+::np-program-card{props.title="${item.data.title}" props.summary="${item.data.summary}" props.image="${item.data.image}"}
+:::
+::::
+
+::::div{style.textAlign="center" style.marginTop="2.5rem"}
+:::a{href="/programs/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
+Explore all five programs →
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::np-section-header{props.eyebrow="Get involved" props.heading="Three ways to make a difference"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
+::np-step{props.num="♥" props.title="Give" props.text="A one-time or monthly gift puts groceries on tables and mentors in classrooms — 100% locally."}
+
+::np-step{props.num="✋" props.title="Volunteer" props.text="Pack boxes, tutor a student, or tend the garden. Every skill and every hour helps."}
+
+::np-step{props.num="📣" props.title="Spread the word" props.text="Share our work, host a drive, or bring your team for a day of service."}
+::::
+
+::::div{style.textAlign="center" style.marginTop="2.5rem"}
+:::a{href="/get-involved/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
+See all the ways to help →
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 6rem)"}
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
+::np-testimonial{props.quote="When we lost my husband's job, the Food Pantry and Housing team caught us before we fell. A year later I'm the one volunteering. This is what community looks like." props.author="Marisol T." props.role="Neighbor & volunteer"}
+::::
+:::::
+
+::np-cta{props.eyebrow="Your gift, doubled" props.heading="Every gift stays in Rivertown" props.text="A generous donor is matching all gifts this month, dollar for dollar. Give today and your impact goes twice as far." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="More Ways to Help" props.cta2Href="/get-involved/" props.bg="/images/cta-bg.jpg"}

package/sites/nonprofit/pages/programs.md

@@ -0,0 +1,39 @@
+---
+title: "Programs — Rivertown Foundation"
+state:
+  programs:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: programs
+    sort:
+      field: order
+      order: asc
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::np-section-header{props.eyebrow="Our programs" props.heading="How we show up for Rivertown" props.subheading="Five neighbor-powered programs that meet urgent needs today and build a stronger community for tomorrow."}
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--lg.gridTemplateColumns="repeat(2, 1fr)" style.--md.gridTemplateColumns="1fr"}
+:::Array{items.ref="#/state/programs"}
+::np-program-card{props.title="${item.data.title}" props.summary="${item.data.summary}" props.image="${item.data.image}"}
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 5rem)" style.backgroundColor="var(--color-bg-cream)"}
+::np-section-header{props.eyebrow="The difference you make" props.heading="Small gifts, big outcomes"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="2rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::np-stat{props.number="128k" props.label="Meals provided"}
+
+::np-stat{props.number="1,200" props.label="Youth mentored"}
+
+::np-stat{props.number="180" props.label="Households housed"}
+
+::np-stat{props.number="310" props.label="Jobs secured"}
+::::
+:::::
+
+::np-cta{props.eyebrow="Fuel the work" props.heading="Help us grow every program" props.text="Your gift helps us keep the pantry stocked, the mentors trained, and the doors open for every neighbor who needs us." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Volunteer With Us" props.cta2Href="/get-involved/" props.bg="/images/cta-bg.jpg"}

package/sites/nonprofit/project.json

@@ -0,0 +1,103 @@
+{
+  "name": "Rivertown Foundation",
+  "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": "Rivertown Foundation is a community nonprofit running local programs in food security, youth mentoring, housing, and job training — powered by neighbors helping neighbors."
+      }
+    },
+    {
+      "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=Poppins:wght@500;600;700&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#15803d",
+    "--color-primary-hover": "#166534",
+    "--color-ink": "#14261c",
+    "--color-bg-dark": "#14312a",
+    "--color-bg-cream": "#f3f7f1",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#1a2e22",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#5b6b60",
+    "--color-border": "#dfe7dc",
+    "--color-accent": "#ea580c",
+    "--color-accent-hover": "#c2410c",
+    "--font-heading": "'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "--max-width": "1200px",
+    "--max-width-narrow": "820px",
+    "--radius": "0.75rem",
+    "margin": "0",
+    "padding": "0",
+    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "lineHeight": "1.6",
+    "color": "var(--color-text-primary)",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "imports": {
+    "Markdown": "@jxsuite/parser/Markdown.class.json",
+    "ContentCollection": "@jxsuite/parser/ContentCollection.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": {
+    "programs": {
+      "source": "./content/programs/",
+      "format": "Markdown",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": { "type": "string" },
+          "summary": { "type": "string" },
+          "image": { "type": "string", "format": "image" },
+          "order": { "type": "number" }
+        },
+        "required": ["title", "summary"]
+      }
+    }
+  },
+  "build": {
+    "outDir": "./dist",
+    "format": "directory",
+    "trailingSlash": "always"
+  }
+}

package/sites/nonprofit/public/favicon.svg

@@ -0,0 +1,5 @@
+<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="#15803d"/>
+  <path d="M16 25C16 25 6 19 6 12.6C6 9.6 8.2 7.5 11 7.5C13.1 7.5 14.9 8.7 16 10.5C17.1 8.7 18.9 7.5 21 7.5C23.8 7.5 26 9.6 26 12.6C26 19 16 25 16 25Z" fill="none" stroke="#fff" stroke-width="1.9" stroke-linejoin="round"/>
+  <path d="M16 14.2l1.4 1.4 2.6-2.6" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
+</svg>

package/sites/portfolio/components/pv-about-split.json

@@ -0,0 +1,59 @@
+{
+  "tagName": "pv-about-split",
+  "state": {
+    "image": { "type": "string", "format": "image", "default": "" },
+    "imageAlt": "",
+    "reverse": false
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "5fr 6fr",
+        "gap": "clamp(2rem, 5vw, 4.5rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.image}",
+                "alt": "${state.imageAlt}",
+                "loading": "lazy"
+              },
+              "style": {
+                "width": "100%",
+                "height": "auto",
+                "borderRadius": "var(--radius)",
+                "display": "block",
+                "boxShadow": "0 18px 50px rgba(17,24,39,0.16)"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "order": "${state.reverse ? '1' : '2'}",
+            "fontSize": "1.1rem",
+            "lineHeight": "1.85",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [{ "tagName": "slot" }]
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-category-pill.json

@@ -0,0 +1,24 @@
+{
+  "tagName": "pv-category-pill",
+  "state": {
+    "label": ""
+  },
+  "style": {
+    "display": "inline-block",
+    "padding": "0.3rem 0.8rem",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "999px",
+    "fontSize": "0.72rem",
+    "fontWeight": "600",
+    "letterSpacing": "0.14em",
+    "textTransform": "uppercase",
+    "color": "var(--color-primary)",
+    "backgroundColor": "var(--color-bg-cream)"
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "textContent": "${state.label}"
+    }
+  ]
+}

package/sites/portfolio/components/pv-contact-form.json

@@ -0,0 +1,137 @@
+{
+  "tagName": "pv-contact-form",
+  "state": {
+    "heading": "Project inquiry"
+  },
+  "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"
+          }
+        },
+        {
+          "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"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "1rem" },
+          "children": [
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "text",
+                "name": "type",
+                "placeholder": "Type of project",
+                "aria-label": "Type of project"
+              },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem"
+              }
+            },
+            {
+              "tagName": "input",
+              "attributes": { "type": "date", "name": "date", "aria-label": "Preferred date" },
+              "style": {
+                "width": "100%",
+                "padding": "0.75rem 0.9rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "textarea",
+          "attributes": {
+            "name": "notes",
+            "rows": "4",
+            "placeholder": "Tell us about the shoot…",
+            "aria-label": "Project details"
+          },
+          "style": {
+            "width": "100%",
+            "padding": "0.75rem 0.9rem",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "fontSize": "1rem",
+            "fontFamily": "inherit"
+          }
+        },
+        {
+          "tagName": "button",
+          "attributes": { "type": "submit" },
+          "textContent": "Send Inquiry",
+          "style": {
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.85rem 1.75rem",
+            "border": "none",
+            "borderRadius": "var(--radius)",
+            "fontSize": "0.95rem",
+            "fontWeight": "600",
+            "letterSpacing": "0.04em",
+            "textTransform": "uppercase",
+            "cursor": "pointer",
+            "justifySelf": "start",
+            "transition": "background-color 0.15s",
+            ":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 booking provider or email in pages/contact.md."
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-cta.json

@@ -0,0 +1,64 @@
+{
+  "tagName": "pv-cta",
+  "state": {
+    "heading": "",
+    "text": "",
+    "cta": "Start a Project",
+    "ctaHref": "/contact/"
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-dark)",
+    "color": "var(--color-text-white)",
+    "padding": "clamp(4rem, 9vw, 6.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, 4.5vw, 3.25rem)",
+            "fontWeight": "600",
+            "lineHeight": "1.12",
+            "margin": "0 0 1.1rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.15rem",
+            "lineHeight": "1.7",
+            "opacity": "0.82",
+            "margin": "0 0 2.25rem"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.ctaHref}" },
+          "style": {
+            "display": "inline-block",
+            "backgroundColor": "var(--color-primary)",
+            "color": "var(--color-text-white)",
+            "padding": "0.95rem 2.4rem",
+            "borderRadius": "var(--radius)",
+            "fontSize": "0.95rem",
+            "fontWeight": "600",
+            "letterSpacing": "0.05em",
+            "textTransform": "uppercase",
+            "textDecoration": "none",
+            "transition": "background-color 0.15s",
+            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+          },
+          "textContent": "${state.cta}"
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/components/pv-feature.json

@@ -0,0 +1,48 @@
+{
+  "tagName": "pv-feature",
+  "state": {
+    "number": "",
+    "title": "",
+    "text": ""
+  },
+  "style": {
+    "display": "block",
+    "paddingTop": "1.75rem",
+    "borderTop": "2px solid var(--color-ink)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "${state.number ? 'block' : 'none'}",
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.4rem",
+        "fontWeight": "600",
+        "color": "var(--color-primary)",
+        "marginBottom": "0.75rem",
+        "lineHeight": "1"
+      },
+      "textContent": "${state.number}"
+    },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.4rem",
+        "fontWeight": "600",
+        "margin": "0 0 0.5rem"
+      },
+      "textContent": "${state.title}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "margin": "0",
+        "color": "var(--color-text-muted)",
+        "fontSize": "1rem",
+        "lineHeight": "1.7"
+      },
+      "textContent": "${state.text}"
+    }
+  ]
+}