@port60/template-kit 0.16.0 → 0.17.0

package/src/vendor/validator/preview.mjs

@@ -143,6 +143,17 @@ function islandSkeleton(name, ctx = {}, fx = STUDIO_FX) {
         <label class="newsletter-label">Email address</label><div class="newsletter-fields"><input class="newsletter-email" type="email" disabled><button class="newsletter-submit" type="button" disabled>Join our newsletter</button></div>
         <label class="newsletter-consent"><input type="checkbox" disabled><span>Email me about our work and appeals.</span></label>
       </form>`;
+    case 'primary_action':
+      return islandSkeleton('donation_widget', ctx, fx).replace('data-p60-preview-island="donation_widget"', 'data-p60-preview-island="primary_action"');
+    case 'volunteer_signup':
+      return `<section class="donate-card vol-card" data-p60-preview-island="volunteer_signup">
+        ${previewNote(name)}
+        <header class="donate-head"><h2>Volunteer with us</h2><p class="donate-sub">Where would you like to help?</p></header>
+        <div class="vol-list">
+          <div class="vol-group"><p class="vol-group-label">General</p><button class="vol-option" type="button" disabled><span class="vol-option-main"><strong>Help out where needed</strong><span class="vol-option-summary">A few hours a month, wherever the team needs a hand.</span></span><span class="vol-option-meta"><span class="vol-needed">Everyone welcome</span></span></button></div>
+          <div class="vol-group"><p class="vol-group-label">Events</p><button class="vol-option" type="button" disabled><span class="vol-option-main"><strong>Spring fair stewards</strong><span class="vol-option-summary">Welcome visitors and keep the day running.</span></span><span class="vol-option-meta"><span class="vol-needed">6 volunteers needed</span><span class="vol-shift-count">3 shifts</span></span></button></div>
+        </div>
+      </section>`;
     case 'language_switch':
       return `<label class="language-switch" data-p60-preview-island="language_switch">${previewNote(name)}<span class="language-switch-label">Language</span><select class="language-switch-select" disabled><option>English</option><option>Cymraeg</option><option>العربية</option></select></label>`;
     case 'search':

package/src/vendor/validator/validate.mjs

@@ -99,7 +99,8 @@ export async function validateArtifact(files) {
       locations: () => sections.has('locations'),
       newsletter: () => islands.has('newsletter_signup'),
       i18n: () => islands.has('language_switch'),
-      search: () => islands.has('search')
+      search: () => islands.has('search'),
+      volunteering: () => islands.has('volunteer_signup') || islands.has('primary_action')
     };
     for (const capability of manifest?.requiresCapabilities ?? []) {
       if (!capabilitySurface[capability]?.()) {
@@ -108,6 +109,19 @@ export async function validateArtifact(files) {
     }
   }
 
+  // Site focus honesty (docs/volunteering.md): a template that claims it can lead with
+  // volunteering must give the volunteer sign-up a way into the hero, either the composite
+  // primary_action island or the volunteer_signup island placed directly.
+  {
+    const focusKinds = new Set(manifest?.supports?.focus ?? []);
+    if (focusKinds.has('volunteer')) {
+      const liquidSource = Object.entries(files).filter(([path]) => path.endsWith('.liquid')).map(([, s]) => s).join('\n');
+      if (!/island\s+['"]primary_action['"]/.test(liquidSource) && !/island\s+['"]volunteer_signup['"]/.test(liquidSource)) {
+        errors.push("manifest: supports.focus lists 'volunteer' but no section places {% island 'primary_action' %} (or 'volunteer_signup'), so the site could never lead with volunteering");
+      }
+    }
+  }
+
   // Markup and attributes, NEVER code — the machine-enforced JavaScript ban over every liquid
   // source (docs/template-behaviours.md). Behaviour is engine-owned; a template wanting motion
   // declares supports.behaviors and uses the data-p60-* grammar.

package/starter/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "starter",
-  "version": "1.10.0",
+  "version": "1.11.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.",
@@ -22,13 +22,18 @@
       "donation_widget",
       "member_menu",
       "hero_carousel",
-      "map"
+      "map",
+      "primary_action"
     ],
     "layout": true,
     "heroImagery": true,
     "behaviors": [
       "reveal",
       "carousel"
+    ],
+    "focus": [
+      "donate",
+      "volunteer"
     ]
   },
   "settings": {

package/starter/sections/homeHero.liquid

@@ -31,7 +31,7 @@
 {% endif %}
 {% assign heroFraming = section.photoFraming | default: 'fill' %}
 {% if heroCount > 0 and heroFraming == 'whole' %}
-{% if section.givingStyle == 'button' %}
+{% if section.actionStyle == 'button' or section.givingStyle == 'button' %}
 <section class="lq-homehero lq-homehero--vista{% if heroCount > 1 %} lq-homehero--carousel{% endif %}">
   <div class="lq-vista">
     <img class="lq-vista-sizer" src="{{ section.images.first.imageUrl }}" alt="{{ section.images.first.alt }}" style="object-position: {{ heroFocus }}" fetchpriority="high" decoding="async">
@@ -63,12 +63,13 @@
       <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
       {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
-        <a class="button button-primary" href="#donate">{{ section.primaryLabel | default: 'Donate now' }}</a>
+        {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '#donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
       </div>
     </div>
     <aside id="donate">
-      {% island 'donation_widget' %}
+      {%- comment -%} The site focus decides which widget leads (section.primary); the composite island mounts it. {%- endcomment -%}
+      {% island 'primary_action' %}
     </aside>
   </div>
 </section>
@@ -97,17 +98,17 @@
       <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
       {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
-        {% if section.givingStyle == 'button' %}
-        <a class="button button-primary" href="{{ section.primaryHref | default: '/donate' }}">{{ section.primaryLabel | default: 'Donate now' }}</a>
+        {% if section.actionStyle == 'button' or section.givingStyle == 'button' %}
+        {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '/donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         {% else %}
-        <a class="button button-primary" href="#donate">{{ section.primaryLabel | default: 'Donate now' }}</a>
+        {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '#donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         {% endif %}
         <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
       </div>
     </div>
-    {% unless section.givingStyle == 'button' %}
+    {% unless section.actionStyle == 'button' or section.givingStyle == 'button' %}
     <aside id="donate">
-      {% island 'donation_widget' %}
+      {% island 'primary_action' %}
     </aside>
     {% endunless %}
   </div>