@mindful-web/marko-web-digital-edition 1.95.0

package/.eslintignore

@@ -0,0 +1 @@
+*.marko.js

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# @mindful-web/marko-web-digital-edition
+
+A native digital edition for a magazine issue: a **reflow** article reader and a
+**replica** page view, served on the publisher's own site under the issue's URL,
+gated with IdentityX, tracked with p1events, indexable with paywalled-content
+structured data.
+
+The edition is described entirely by a **manifest JSON** produced by the
+digital-edition ingest pipeline from the issue's press PDF. This package reads that
+file; it reads and writes no CMS fields. Page images and ad crops are imgix URLs built
+against the PDF already attached to the magazine issue.
+
+## Install
+
+```js
+// packages/global/routes/index.js
+const digitalEdition = require('@mindful-web/marko-web-digital-edition/routes');
+
+module.exports = (app, siteConfig) => {
+  // Mount BEFORE the magazine routes.
+  digitalEdition(app, {
+    configDir: path.resolve(__dirname, '../config/editions'),
+    // Optional: render bylines with the site's own author node.
+    authorNode: require('@mindful-web/marko-web-theme-monorail/components/nodes/author.marko'),
+  });
+  magazine(app);
+  // …
+};
+```
+
+```scss
+// packages/global/scss/core.scss
+@import "@mindful-web/marko-web-digital-edition/scss/index";
+```
+
+Drop each issue's manifest at `config/editions/<issueId>.json`. The manifest's `siteId`
+must match the running site's id, or the routes 404 — a shared package ships to every
+site in a repo, and only the issue's own site may serve it.
+
+## Options
+
+| Option | Default | Purpose |
+|---|---|---|
+| `configDir` | required | Directory holding `<issueId>.json` manifests |
+| `mountPoint` | `/magazine` | Issue URL prefix: `<mountPoint>/<issueId>/digital-edition` |
+| `siteId` | `() => app.locals.config.website('id')` | Site guard |
+| `noIndexKey` | `digitalEdition.native.noIndex` | Site-config path; truthy = robots noindex on every edition page (review hold) |
+| `authorNode` | none | Compiled Marko template rendering `{ author }`; without it bylines are plain linked names |
+| `templates` | `{}` | Overrides for `hub`, `article`, `partial` |
+| `legacyRedirect` | `false` | 301 `/edition/:issueId` to the hub |
+
+## URLs
+
+```
+<mountPoint>/32023/digital-edition                    hub: cover, contents, first article
+<mountPoint>/32023/digital-edition?view=print         replica page view
+<mountPoint>/32023/digital-edition/<slug>             one article, server-rendered
+<mountPoint>/32023/digital-edition/<slug>?partial=1   fragment for the scroll reader
+```
+
+## Sign-in gate
+
+Anonymous readers get the same IdentityX flow as the content meter bar and hard-gated
+articles, with the source **`digitalEdition`** so conversions are attributable: the
+email field is visible in the gate itself; a new user is then asked for the site's
+`requiredCreateFieldRows`; an existing user receives a login link. A logged-in user
+still missing required fields sees the profile form instead.
+
+- **Hub / continuous reader**: a fixed, collapsible bottom bar
+  (`<marko-web-digital-edition-gate variant="bar">`).
+- **Single article page**: an inline panel after the teaser
+  (`variant="inline"`).
+
+Events carry `contentGateType: "digitalEdition"`, the issue id, publication and issue
+name, plus the article slug and print page on article pages. The IdentityX login form
+needs `req.identityX`, so the site must have `marko-web-identity-x` configured.
+
+## Tracking
+
+Everything goes through the site's p1events queue (so it carries the reader identity) and
+is gated on `p1events.enabled`. Entities are built server-side in `lib/entities.js` and
+stamped on the elements as `data-edition-entity`; namespaces come from the p1events
+`create-namespace` util (the tenant), never a literal.
+
+| Entity | Namespace | Id | Refs |
+|---|---|---|---|
+| issue | `base.<tenant>.magazine-issue` | `<issueId>` | |
+| article | `base.<tenant>.digital-edition-article` | `<issueId>.<slug>` | issue, `content` (the matched web article), `authors` |
+| ad | `base.<tenant>.digital-edition-ad` | `<issueId>.<adId>` | issue, `company` (directory match) |
+
+| Category | Action | When | Entity |
+|---|---|---|---|
+| Digital Edition | View | hub, replica and article page loads (`props.view`) | issue |
+| Digital Edition | Page View | replica page 50% visible, once per page | issue |
+| Digital Edition | Engaged View | first human gesture on the hub / replica | issue |
+| Digital Edition Article | View | article page load, and each article entering the scroll reader | article |
+| Digital Edition Article | Scroll | 25 / 50 / 75 / 90 percent of the article's own body, **full body only** (never a teaser) | article |
+| Digital Edition Article | Engaged View | first human gesture on an article page | article |
+| Digital Edition Article | Continue Reading | a teaser or its link is clicked | article |
+| Digital Edition Ad Unit | Impression | unit ≥ 25% in view (served) | ad |
+| Digital Edition Ad Unit | Active View | IAB: ≥ 50% in view for one continuous second (≥ 30% for units over 242,500 px²) | ad |
+| Digital Edition Ad Unit | Click | inline, trailing and replica hotspot links (p1events link listener) | ad |
+
+Ad categories mirror the Mindful ad server's so a later swap to real creatives is a rename.
+
+## Review hold
+
+Set the site-config key (default `digitalEdition.native.noIndex`) to `true` while an
+issue is under review. Every edition page then emits a single
+`<meta name="robots" content="noindex">` and the hub's structured data omits nothing
+else. Flip it to `false` to let search in. Individual articles the ingest marked
+`noindex: true` stay held regardless.
+
+## Notes
+
+- The page templates render the site document directly with
+  `marko-web-default-page-metadata` rather than through a theme page component, because
+  `no-index` must reach the metadata component, which owns the single canonical and
+  robots tags. Never hand-roll either tag in an override template.
+- Articles need a non-empty reflow body to receive a URL (`isPublishable`).
+- The SCSS consumes no theme variables.

package/components/ad.marko

@@ -0,0 +1,81 @@
+import { cropUrl, cropSrcset } from "../lib";
+import { adEntity, entityAttr } from "../lib/entities";
+
+$ const { manifest, item, eager, inline } = input;
+$ const entity = adEntity(manifest, item, { placement: inline ? "inline" : "after" });
+$ const page = item.printPage;
+$ const src = cropUrl(manifest, page, item.bbox, { w: inline ? 640 : 1200 });
+$ const srcset = cropSrcset(manifest, page, item.bbox, inline ? [320, 480, 640, 800] : undefined);
+$ const sizes = inline ? "(min-width: 75rem) 352px, (min-width: 48rem) 288px, (min-width: 34rem) 46vw, calc(100vw - 2rem)" : "(min-width: 768px) 700px, 100vw";
+$ const alt = item.advertiserName ? `Advertisement: ${item.advertiserName}` : "Advertisement";
+$ const label = item.kind === "advertorial" ? "Sponsored" : "Advertisement";
+$ const linked = Boolean(item.landingUrl);
+$ // A trailing ad narrower than a page in print (a directory strip, a fractional
+$ // unit) renders at roughly print scale instead of stretching to the column.
+$ const scaled = !inline && item.bbox && item.bbox[2] < 0.9 ? `max-width: min(100%, ${Math.round(item.bbox[2] * 44)}rem);` : null;
+
+<!--
+  Print ad rendered as an imgix crop of the issue PDF.
+
+  Tracking contract: these attributes mirror the Mindful ad server's DOM shape
+  (data-unit-form / data-creative-id) so that when this graduates to real
+  ADVERTISING_CREATIVE records served through mindful-reporting/apis/advertising,
+  the browser tracker swaps over without a redesign.
+
+  data-p1-* is required because the p1events engagement tracker deliberately ignores
+  ad containers, and these ads are same-origin (not framed) so clicks never bubble
+  through an iframe boundary the way GAM's do.
+
+  `inline` floats the unit into the article copy at its print-adjacent position
+  (see edition/index.js inlineAdPlacements); the impression tracker reads
+  data-edition-placement to tell the two treatments apart.
+-->
+<div
+  class=`edition-ad edition-ad--${item.kind}${inline ? " edition-ad--inline" : ""}`
+  style=scaled
+  data-unit-form="DIGITAL_EDITION"
+  data-edition-ad-id=item.id
+  data-edition-issue-id=manifest.issueId
+  data-edition-page=page
+  data-edition-placement=(inline ? "inline" : "after")
+  data-advertiser=(item.advertiserName || "")
+  data-edition-entity=JSON.stringify(entity)
+  data-p1-category="Digital Edition Ad Unit"
+  data-p1-entity=entityAttr(entity)
+>
+  <span class="edition-ad__label">${label}</span>
+  <if(linked)>
+    <a
+      class="edition-ad__link"
+      href=item.landingUrl
+      target="_blank"
+      rel="nofollow noopener sponsored"
+      data-p1-action="Click"
+      data-p1-label=(item.advertiserName || "")
+    >
+      <img
+        class="edition-ad__img"
+        src=src
+        srcset=srcset
+        sizes=sizes
+        alt=alt
+        loading=(eager ? "eager" : "lazy")
+        decoding="async"
+      />
+    </a>
+  </if>
+  <else>
+    <img
+      class="edition-ad__img"
+      src=src
+      srcset=srcset
+      sizes=sizes
+      alt=alt
+      loading=(eager ? "eager" : "lazy")
+      decoding="async"
+    />
+  </else>
+  <if(item.advertiserName)>
+    <span class="edition-ad__advertiser">${item.advertiserName}</span>
+  </if>
+</div>

package/components/ad.marko.js

@@ -0,0 +1,102 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-digital-edition$1.95.0/components/ad.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_lib_module = require("../lib"),
+    lib_module = module_lib_module.default || module_lib_module,
+    cropUrl = module_lib_module.cropUrl,
+    cropSrcset = module_lib_module.cropSrcset,
+    module_entities_module = require("../lib/entities"),
+    entities_module = module_entities_module.default || module_entities_module,
+    adEntity = module_entities_module.adEntity,
+    entityAttr = module_entities_module.entityAttr,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_styleAttr = require("marko/dist/runtime/html/helpers/style-attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { manifest, item, eager, inline } = input;
+
+  const entity = adEntity(manifest, item, { placement: inline ? "inline" : "after" });
+
+  const page = item.printPage;
+
+  const src = cropUrl(manifest, page, item.bbox, { w: inline ? 640 : 1200 });
+
+  const srcset = cropSrcset(manifest, page, item.bbox, inline ? [320, 480, 640, 800] : undefined);
+
+  const sizes = inline ? "(min-width: 75rem) 352px, (min-width: 48rem) 288px, (min-width: 34rem) 46vw, calc(100vw - 2rem)" : "(min-width: 768px) 700px, 100vw";
+
+  const alt = item.advertiserName ? `Advertisement: ${item.advertiserName}` : "Advertisement";
+
+  const label = item.kind === "advertorial" ? "Sponsored" : "Advertisement";
+
+  const linked = Boolean(item.landingUrl);
+
+  // A trailing ad narrower than a page in print (a directory strip, a fractional
+
+  // unit) renders at roughly print scale instead of stretching to the column.
+
+  const scaled = !inline && item.bbox && item.bbox[2] < 0.9 ? `max-width: min(100%, ${Math.round(item.bbox[2] * 44)}rem);` : null;
+
+  out.w("<div" +
+    marko_classAttr(("edition-ad edition-ad--" + item.kind) + (inline ? " edition-ad--inline" : "")) +
+    marko_styleAttr(scaled) +
+    " data-unit-form=\"DIGITAL_EDITION\"" +
+    marko_attr("data-edition-ad-id", item.id) +
+    marko_attr("data-edition-issue-id", manifest.issueId) +
+    marko_attr("data-edition-page", page) +
+    marko_attr("data-edition-placement", inline ? "inline" : "after") +
+    marko_attr("data-advertiser", item.advertiserName || "") +
+    marko_attr("data-edition-entity", JSON.stringify(entity)) +
+    " data-p1-category=\"Digital Edition Ad Unit\"" +
+    marko_attr("data-p1-entity", entityAttr(entity)) +
+    "><span class=\"edition-ad__label\">" +
+    marko_escapeXml(label) +
+    "</span>");
+
+  if (linked) {
+    out.w("<a class=\"edition-ad__link\"" +
+      marko_attr("href", item.landingUrl) +
+      " target=\"_blank\" rel=\"nofollow noopener sponsored\" data-p1-action=\"Click\"" +
+      marko_attr("data-p1-label", item.advertiserName || "") +
+      "><img class=\"edition-ad__img\"" +
+      marko_attr("src", src) +
+      marko_attr("srcset", srcset) +
+      marko_attr("sizes", sizes) +
+      marko_attr("alt", alt) +
+      marko_attr("loading", eager ? "eager" : "lazy") +
+      " decoding=\"async\"></a>");
+  } else {
+    out.w("<img class=\"edition-ad__img\"" +
+      marko_attr("src", src) +
+      marko_attr("srcset", srcset) +
+      marko_attr("sizes", sizes) +
+      marko_attr("alt", alt) +
+      marko_attr("loading", eager ? "eager" : "lazy") +
+      " decoding=\"async\">");
+  }
+
+  if (item.advertiserName) {
+    out.w("<span class=\"edition-ad__advertiser\">" +
+      marko_escapeXml(item.advertiserName) +
+      "</span>");
+  }
+
+  out.w("</div>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-digital-edition$1.95.0/components/ad.marko"
+  };

package/components/article-body.marko

@@ -0,0 +1,134 @@
+import { anchorFor, teaserHtml, editionPath, articleAdLayout, cropUrl, cropSrcset } from "../lib";
+import { articleEntity } from "../lib/entities";
+
+$ const { manifest, item, canAccess, headingLevel } = input;
+$ const entity = articleEntity(manifest, item);
+$ const H = headingLevel === 1 ? "h1" : "h2";
+$ const href = editionPath(manifest.issueId, { slug: item.slug });
+$ const layout = canAccess ? articleAdLayout(manifest, item) : null;
+
+<!--
+  One article. Shared by the hub (first article only), the standalone article page,
+  and the `?partial=1` fragment the scroll reader appends — so the three can never
+  drift apart.
+-->
+<article
+  class="edition-article"
+  id=anchorFor(item)
+  data-edition-article-slug=item.slug
+  data-edition-article-href=href
+  data-edition-print-page=item.printPage
+  data-edition-entity=JSON.stringify(entity)
+  data-edition-full-body=(canAccess ? "1" : null)
+>
+  <header class="edition-article__header">
+    <p class="edition-article__page">
+      Page ${item.printPage}
+      <if(item.pageRefs && item.pageRefs.length > 1)>
+        <span class="edition-article__spread">· continues p.&nbsp;${item.pageRefs.slice(1).join(", ")}</span>
+      </if>
+    </p>
+
+    <if(item.headline)>
+      <${H} class="edition-article__headline">${item.headline}</${H}>
+    </if>
+    <if(item.deck)>
+      <p class="edition-article__deck">${item.deck}</p>
+    </if>
+
+    <!--
+      Byline: the site's injected author renderer (e.g. the monorail author node with
+      a linked headshot) when the print byline resolved to a CMS contact, plain text
+      otherwise. See components/author.marko.
+    -->
+    <if(item.authorNode)>
+      <div class="edition-article__author">
+        <marko-web-digital-edition-author author=item.authorNode />
+      </div>
+    </if>
+    <else-if(item.byline)>
+      <p class="edition-article__byline">By ${item.byline}</p>
+    </else-if>
+
+    <if(item.match && item.match.path)>
+      <p class="edition-article__also">
+        Also published online:
+        <a href=item.match.path>${item.match.contentName || "read the web version"}</a>
+      </p>
+    </if>
+  </header>
+
+  <!--
+    Primary art, detected by the ingest from the PDF's image blocks (clustered
+    collage tiles, trimmed clear of any display type that would otherwise be
+    baked into the crop). Shown in both access states — it is the invitation.
+  -->
+  <if(item.leadImage)>
+    <figure class="edition-article__lead">
+      <img
+        src=cropUrl(manifest, item.leadImage.page, item.leadImage.bbox, { w: 1200 })
+        srcset=cropSrcset(manifest, item.leadImage.page, item.leadImage.bbox)
+        sizes="(min-width: 48rem) 672px, 100vw"
+        alt=(item.headline || "Article image")
+        width=Math.round(item.leadImage.bbox[2] * manifest.pdf.baseWidth)
+        height=Math.round(item.leadImage.bbox[3] * manifest.pdf.baseHeight)
+        loading=(headingLevel === 1 ? "eager" : "lazy")
+        decoding="async"
+      />
+    </figure>
+  </if>
+
+  <!--
+    Full body: the print ads that sat inside this article's page run float into the
+    copy at matching depth (see edition/index.js inlineAdPlacements) — the ad div
+    must precede the paragraph it floats against INSIDE the body div, so it shares
+    the paragraphs' formatting context and the text wraps it.
+  -->
+  <if(canAccess)>
+    <div class="edition-article__body">
+      <for|seg| of=layout.segments>
+        <if(seg.ad)>
+          <marko-web-digital-edition-ad manifest=manifest item=seg.ad inline=true />
+        </if>
+        $!{seg.html}
+      </for>
+    </div>
+  </if>
+  <else>
+    <!--
+      Teaser plus one quiet, identical affordance per story. The fade says "there is
+      more"; this says how. The gate's script turns any click on the band or the
+      link into: open the sign-in bar (hub) or scroll to the inline panel (article
+      page) and focus the email field. Without JS the link is the article's own URL.
+    -->
+    <div class="edition-article__gated" data-edition-continue data-edition-slug=item.slug>
+      <div class="edition-article__body edition-article__body--teaser edition-gated-body">
+        $!{teaserHtml(item)}
+      </div>
+      <a class="edition-article__continue" href=href>
+        Continue reading<span class="edition-article__continue-arrow" aria-hidden="true">→</span>
+      </a>
+    </div>
+  </else>
+
+  <!-- Photo credits, pulled out of the body copy by the ingest cleanup. -->
+  <if(item.credits && item.credits.length)>
+    <p class="edition-article__credits">
+      <for|credit, i| of=item.credits>
+        <if(i)>&nbsp;· </if>${credit}
+      </for>
+    </p>
+  </if>
+
+  <!--
+    Claimed ads that cannot float (directory strips, overflow beyond the pacing
+    cap) trail the article at ~print scale. They render INSIDE <article> so the
+    `?partial=1` fragment stays single-child — the scroll reader appends fragment
+    children one by one, and sibling ads used to be dropped by that loop.
+  -->
+  <if(canAccess && layout.trailing.length)>
+    <for|ad| of=layout.trailing>
+      <marko-web-digital-edition-ad manifest=manifest item=ad />
+    </for>
+  </if>
+</article>

package/components/article-body.marko.js

@@ -0,0 +1,186 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-digital-edition$1.95.0/components/article-body.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_lib_module = require("../lib"),
+    lib_module = module_lib_module.default || module_lib_module,
+    anchorFor = module_lib_module.anchorFor,
+    teaserHtml = module_lib_module.teaserHtml,
+    editionPath = module_lib_module.editionPath,
+    articleAdLayout = module_lib_module.articleAdLayout,
+    cropUrl = module_lib_module.cropUrl,
+    cropSrcset = module_lib_module.cropSrcset,
+    module_entities_module = require("../lib/entities"),
+    entities_module = module_entities_module.default || module_entities_module,
+    articleEntity = module_entities_module.articleEntity,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_digital_edition_author_template = require("./author.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_digital_edition_author_tag = marko_loadTag(marko_web_digital_edition_author_template),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_web_digital_edition_ad_template = require("./ad.marko"),
+    marko_web_digital_edition_ad_tag = marko_loadTag(marko_web_digital_edition_ad_template),
+    marko_str = require("marko/dist/runtime/helpers/to-string");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { manifest, item, canAccess, headingLevel } = input;
+
+  const entity = articleEntity(manifest, item);
+
+  const H = headingLevel === 1 ? "h1" : "h2";
+
+  const href = editionPath(manifest.issueId, { slug: item.slug });
+
+  const layout = canAccess ? articleAdLayout(manifest, item) : null;
+
+  out.w("<article class=\"edition-article\"" +
+    marko_attr("id", anchorFor(item)) +
+    marko_attr("data-edition-article-slug", item.slug) +
+    marko_attr("data-edition-article-href", href) +
+    marko_attr("data-edition-print-page", item.printPage) +
+    marko_attr("data-edition-entity", JSON.stringify(entity)) +
+    marko_attr("data-edition-full-body", canAccess ? "1" : null) +
+    "><header class=\"edition-article__header\"><p class=\"edition-article__page\">Page " +
+    marko_escapeXml(item.printPage));
+
+  if (item.pageRefs && (item.pageRefs.length > 1)) {
+    out.w("<span class=\"edition-article__spread\">· continues p.&nbsp;" +
+      marko_escapeXml(item.pageRefs.slice(1).join(", ")) +
+      "</span>");
+  }
+
+  out.w("</p>");
+
+  if (item.headline) {
+    marko_dynamicTag(out, H, function() {
+      return {
+          class: "edition-article__headline"
+        };
+    }, function(out) {
+      out.w(marko_escapeXml(item.headline));
+    }, null, null, __component, "4");
+  }
+
+  if (item.deck) {
+    out.w("<p class=\"edition-article__deck\">" +
+      marko_escapeXml(item.deck) +
+      "</p>");
+  }
+
+  if (item.authorNode) {
+    out.w("<div class=\"edition-article__author\">");
+
+    marko_web_digital_edition_author_tag({
+        author: item.authorNode
+      }, out, __component, "7");
+
+    out.w("</div>");
+  } else if (item.byline) {
+    out.w("<p class=\"edition-article__byline\">By " +
+      marko_escapeXml(item.byline) +
+      "</p>");
+  }
+
+  if (item.match && item.match.path) {
+    out.w("<p class=\"edition-article__also\">Also published online: <a" +
+      marko_attr("href", item.match.path) +
+      ">" +
+      marko_escapeXml(item.match.contentName || "read the web version") +
+      "</a></p>");
+  }
+
+  out.w("</header>");
+
+  if (item.leadImage) {
+    out.w("<figure class=\"edition-article__lead\"><img" +
+      marko_attr("src", cropUrl(manifest, item.leadImage.page, item.leadImage.bbox, {
+        w: 1200
+      })) +
+      marko_attr("srcset", cropSrcset(manifest, item.leadImage.page, item.leadImage.bbox)) +
+      " sizes=\"(min-width: 48rem) 672px, 100vw\"" +
+      marko_attr("alt", item.headline || "Article image") +
+      marko_attr("width", Math.round(item.leadImage.bbox[2] * manifest.pdf.baseWidth)) +
+      marko_attr("height", Math.round(item.leadImage.bbox[3] * manifest.pdf.baseHeight)) +
+      marko_attr("loading", headingLevel === 1 ? "eager" : "lazy") +
+      " decoding=\"async\"></figure>");
+  }
+
+  if (canAccess) {
+    out.w("<div class=\"edition-article__body\">");
+
+    var $for$0 = 0;
+
+    marko_forOf(layout.segments, function(seg) {
+      var $keyScope$0 = "[" + (($for$0++) + "]");
+
+      if (seg.ad) {
+        marko_web_digital_edition_ad_tag({
+            manifest: manifest,
+            item: seg.ad,
+            inline: true
+          }, out, __component, "14" + $keyScope$0);
+      }
+
+      out.w(marko_str(seg.html));
+    });
+
+    out.w("</div>");
+  } else {
+    out.w("<div class=\"edition-article__gated\" data-edition-continue" +
+      marko_attr("data-edition-slug", item.slug) +
+      "><div class=\"edition-article__body edition-article__body--teaser edition-gated-body\">" +
+      marko_str(teaserHtml(item)) +
+      "</div><a class=\"edition-article__continue\"" +
+      marko_attr("href", href) +
+      ">Continue reading<span class=\"edition-article__continue-arrow\" aria-hidden=\"true\">→</span></a></div>");
+  }
+
+  if (item.credits && item.credits.length) {
+    out.w("<p class=\"edition-article__credits\">");
+
+    marko_forOf(item.credits, function(credit, i) {
+      if (i) {
+        out.w("&nbsp;· ");
+      }
+
+      out.w(marko_escapeXml(credit));
+    });
+
+    out.w("</p>");
+  }
+
+  if (canAccess && layout.trailing.length) {
+    var $for$1 = 0;
+
+    marko_forOf(layout.trailing, function(ad) {
+      var $keyScope$1 = "[" + (($for$1++) + "]");
+
+      marko_web_digital_edition_ad_tag({
+          manifest: manifest,
+          item: ad
+        }, out, __component, "20" + $keyScope$1);
+    });
+  }
+
+  out.w("</article>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-digital-edition$1.95.0/components/article-body.marko",
+    tags: [
+      "./author.marko",
+      "./ad.marko"
+    ]
+  };

package/components/author.marko

@@ -0,0 +1,30 @@
+$ const { author } = input;
+$ const { authorNode } = (out.global.digitalEdition || {});
+$ const path = author && author.siteContext && author.siteContext.path;
+
+<!--
+  Byline for an article whose print byline resolved to a CMS contact.
+
+  The consuming site injects its own author renderer through the routes factory
+  (`authorNode`), e.g. the monorail theme's `nodes/author.marko`, so this package has no
+  dependency on any theme. Without one, a plain (optionally linked) name renders.
+-->
+<if(author)>
+  <if(authorNode)>
+    <${authorNode} author=author />
+  </if>
+  <else>
+    <p class="edition-article__byline">
+      By
+      <if(path)>
+        <a href=path>${author.name}</a>
+      </if>
+      <else>
+        ${author.name}
+      </else>
+      <if(author.title)>
+        <span class="edition-article__byline-title">, ${author.title}</span>
+      </if>
+    </p>
+  </else>
+</if>