@port60/template-kit 0.21.0 → 1.0.0

package/starter/assets/theme.css

@@ -25,6 +25,9 @@ h3 { font-size: 1.15rem; }
 p { color: var(--muted); line-height: 1.7; margin: 0 0 1rem; }
 strong { color: var(--ink); }
 .site-header { background: rgba(14, 22, 20, 0.86); }
+/* Non-link groups keep the same typography and hit area as neighbouring navigation links. */
+.site-nav button.nav-dropdown-toggle { appearance: none; border: 0; background: transparent; padding: 0.6rem 0.95rem; border-radius: 999px; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
+.site-nav button.nav-dropdown-toggle:hover { background: rgba(31, 42, 51, 0.05); color: var(--ink); }
 .lq-hero { padding: 4.5rem 0 2.5rem; border-bottom: 1px solid var(--line); }
 .lq-kicker { display: inline-block; border: 1px solid var(--line-strong); color: var(--primary); border-radius: 4px; padding: 0.3rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
 .lq-hero h1 { margin-top: 1rem; max-width: 18ch; }

package/starter/layout.liquid

@@ -25,23 +25,25 @@
       <span aria-hidden="true"></span>
     </button>
 
-    <nav class="site-nav" id="site-nav" aria-label="Primary">
-      {% for item in site.nav.items %}
-        {% if item.children %}
-          <span class="nav-dropdown">
-            <a href="{{ item.href }}" class="nav-dropdown-toggle" aria-haspopup="true">{{ item.label }} ▾</a>
-            <span class="nav-dropdown-menu">
+    <nav class="site-nav" id="site-nav" aria-label="Primary" data-p60-nav>
+      {% for item in site.nav.header %}
+        {% if item.children.size > 0 %}
+          <span class="nav-dropdown" data-p60-nav-item>
+            {% if item.kind == 'group' %}<button type="button" class="nav-dropdown-toggle" data-p60-nav-toggle aria-expanded="false" aria-controls="starter-menu-{{ forloop.index }}">{{ item.label }} ▾</button>{% else %}<a href="{{ item.href }}" class="nav-dropdown-toggle" data-p60-nav-toggle aria-expanded="false" aria-controls="starter-menu-{{ forloop.index }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }} ▾</a>{% endif %}
+            <span class="nav-dropdown-menu" id="starter-menu-{{ forloop.index }}" data-p60-nav-menu>
               {% for child in item.children %}
-                <a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>
+                {% if child.kind == 'group' %}<span class="nav-group-label">{{ child.label }}</span>{% else %}<a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>{% endif %}
+                {% for grandchild in child.children %}{% if grandchild.kind == 'group' %}<span class="nav-group-label">{{ grandchild.label }}</span>{% else %}<a href="{{ grandchild.href }}"{% if grandchild.external %} target="_blank" rel="noopener"{% endif %}>{{ grandchild.label }}</a>{% endif %}{% endfor %}
               {% endfor %}
             </span>
           </span>
-        {% elsif item.cta %}
-          <a class="nav-cta" href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
+        {% elsif item.kind == 'group' %}
+          <span class="nav-group-label">{{ item.label }}</span>
         {% else %}
           <a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
         {% endif %}
       {% endfor %}
+      {% if site.actions.header %}<a class="nav-cta" href="{{ site.actions.header.href }}">{{ site.actions.header.label }}</a>{% endif %}
       {% island 'search' %}
       {% island 'member_menu' %}
     </nav>
@@ -59,19 +61,14 @@
       {% if site.brand.tagline %}<h2>{{ site.brand.tagline }}</h2>{% endif %}
     </div>
     <div class="footer-links">
-      {% comment %} A tenant-curated footer menu when they've built one, else the main site.nav. {% endcomment %}
-      {% if site.nav.footer.size > 0 %}
+      {% comment %} The platform resolves the footer independently; an empty footer stays empty. {% endcomment %}
         {% for item in site.nav.footer %}
-          <a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
+          {% if item.kind == 'group' %}<span class="nav-group-label">{{ item.label }}</span>{% else %}<a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>{% endif %}
           {% for child in item.children %}
-            <a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>
+            {% if child.kind == 'group' %}<span class="nav-group-label">{{ child.label }}</span>{% else %}<a href="{{ child.href }}"{% if child.external %} target="_blank" rel="noopener"{% endif %}>{{ child.label }}</a>{% endif %}
+            {% for grandchild in child.children %}{% if grandchild.kind == 'group' %}<span class="nav-group-label">{{ grandchild.label }}</span>{% else %}<a href="{{ grandchild.href }}">{{ grandchild.label }}</a>{% endif %}{% endfor %}
           {% endfor %}
         {% endfor %}
-      {% else %}
-        {% for item in site.nav.items %}
-          <a href="{{ item.href }}">{{ item.label }}</a>
-        {% endfor %}
-      {% endif %}
     </div>
   </div>
   <div class="container">

package/starter/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "starter",
-  "version": "1.14.0",
-  "format": "port60-liquid@1",
+  "version": "2.0.0",
+  "format": "port60-liquid@2",
   "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": {
@@ -32,7 +32,8 @@
     "heroImagery": true,
     "behaviors": [
       "reveal",
-      "carousel"
+      "carousel",
+      "nav"
     ],
     "focus": [
       "donate",
@@ -94,7 +95,7 @@
       }
     ]
   },
-  "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.",
+  "changelog": "Uses the v2 site object, resolved header actions and collection envelopes while preserving authored field markers.",
   "imagery": {
     "hero": {
       "idealAspect": "16:9",

package/starter/preview/config.json

@@ -0,0 +1,4 @@
+{
+  "schemaVersion": 1,
+  "focus": "none"
+}

package/starter/preview/media/README.md

@@ -0,0 +1,9 @@
+# Designer preview imagery
+
+Place authorised JPEG, PNG or WebP images here, at most 2 MiB each. Reference an image in
+your independent author content as `p60preview:filename.jpg`. Configure that JSON content
+file through `preview/config.json`, for example `"content": "content.json"`.
+
+These images ship only in the separate designer preview bundle. They never enter the
+runtime Liquid/CSS artifact or a tenant's media library. Keep provenance and required
+attribution beside your source images. No tenant content or secrets belong here.

package/starter/sections/campaigns.liquid

@@ -4,13 +4,14 @@
   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 %}
+{% if site.content.campaigns.items.size > 0 %}
 <section class="lq-site.content.campaigns">
   <div class="container">
-    <h2 data-p60-field="heading">{{ section.heading | default: campaignsLabel }}</h2>
-    {% if section.text %}<p data-p60-field="text">{{ section.text }}</p>{% endif %}
+    {% if section.eyebrow != nil and section.eyebrow != '' %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+    {% if section.title == nil %}<h2>{{ site.content.campaigns.label }}</h2>{% elsif section.title != '' %}<h2 data-p60-field="title">{{ section.title }}</h2>{% endif %}
+    {% if section.subtitle != nil and section.subtitle != '' %}<p data-p60-field="subtitle">{{ section.subtitle }}</p>{% endif %}
     <ul class="lq-campaign-list">
-      {% for campaign in site.content.campaigns %}
+      {% for campaign in site.content.campaigns.items %}
       <li class="lq-campaign">
         <h3>{{ campaign.title }}</h3>
         {% if campaign.summary %}<p>{{ campaign.summary }}</p>{% endif %}

package/starter/sections/homeHero.liquid

@@ -2,7 +2,7 @@
   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
+  1. EVERY field is optional. The host resolves inherited copy; explicit blanks omit; no photos means the
      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
@@ -14,6 +14,10 @@
      toward the photo's own shape (height-clamped) so a wide landscape stays entirely visible,
      with your copy stacked after the band.
 {% endcomment %}
+{% assign heroButtonLabel = site.actions.hero.label %}
+{% assign heroButtonHref = site.actions.hero.href %}
+{% if section.primaryLabel != nil %}{% assign heroButtonLabel = section.primaryLabel %}{% endif %}
+{% if section.primaryHref != nil %}{% assign heroButtonHref = section.primaryHref %}{% endif %}
 {% assign heroCount = section.images | size %}
 {% if heroCount == 1 %}
   {% assign heroPhoto = section.images.first.imageUrl %}
@@ -31,19 +35,19 @@
 {% endif %}
 {% assign heroFraming = section.photoFraming | default: 'fill' %}
 {% if heroCount > 0 and heroFraming == 'whole' %}
-{% if section.actionStyle == 'button' or section.givingStyle == 'button' %}
+{% if section.actionStyle == '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">
     {% 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" 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.eyebrow != nil and section.eyebrow != '' %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+        {% if section.title != nil and section.title != '' %}<h1 data-p60-field="title">{{ section.title }}</h1>{% endif %}
         {% 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>
+        {% if heroButtonLabel != nil and heroButtonLabel != '' and heroButtonHref != nil and heroButtonHref != '' %}<a class="button button-primary" href="{{ heroButtonHref }}">{% if section.primaryLabel != nil %}<span data-p60-field="primaryLabel">{{ section.primaryLabel }}</span>{% else %}{{ heroButtonLabel }}{% endif %}</a>{% endif %}
+        {% if section.secondaryLabel != nil and section.secondaryLabel != '' and section.secondaryHref != nil and section.secondaryHref != '' %}<a class="button" href="{{ section.secondaryHref }}"><span data-p60-field="secondaryLabel">{{ section.secondaryLabel }}</span></a>{% endif %}
         </div>
       </div>
     </div>
@@ -59,18 +63,18 @@
   </div>
   <div class="container lq-homehero-inner lq-vista-overlap">
     <div>
-      <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.eyebrow != nil and section.eyebrow != '' %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+      {% if section.title != nil and section.title != '' %}<h1 data-p60-field="title">{{ section.title }}</h1>{% endif %}
       {% 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>
+        {% if heroButtonLabel != nil and heroButtonLabel != '' and heroButtonHref != nil and heroButtonHref != '' %}<a class="button button-primary" href="{{ heroButtonHref }}">{% if section.primaryLabel != nil %}<span data-p60-field="primaryLabel">{{ section.primaryLabel }}</span>{% else %}{{ heroButtonLabel }}{% endif %}</a>{% endif %}
+        {% if section.secondaryLabel != nil and section.secondaryLabel != '' and section.secondaryHref != nil and section.secondaryHref != '' %}<a class="button" href="{{ section.secondaryHref }}"><span data-p60-field="secondaryLabel">{{ section.secondaryLabel }}</span></a>{% endif %}
       </div>
     </div>
-    <aside id="donate">
-      {%- comment -%} The site focus decides which widget leads (section.primary); this island becomes it: the donation widget or the volunteer sign-up. {%- endcomment -%}
+    {% if site.actions.widget != nil and site.actions.widget != 'none' %}<aside id="donate">
+      {%- comment -%} site.actions.widget selects the platform widget. The template places it without changing that choice. {%- endcomment -%}
       {% island 'primary_action_widget' %}
-    </aside>
+    </aside>{% endif %}
   </div>
 </section>
 {% endif %}
@@ -94,23 +98,23 @@
   {% endif %}
   <div class="container lq-homehero-inner">
     <div>
-      <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.eyebrow != nil and section.eyebrow != '' %}<p class="lq-kicker" data-p60-field="eyebrow">{{ section.eyebrow }}</p>{% endif %}
+      {% if section.title != nil and section.title != '' %}<h1 data-p60-field="title">{{ section.title }}</h1>{% endif %}
       {% 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 %}
+        {% if section.actionStyle == 'button' %}
+        {% if heroButtonLabel != nil and heroButtonLabel != '' and heroButtonHref != nil and heroButtonHref != '' %}<a class="button button-primary" href="{{ heroButtonHref }}">{% if section.primaryLabel != nil %}<span data-p60-field="primaryLabel">{{ section.primaryLabel }}</span>{% else %}{{ heroButtonLabel }}{% endif %}</a>{% endif %}
         {% else %}
-        {% 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 %}
+        {% if heroButtonLabel != nil and heroButtonLabel != '' and heroButtonHref != nil and heroButtonHref != '' %}<a class="button button-primary" href="{{ heroButtonHref }}">{% if section.primaryLabel != nil %}<span data-p60-field="primaryLabel">{{ section.primaryLabel }}</span>{% else %}{{ heroButtonLabel }}{% endif %}</a>{% endif %}
         {% endif %}
-        <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
+        {% if section.secondaryLabel != nil and section.secondaryLabel != '' and section.secondaryHref != nil and section.secondaryHref != '' %}<a class="button" href="{{ section.secondaryHref }}"><span data-p60-field="secondaryLabel">{{ section.secondaryLabel }}</span></a>{% endif %}
       </div>
     </div>
-    {% unless section.actionStyle == 'button' or section.givingStyle == 'button' %}
+    {% if section.actionStyle != 'button' and site.actions.widget != nil and site.actions.widget != 'none' %}
     <aside id="donate">
       {% island 'primary_action_widget' %}
     </aside>
-    {% endunless %}
+    {% endif %}
   </div>
 </section>
 {% endif %}

package/starter/sections/values.liquid

@@ -1,6 +1,6 @@
 <section class="lq-values">
   <div class="container">
-    <h2 data-p60-field="heading">{{ section.heading | default: "What guides us" }}</h2>
+    {% if section.heading != nil and section.heading != '' %}<h2 data-p60-field="heading">{{ section.heading }}</h2>{% endif %}
     {% 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,