soames-astro-theme 0.1.1 → 0.1.3

package/package.json

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

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

@@ -8,10 +8,17 @@ 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 } from "../../../lib/wp";
+import { getPosts, getPostsPage } from "../../../lib/wp";
 
 export async function getStaticPaths() {
   const posts = await getPosts();
+  // Single posts inherit the posts page (blog roll) hero — title, background
+  // image, overlay — falling back to "Blog" / placeholder when none is set.
+  // 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 heroOverlay = postsPage?.overlayOpacity ?? null;
   return posts.map((post, i) => ({
     params: { slug: post.slug },
     props: {
@@ -19,11 +26,14 @@ export async function getStaticPaths() {
       posts,
       previous: posts[i + 1] ?? null, // posts are date DESC → next index is older
       next: posts[i - 1] ?? null,
+      heroTitle,
+      heroBg,
+      heroOverlay,
     },
   }));
 }
 
-let { post, posts, previous, next } = Astro.props;
+let { post, posts, previous, next, heroTitle, heroBg, heroOverlay } = Astro.props;
 
 // Dev only: re-fetch on each request so WP edits show on refresh without
 // restarting `astro dev` (getStaticPaths props are cached otherwise). Stripped
@@ -37,6 +47,10 @@ if (import.meta.env.DEV) {
     previous = all[i + 1] ?? null;
     next = all[i - 1] ?? null;
   }
+  const pp = await getPostsPage();
+  heroTitle = pp?.title ?? "Blog";
+  heroBg = pp?.featuredImage?.sourceUrl ?? null;
+  heroOverlay = pp?.overlayOpacity ?? null;
 }
 
 const img = post.featuredImage;
@@ -44,7 +58,7 @@ const fmtDate = (d: string) =>
   new Date(d).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "2-digit" });
 ---
 <Base pageTitle={post.title} description={post.excerpt}>
-  <HeroHeader title="Blog" subhead="" backgroundImage={null} overlayOpacity={0.6} />
+  <HeroHeader title={heroTitle} subhead="" backgroundImage={heroBg} overlayOpacity={heroOverlay} />
   <section>
     <div class="media-container-row">
       <div class="col-12 col-lg-8">

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

@@ -7,7 +7,7 @@ import Base from "@theme/layouts/Base.astro";
 import HeroHeader from "@theme/components/HeroHeader";
 import Shortcodes from "@theme/components/shortcodes/Shortcodes";
 import DocsSidebar from "@theme/components/DocsSidebar";
-import { getDocs, buildDocTree } from "../../lib/wp";
+import { getDocs, buildDocTree, getDocsPage } from "../../lib/wp";
 
 export async function getStaticPaths() {
   // Derive the [...slug] param from the doc's WP uri (e.g. /docs/getting-started/
@@ -19,16 +19,23 @@ export async function getStaticPaths() {
 
   const docs = await getDocs();
   const tree = buildDocTree(docs);
+  // Single docs inherit the /docs/ page hero — title, background image, overlay —
+  // falling back to "Documentation" / placeholder when none is set. Fetched once
+  // 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 heroOverlay = docsPage?.overlayOpacity ?? null;
   return docs
     .map((doc) => ({ doc, slug: toSlug(doc.uri) }))
     .filter(({ slug }) => slug.length > 0)
     .map(({ doc, slug }) => ({
       params: { slug },
-      props: { doc, tree },
+      props: { doc, tree, heroTitle, heroBg, heroOverlay },
     }));
 }
 
-let { doc, tree } = Astro.props;
+let { doc, tree, heroTitle, heroBg, heroOverlay } = Astro.props;
 
 // Dev only: re-fetch on each request so WP doc edits show on refresh without
 // restarting `astro dev` (getStaticPaths props are cached otherwise). Stripped
@@ -41,10 +48,14 @@ if (import.meta.env.DEV) {
     doc = fresh;
     tree = buildDocTree(docs);
   }
+  const dp = await getDocsPage();
+  heroTitle = dp?.title ?? "Documentation";
+  heroBg = dp?.featuredImage?.sourceUrl ?? null;
+  heroOverlay = dp?.overlayOpacity ?? null;
 }
 ---
 <Base pageTitle={doc.title} description={doc.excerpt}>
-  <HeroHeader title="Documentation" subhead="" backgroundImage={null} overlayOpacity={0.6} />
+  <HeroHeader title={heroTitle} subhead="" backgroundImage={heroBg} overlayOpacity={heroOverlay} />
   <section>
     <div class="media-container-row">
       <div class="col-12 col-lg-8">

package/src/styles/soames/overrides.css

@@ -1108,9 +1108,23 @@ section.lazy-placeholder:after {
   padding: 0;
 }
 
-/* Nested levels indent under their parent. */
+/* Own the vertical rhythm locally instead of inheriting the global `ul li`
+   margin from wordpress-blocks.css. That global margin is cancelled on a
+   submenu's first item by `.soames-docs-menu { margin: 0 }`, which left the
+   first link under a parent with no gap above it. Reset it, then apply one
+   uniform step between every item. */
+.soames-docs-menu-item {
+  margin: 0;
+}
+.soames-docs-menu-item + .soames-docs-menu-item {
+  margin-top: 1rem;
+}
+
+/* Nested levels indent under their parent, and sit a full step below the parent
+   link so the first child matches the spacing between all other items. */
 .soames-docs-submenu {
   margin-left: 0.85rem;
+  margin-top: 1rem;
 }
 
 .soames-docs-menu-item > a {