npm - @tokenoftrust/storefront-runner - Versions diffs - 2.2.126 → 2.3.1 - Mend

@tokenoftrust/storefront-runner 2.2.126 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/apps/storefront/src/pages/blog/[slug].astro CHANGED Viewed

@@ -1,9 +1,13 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
 import BlogPaywall from "@/components/blog/BlogPaywall.astro";
 import ReactionBar from "@/components/blog/ReactionBar.astro";
-import { getBlogPost, listBlogPosts, resolveBlogRedirect } from "@/lib/blog/provider.js";
-import { authorSlug, getTranslations } from "@/lib/blog/collection.js";
+import ShareRow from "@/components/blog/ShareRow.astro";
+import { getBlogPost, getBlogSettings, listBlogPosts, resolveBlogRedirect } from "@/lib/blog/provider.js";
+import { authorSlug, categorySlug, getTranslations } from "@/lib/blog/collection.js";
+import { bylineAuthor, resolveBlogPresentation, shareLinks } from "@/lib/blog/presentation.js";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs.js";
 import { viewerHasBlogAccess } from "@/lib/blog/access.js";
 import { articleBodyHtml } from "@/lib/blog/teaser.js";
 import { readViewerSession, safeNext } from "@/lib/auth/route.js";
@@ -41,16 +45,27 @@ const next = safeNext(`${basePath}/blog/${post.slug}/`);
 const loginHref = `/auth/login?next=${encodeURIComponent(next)}`;
 const canonical = new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString();
+const presentation = resolveBlogPresentation(await getBlogSettings(tenant.tenant_id, content));
+// A post that names no author has no byline: never attribute it to anyone (the blog's title, the
+// store) its content does not name.
+const author = bylineAuthor(post.author);
 // The author archive (`/blog/author/<slug>`) lists posts from the curated blog
 // index, and 404s for an author with no LISTED post (an unlisted-only or
 // index-omitted byline). Resolve that up front so the byline links ONLY when the
 // archive will actually render — a byline must never point at a missing page
 // (the invariant `blog/author/[author].astro` documents). Same slug + same source
-// the archive itself filters on, so the two can't disagree.
-const authorArchiveSlug = authorSlug(post.author);
-const authorHasArchive = (await listBlogPosts(tenant.tenant_id, content, publicationTimestamp)).some(
+// the archive itself filters on, so the two can't disagree. Tag links follow the
+// same rule against `blog/tag/[tag].astro`.
+const listed = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp);
+const authorArchiveSlug = author ? authorSlug(author) : "";
+const authorHasArchive = authorArchiveSlug !== "" && listed.some(
   (p) => authorSlug(p.author) === authorArchiveSlug,
 );
+const archivedTags = new Set(listed.flatMap((p) => p.tags.map(categorySlug)));
+const tagLinks = post.tags.map((tag) => {
+  const slug = categorySlug(tag);
+  return { label: tag, href: slug && archivedTags.has(slug) ? `${basePath}/blog/tag/${slug}/` : null };
+});
 const authorUrl = authorHasArchive
   ? new URL(`/blog/author/${authorArchiveSlug}/`, canonicalBase + "/").toString()
   : undefined;
@@ -60,15 +75,21 @@ const articleLd = blogPostingLd(post, {
   publisherName: tenant.displayName,
   authorUrl,
 });
-const crumbs = breadcrumbLd([
-  { label: tenant.displayName, href: "/" },
+const trail = siteTrail(
+  homeCrumbLabel(await content.getChrome()),
   { label: "Blog", href: "/blog/" },
   { label: post.title, href: `/blog/${post.slug}/` },
-], canonicalBase);
+);
+const crumbs = breadcrumbLd(trail, canonicalBase);
 const blogHref = `${basePath}/blog/`;
 const authorHref = authorHasArchive
   ? `${basePath}/blog/author/${authorArchiveSlug}/`
   : null;
+const share = shareLinks(presentation.share, {
+  url: canonical,
+  title: post.title,
+  image: post.featuredImage ? new URL(post.featuredImage.src, canonicalBase + "/").toString() : undefined,
+});
 // I2 — hreflang alternates + per-variant <html lang>. Singleton ⇒ [] alternates
 // and no `lang` override, so a non-translated post is byte-identical to today.
@@ -104,16 +125,16 @@ const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
   lang={lang}
 >
   <article class="article-shell">
-    <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={blogHref}>Blog</a><span aria-hidden="true">/</span><span>{post.categories[0] ?? "Article"}</span></nav>
+    <Breadcrumbs crumbs={trail} class="breadcrumbs" />
     <header>
-      {post.tags[0] && <p class="eyebrow eyebrow--tick">{post.tags[0]}</p>}
+      {presentation.postEyebrow && post.tags[0] && <p class="eyebrow eyebrow--tick">{post.tags[0]}</p>}
       <h1>{post.title}</h1>
-      <p class="dek">{post.excerpt}</p>
+      {presentation.dek && post.excerpt && <p class="dek">{post.excerpt}</p>}
       <div class="byline">
-        <span>By {authorHref
-          ? <a href={authorHref} class="byline-author" rel="author">{post.author}</a>
-          : <span class="byline-author">{post.author}</span>}</span>
-        <span aria-hidden="true">·</span>
+        {author && <span>By {authorHref
+          ? <a href={authorHref} class="byline-author" rel="author">{author}</a>
+          : <span class="byline-author">{author}</span>}</span>}
+        {author && <span aria-hidden="true">·</span>}
         <time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</time>
       </div>
       {translations.length > 1 && (
@@ -143,26 +164,34 @@ const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
         decoding="async"
       />
     )}
-    <div class="article-grid">
-      <aside>
-        <a href={blogHref}>← All articles</a>
-        {post.tags.length > 0 && <div class="article-tags">{post.tags.map((tag) => <span>{tag}</span>)}</div>}
-      </aside>
+    <div class:list={["article-grid", { "article-grid--single": !presentation.aside }]}>
+      {presentation.aside && (
+        <aside>
+          <a href={blogHref}>← All articles</a>
+          {tagLinks.length > 0 && <div class="article-tags">{tagLinks.map((tag) => tag.href ? <a href={tag.href}>{tag.label}</a> : <span>{tag.label}</span>)}</div>}
+        </aside>
+      )}
       <div class="blog-main">
         <div class="blog-body" set:html={bodyHtml}></div>
         {gated && !unlock && (
           <BlogPaywall access={post.access ?? "authenticated"} next={next} signedIn={!!viewer} loginHref={loginHref} />
         )}
+        {!presentation.aside && tagLinks.length > 0 && (
+          <ul class="post-tags" aria-label="Tags">
+            {tagLinks.map((tag) => <li>{tag.href ? <a href={tag.href}>{tag.label}</a> : <span>{tag.label}</span>}</li>)}
+          </ul>
+        )}
+        <ShareRow links={share} />
       </div>
     </div>
-    <ReactionBar collection="blog" slug={post.slug} />
+    {presentation.reactions && <ReactionBar collection="blog" slug={post.slug} />}
   </article>
 </Layout>
 <style>
   .article-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(2rem, 5vw, 5rem); }
-  .breadcrumbs { display: flex; gap: .55rem; align-items: center; color: var(--color-muted); font-size: .84rem; }
-  .breadcrumbs a { color: var(--color-accent-ink); font-weight: 700; }
+  .article-shell :global(.breadcrumbs) { font-size: .84rem; }
+  .article-shell :global(.breadcrumbs a) { color: var(--color-accent-ink); font-weight: 700; }
   header { max-width: 880px; margin: clamp(2.5rem, 6vw, 5rem) auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
   header .eyebrow { justify-content: center; }
   h1 { margin-top: .9rem; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; }
@@ -178,8 +207,11 @@ const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
   .article-grid { display: grid; grid-template-columns: 190px minmax(0, 720px); justify-content: center; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(3rem, 7vw, 5.5rem); }
   aside { align-self: start; position: sticky; top: 7rem; }
   aside > a { color: var(--color-accent-ink); font-size: .88rem; font-weight: 700; }
+  .article-grid--single { grid-template-columns: minmax(0, 720px); }
   .article-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
-  .article-tags span { padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .7rem; }
+  .article-tags > *, .post-tags :is(a, span) { padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .7rem; text-decoration: none; }
+  .article-tags a:hover, .post-tags a:hover { color: var(--color-accent-ink); border-color: var(--color-accent); }
+  .post-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 2rem 0 0; padding: 0; list-style: none; }
   .blog-main { min-width: 0; }
   .blog-body { min-width: 0; font-size: 1.05rem; line-height: 1.78; }
   .blog-body :global(p), .blog-body :global(ul), .blog-body :global(ol), .blog-body :global(blockquote), .blog-body :global(figure), .blog-body :global(table), .blog-body :global(pre) { margin-block: 1.25rem; }

package/apps/storefront/src/pages/blog/author/[author].astro CHANGED Viewed

@@ -1,7 +1,10 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
 import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
-import { listBlogPosts } from "@/lib/blog/provider.js";
+import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs.js";
 import { authorSlug, getAuthors } from "@/lib/blog/collection.js";
 import { breadcrumbLd } from "@/lib/jsonld.js";
@@ -12,7 +15,7 @@ const { tenant, basePath, canonicalBase, content, publicationTimestamp } = Astro
 const slug = Astro.params.author ?? "";
 const allPosts = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp);
-const posts = allPosts.filter((post) => authorSlug(post.author) === slug);
+const posts = slug ? allPosts.filter((post) => authorSlug(post.author) === slug) : [];
 if (posts.length === 0) return new Response(null, { status: 404 });
 const authorName = posts[0]!.author;
@@ -49,11 +52,13 @@ const itemListLd = {
     url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
   })),
 };
-const crumbs = breadcrumbLd([
-  { label: tenant.displayName, href: "/" },
+const presentation = resolveBlogPresentation(await getBlogSettings(tenant.tenant_id, content));
+const trail = siteTrail(
+  homeCrumbLabel(await content.getChrome()),
   { label: "Blog", href: "/blog/" },
   { label: authorName, href: `/blog/author/${slug}/` },
-], canonicalBase);
+);
+const crumbs = breadcrumbLd(trail, canonicalBase);
 ---
 <Layout
@@ -63,9 +68,9 @@ const crumbs = breadcrumbLd([
   fullBleed
   jsonLd={[crumbs, profileLd, itemListLd]}
 >
-  <header class="author-hero">
+  <header class:list={["author-hero", { "author-hero--plain": !presentation.hero }]}>
     <div class="blog-shell">
-      <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={href("/blog/")}>Blog</a><span aria-hidden="true">/</span><span>Author</span></nav>
+      <Breadcrumbs crumbs={trail} class="breadcrumbs" />
       <div class="author-id">
         {avatarUrl && <img class="avatar" src={avatarUrl} alt={authorName} width="96" height="96" decoding="async" />}
         <div>
@@ -115,8 +120,11 @@ const crumbs = breadcrumbLd([
 <style>
   .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
   .author-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
-  .breadcrumbs { display: flex; gap: .55rem; align-items: center; font-size: .84rem; color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); }
-  .breadcrumbs a { color: inherit; font-weight: 700; }
+  .author-hero :global(.breadcrumbs) { font-size: .84rem; }
+  .author-hero:not(.author-hero--plain) :global(.breadcrumbs), .author-hero:not(.author-hero--plain) :global(.breadcrumbs *) { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); }
+  .author-hero :global(.breadcrumbs a) { font-weight: 700; }
+  .author-hero--plain { padding: clamp(2rem, 5vw, 3.5rem) 0 0; background: none; color: inherit; }
+  .author-hero--plain :is(.eyebrow, .author-title, .author-bio) { color: var(--color-muted); }
   .author-id { display: flex; gap: 1.5rem; align-items: center; margin-top: 1.5rem; }
   .avatar { flex: 0 0 auto; width: 96px; height: 96px; border-radius: var(--radius-full); object-fit: cover; box-shadow: var(--shadow-md); }
   .author-hero h1 { margin-top: .5rem; color: inherit; font-size: clamp(2.4rem, 6vw, 4.2rem); }

package/apps/storefront/src/pages/blog/category/[category].astro CHANGED Viewed

@@ -1,8 +1,11 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
 import PostGrid from "@/components/blog/PostGrid.astro";
-import { listBlogPosts } from "@/lib/blog/provider.js";
+import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
 import { collectPostsByTerm } from "@/lib/blog/collection.js";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs.js";
 import { breadcrumbLd } from "@/lib/jsonld.js";
 const { tenant, basePath, canonicalBase, content, publicationTimestamp } = Astro.locals;
@@ -14,6 +17,7 @@ const all = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp)
 const match = collectPostsByTerm(all, "categories", param);
 if (!match) return new Response(null, { status: 404 });
 const { label, posts } = match;
+const presentation = resolveBlogPresentation(await getBlogSettings(tenant.tenant_id, content));
 const path = `/blog/category/${param}/`;
 const itemList = {
@@ -27,11 +31,12 @@ const itemList = {
     url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
   })),
 };
-const crumbs = breadcrumbLd([
-  { label: tenant.displayName, href: "/" },
+const trail = siteTrail(
+  homeCrumbLabel(await content.getChrome()),
   { label: "Blog", href: "/blog/" },
   { label, href: path },
-], canonicalBase);
+);
+const crumbs = breadcrumbLd(trail, canonicalBase);
 ---
 <Layout
@@ -41,12 +46,12 @@ const crumbs = breadcrumbLd([
   fullBleed
   jsonLd={[crumbs, itemList]}
 >
-  <header class="blog-hero">
+  <header class:list={["blog-hero", { "blog-hero--plain": !presentation.hero }]}>
     <div class="blog-shell">
-      <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={`${basePath}/blog/`}>Blog</a><span aria-hidden="true">/</span><span>Category</span></nav>
+      <Breadcrumbs crumbs={trail} class="breadcrumbs" />
       <p class="eyebrow eyebrow--tick">Category</p>
       <h1>{label}</h1>
-      <p>{posts.length} {posts.length === 1 ? "article" : "articles"} in this category.</p>
+      <p class="blog-hero__tagline">{posts.length} {posts.length === 1 ? "article" : "articles"} in this category.</p>
     </div>
   </header>
@@ -58,10 +63,13 @@ const crumbs = breadcrumbLd([
 <style>
   .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
   .blog-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
-  .breadcrumbs { display: flex; gap: .55rem; align-items: center; margin-bottom: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); font-size: .84rem; }
-  .breadcrumbs a { color: inherit; font-weight: 700; }
+  .blog-hero :global(.breadcrumbs) { margin-bottom: 1rem; font-size: .84rem; }
+  .blog-hero:not(.blog-hero--plain) :global(.breadcrumbs), .blog-hero:not(.blog-hero--plain) :global(.breadcrumbs *) { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); }
+  .blog-hero :global(.breadcrumbs a) { font-weight: 700; }
   .blog-hero h1 { max-width: 14ch; margin-top: .75rem; color: inherit; font-size: clamp(2.6rem, 6vw, 4.6rem); }
-  .blog-hero p:last-child { max-width: 58ch; margin-top: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.05rem; }
+  .blog-hero__tagline { max-width: 58ch; margin-top: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.05rem; }
   .blog-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-hero--plain { padding: clamp(2rem, 5vw, 3.5rem) 0 0; background: none; color: inherit; }
+  .blog-hero--plain .blog-hero__tagline, .blog-hero--plain .eyebrow { color: var(--color-muted); }
   .blog-layout { padding-block: clamp(3rem, 7vw, 6rem); }
 </style>

package/apps/storefront/src/pages/blog/index.astro CHANGED Viewed

@@ -2,6 +2,7 @@
 import BlogIndexView from "@/components/blog/BlogIndexView.astro";
 import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
 import { paginateBlogPosts, resolveBlogIndexCopy } from "@/lib/blog/pagination.js";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
 const { tenant, basePath, canonicalBase, content, publicationTimestamp } = Astro.locals;
 const posts = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp);
@@ -28,6 +29,7 @@ const tags = [...new Set(posts.flatMap((post) => post.tags))].sort((a, b) => a.l
   basePath={basePath}
   canonicalBase={canonicalBase}
   copy={copy}
+  presentation={resolveBlogPresentation(settings)}
   tags={tags}
   pagePosts={pagePosts}
   page={1}

package/apps/storefront/src/pages/blog/page/[n].astro CHANGED Viewed

@@ -5,6 +5,7 @@
 import BlogIndexView from "@/components/blog/BlogIndexView.astro";
 import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
 import { paginateBlogPosts, parseBlogPageParam, resolveBlogIndexCopy } from "@/lib/blog/pagination.js";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
 const page = parseBlogPageParam(Astro.params.n);
 if (page === null) return new Response(null, { status: 404 });
@@ -32,6 +33,7 @@ const tags = [...new Set(posts.flatMap((post) => post.tags))].sort((a, b) => a.l
   basePath={basePath}
   canonicalBase={canonicalBase}
   copy={copy}
+  presentation={resolveBlogPresentation(settings)}
   tags={tags}
   pagePosts={sliced.posts}
   page={sliced.page}

package/apps/storefront/src/pages/blog/tag/[tag].astro CHANGED Viewed

@@ -1,8 +1,11 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
 import PostGrid from "@/components/blog/PostGrid.astro";
-import { listBlogPosts } from "@/lib/blog/provider.js";
+import { getBlogSettings, listBlogPosts } from "@/lib/blog/provider.js";
 import { collectPostsByTerm } from "@/lib/blog/collection.js";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs.js";
 import { breadcrumbLd } from "@/lib/jsonld.js";
 const { tenant, basePath, canonicalBase, content, publicationTimestamp } = Astro.locals;
@@ -12,6 +15,7 @@ const all = await listBlogPosts(tenant.tenant_id, content, publicationTimestamp)
 const match = collectPostsByTerm(all, "tags", param);
 if (!match) return new Response(null, { status: 404 });
 const { label, posts } = match;
+const presentation = resolveBlogPresentation(await getBlogSettings(tenant.tenant_id, content));
 const path = `/blog/tag/${param}/`;
 const itemList = {
@@ -25,11 +29,12 @@ const itemList = {
     url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
   })),
 };
-const crumbs = breadcrumbLd([
-  { label: tenant.displayName, href: "/" },
+const trail = siteTrail(
+  homeCrumbLabel(await content.getChrome()),
   { label: "Blog", href: "/blog/" },
   { label: `#${label}`, href: path },
-], canonicalBase);
+);
+const crumbs = breadcrumbLd(trail, canonicalBase);
 ---
 <Layout
@@ -39,12 +44,12 @@ const crumbs = breadcrumbLd([
   fullBleed
   jsonLd={[crumbs, itemList]}
 >
-  <header class="blog-hero">
+  <header class:list={["blog-hero", { "blog-hero--plain": !presentation.hero }]}>
     <div class="blog-shell">
-      <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={`${basePath}/blog/`}>Blog</a><span aria-hidden="true">/</span><span>Tag</span></nav>
+      <Breadcrumbs crumbs={trail} class="breadcrumbs" />
       <p class="eyebrow eyebrow--tick">Tag</p>
       <h1>#{label}</h1>
-      <p>{posts.length} {posts.length === 1 ? "article" : "articles"} with this tag.</p>
+      <p class="blog-hero__tagline">{posts.length} {posts.length === 1 ? "article" : "articles"} with this tag.</p>
     </div>
   </header>
@@ -56,10 +61,13 @@ const crumbs = breadcrumbLd([
 <style>
   .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
   .blog-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
-  .breadcrumbs { display: flex; gap: .55rem; align-items: center; margin-bottom: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); font-size: .84rem; }
-  .breadcrumbs a { color: inherit; font-weight: 700; }
+  .blog-hero :global(.breadcrumbs) { margin-bottom: 1rem; font-size: .84rem; }
+  .blog-hero:not(.blog-hero--plain) :global(.breadcrumbs), .blog-hero:not(.blog-hero--plain) :global(.breadcrumbs *) { color: color-mix(in srgb, var(--color-primary-contrast) 78%, transparent); }
+  .blog-hero :global(.breadcrumbs a) { font-weight: 700; }
   .blog-hero h1 { max-width: 14ch; margin-top: .75rem; color: inherit; font-size: clamp(2.6rem, 6vw, 4.6rem); }
-  .blog-hero p:last-child { max-width: 58ch; margin-top: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.05rem; }
+  .blog-hero__tagline { max-width: 58ch; margin-top: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.05rem; }
   .blog-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-hero--plain { padding: clamp(2rem, 5vw, 3.5rem) 0 0; background: none; color: inherit; }
+  .blog-hero--plain .blog-hero__tagline, .blog-hero--plain .eyebrow { color: var(--color-muted); }
   .blog-layout { padding-block: clamp(3rem, 7vw, 6rem); }
 </style>

package/apps/storefront/src/pages/collections/[handle].astro CHANGED Viewed

@@ -7,6 +7,7 @@
  */
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs";
 import ProductCard from "@/components/ProductCard.astro";
 import EmptyState from "@/components/EmptyState.astro";
 import FacetSidebar from "@/components/plp/FacetSidebar.astro";
@@ -48,10 +49,10 @@ const basePath = `/collections/${handle}`;
 // breadcrumbs, and EmptyState — those prefix on their own via withBase.
 const linkBase = withBase(Astro.locals.basePath, basePath);
-const crumbs = [
-  { label: tenant.displayName, href: "/" },
+const crumbs = siteTrail(
+  homeCrumbLabel(await Astro.locals.content.getChrome()),
   { label: collection.title, href: basePath },
-];
+);
 const heroImg = collection.image;
 const desc = collection.description_text || collection.description_html?.replace(/<[^>]+>/g, "");
@@ -93,7 +94,7 @@ if (query.priceMin != null || query.priceMax != null) {
   <header class="bg-[var(--color-primary)] text-[var(--color-primary-contrast)]">
     <div class="container-prose grid gap-6 py-[clamp(2.5rem,6vw,4.5rem)] md:grid-cols-[1fr_auto] md:items-end">
       <div data-reveal>
-        <p class="eyebrow mb-3 !text-[color-mix(in_srgb,var(--color-primary-contrast)_70%,transparent)]">
+        <p class="eyebrow mb-3 text-[color-mix(in_srgb,var(--color-primary-contrast)_70%,transparent)]">
           Collection
         </p>
         <h1 class="display-xl">

package/apps/storefront/src/pages/collections/index.astro CHANGED Viewed

@@ -5,6 +5,7 @@
  */
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs";
 import CollectionCard from "@/components/CollectionCard.astro";
 import EmptyState from "@/components/EmptyState.astro";
 import { breadcrumbLd } from "@/lib/jsonld";
@@ -22,10 +23,10 @@ const [allCollections, activeProducts] = await Promise.all([
 ]);
 const collections = nonEmptyCollections(allCollections, activeProducts);
-const crumbs = [
-  { label: tenant.displayName, href: "/" },
+const crumbs = siteTrail(
+  homeCrumbLabel(await Astro.locals.content.getChrome()),
   { label: "Collections", href: "/collections" },
-];
+);
 ---
 <Layout

package/apps/storefront/src/pages/index.astro CHANGED Viewed

@@ -67,7 +67,9 @@ if (rawHtml && rawPolicy.allowed) {
   // verbatim (backward-compatible).
   const chromeWrapper = await content.getChromeHtml("/");
   const notices = {
-    nicotineWarning: !!tenant.compliance?.nicotineWarning,
+    nicotineWarning: tenant.compliance?.nicotineWarning,
+    pactAct: !!tenant.compliance?.pactAct,
+    minAge: tenant.compliance?.minAge,
     shippingRestriction: tenant.compliance?.shippingRestriction,
     exciseTaxEnabled: capabilities.exciseTax.enabled && features.catalog,
   };
@@ -173,7 +175,8 @@ const homeSectionWidgets = marketing
 ---
 <Layout
-  title={home.seoTitle ?? tenant.displayName}
+  title={tenant.displayName}
+  seoTitle={home.seoTitle}
   description={home.seoDescription}
   path="/"
   ogType="website"
@@ -226,13 +229,15 @@ const homeSectionWidgets = marketing
         const b = r.block;
         const media = editorialMediaView(b, tenant.tenant_id);
         const right = b.align !== "left";
+        const textOnly = media.kind === "none";
         return (
           <Section tone="bg">
             <div
               class:list={[
-                "grid items-center gap-10 md:grid-cols-2",
-                right ? "" : "md:[&>*:first-child]:order-2",
+                textOnly ? "max-w-[68ch]" : "grid items-center gap-10 md:grid-cols-2",
+                textOnly || right ? "" : "md:[&>*:first-child]:order-2",
               ]}
+              data-editorial-layout={textOnly ? "text" : "media"}
             >
               <div data-reveal>
                 {b.eyebrow && <p class="eyebrow eyebrow--tick mb-4">{b.eyebrow}</p>}
@@ -251,30 +256,32 @@ const homeSectionWidgets = marketing
                   </div>
                 )}
               </div>
-              <div data-reveal>
-                <div class="overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-md)]">
-                  {media.kind === "image" ? (
-                    <img
-                      src={media.src}
-                      alt={media.alt}
-                      width="1000"
-                      height="750"
-                      loading="lazy"
-                      class="h-full w-full object-cover"
-                    />
-                  ) : (
-                    <Img
-                      seed={media.seed}
-                      label={media.label}
-                      alt=""
-                      width={1000}
-                      height={750}
-                      sizes="(min-width:768px) 48vw, 100vw"
-                      class="h-full w-full object-cover"
-                    />
-                  )}
+              {media.kind !== "none" && (
+                <div data-reveal>
+                  <div class="overflow-hidden rounded-[var(--radius-lg)] shadow-[var(--shadow-md)]">
+                    {media.kind === "image" ? (
+                      <img
+                        src={media.src}
+                        alt={media.alt}
+                        width="1000"
+                        height="750"
+                        loading="lazy"
+                        class="h-full w-full object-cover"
+                      />
+                    ) : (
+                      <Img
+                        seed={media.seed}
+                        label={media.label}
+                        alt=""
+                        width={1000}
+                        height={750}
+                        sizes="(min-width:768px) 48vw, 100vw"
+                        class="h-full w-full object-cover"
+                      />
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           </Section>
         );

package/apps/storefront/src/pages/products/[handle].astro CHANGED Viewed

@@ -7,6 +7,7 @@
  */
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs";
 import Badge from "@/components/Badge.astro";
 import ProductCard from "@/components/ProductCard.astro";
 import Section from "@/components/Section.astro";
@@ -95,13 +96,13 @@ const related = await (async () => {
   return [...out.values()].slice(0, 4);
 })();
-const crumbs = [
-  { label: tenant.displayName, href: "/" },
+const crumbs = siteTrail(
+  homeCrumbLabel(await Astro.locals.content.getChrome()),
   ...(product.collections[0]
     ? [{ label: titleCase(product.collections[0]), href: `/collections/${product.collections[0]}` }]
     : []),
   { label: product.title, href: `/products/${product.handle}` },
-];
+);
 function titleCase(s: string) {
   return s.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
@@ -343,7 +344,7 @@ const jsonLd = [productJsonLd, breadcrumbLd(crumbs, canonicalBase)];
       {compliance?.nicotineWarning && (
         <div class="mt-6">
-          <NicotineWarning variant="block" />
+          <NicotineWarning variant="block" declaration={compliance.nicotineWarning} />
         </div>
       )}

package/apps/storefront/src/pages/saved.astro CHANGED Viewed

@@ -5,15 +5,16 @@
  */
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs";
 import SavedList from "@/components/islands/SavedList.tsx";
 const { tenant } = Astro.locals;
 // Commerce-only route: marketing tenants have no saved-items surface.
 if (!Astro.locals.features.savedItems) return new Response(null, { status: 404 });
-const crumbs = [
-  { label: tenant.displayName, href: "/" },
+const crumbs = siteTrail(
+  homeCrumbLabel(await Astro.locals.content.getChrome()),
   { label: "Saved", href: "/saved" },
-];
+);
 ---
 <Layout

package/apps/storefront/src/pages/search.astro CHANGED Viewed

@@ -11,6 +11,7 @@
  */
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs";
 import ProductCard from "@/components/ProductCard.astro";
 import EmptyState from "@/components/EmptyState.astro";
 import Section from "@/components/Section.astro";
@@ -42,10 +43,10 @@ if (isJson) {
 const results = q ? await tot.search(q, 24) : [];
 const featured = q ? [] : await tot.getFeatured(8);
-const crumbs = [
-  { label: tenant.displayName, href: "/" },
+const crumbs = siteTrail(
+  homeCrumbLabel(await Astro.locals.content.getChrome()),
   { label: "Search", href: "/search" },
-];
+);
 ---
 <Layout