soames-astro-theme 0.1.4 → 0.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "soames-astro-theme",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Shared Astro theme for the Soames ecosystem (WordPress headless + React islands). Successor to soames-gatsby-theme.",
   "keywords": [
     "astro",

package/src/components/shortcodes/Shortcodes.tsx

@@ -205,6 +205,17 @@ const handleShortcodes: HTMLReactParserOptions["replace"] = (node) => {
     }
 
     if (classes.includes("wp-block-soames-text-list")) {
+      const attrs = (node as DomElement).attribs;
+      // ORBI-42: new blocks emit JSON `data-items` (one HTML chunk per list item).
+      // Old blocks emit their inner HTML directly — keep rendering that as-is.
+      if (attrs["data-items"]) {
+        try {
+          const items = JSON.parse(attrs["data-items"]);
+          if (Array.isArray(items)) return <SoamesTextList items={items} />;
+        } catch {
+          /* malformed JSON — fall through to the legacy passthrough below */
+        }
+      }
       return (
         <section className="soames-section article soames-list pb-0">
           <div className="container">

package/src/components/shortcodes/SoamesTextList.tsx

@@ -1,20 +1,38 @@
 import React from "react";
+import parse from "html-react-parser";
 
-interface SoamesTextListProps {
+// ORBI-42 grouped format: one HTML chunk per list item.
+interface TextItem {
   content: string;
 }
 
-const SoamesTextList: React.FC<SoamesTextListProps> = ({ content }) => {
-  const lineItems = content?.split('__SOAMES_LI__') ?? [];
+interface SoamesTextListProps {
+  // New (ORBI-42) grouped items from the block's data-items JSON.
+  items?: TextItem[];
+  // Legacy [soames-text-list] shortcode: a single string, split on the sentinel.
+  content?: string;
+}
+
+const SoamesTextList: React.FC<SoamesTextListProps> = ({ items, content }) => {
+  // Prefer the grouped items; fall back to the legacy sentinel-split string.
+  const listItems: string[] =
+    items && items.length
+      ? items.map((it) => it?.content ?? "")
+      : (content ?? "").split("__SOAMES_LI__");
+
+  const cleaned = listItems.filter((html) => (html ?? "").trim().length > 0);
 
+  // `soames-text-list` carries the top/bottom padding (ORBI-42) that replaces the
+  // old manual <br><br> spacers — see styles/soames/overrides.css. Note: no pt-0/
+  // pb-0 here (they previously zeroed the padding).
   return (
-    <section className="soames-section article soames-list pb-0">
+    <section className="soames-section article soames-list soames-text-list">
       <div className="container">
         <div className="media-container-row">
-          <div className="soames-text counter-container col-12 col-md-10 mbr-fonts-style pt-0 display-7">
+          <div className="soames-text counter-container col-12 col-md-10 mbr-fonts-style display-7">
             <ul>
-              {lineItems.map((lineItem, key) => (
-                <li key={key}>{lineItem}</li>
+              {cleaned.map((html, key) => (
+                <li key={key}>{parse(html)}</li>
               ))}
             </ul>
           </div>

package/src/lib/wp.ts

@@ -46,6 +46,9 @@ export interface WpPage {
   content: string;
   excerpt: string;
   overlayOpacity: number | null;
+  // Dedicated hero background image URL from the plugin (ORBI-41). Takes priority
+  // over featuredImage for the hero backdrop; null when unset. See resolveHeroBg.
+  heroBackgroundImage: string | null;
   featuredImage: WpImage | null;
 }
 export interface WpAuthor {
@@ -93,6 +96,19 @@ function parseOverlayOpacity(value: unknown): number | null {
   return Number.isFinite(n) ? n : null;
 }
 
+// Resolve the hero backdrop URL from a page (or posts/docs page): the dedicated
+// hero background image wins, then the featured image, then null (→ HeroHeader
+// applies its picsum placeholder). Single source of truth for levels 1→2 of the
+// ORBI-41 fallback chain; level 3 (picsum) lives in HeroHeader.
+export function resolveHeroBg(
+  page:
+    | { heroBackgroundImage?: string | null; featuredImage?: WpImage | null }
+    | null
+    | undefined
+): string | null {
+  return page?.heroBackgroundImage ?? page?.featuredImage?.sourceUrl ?? null;
+}
+
 function normalizeImage(node: any): WpImage | null {
   const n = node?.featuredImage?.node;
   if (!n?.sourceUrl) return null;
@@ -107,7 +123,7 @@ function normalizeImage(node: any): WpImage | null {
 export async function getPages(): Promise<WpPage[]> {
   // NOTE the alias `wpPages:` — required to pass Wordfence.
   const data = await wpQuery<{ wpPages: { nodes: any[] } }>(
-    `{ wpPages: pages(first: 100) { nodes { databaseId title uri slug isPostsPage isFrontPage content excerpt overlayOpacity ${IMAGE_FRAGMENT} } } }`
+    `{ wpPages: pages(first: 100) { nodes { databaseId title uri slug isPostsPage isFrontPage content excerpt overlayOpacity heroBackgroundImage ${IMAGE_FRAGMENT} } } }`
   );
   return data.wpPages.nodes.map((n) => ({
     databaseId: n.databaseId,
@@ -121,6 +137,10 @@ export async function getPages(): Promise<WpPage[]> {
     // The plugin's WPGraphQL `overlayOpacity` field is typed String (e.g. "0.4"),
     // so parse it to a number; null (→ HeroHeader default 0.6) if absent/invalid.
     overlayOpacity: parseOverlayOpacity(n.overlayOpacity),
+    // Dedicated hero background image URL (ORBI-41); the plugin resolves it to
+    // null when unset. (Ships with the plugin that already provides overlayOpacity
+    // above, so the query requires no older-plugin fallback beyond that.)
+    heroBackgroundImage: n.heroBackgroundImage ?? null,
     featuredImage: normalizeImage(n),
   }));
 }
@@ -133,6 +153,7 @@ export interface WpPostsPage {
   databaseId: number;
   slug: string;
   title: string;
+  heroBackgroundImage: string | null;
   featuredImage: WpImage | null;
   overlayOpacity: number | null;
 }
@@ -143,6 +164,7 @@ export async function getPostsPage(): Promise<WpPostsPage | null> {
     databaseId: pp.databaseId,
     slug: pp.slug,
     title: pp.title,
+    heroBackgroundImage: pp.heroBackgroundImage,
     featuredImage: pp.featuredImage,
     overlayOpacity: pp.overlayOpacity,
   };
@@ -159,6 +181,7 @@ export interface WpDocsPage {
   databaseId: number;
   title: string;
   excerpt: string;
+  heroBackgroundImage: string | null;
   featuredImage: WpImage | null;
   overlayOpacity: number | null;
 }
@@ -173,6 +196,7 @@ export async function getDocsPage(): Promise<WpDocsPage | null> {
       databaseId: dp.databaseId,
       title: dp.title,
       excerpt: dp.excerpt,
+      heroBackgroundImage: dp.heroBackgroundImage,
       featuredImage: dp.featuredImage,
       overlayOpacity: dp.overlayOpacity,
     };

package/src/routes/[...uri].astro

@@ -6,7 +6,7 @@ import Base from "@theme/layouts/Base.astro";
 import HeroHeader from "@theme/components/HeroHeader";
 import Shortcodes from "@theme/components/shortcodes/Shortcodes";
 import RemoveContentAreaPadding from "@theme/components/shortcodes/RemoveContentAreaPadding";
-import { getPages } from "../lib/wp";
+import { getPages, resolveHeroBg } from "../lib/wp";
 
 export async function getStaticPaths() {
   const pages = await getPages();
@@ -41,7 +41,7 @@ if (import.meta.env.DEV) {
   <HeroHeader
     title={page.title}
     subhead={page.excerpt}
-    backgroundImage={page.featuredImage?.sourceUrl ?? null}
+    backgroundImage={resolveHeroBg(page)}
     overlayOpacity={page.overlayOpacity}
   />
   {page.content && (

package/src/routes/blog/[...page].astro

@@ -6,7 +6,7 @@
 // Hero (title/featured image/overlay) comes from that Posts page when present.
 import Base from "@theme/layouts/Base.astro";
 import HeroHeader from "@theme/components/HeroHeader";
-import { getPosts, getPostsPerPage, getPostsPage, type WpPost } from "../../lib/wp";
+import { getPosts, getPostsPerPage, getPostsPage, resolveHeroBg, type WpPost } from "../../lib/wp";
 
 export async function getStaticPaths() {
   const [posts, perPage, postsPage] = await Promise.all([
@@ -29,7 +29,7 @@ export async function getStaticPaths() {
         prevPath: pageNum > 1 ? (pageNum === 2 ? `${base}/` : `${base}/${pageNum - 1}/`) : null,
         nextPath: pageNum < totalPages ? `${base}/${pageNum + 1}/` : null,
         heroTitle: postsPage?.title || "Blog",
-        heroBg: postsPage?.featuredImage?.sourceUrl ?? null,
+        heroBg: resolveHeroBg(postsPage),
         heroOverlay: postsPage?.overlayOpacity ?? 0.6,
       },
     };
@@ -55,7 +55,7 @@ if (import.meta.env.DEV) {
   prevPath = pageNum > 1 ? (pageNum === 2 ? `${base}/` : `${base}/${pageNum - 1}/`) : null;
   nextPath = pageNum < totalPages ? `${base}/${pageNum + 1}/` : null;
   heroTitle = postsPage?.title || "Blog";
-  heroBg = postsPage?.featuredImage?.sourceUrl ?? null;
+  heroBg = resolveHeroBg(postsPage);
   heroOverlay = postsPage?.overlayOpacity ?? 0.6;
 }
 

package/src/routes/blog/post/[...slug].astro

@@ -8,7 +8,7 @@ import HeroHeader from "@theme/components/HeroHeader";
 import Shortcodes from "@theme/components/shortcodes/Shortcodes";
 import Bio from "@theme/components/Bio";
 import BlogSidebar from "@theme/components/BlogSidebar";
-import { getPosts, getPostsPage } from "../../../lib/wp";
+import { getPosts, getPostsPage, resolveHeroBg } from "../../../lib/wp";
 
 export async function getStaticPaths() {
   const posts = await getPosts();
@@ -17,7 +17,7 @@ export async function getStaticPaths() {
   // Fetched once here and shared across all paths (one WP round-trip).
   const postsPage = await getPostsPage();
   const heroTitle = postsPage?.title ?? "Blog";
-  const heroBg = postsPage?.featuredImage?.sourceUrl ?? null;
+  const heroBg = resolveHeroBg(postsPage);
   const heroOverlay = postsPage?.overlayOpacity ?? null;
   return posts.map((post, i) => ({
     params: { slug: post.slug },
@@ -49,7 +49,7 @@ if (import.meta.env.DEV) {
   }
   const pp = await getPostsPage();
   heroTitle = pp?.title ?? "Blog";
-  heroBg = pp?.featuredImage?.sourceUrl ?? null;
+  heroBg = resolveHeroBg(pp);
   heroOverlay = pp?.overlayOpacity ?? null;
 }
 

package/src/routes/docs/[...slug].astro

@@ -8,7 +8,7 @@ import HeroHeader from "@theme/components/HeroHeader";
 import Shortcodes from "@theme/components/shortcodes/Shortcodes";
 import DocsSidebar from "@theme/components/DocsSidebar";
 import Breadcrumbs from "@theme/components/Breadcrumbs";
-import { getDocs, buildDocTree, getDocsPage, docAncestors } from "../../lib/wp";
+import { getDocs, buildDocTree, getDocsPage, docAncestors, resolveHeroBg } from "../../lib/wp";
 
 export async function getStaticPaths() {
   // Derive the [...slug] param from the doc's WP uri (e.g. /docs/getting-started/
@@ -25,7 +25,7 @@ export async function getStaticPaths() {
   // here and shared across all paths (one WP round-trip).
   const docsPage = await getDocsPage();
   const heroTitle = docsPage?.title ?? "Documentation";
-  const heroBg = docsPage?.featuredImage?.sourceUrl ?? null;
+  const heroBg = resolveHeroBg(docsPage);
   const heroOverlay = docsPage?.overlayOpacity ?? null;
   return docs
     .map((doc) => ({ doc, slug: toSlug(doc.uri) }))
@@ -51,7 +51,7 @@ if (import.meta.env.DEV) {
   }
   const dp = await getDocsPage();
   heroTitle = dp?.title ?? "Documentation";
-  heroBg = dp?.featuredImage?.sourceUrl ?? null;
+  heroBg = resolveHeroBg(dp);
   heroOverlay = dp?.overlayOpacity ?? null;
 }
 

package/src/routes/docs/index.astro

@@ -5,7 +5,7 @@
 // menuOrder order). If no docs exist, getDocs() returns [] → empty state.
 import Base from "@theme/layouts/Base.astro";
 import HeroHeader from "@theme/components/HeroHeader";
-import { getDocs, getDocsPage, buildDocTree, type WpDoc, type DocTreeNode } from "../../lib/wp";
+import { getDocs, getDocsPage, buildDocTree, resolveHeroBg, type WpDoc, type DocTreeNode } from "../../lib/wp";
 
 const docs = await getDocs();
 // Hero is driven by the WP page chosen in Soames Settings → Documentation page,
@@ -32,7 +32,7 @@ const rows: WpDoc[][] = flat.reduce((groups: WpDoc[][], doc: WpDoc, i: number) =
   <HeroHeader
     title={docsPage?.title ?? "Documentation"}
     subhead={docsPage?.excerpt ?? ""}
-    backgroundImage={docsPage?.featuredImage?.sourceUrl ?? null}
+    backgroundImage={resolveHeroBg(docsPage)}
     overlayOpacity={docsPage?.overlayOpacity ?? 0.6}
   />
 

package/src/routes/index.astro

@@ -6,7 +6,7 @@ import Base from "@theme/layouts/Base.astro";
 import HeroHeader from "@theme/components/HeroHeader";
 import Shortcodes from "@theme/components/shortcodes/Shortcodes";
 import RemoveContentAreaPadding from "@theme/components/shortcodes/RemoveContentAreaPadding";
-import { getPages, getPosts } from "../lib/wp";
+import { getPages, getPosts, resolveHeroBg } from "../lib/wp";
 
 const pages = await getPages();
 const front = pages.find((p) => p.uri === "/");
@@ -17,7 +17,7 @@ const posts = front ? [] : await getPosts();
     <HeroHeader
       title={front.title}
       subhead={front.excerpt}
-      backgroundImage={front.featuredImage?.sourceUrl ?? null}
+      backgroundImage={resolveHeroBg(front)}
       overlayOpacity={front.overlayOpacity}
     />
     {front.content && (

package/src/styles/soames/overrides.css

@@ -1779,6 +1779,14 @@ section.lazy-placeholder:after {
   color: #000000;
 }
 
+/* ORBI-42: the refactored Soames Text List carries its own symmetric top/bottom
+   padding (replacing the old manual <br><br> spacers). Scoped to this class so
+   other .soames-list consumers keep their existing spacing. */
+.soames-text-list {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
 .soames-footer {
   padding-top: 15px;
   padding-bottom: 15px;