@port60/template-kit 0.8.0 → 0.10.0

package/starter/sections/campaigns.liquid

@@ -0,0 +1,23 @@
+{% comment %}
+  Live site.content.campaigns, the starter's plain rendering of the `site.content.campaigns` context, kept simple on
+  purpose: this template is the worked example template authors copy from. The context is the
+  platform's published site.content.campaigns; hrefs are platform-derived, always link via campaign.href.
+  Derive or omit: nothing renders when no campaign is live.
+{% endcomment %}
+{% if site.content.campaigns.size > 0 %}
+<section class="lq-site.content.campaigns">
+  <div class="container">
+    <h2>{{ section.heading | default: campaignsLabel }}</h2>
+    {% if section.text %}<p>{{ section.text }}</p>{% endif %}
+    <ul class="lq-campaign-list">
+      {% for campaign in site.content.campaigns %}
+      <li class="lq-campaign">
+        <h3>{{ campaign.title }}</h3>
+        {% if campaign.summary %}<p>{{ campaign.summary }}</p>{% endif %}
+        <a class="button button-primary" href="{{ campaign.href }}">View campaign</a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+</section>
+{% endif %}

package/starter/sections/homeHero.liquid

@@ -1,16 +1,16 @@
 {% comment %}
-  The home opener — and the REFERENCE IMPLEMENTATION of supports.heroImagery. Rules worth
+  The home opener, and the REFERENCE IMPLEMENTATION of supports.heroImagery. Rules worth
   copying:
 
   1. EVERY field is optional. Copy derives from brand (| default) or omits; no photos means the
-     designed gradient below — never a placeholder image.
+     designed gradient below, never a placeholder image.
   2. Photos are NEVER placed raw. The treatments in theme.css lay scrims built from the palette
      variables (color-mix over var(--bg)/var(--bg-tint)), so any uploaded photograph is toned
      into the template. Tune the treatment, don't remove it.
   3. Rotation is the PLATFORM's hero_carousel island (templates ship no JavaScript): with two or
      more photos, place it and style its documented classes.
   4. photoFraming is the charity's call, honour BOTH: 'fill' (default) covers your designed hero
-     shape (per-photo focus picks the surviving slice); 'whole' is the VISTA — the hero adapts
+     shape (per-photo focus picks the surviving slice); 'whole' is the VISTA, the hero adapts
      toward the photo's own shape (height-clamped) so a wide landscape stays entirely visible,
      with your copy stacked after the band.
 {% endcomment %}
@@ -38,8 +38,8 @@
     {% if heroCount > 1 %}{% island 'hero_carousel' %}{% else %}<div class="lq-vista-scrim" aria-hidden="true"></div>{% endif %}
     <div class="lq-vista-copy">
       <div class="container">
-        <p class="lq-kicker">{{ section.eyebrow | default: brand.name }}</p>
-        <h1>{{ section.title | default: brand.tagline | default: brand.name }}</h1>
+        <p class="lq-kicker">{{ section.eyebrow | default: site.brand.name }}</p>
+        <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="{{ section.primaryHref | default: '/donate' }}">{{ section.primaryLabel | default: 'Donate now' }}</a>
@@ -50,7 +50,7 @@
   </div>
 </section>
 {% else %}
-{% comment %} Form mode: the grid pulls up over the band — copy on the photo, the widget riding
+{% comment %} Form mode: the grid pulls up over the band, copy on the photo, the widget riding
     the seam onto the gradient below (never a stacked strip). {% endcomment %}
 <section class="lq-homehero lq-homehero--vista lq-homehero--vista-form{% if heroCount > 1 %} lq-homehero--carousel{% endif %}">
   <div class="lq-vista">
@@ -59,8 +59,8 @@
   </div>
   <div class="container lq-homehero-inner lq-vista-overlap">
     <div>
-      <p class="lq-kicker">{{ section.eyebrow | default: brand.name }}</p>
-      <h1>{{ section.title | default: brand.tagline | default: brand.name }}</h1>
+      <p class="lq-kicker">{{ section.eyebrow | default: site.brand.name }}</p>
+      <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>
@@ -75,11 +75,26 @@
 {% endif %}
 {% else %}
 <section class="lq-homehero{% if heroPhoto %} lq-homehero--photo{% endif %}{% if heroCount > 1 %} lq-homehero--carousel{% endif %}"{% if heroPhoto %} style="background-image: url('{{ heroPhoto }}'); background-position: {{ heroFocus }}"{% endif %}>
-  {% if heroCount > 1 %}{% island 'hero_carousel' %}{% endif %}
+  {% comment %}
+    Several photos → the BEHAVIOUR carousel (data-p60-carousel, engine-wired, the template ships
+    no JavaScript): complete static markup, one data-p60-slide per photo, auto-advance opt-in.
+    Hiding non-active slides is .p60-js-scoped in theme.css so a no-JS visitor sees the photos
+    stacked, never a blank hero. The vista framings above show the other route: the ready-made
+    hero_carousel island. A template chooses either.
+  {% endcomment %}
+  {% if heroCount > 1 %}
+  <div class="lq-hero-slides" data-p60-carousel="auto" aria-label="Hero photographs">
+    {% for image in section.images %}
+    <img class="lq-hero-slide{% if forloop.first %} is-active{% endif %}" data-p60-slide
+         src="{{ image.imageUrl }}" alt="{{ image.alt }}" style="object-position: {{ heroFocus }}"
+         {% if forloop.first %}fetchpriority="high"{% else %}loading="lazy"{% endif %} decoding="async">
+    {% endfor %}
+  </div>
+  {% endif %}
   <div class="container lq-homehero-inner">
     <div>
-      <p class="lq-kicker">{{ section.eyebrow | default: brand.name }}</p>
-      <h1>{{ section.title | default: brand.tagline | default: brand.name }}</h1>
+      <p class="lq-kicker">{{ section.eyebrow | default: site.brand.name }}</p>
+      <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' %}

package/starter/sections/people.liquid

@@ -1,5 +1,5 @@
 {% comment %}
-  People / team — the reference implementation: simple cards (name, role, optional photo and
+  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 %}

package/starter/sections/values.liquid

@@ -1,7 +1,12 @@
 <section class="lq-values">
   <div class="container">
     <h2>{{ section.heading | default: "What guides us" }}</h2>
-    <ol class="lq-value-rail">
+    {% comment %}
+      data-p60-reveal-group: the engine stamps --p60-reveal-index on each child and adds
+      is-revealed when the rail scrolls into view, the stagger and motion are OURS, in theme.css,
+      and .p60-js-scoped so a no-JS visitor sees the rail complete and still.
+    {% endcomment %}
+    <ol class="lq-value-rail" data-p60-reveal-group>
       {% for item in section.items %}
       <li>
         <span class="lq-value-dot"></span>