@port60/template-kit 0.5.0 → 0.7.0

package/src/vendor/contract/v1.lock.json

@@ -0,0 +1,446 @@
+{
+  "_comment": "FROZEN compatibility baseline for port60-liquid@1 (8.6). tests/contract-freeze.test.mjs enforces that everything here still exists — removals/narrowings fail. Regenerate ONLY deliberately via scripts/contract-lock.mjs; the diff is the review.",
+  "format": "port60-liquid@1",
+  "dialect": {
+    "tags": [
+      "assign",
+      "break",
+      "capture",
+      "case",
+      "comment",
+      "continue",
+      "echo",
+      "else",
+      "elsif",
+      "endcapture",
+      "endcase",
+      "endcomment",
+      "endfor",
+      "endif",
+      "endraw",
+      "endunless",
+      "for",
+      "if",
+      "liquid",
+      "raw",
+      "unless",
+      "when"
+    ],
+    "filters": [
+      "abs",
+      "append",
+      "at_least",
+      "at_most",
+      "capitalize",
+      "ceil",
+      "compact",
+      "concat",
+      "date",
+      "default",
+      "divided_by",
+      "downcase",
+      "escape",
+      "escape_once",
+      "first",
+      "floor",
+      "join",
+      "last",
+      "lstrip",
+      "map",
+      "minus",
+      "modulo",
+      "newline_to_br",
+      "plus",
+      "prepend",
+      "raw",
+      "remove",
+      "remove_first",
+      "replace",
+      "replace_first",
+      "reverse",
+      "round",
+      "rstrip",
+      "size",
+      "slice",
+      "sort",
+      "sort_natural",
+      "split",
+      "strip",
+      "strip_html",
+      "strip_newlines",
+      "times",
+      "truncate",
+      "truncatewords",
+      "uniq",
+      "upcase",
+      "url_decode",
+      "url_encode",
+      "where"
+    ]
+  },
+  "sectionTypes": [
+    "appealGrid",
+    "articles",
+    "cta",
+    "emergency",
+    "events",
+    "hero",
+    "homeHero",
+    "impact",
+    "people",
+    "stats",
+    "values",
+    "whatsOn"
+  ],
+  "islands": {
+    "course_enrol": [
+      ".course-enrol",
+      ".course-pay-panel",
+      ".course-soldout-note",
+      ".course-subject-list",
+      ".course-summary",
+      ".course-variant-list"
+    ],
+    "donation_widget": [
+      ".amount-grid",
+      ".amount-list",
+      ".amount-option",
+      ".amount-row",
+      ".donate-card",
+      ".donate-head",
+      ".donate-note",
+      ".donate-sub",
+      ".donate-submit",
+      ".donate-success",
+      ".freq-tab",
+      ".freq-tabs",
+      ".giftaid-box"
+    ],
+    "events_carousel": [
+      ".carousel-caption",
+      ".carousel-dot",
+      ".carousel-dots",
+      ".carousel-slide",
+      ".events-carousel"
+    ],
+    "hero_carousel": [
+      ".hero-carousel",
+      ".hero-dot",
+      ".hero-dot--active",
+      ".hero-dots",
+      ".hero-slide",
+      ".hero-slide-img",
+      ".hero-slide-scrim",
+      ".hero-slides"
+    ],
+    "latest_articles": [
+      ".article-card",
+      ".article-card-body",
+      ".article-grid",
+      ".article-strip-cta"
+    ],
+    "member_menu": [
+      ".nav-account",
+      ".nav-account-menu",
+      ".nav-account-toggle",
+      ".nav-p60-signin",
+      ".p60-mark"
+    ],
+    "whats_on_strip": [
+      ".info-event-chip",
+      ".info-events-bar",
+      ".info-events-inner"
+    ]
+  },
+  "contextVariables": {
+    "brand.footerLogoUrl": [
+      "layout"
+    ],
+    "brand.logoType": [
+      "layout"
+    ],
+    "brand.logoUrl": [
+      "layout"
+    ],
+    "brand.name": [
+      "layout",
+      "section"
+    ],
+    "brand.tagline": [
+      "layout",
+      "section"
+    ],
+    "course": [
+      "page:course"
+    ],
+    "course.aboutHtml": [
+      "page:course"
+    ],
+    "course.audience": [
+      "page:course"
+    ],
+    "course.backHref": [
+      "page:course"
+    ],
+    "course.billingMode": [
+      "page:course"
+    ],
+    "course.currency": [
+      "page:course"
+    ],
+    "course.description": [
+      "page:course"
+    ],
+    "course.id": [
+      "page:course"
+    ],
+    "course.imageUrl": [
+      "page:course"
+    ],
+    "course.priceFrom": [
+      "page:course"
+    ],
+    "course.soldOut": [
+      "page:course"
+    ],
+    "course.termEnd": [
+      "page:course"
+    ],
+    "course.termStart": [
+      "page:course"
+    ],
+    "course.title": [
+      "page:course"
+    ],
+    "course.venue": [
+      "page:course"
+    ],
+    "events": [
+      "page:events",
+      "section:events"
+    ],
+    "events[].currency": [
+      "page:events"
+    ],
+    "events[].description": [
+      "page:events"
+    ],
+    "events[].detailHref": [
+      "page:events"
+    ],
+    "events[].endsAt": [
+      "page:events"
+    ],
+    "events[].id": [
+      "page:events"
+    ],
+    "events[].imageUrl": [
+      "page:events"
+    ],
+    "events[].name": [
+      "page:events"
+    ],
+    "events[].online": [
+      "page:events"
+    ],
+    "events[].onSale": [
+      "page:events"
+    ],
+    "events[].priceFrom": [
+      "page:events"
+    ],
+    "events[].registrationMode": [
+      "page:events"
+    ],
+    "events[].soldOut": [
+      "page:events"
+    ],
+    "events[].startsAt": [
+      "page:events"
+    ],
+    "events[].venueName": [
+      "page:events"
+    ],
+    "infoEvents": [
+      "section:whatsOn"
+    ],
+    "latestArticles": [
+      "section:articles"
+    ],
+    "latestArticles[].categories": [
+      "section:articles"
+    ],
+    "latestArticles[].excerpt": [
+      "section:articles"
+    ],
+    "latestArticles[].href": [
+      "section:articles"
+    ],
+    "latestArticles[].imageUrl": [
+      "section:articles"
+    ],
+    "latestArticles[].publishedAt": [
+      "section:articles"
+    ],
+    "latestArticles[].readingMinutes": [
+      "section:articles"
+    ],
+    "latestArticles[].title": [
+      "section:articles"
+    ],
+    "nav.items": [
+      "layout"
+    ],
+    "nav.items[].children": [
+      "layout"
+    ],
+    "nav.items[].cta": [
+      "layout"
+    ],
+    "nav.items[].href": [
+      "layout"
+    ],
+    "nav.items[].label": [
+      "layout"
+    ],
+    "section": [
+      "section"
+    ],
+    "socials": [
+      "layout"
+    ],
+    "socials[].iconSvg": [
+      "layout"
+    ],
+    "socials[].platform": [
+      "layout"
+    ],
+    "socials[].url": [
+      "layout"
+    ],
+    "worship": [
+      "layout"
+    ],
+    "worship.beginsLabel": [
+      "layout"
+    ],
+    "worship.congregationLabel": [
+      "layout"
+    ],
+    "worship.href": [
+      "layout"
+    ],
+    "worship.note": [
+      "layout"
+    ],
+    "worship.times": [
+      "layout"
+    ],
+    "worship.today": [
+      "layout"
+    ],
+    "worship.todayAlt": [
+      "layout"
+    ]
+  },
+  "tokens": [
+    "--accent",
+    "--accent-strong",
+    "--bg",
+    "--bg-tint",
+    "--container",
+    "--cta-hover",
+    "--cta-hover-strong",
+    "--danger",
+    "--gold",
+    "--ink",
+    "--line",
+    "--line-strong",
+    "--muted",
+    "--primary",
+    "--primary-soft",
+    "--primary-strong",
+    "--radius",
+    "--radius-sm",
+    "--shadow",
+    "--shadow-sm",
+    "--surface"
+  ],
+  "fonts": [
+    "Abril Fatface",
+    "Albert Sans",
+    "Alfa Slab One",
+    "Almarai",
+    "Amiri",
+    "Archivo",
+    "Arvo",
+    "Baloo 2",
+    "Barlow",
+    "Bebas Neue",
+    "Bitter",
+    "Cairo",
+    "Comfortaa",
+    "Cormorant Garamond",
+    "Crimson Pro",
+    "DM Sans",
+    "EB Garamond",
+    "Figtree",
+    "Fraunces",
+    "Fredoka",
+    "IBM Plex Sans",
+    "IBM Plex Sans Arabic",
+    "IBM Plex Serif",
+    "Inter",
+    "Josefin Sans",
+    "Jost",
+    "Karla",
+    "Lato",
+    "Libre Baskerville",
+    "Lora",
+    "Manrope",
+    "Merriweather",
+    "Montserrat",
+    "Newsreader",
+    "Noto Kufi Arabic",
+    "Noto Naskh Arabic",
+    "Nunito",
+    "Open Sans",
+    "Oswald",
+    "Outfit",
+    "Playfair Display",
+    "Plus Jakarta Sans",
+    "Poppins",
+    "Quicksand",
+    "Raleway",
+    "Roboto Slab",
+    "Rubik",
+    "Scheherazade New",
+    "Sora",
+    "Source Serif 4",
+    "Space Grotesk",
+    "Tajawal",
+    "Work Sans",
+    "Zilla Slab"
+  ],
+  "manifest": {
+    "required": [
+      "format",
+      "name",
+      "supports",
+      "version"
+    ],
+    "properties": [
+      "changelog",
+      "description",
+      "fonts",
+      "format",
+      "imagery",
+      "label",
+      "looks",
+      "name",
+      "settings",
+      "supports",
+      "version"
+    ]
+  }
+}

package/src/vendor/validator/validate.mjs

@@ -103,6 +103,17 @@ export async function validateArtifact(files) {
   let homeHeroMultiShows = null; // sample (several photos): probe in html OR hero_carousel placed
   let homeHeroSingleShows = null; // single-photo variant: probe rendered directly
 
+  // Author-renderable widget sections (the flip): each carries a curated data context; a template
+  // either places the section's DEFAULT ISLAND (which owns rendering + empty states) or renders
+  // the data itself — in which case both directions are proven behaviourally (the worship
+  // pattern): the populated fixture's sentinel must appear, and the EMPTY context must render it
+  // away (derive or omit — nothing invented, nothing dangling).
+  const WIDGET_SECTIONS = {
+    events: { island: 'events_carousel', dataKey: 'events', sentinel: 'Fixture Lantern Gala' },
+    whatsOn: { island: 'whats_on_strip', dataKey: 'infoEvents', sentinel: 'Fixture Open Morning' },
+    articles: { island: 'latest_articles', dataKey: 'latestArticles', sentinel: 'Fixture Winter Diary' }
+  };
+
   // 2–4. Sections: catalogue membership, parse, fixture renders.
   for (const type of manifest?.supports?.sections ?? []) {
     const entry = catalogueByType.get(type);
@@ -122,12 +133,49 @@ export async function validateArtifact(files) {
       errors.push(`section '${type}': does not parse under the dialect — ${e.message}`);
       continue;
     }
+    // Widget-section proof (independent of the minimal/sample loop): island placed → the island
+    // owns everything; hand-rendered → sentinel appears with data, vanishes without.
+    const widget = WIDGET_SECTIONS[type];
+    if (widget) {
+      const dataFixture = contextContract.fixtures.sections?.[type] ?? {};
+      try {
+        const populated = await liquid.render(parsed, {
+          section: {},
+          brand: contextContract.fixtures.brand,
+          ...dataFixture
+        });
+        const placesIsland = splitIslandParts(populated).some((p) => p.island === widget.island);
+        if (!placesIsland) {
+          if (!populated.includes(widget.sentinel)) {
+            errors.push(
+              `section '${type}': neither places the ${widget.island} island nor renders the ${widget.dataKey} context — render the data (the fixture's "${widget.sentinel}" must appear) or place the island`
+            );
+          }
+          const empty = await liquid.render(parsed, {
+            section: {},
+            brand: contextContract.fixtures.brand,
+            [widget.dataKey]: []
+          });
+          if (empty.includes(widget.sentinel)) {
+            errors.push(`section '${type}': still shows fixture content with an empty ${widget.dataKey} — content must come from the context`);
+          }
+          if (/\bundefined\b|\bnull\b/.test(empty.replace(/data-[a-z-]+="[^"]*"/g, ''))) {
+            errors.push(`section '${type}': renders 'undefined'/'null' literals when ${widget.dataKey} is empty — guard the empty case (derive or omit)`);
+          }
+        }
+      } catch (e) {
+        errors.push(`section '${type}': failed rendering the ${widget.dataKey} context fixtures — ${e.message}`);
+      }
+    }
     for (const fixtureName of ['minimal', 'sample']) {
       const fixture = entry[fixtureName] ?? {};
       try {
         const html = await liquid.render(parsed, {
           section: fixture,
-          brand: contextContract.fixtures.brand
+          brand: contextContract.fixtures.brand,
+          // Widget data rides the ordinary fixture renders too, so a hand-rendering section
+          // doesn't fail the generic pass for want of its context.
+          ...(widget ? (contextContract.fixtures.sections?.[type] ?? {}) : {})
         });
         if (type === 'homeHero' && fixtureName === 'sample') {
           const probe = 'Hero photo one';

package/starter/assets/theme.css

@@ -160,3 +160,30 @@ body { font-family: ' IBM Plex Sans Arabic', var(--p60s-siteFont, 'Inter'), ui-s
 @media (max-width: 899px) {
   .lq-vista-overlap { margin-top: 0; padding-top: 1.6rem; }
 }
+
+/* People / team cards — grid to single column on phones. */
+.lq-people {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.2rem;
+  text-align: center;
+}
+.lq-person {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 1.4rem 1.1rem;
+}
+.lq-person-photo {
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto 0.8rem;
+}
+.lq-person-role { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--muted); }
+.lq-person-statement { margin: 0.7rem 0 0; font-style: italic; color: var(--muted); }
+@media (max-width: 640px) {
+  .lq-people { grid-template-columns: 1fr; }
+}

package/starter/manifest.json

@@ -1,51 +1,52 @@
 {
- "name": "starter",
- "version": "1.5.3",
- "format": "port60-liquid@1",
- "label": "Starter",
- "description": "The reference template for the Port60 dialect — the developer docs' worked example and the base to copy when building your own. 1.1.0 adds the layout slot: the template owns the header, navigation and footer chrome.",
- "supports": {
-  "pages": [
-   "home",
-   "about"
-  ],
-  "sections": [
-   "homeHero",
-   "hero",
-   "values",
-   "cta"
-  ],
-  "islands": [
-   "donation_widget",
-   "member_menu",
-   "hero_carousel"
-  ],
-  "layout": true,
-  "heroImagery": true
- },
- "settings": {
-  "schema": [
-   {
-    "key": "siteFont",
-    "kind": "font",
-    "label": "Site font",
-    "default": "Inter",
-    "weights": [
-     400,
-     500,
-     600,
-     700,
-     800
+  "name": "starter",
+  "version": "1.5.5",
+  "format": "port60-liquid@1",
+  "label": "Starter",
+  "description": "The reference template for the Port60 dialect — the developer docs' worked example and the base to copy when building your own. 1.1.0 adds the layout slot: the template owns the header, navigation and footer chrome.",
+  "supports": {
+    "pages": [
+      "home",
+      "about"
+    ],
+    "sections": [
+      "homeHero",
+      "hero",
+      "values",
+      "cta",
+      "people"
+    ],
+    "islands": [
+      "donation_widget",
+      "member_menu",
+      "hero_carousel"
+    ],
+    "layout": true,
+    "heroImagery": true
+  },
+  "settings": {
+    "schema": [
+      {
+        "key": "siteFont",
+        "kind": "font",
+        "label": "Site font",
+        "default": "Inter",
+        "weights": [
+          400,
+          500,
+          600,
+          700,
+          800
+        ]
+      }
     ]
-   }
-  ]
- },
- "changelog": "Declares image advice: the ideal photo shape for this hero, shown beside the upload in your editor.",
- "imagery": {
-  "hero": {
-   "idealAspect": "16:9",
-   "minWidth": 1600,
-   "note": "Landscape around 16:9 fills the hero cleanly; panoramas suit the whole-photo framing."
+  },
+  "changelog": "Versionless source workflow — no content changes.",
+  "imagery": {
+    "hero": {
+      "idealAspect": "16:9",
+      "minWidth": 1600,
+      "note": "Landscape around 16:9 fills the hero cleanly; panoramas suit the whole-photo framing."
+    }
   }
- }
 }

package/starter/sections/people.liquid

@@ -0,0 +1,26 @@
+{% comment %}
+  People / team — the reference implementation: simple cards (name, role, optional photo and
+  one-line statement), a grid that collapses to one column on phones. No placeholder faces:
+  a person without a photo just renders text (derive or omit, never fabricate).
+{% endcomment %}
+<section class="lq-section">
+  <div class="container">
+    {% if section.eyebrow or section.heading or section.text %}
+    <div class="lq-section-head">
+      {% if section.eyebrow %}<p class="lq-kicker">{{ section.eyebrow }}</p>{% endif %}
+      {% if section.heading %}<h2>{{ section.heading }}</h2>{% endif %}
+      {% if section.text %}<p class="lq-muted">{{ section.text }}</p>{% endif %}
+    </div>
+    {% endif %}
+    <div class="lq-people">
+      {% for person in section.items %}
+      <article class="lq-person">
+        {% if person.imageUrl %}<img class="lq-person-photo" src="{{ person.imageUrl }}" alt="" loading="lazy">{% endif %}
+        <h3>{{ person.name }}</h3>
+        <p class="lq-person-role">{{ person.role }}</p>
+        {% if person.statement %}<p class="lq-person-statement">“{{ person.statement }}”</p>{% endif %}
+      </article>
+      {% endfor %}
+    </div>
+  </div>
+</section>