@jxsuite/starters 0.34.0

package/sites/portfolio/content/projects/weddings.md

@@ -0,0 +1,12 @@
+---
+title: Vineyard Vows
+category: Weddings
+cover: /images/project-1.jpg
+year: 2024
+order: 1
+slug: weddings
+---
+
+An unhurried summer celebration among the rows, photographed from first light through the last dance. We work quietly at the edges of the day, letting the real moments — a held breath, a grandmother's tears, a spontaneous toast — unfold without direction.
+
+The result is a wedding archive that feels less like a set of poses and more like a story you can step back into: warm, textural, and honest to the people in it.

package/sites/portfolio/images.json

@@ -0,0 +1,54 @@
+{
+  "site": "portfolio",
+  "thumbnail": "hero",
+  "images": [
+    {
+      "role": "hero",
+      "query": "photographer studio dramatic",
+      "orientation": "landscape",
+      "photoId": 6242218
+    },
+    {
+      "role": "about",
+      "query": "photographer with camera portrait",
+      "orientation": "portrait",
+      "photoId": 33273434
+    },
+    {
+      "role": "project-1",
+      "query": "wedding photography",
+      "orientation": "landscape",
+      "photoId": 13434418
+    },
+    {
+      "role": "project-2",
+      "query": "portrait photography",
+      "orientation": "square",
+      "photoId": 18665999
+    },
+    {
+      "role": "project-3",
+      "query": "editorial fashion photo",
+      "orientation": "landscape",
+      "photoId": 6611662
+    },
+    {
+      "role": "project-4",
+      "query": "travel landscape photography",
+      "orientation": "landscape",
+      "photoId": 35479203
+    },
+    {
+      "role": "project-5",
+      "query": "food photography",
+      "orientation": "square",
+      "photoId": 37322902
+    },
+    {
+      "role": "project-6",
+      "query": "architecture photography",
+      "orientation": "landscape",
+      "photoId": 34661673
+    }
+  ]
+}

package/sites/portfolio/layouts/base.json

@@ -0,0 +1,22 @@
+{
+  "tagName": "div",
+  "$elements": [
+    { "$ref": "../components/pv-nav.json" },
+    { "$ref": "../components/pv-footer.json" }
+  ],
+  "style": {
+    "minHeight": "100vh",
+    "display": "flex",
+    "flexDirection": "column",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "children": [
+    { "tagName": "pv-nav" },
+    {
+      "tagName": "main",
+      "style": { "flex": "1" },
+      "children": [{ "tagName": "slot" }]
+    },
+    { "tagName": "pv-footer" }
+  ]
+}

package/sites/portfolio/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "portfolio",
+  "private": true,
+  "description": "Aperture Studio — an image-forward photography and creative studio portfolio with a project gallery and dynamic case-study pages.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "jx build",
+    "dev": "jx dev"
+  },
+  "devDependencies": {
+    "@jxsuite/compiler": "^0.19.0",
+    "@jxsuite/runtime": "^0.19.0"
+  }
+}

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

@@ -0,0 +1,260 @@
+{
+  "$paths": {
+    "contentType": "projects",
+    "param": "slug",
+    "field": "slug"
+  },
+  "title": "${state.entry.data.title} — Aperture Studio",
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": {
+        "name": "description",
+        "content": "${state.entry.data.title} — a ${state.entry.data.category} project by Aperture Studio."
+      }
+    }
+  ],
+  "state": {
+    "entry": {
+      "$prototype": "ContentEntry",
+      "contentType": "projects",
+      "field": "slug",
+      "id": { "$ref": "#/$params/slug" },
+      "$src": "@jxsuite/parser/ContentEntry.class.json"
+    }
+  },
+  "children": [
+    {
+      "tagName": "article",
+      "style": {
+        "maxWidth": "var(--max-width-narrow)",
+        "margin": "0 auto",
+        "padding": "3.5rem 1.5rem clamp(3.5rem, 8vw, 6rem)"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/work/" },
+          "style": {
+            "display": "inline-block",
+            "color": "var(--color-primary)",
+            "textDecoration": "none",
+            "fontWeight": "600",
+            "fontSize": "0.85rem",
+            "letterSpacing": "0.05em",
+            "textTransform": "uppercase",
+            "marginBottom": "2rem",
+            ":hover": { "textDecoration": "underline" }
+          },
+          "textContent": "← All work"
+        },
+        {
+          "tagName": "header",
+          "style": { "marginBottom": "2.5rem" },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.85rem",
+                "marginBottom": "1.25rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "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)"
+                  },
+                  "textContent": "${state.entry.data.category}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontSize": "0.85rem",
+                    "color": "var(--color-text-muted)",
+                    "letterSpacing": "0.05em"
+                  },
+                  "textContent": "${state.entry.data.year}"
+                }
+              ]
+            },
+            {
+              "tagName": "h1",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(2.5rem, 6vw, 4rem)",
+                "fontWeight": "600",
+                "lineHeight": "1.06",
+                "letterSpacing": "-0.01em",
+                "margin": "0"
+              },
+              "textContent": "${state.entry.data.title}"
+            }
+          ]
+        },
+        {
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.entry.data.cover}",
+            "alt": "${state.entry.data.title}"
+          },
+          "style": {
+            "width": "100%",
+            "maxHeight": "34rem",
+            "objectFit": "cover",
+            "borderRadius": "var(--radius)",
+            "display": "${state.entry.data.cover ? 'block' : 'none'}",
+            "marginBottom": "2.75rem"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "fontSize": "1.15rem",
+            "lineHeight": "1.85",
+            "color": "var(--color-text-primary)",
+            "maxWidth": "62ch",
+            "margin": "0 0 3.5rem"
+          },
+          "children": "${state.entry.$children ?? []}"
+        },
+        {
+          "tagName": "section",
+          "children": [
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.75rem",
+                "fontWeight": "600",
+                "margin": "0 0 1.5rem",
+                "paddingBottom": "0.6rem",
+                "borderBottom": "2px solid var(--color-ink)"
+              },
+              "textContent": "Selected frames"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "display": "grid",
+                "gridTemplateColumns": "repeat(3, 1fr)",
+                "gap": "1rem",
+                "@--sm": { "gridTemplateColumns": "1fr" }
+              },
+              "children": [
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "/images/project-2.jpg",
+                    "alt": "${state.entry.data.title} — frame",
+                    "loading": "lazy"
+                  },
+                  "style": {
+                    "width": "100%",
+                    "aspectRatio": "4 / 5",
+                    "objectFit": "cover",
+                    "borderRadius": "var(--radius)",
+                    "display": "block"
+                  }
+                },
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "/images/project-4.jpg",
+                    "alt": "${state.entry.data.title} — frame",
+                    "loading": "lazy"
+                  },
+                  "style": {
+                    "width": "100%",
+                    "aspectRatio": "4 / 5",
+                    "objectFit": "cover",
+                    "borderRadius": "var(--radius)",
+                    "display": "block"
+                  }
+                },
+                {
+                  "tagName": "img",
+                  "attributes": {
+                    "src": "/images/project-6.jpg",
+                    "alt": "${state.entry.data.title} — frame",
+                    "loading": "lazy"
+                  },
+                  "style": {
+                    "width": "100%",
+                    "aspectRatio": "4 / 5",
+                    "objectFit": "cover",
+                    "borderRadius": "var(--radius)",
+                    "display": "block"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "marginTop": "3.5rem",
+            "padding": "clamp(2.5rem, 6vw, 3.5rem)",
+            "backgroundColor": "var(--color-bg-dark)",
+            "color": "var(--color-text-white)",
+            "borderRadius": "var(--radius)",
+            "textAlign": "center"
+          },
+          "children": [
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(1.75rem, 4vw, 2.5rem)",
+                "fontWeight": "600",
+                "margin": "0 0 1rem"
+              },
+              "textContent": "Planning something similar?"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "1.1rem",
+                "lineHeight": "1.7",
+                "opacity": "0.82",
+                "margin": "0 auto 2rem",
+                "maxWidth": "48ch"
+              },
+              "textContent": "Tell us about your project and we'll be in touch to talk through the details."
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "inline-block",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "padding": "0.9rem 2.25rem",
+                "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": "Start a Project"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/portfolio/pages/about.md

@@ -0,0 +1,40 @@
+---
+title: "About — Aperture Studio"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::pv-section-header{props.eyebrow="The studio" props.heading="An image-forward practice" props.subheading="Available light, a patient pace, and a tight final edit — that is the whole philosophy."}
+:::::
+
+:::::pv-about-split{props.image="/images/about.jpg" props.imageAlt="Aperture Studio photographer with camera"}
+
+### Photographs that still feel like the moment
+
+Aperture Studio began as one photographer, a single lens, and a stubborn preference for natural light. Years later the tools have grown but the approach has not: show up early, watch closely, and only press the shutter when something real is happening.
+
+We keep our client list short so every project gets full attention — from the first conversation through the final, carefully-graded set of frames. No filler galleries, no thousand near-identical shots. Just the photographs worth keeping.
+
+:::a{href="/contact/" style.display="inline-block" style.marginTop="1.25rem" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="0.9rem" style.letterSpacing="0.05em" style.textTransform="uppercase"}
+Start a conversation →
+:::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::pv-section-header{props.eyebrow="How we work" props.heading="Three principles"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="2.5rem" style.--md.gridTemplateColumns="1fr"}
+::pv-feature{props.number="01" props.title="Light first" props.text="We chase the hour, not the gear. Natural light shapes almost everything we shoot."}
+
+::pv-feature{props.number="02" props.title="Edit ruthlessly" props.text="A smaller, stronger set beats a bloated gallery every time. We cut hard so you don't have to."}
+
+::pv-feature{props.number="03" props.title="Stay personal" props.text="You work directly with the photographer, start to finish. Every inquiry gets a real reply."}
+::::
+:::::
+
+:::::section{style.padding="0 1.5rem clamp(3.5rem, 8vw, 6rem)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto"}
+::pv-gallery{props.img1="/images/project-2.jpg" props.img2="/images/project-4.jpg" props.img3="/images/project-6.jpg" props.alt="Frames from recent Aperture Studio projects"}
+::::
+:::::
+
+::pv-cta{props.heading="Tell us what you're picturing." props.text="A wedding, a portrait, a place, a product — if it's worth photographing, we'd love to hear about it." props.cta="Start a Project" props.ctaHref="/contact/"}

package/sites/portfolio/pages/contact.md

@@ -0,0 +1,42 @@
+---
+title: "Contact & Inquiries — Aperture Studio"
+---
+
+::::::section{style.padding="clamp(3rem, 6vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::pv-section-header{props.eyebrow="Inquire" props.heading="Start a project" props.subheading="Tell us a little about what you have in mind. We reply to every message personally, usually within two business days."}
+::::::
+
+::::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 5rem) 1.5rem"}
+:::::div{style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
+
+::::div
+::pv-contact-form{}
+::::
+
+::::div{style.display="grid" style.gap="1.5rem" style.alignContent="start"}
+
+:::div{style.padding="2rem" style.backgroundColor="var(--color-bg-cream)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)"}
+
+#### The studio
+
+By appointment · Riverbend, California
+:::
+
+:::div{style.padding="2rem" style.backgroundColor="var(--color-bg-cream)" style.border="1px solid var(--color-border)" style.borderRadius="var(--radius)" style.a.color="var(--color-primary)" style.a.fontWeight="600" style.a.textDecoration="none"}
+
+#### Reach us
+
+[hello@aperturestudio.example](mailto:hello@aperturestudio.example)
+
+[(555) 204-7788](tel:+15552047788)
+:::
+
+:::div{style.padding="2rem" style.backgroundColor="var(--color-bg-dark)" style.color="var(--color-text-white)" style.borderRadius="var(--radius)"}
+
+#### Availability
+
+We book a limited number of projects each season and often plan several months out. Reach out early for dated work like weddings and events.
+:::
+::::
+:::::
+::::::

package/sites/portfolio/pages/index.md

@@ -0,0 +1,45 @@
+---
+title: "Aperture Studio — Photography & Creative Studio"
+state:
+  featured:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: projects
+    sort:
+      field: order
+      order: asc
+    limit: 4
+---
+
+::pv-hero{props.eyebrow="Photography & Creative Studio" props.heading="Light, patience, and a good eye." props.subheading="Aperture Studio makes image-forward work for people and places — weddings, portraits, editorial, and everything in the frame between." props.cta="View the Work" props.ctaHref="/work/" props.cta2="Start a Project" props.cta2Href="/contact/" props.bg="/images/hero.jpg"}
+
+:::::section{style.padding="clamp(4rem, 9vw, 7rem) 1.5rem"}
+::pv-section-header{props.eyebrow="Selected work" props.heading="A few recent stories" props.subheading="A small edit from the archive. Every project begins with a conversation and ends with prints worth keeping."}
+
+::::pv-project-grid
+:::Array{items.ref="#/state/featured"}
+::pv-project-card{props.title="${item.data.title}" props.category="${item.data.category}" props.year="${item.data.year}" props.cover="${item.data.cover}" props.href="/${item.data.slug}/" props.alt="${item.data.title}"}
+:::
+::::
+
+::::div{style.textAlign="center" style.marginTop="3rem"}
+:::a{href="/work/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="0.9rem" style.letterSpacing="0.05em" style.textTransform="uppercase"}
+View all work →
+:::
+::::
+:::::
+
+:::::pv-about-split{props.image="/images/about.jpg" props.imageAlt="Aperture Studio photographer at work" props.reverse="true"}
+
+### Behind the lens
+
+Aperture Studio is a small, image-forward practice led by a photographer who prefers available light and unhurried days. We shoot a little, edit hard, and hand back a tight set of frames you will actually want to live with.
+
+We work across the country and answer every inquiry personally.
+
+:::a{href="/about/" style.display="inline-block" style.marginTop="1.25rem" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="0.9rem" style.letterSpacing="0.05em" style.textTransform="uppercase"}
+More about the studio →
+:::
+:::::
+
+::pv-cta{props.heading="Have something worth photographing?" props.text="Tell us about the day, the story, or the space. We take on a limited number of projects each season." props.cta="Start a Project" props.ctaHref="/contact/"}

package/sites/portfolio/pages/work.md

@@ -0,0 +1,39 @@
+---
+title: "Work — Aperture Studio"
+state:
+  projects:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: projects
+    sort:
+      field: order
+      order: asc
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::pv-section-header{props.eyebrow="Portfolio" props.heading="Selected work" props.subheading="Six recent projects across weddings, portraits, editorial, travel, food, and architecture — each a short story told in light."}
+
+::::div{style.display="flex" style.flexWrap="wrap" style.gap="0.6rem" style.justifyContent="center" style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
+::pv-category-pill{props.label="Weddings"}
+
+::pv-category-pill{props.label="Portraits"}
+
+::pv-category-pill{props.label="Editorial"}
+
+::pv-category-pill{props.label="Travel"}
+
+::pv-category-pill{props.label="Food"}
+
+::pv-category-pill{props.label="Architecture"}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::::pv-project-grid
+:::Array{items.ref="#/state/projects"}
+::pv-project-card{props.title="${item.data.title}" props.category="${item.data.category}" props.year="${item.data.year}" props.cover="${item.data.cover}" props.href="/${item.data.slug}/" props.alt="${item.data.title}"}
+:::
+::::
+:::::
+
+::pv-cta{props.heading="Let's make something." props.text="Commissions, collaborations, and personal shoots — the studio takes on a handful of projects each season." props.cta="Start a Project" props.ctaHref="/contact/"}

package/sites/portfolio/project.json

@@ -0,0 +1,105 @@
+{
+  "name": "Aperture Studio",
+  "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": "Aperture Studio — a photography and creative studio crafting image-forward stories across weddings, portraits, editorial, travel, food, and architecture."
+      }
+    },
+    {
+      "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=Cormorant+Garamond:wght@500;600;700&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#d97706",
+    "--color-primary-hover": "#b45309",
+    "--color-ink": "#111827",
+    "--color-bg-dark": "#111827",
+    "--color-bg-cream": "#f8f7f4",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#111827",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#6b7280",
+    "--color-border": "#e5e7eb",
+    "--color-accent": "#d97706",
+    "--font-heading": "'Cormorant Garamond', Georgia, 'Times New Roman', serif",
+    "--max-width": "1200px",
+    "--max-width-narrow": "820px",
+    "--radius": "0.25rem",
+    "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",
+    "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": {
+    "projects": {
+      "source": "./content/projects/",
+      "format": "Markdown",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": { "type": "string" },
+          "category": { "type": "string" },
+          "cover": { "type": "string", "format": "image" },
+          "year": { "type": "number" },
+          "order": { "type": "number" },
+          "slug": { "type": "string" }
+        },
+        "required": ["title", "category", "slug"]
+      }
+    }
+  },
+  "build": {
+    "outDir": "./dist",
+    "format": "directory",
+    "trailingSlash": "always"
+  }
+}

package/sites/portfolio/public/favicon.svg

@@ -0,0 +1,7 @@
+<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="#111827"/>
+  <circle cx="16" cy="16" r="9" fill="none" stroke="#d97706" stroke-width="1.8"/>
+  <circle cx="16" cy="16" r="4.4" fill="none" stroke="#fff" stroke-width="1.6"/>
+  <path d="M16 7v4.6M23.8 12.5l-4 2.3M23 21.5l-4-2.3M16 25v-4.6M9 21.5l4-2.3M9.2 12.5l4 2.3" fill="none" stroke="#d97706" stroke-width="1.4" stroke-linecap="round" opacity="0.9"/>
+  <circle cx="13" cy="13" r="1.1" fill="#fff"/>
+</svg>