@port60/template-kit 0.20.3 → 0.21.0

package/starter/manifest.json

@@ -1,10 +1,12 @@
 {
   "name": "starter",
-  "version": "1.13.0",
+  "version": "1.14.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": {
+    "navigationHighlights": false,
+    "fieldMarkers": true,
     "pages": [
       "home",
       "about"
@@ -37,6 +39,44 @@
       "volunteer"
     ]
   },
+  "compositions": {
+    "home": [
+      {
+        "type": "homeHero",
+        "role": "core"
+      },
+      {
+        "type": "campaigns",
+        "role": "recommended"
+      },
+      {
+        "type": "impactMap",
+        "role": "optional"
+      },
+      {
+        "type": "cta",
+        "role": "recommended"
+      }
+    ],
+    "about": [
+      {
+        "type": "hero",
+        "role": "core"
+      },
+      {
+        "type": "values",
+        "role": "recommended"
+      },
+      {
+        "type": "people",
+        "role": "optional"
+      },
+      {
+        "type": "cta",
+        "role": "recommended"
+      }
+    ]
+  },
   "settings": {
     "schema": [
       {
@@ -54,7 +94,7 @@
       }
     ]
   },
-  "changelog": "Places the site search box in the header: a typeahead across events, articles, services, campaigns, appeals, volunteering and documents, with the results page at /search.",
+  "changelog": "Marks which node shows which field (data-p60-field), so the editor puts the caret on the page itself instead of in a side panel.",
   "imagery": {
     "hero": {
       "idealAspect": "16:9",

package/starter/sections/campaigns.liquid

@@ -7,8 +7,8 @@
 {% 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 %}
+    <h2 data-p60-field="heading">{{ section.heading | default: campaignsLabel }}</h2>
+    {% if section.text %}<p data-p60-field="text">{{ section.text }}</p>{% endif %}
     <ul class="lq-campaign-list">
       {% for campaign in site.content.campaigns %}
       <li class="lq-campaign">

package/starter/sections/cta.liquid

@@ -1,8 +1,8 @@
 <section class="lq-cta">
   <div class="container lq-cta-grid">
     <div>
-      <h2>{{ section.heading }}</h2>
-      {% if section.text %}<p>{{ section.text }}</p>{% endif %}
+      <h2 data-p60-field="heading">{{ section.heading }}</h2>
+      {% if section.text %}<p data-p60-field="text">{{ section.text }}</p>{% endif %}
       <a class="button button-primary" href="{{ section.buttonHref }}">{{ section.buttonLabel }}</a>
     </div>
     <div class="lq-cta-widget">

package/starter/sections/hero.liquid

@@ -1,7 +1,14 @@
+{% comment %}
+  FIELD MARKERS (supports.fieldMarkers): data-p60-field says which node shows which field, and the
+  editor puts the caret there instead of in a side panel. Two rules. The address is the field's
+  name inside this section's own content. The marked node holds that field and nothing else, so
+  wrap the value in a span when there is punctuation or other copy beside it (people.liquid shows
+  one). Marking is optional and additive: an unmarked template is edited in the panel as before.
+{% endcomment %}
 <section class="lq-hero">
   <div class="container">
-    {% if section.eyebrow %}<p class="lq-kicker">{{ section.eyebrow }}</p>{% endif %}
-    <h1>{{ section.title }}</h1>
+    {% if section.eyebrow %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+    <h1 data-p60-field="title">{{ section.title }}</h1>
     <div class="lq-hero-body">{{ section.bodyHtml | raw }}</div>
   </div>
 </section>

package/starter/sections/homeHero.liquid

@@ -38,9 +38,9 @@
     {% 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: 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 %}
+        <p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow | default: site.brand.name }}</p>
+        <h1 data-p60-field="title">{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
+        {% if section.lead %}<p class="lq-homehero-lead" data-p60-field="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>
           <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
@@ -59,9 +59,9 @@
   </div>
   <div class="container lq-homehero-inner lq-vista-overlap">
     <div>
-      <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 %}
+      <p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow | default: site.brand.name }}</p>
+      <h1 data-p60-field="title">{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
+      {% if section.lead %}<p class="lq-homehero-lead" data-p60-field="lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
         {% 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>
@@ -94,9 +94,9 @@
   {% endif %}
   <div class="container lq-homehero-inner">
     <div>
-      <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 %}
+      <p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow | default: site.brand.name }}</p>
+      <h1 data-p60-field="title">{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
+      {% if section.lead %}<p class="lq-homehero-lead" data-p60-field="lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
         {% 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 %}

package/starter/sections/people.liquid

@@ -7,18 +7,19 @@
   <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 %}
+      {% if section.eyebrow %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+      {% if section.heading %}<h2 data-p60-field="heading">{{ section.heading }}</h2>{% endif %}
+      {% if section.text %}<p class="lq-muted" data-p60-field="text">{{ 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 %}
+        <h3 data-p60-field="items.{{ forloop.index0 }}.name">{{ person.name }}</h3>
+        <p class="lq-person-role" data-p60-field="items.{{ forloop.index0 }}.role">{{ person.role }}</p>
+        {%- comment -%} The quotation marks are ours, so the marker goes on a span holding the statement alone. {%- endcomment -%}
+        {% if person.statement %}<p class="lq-person-statement">“<span data-p60-field="items.{{ forloop.index0 }}.statement">{{ person.statement }}</span>”</p>{% endif %}
       </article>
       {% endfor %}
     </div>

package/starter/sections/values.liquid

@@ -1,6 +1,6 @@
 <section class="lq-values">
   <div class="container">
-    <h2>{{ section.heading | default: "What guides us" }}</h2>
+    <h2 data-p60-field="heading">{{ section.heading | default: "What guides us" }}</h2>
     {% 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,
@@ -10,8 +10,8 @@
       {% for item in section.items %}
       <li>
         <span class="lq-value-dot"></span>
-        <h3>{{ item.title }}</h3>
-        <p>{{ item.description }}</p>
+        <h3 data-p60-field="items.{{ forloop.index0 }}.title">{{ item.title }}</h3>
+        <p data-p60-field="items.{{ forloop.index0 }}.description">{{ item.description }}</p>
       </li>
       {% endfor %}
     </ol>