@port60/template-kit 0.6.0 → 0.8.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/layout.liquid

@@ -33,14 +33,14 @@
             <a href="{{ item.href }}" class="nav-dropdown-toggle" aria-haspopup="true">{{ item.label }} ▾</a>
             <span class="nav-dropdown-menu">
               {% for child in item.children %}
-                <a href="{{ child.href }}">{{ child.label }}</a>
+                <a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>
               {% endfor %}
             </span>
           </span>
         {% elsif item.cta %}
-          <a class="nav-cta" href="{{ item.href }}">{{ item.label }}</a>
+          <a class="nav-cta" href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
         {% else %}
-          <a href="{{ item.href }}">{{ item.label }}</a>
+          <a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
         {% endif %}
       {% endfor %}
       {% island 'member_menu' %}
@@ -59,9 +59,19 @@
       {% if brand.tagline %}<h2>{{ brand.tagline }}</h2>{% endif %}
     </div>
     <div class="footer-links">
-      {% for item in nav.items %}
-        <a href="{{ item.href }}">{{ item.label }}</a>
-      {% endfor %}
+      {% comment %} A tenant-curated footer menu when they've built one, else the main nav. {% endcomment %}
+      {% if nav.footer.size > 0 %}
+        {% for item in nav.footer %}
+          <a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
+          {% for child in item.children %}
+            <a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>
+          {% endfor %}
+        {% endfor %}
+      {% else %}
+        {% for item in nav.items %}
+          <a href="{{ item.href }}">{{ item.label }}</a>
+        {% endfor %}
+      {% endif %}
     </div>
   </div>
   <div class="container">

package/starter/manifest.json

@@ -1,52 +1,52 @@
 {
- "name": "starter",
- "version": "1.5.4",
- "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
+  "name": "starter",
+  "version": "1.6.0",
+  "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": "People / team: the new About-page section — the key people behind the charity as cards, stacking on phones.",
- "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."
+    }
   }
- }
 }