@tokenoftrust/storefront-runner 1.4.1 → 2.0.0

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

@@ -0,0 +1,140 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
+import { listBlogPosts } from "@/lib/blog/provider.js";
+import { authorSlug, getAuthors } from "@/lib/blog/collection.js";
+import { breadcrumbLd } from "@/lib/jsonld.js";
+
+// Author archive for the `/blog` collection. Lists exactly the posts whose
+// bylines link here (same source as /blog/index.astro + /blog/[slug].astro),
+// so a byline never points at a page missing its post.
+const { tenant, basePath, canonicalBase, content } = Astro.locals;
+const slug = Astro.params.author ?? "";
+
+const allPosts = await listBlogPosts(tenant.tenant_id, content);
+const posts = allPosts.filter((post) => authorSlug(post.author) === slug);
+if (posts.length === 0) return new Response(null, { status: 404 });
+
+const authorName = posts[0]!.author;
+const bio = (await getAuthors(tenant.tenant_id, "blog", content))[slug];
+
+const href = (path: string) => `${basePath}${path}` || "/";
+const canonical = new URL(`/blog/author/${slug}/`, canonicalBase + "/").toString();
+const avatarUrl = bio?.avatar ? new URL(bio.avatar, canonicalBase + "/").toString() : undefined;
+
+const personLd = {
+  "@context": "https://schema.org",
+  "@type": "Person",
+  name: authorName,
+  url: canonical,
+  ...(bio?.title ? { jobTitle: bio.title } : {}),
+  ...(bio?.bio ? { description: bio.bio } : {}),
+  ...(avatarUrl ? { image: avatarUrl } : {}),
+  ...(bio?.url ? { mainEntityOfPage: bio.url } : {}),
+  ...(bio?.sameAs && bio.sameAs.length > 0 ? { sameAs: bio.sameAs } : {}),
+};
+const profileLd = {
+  "@context": "https://schema.org",
+  "@type": "ProfilePage",
+  mainEntity: personLd,
+};
+const itemListLd = {
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  numberOfItems: posts.length,
+  itemListElement: posts.map((post, index) => ({
+    "@type": "ListItem",
+    position: index + 1,
+    name: post.title,
+    url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
+  })),
+};
+const crumbs = breadcrumbLd([
+  { label: tenant.displayName, href: "/" },
+  { label: "Blog", href: "/blog/" },
+  { label: authorName, href: `/blog/author/${slug}/` },
+], canonicalBase);
+---
+
+<Layout
+  title={`${authorName} — Blog`}
+  description={bio?.bio ?? `Articles by ${authorName}.`}
+  path={`/blog/author/${slug}/`}
+  fullBleed
+  jsonLd={[crumbs, profileLd, itemListLd]}
+>
+  <header class="author-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>
+      <div class="author-id">
+        {avatarUrl && <img class="avatar" src={avatarUrl} alt={authorName} width="96" height="96" decoding="async" />}
+        <div>
+          <p class="eyebrow eyebrow--tick">Author</p>
+          <h1>{authorName}</h1>
+          {bio?.title && <p class="author-title">{bio.title}</p>}
+          {bio?.bio && <p class="author-bio">{bio.bio}</p>}
+          {bio?.sameAs && bio.sameAs.length > 0 && (
+            <p class="author-links">
+              {bio.sameAs.map((url) => <a href={url} rel="me nofollow" target="_blank">{new URL(url).hostname.replace(/^www\./, "")}</a>)}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="blog-shell">
+    <section class="post-grid" aria-label={`Posts by ${authorName}`}>
+      {posts.map((post, index) => (
+        <article class="post-card">
+          <a href={href(`/blog/${post.slug}/`)} aria-label={`Read ${post.title}`}>
+            {post.featuredImage ? (
+              <img
+                src={post.featuredImage.src}
+                alt={post.featuredImage.alt}
+                width={post.featuredImage.width}
+                height={post.featuredImage.height}
+                loading={index < 3 ? "eager" : "lazy"}
+                decoding="async"
+              />
+            ) : <div class="image-placeholder" aria-hidden="true"></div>}
+            <div class="post-card-copy">
+              <p class="post-meta"><time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</time>{post.tags[0] && <> · {post.tags[0]}</>}</p>
+              <PostAccessBadge access={post.access} />
+              <h2>{post.title}</h2>
+              <p>{post.excerpt}</p>
+              <span>Read article <span aria-hidden="true">→</span></span>
+            </div>
+          </a>
+        </article>
+      ))}
+    </section>
+  </div>
+</Layout>
+
+<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-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); }
+  .author-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .author-title { margin-top: .35rem; font-weight: 700; color: color-mix(in srgb, var(--color-primary-contrast) 90%, transparent); }
+  .author-bio { max-width: 62ch; margin-top: 1rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.05rem; }
+  .author-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.1rem; }
+  .author-links a { color: inherit; font-weight: 700; font-size: .85rem; text-decoration: underline; text-underline-offset: .18em; }
+  .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
+  .post-card { height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
+  .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
+  .post-card a { display: flex; height: 100%; flex-direction: column; }
+  .post-card img, .image-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, white), color-mix(in srgb, var(--color-accent) 24%, white)); }
+  .post-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
+  .post-meta { margin: 0 0 .7rem; color: var(--color-muted); font: 600 .72rem/1.45 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
+  .post-card h2 { font-size: 1.18rem; line-height: 1.25; }
+  .post-card-copy > p:not(.post-meta) { display: -webkit-box; margin: .75rem 0 1rem; overflow: hidden; color: var(--color-muted); font-size: .92rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+  .post-card-copy > span { margin-top: auto; color: var(--color-accent-ink); font-weight: 700; font-size: .88rem; }
+  @media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+  @media (max-width: 640px) { .author-id { flex-direction: column; align-items: flex-start; } .post-grid { grid-template-columns: 1fr; } }
+</style>

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

@@ -0,0 +1,67 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import PostGrid from "@/components/blog/PostGrid.astro";
+import { listBlogPosts } from "@/lib/blog/provider.js";
+import { collectPostsByTerm } from "@/lib/blog/collection.js";
+import { breadcrumbLd } from "@/lib/jsonld.js";
+
+const { tenant, basePath, canonicalBase, content } = Astro.locals;
+const param = Astro.params.category ?? "";
+
+// Same source as the /blog index (the collection's curated list), filtered to
+// one category — so a post can never appear here that isn't already live on /blog.
+const all = await listBlogPosts(tenant.tenant_id, content);
+const match = collectPostsByTerm(all, "categories", param);
+if (!match) return new Response(null, { status: 404 });
+const { label, posts } = match;
+
+const path = `/blog/category/${param}/`;
+const itemList = {
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  numberOfItems: posts.length,
+  itemListElement: posts.map((post, index) => ({
+    "@type": "ListItem",
+    position: index + 1,
+    name: post.title,
+    url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
+  })),
+};
+const crumbs = breadcrumbLd([
+  { label: tenant.displayName, href: "/" },
+  { label: "Blog", href: "/blog/" },
+  { label, href: path },
+], canonicalBase);
+---
+
+<Layout
+  title={`${label} — Blog`}
+  description={`Articles in ${label} from ${tenant.displayName}.`}
+  path={path}
+  fullBleed
+  jsonLd={[crumbs, itemList]}
+>
+  <header class="blog-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>
+      <p class="eyebrow eyebrow--tick">Category</p>
+      <h1>{label}</h1>
+      <p>{posts.length} {posts.length === 1 ? "article" : "articles"} in this category.</p>
+    </div>
+  </header>
+
+  <div class="blog-shell blog-layout">
+    <PostGrid posts={posts} basePath={basePath} base="/blog" />
+  </div>
+</Layout>
+
+<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 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 .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-layout { padding-block: clamp(3rem, 7vw, 6rem); }
+</style>

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

@@ -1,9 +1,10 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
 import { listBlogPosts } from "@/lib/blog/provider.js";
 
-const { tenant, basePath, canonicalBase } = Astro.locals;
-const posts = await listBlogPosts(tenant.tenant_id);
+const { tenant, basePath, canonicalBase, content } = Astro.locals;
+const posts = await listBlogPosts(tenant.tenant_id, content);
 if (posts.length === 0) return new Response(null, { status: 404 });
 
 const href = (path: string) => `${basePath}${path}` || "/";
@@ -60,6 +61,7 @@ const itemList = {
             ) : <div class="image-placeholder" aria-hidden="true"></div>}
             <div class="post-card-copy">
               <p class="post-meta"><time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}</time>{post.tags[0] && <> · {post.tags[0]}</>}</p>
+              <PostAccessBadge access={post.access} />
               <h2>{post.title}</h2>
               <p>{post.excerpt}</p>
               <span>Read article <span aria-hidden="true">→</span></span>

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

@@ -0,0 +1,65 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import PostGrid from "@/components/blog/PostGrid.astro";
+import { listBlogPosts } from "@/lib/blog/provider.js";
+import { collectPostsByTerm } from "@/lib/blog/collection.js";
+import { breadcrumbLd } from "@/lib/jsonld.js";
+
+const { tenant, basePath, canonicalBase, content } = Astro.locals;
+const param = Astro.params.tag ?? "";
+
+const all = await listBlogPosts(tenant.tenant_id, content);
+const match = collectPostsByTerm(all, "tags", param);
+if (!match) return new Response(null, { status: 404 });
+const { label, posts } = match;
+
+const path = `/blog/tag/${param}/`;
+const itemList = {
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  numberOfItems: posts.length,
+  itemListElement: posts.map((post, index) => ({
+    "@type": "ListItem",
+    position: index + 1,
+    name: post.title,
+    url: new URL(`/blog/${post.slug}/`, canonicalBase + "/").toString(),
+  })),
+};
+const crumbs = breadcrumbLd([
+  { label: tenant.displayName, href: "/" },
+  { label: "Blog", href: "/blog/" },
+  { label: `#${label}`, href: path },
+], canonicalBase);
+---
+
+<Layout
+  title={`#${label} — Blog`}
+  description={`Articles tagged ${label} from ${tenant.displayName}.`}
+  path={path}
+  fullBleed
+  jsonLd={[crumbs, itemList]}
+>
+  <header class="blog-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>
+      <p class="eyebrow eyebrow--tick">Tag</p>
+      <h1>#{label}</h1>
+      <p>{posts.length} {posts.length === 1 ? "article" : "articles"} with this tag.</p>
+    </div>
+  </header>
+
+  <div class="blog-shell blog-layout">
+    <PostGrid posts={posts} basePath={basePath} base="/blog" />
+  </div>
+</Layout>
+
+<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 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 .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-layout { padding-block: clamp(3rem, 7vw, 6rem); }
+</style>