soames-gatsby-theme 0.1.7 → 0.1.9

package/dist/src/components/HeroHeader.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const HeroHeader = ({ title, subhead, backgroundImage, backgroundImageTitle, overlayOpacity, }) => {
+const HeroHeader = ({ title, subhead, backgroundImage, overlayOpacity, }) => {
     if (!backgroundImage) {
         backgroundImage = "https://picsum.photos/1080/720";
     }
-    else {
-        if (backgroundImageTitle?.includes("_02o_"))
-            overlayOpacity = 0.2;
-        else if (backgroundImageTitle?.includes("_03o_"))
-            overlayOpacity = 0.3;
-        else if (backgroundImageTitle?.includes("_04o_"))
-            overlayOpacity = 0.4;
-        else if (backgroundImageTitle?.includes("_05o_"))
-            overlayOpacity = 0.5;
-        else if (backgroundImageTitle?.includes("_06o_"))
-            overlayOpacity = 0.6;
-        else if (backgroundImageTitle?.includes("_07o_"))
-            overlayOpacity = 0.7;
-    }
     if (!overlayOpacity) {
         overlayOpacity = 0.6;
     }

package/dist/src/pages/preview.js

@@ -9,7 +9,10 @@ const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const Layout_1 = __importDefault(require("../components/Layout"));
 const Seo_1 = __importDefault(require("../components/Seo"));
 const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
+const Bio_1 = __importDefault(require("../components/Bio"));
+const BlogSidebar_1 = __importDefault(require("../components/BlogSidebar"));
 const Shortcodes_1 = require("../utils/shortcodes/Shortcodes");
+require("../styles/vendor/wordpress-blocks.css");
 const PreviewPage = () => {
     const [content, setContent] = (0, react_1.useState)(null);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -54,8 +57,21 @@ const PreviewPage = () => {
     if (error || !content) {
         return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "Preview Unavailable" }), (0, jsx_runtime_1.jsxs)("section", { style: { padding: "4rem 2rem", textAlign: "center" }, children: [(0, jsx_runtime_1.jsx)("h2", { children: "Preview Unavailable" }), (0, jsx_runtime_1.jsx)("p", { children: error ?? "No preview content found." })] })] }));
     }
-    const backgroundImage = content.featuredImage?.sourceUrl ?? null;
-    const backgroundImageTitle = content.title ?? null;
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: `Preview: ${content.title ?? ""}` }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: content.title ? (0, html_react_parser_1.default)(content.title) : "Preview", subhead: content.excerpt ? (0, html_react_parser_1.default)(content.excerpt) : "", backgroundImage: backgroundImage, backgroundImageTitle: backgroundImageTitle }), content.type === "post" ? ((0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsx)("div", { className: "media-container-row", children: (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: (0, jsx_runtime_1.jsxs)("article", { className: "blog-post", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { children: content.title ? (0, html_react_parser_1.default)(content.title) : "" }), content.date && (0, jsx_runtime_1.jsx)("p", { children: content.date })] }), content.content && ((0, jsx_runtime_1.jsx)("section", { className: "blog-post-content", children: (0, html_react_parser_1.default)(content.content) }))] }) }) }) }) })) : (content.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: content.content }) })))] }));
+    const isPost = content.type === "post";
+    // For posts, HeroHeader mirrors the Blog archive page hero (matching blog-post.tsx).
+    // For pages, use the page's own title and featured image (matching page.tsx).
+    const heroTitle = isPost
+        ? (content.blogHero?.title ? (0, html_react_parser_1.default)(content.blogHero.title) : "Blog")
+        : (content.title ? (0, html_react_parser_1.default)(content.title) : "Preview");
+    const heroSubhead = isPost
+        ? (content.blogHero?.excerpt ? (0, html_react_parser_1.default)(content.blogHero.excerpt) : "")
+        : (content.excerpt ? (0, html_react_parser_1.default)(content.excerpt) : "");
+    const heroBg = isPost
+        ? (content.blogHero?.guid ?? null)
+        : (content.featuredImage?.sourceUrl ?? null);
+    const heroOpacityStr = isPost
+        ? (content.blogHero?.overlayOpacity ?? null)
+        : (content.overlayOpacity ?? null);
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: `Preview: ${content.title ?? ""}` }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: heroTitle, subhead: heroSubhead, backgroundImage: heroBg, overlayOpacity: heroOpacityStr ? parseFloat(heroOpacityStr) : undefined }), isPost ? ((0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: (0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: content.title ? (0, html_react_parser_1.default)(content.title) : "" }), content.date && (0, jsx_runtime_1.jsx)("p", { children: content.date })] }), content.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(content.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-sidebar-container", className: "soames-gatsby-sidebar", children: [content.featuredImage?.sourceUrl && ((0, jsx_runtime_1.jsx)("img", { src: content.featuredImage.sourceUrl, alt: content.featuredImage.altText || "", style: { marginBottom: 50, width: "100%" } })), (0, jsx_runtime_1.jsx)("h1", { children: "Recent Posts" }), (0, jsx_runtime_1.jsx)(BlogSidebar_1.default, { postId: "" })] }) })] }) })) : (content.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: content.content }) })))] }));
 };
 exports.default = PreviewPage;

package/dist/src/templates/blog-post-archive.js

@@ -15,7 +15,7 @@ const BlogIndex = ({ data, pageContext }) => {
     const archive = data.wpPage;
     const { nextPagePath, previousPagePath } = pageContext;
     if (!posts.length) {
-        return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, backgroundImageTitle: archive.featuredImage?.node.title || null }), (0, jsx_runtime_1.jsx)("p", { children: "No blog posts found. Add posts to your WordPress site and they'll appear here!" })] }));
+        return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, overlayOpacity: archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined }), (0, jsx_runtime_1.jsx)("p", { children: "No blog posts found. Add posts to your WordPress site and they'll appear here!" })] }));
     }
     const groupedPosts = posts.reduce((groups, post, index) => {
         if (index % 3 === 0) {
@@ -26,7 +26,7 @@ const BlogIndex = ({ data, pageContext }) => {
         }
         return groups;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { isHomePage: true, children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, backgroundImageTitle: archive.featuredImage?.node.title || null }), (0, jsx_runtime_1.jsx)("section", { className: "soames-blog-roll", children: (0, jsx_runtime_1.jsx)("div", { className: "container", children: groupedPosts.map((group, index) => ((0, jsx_runtime_1.jsx)("div", { className: "media-container-row", children: group.map((post, idx) => ((0, jsx_runtime_1.jsx)("div", { className: "card p-3 col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-box", children: [(0, jsx_runtime_1.jsx)("h4", { className: "card-title mbr-fonts-style display-5", children: (0, html_react_parser_1.default)(post.title) }), (0, jsx_runtime_1.jsx)("h4", { className: "mbr-fonts-style display-7", children: post.date }), (0, html_react_parser_1.default)(post.excerpt)] }), (0, jsx_runtime_1.jsx)("div", { className: "mbr-section-btn text-center", children: (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${post.uri}`, itemProp: "url", className: "btn btn-primary display-4", children: (0, jsx_runtime_1.jsx)("span", { itemProp: "headline", children: "Read More" }) }) })] }) }, idx))) }, index))) }) }), (0, jsx_runtime_1.jsxs)("section", { children: [previousPagePath && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${previousPagePath}`, children: "Previous page" }), (0, jsx_runtime_1.jsx)("br", {})] })), nextPagePath && (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${nextPagePath}`, children: "Next page" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { isHomePage: true, children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "All posts" }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: archive.title ? (0, html_react_parser_1.default)(archive.title) : "Blog", subhead: archive.excerpt ? (0, html_react_parser_1.default)(archive.excerpt) : "", backgroundImage: archive.featuredImage?.node.guid || null, overlayOpacity: archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined }), (0, jsx_runtime_1.jsx)("section", { className: "soames-blog-roll", children: (0, jsx_runtime_1.jsx)("div", { className: "container", children: groupedPosts.map((group, index) => ((0, jsx_runtime_1.jsx)("div", { className: "media-container-row", children: group.map((post, idx) => ((0, jsx_runtime_1.jsx)("div", { className: "card p-3 col-12 col-lg-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-box", children: [(0, jsx_runtime_1.jsx)("h4", { className: "card-title mbr-fonts-style display-5", children: (0, html_react_parser_1.default)(post.title) }), (0, jsx_runtime_1.jsx)("h4", { className: "mbr-fonts-style display-7", children: post.date }), (0, html_react_parser_1.default)(post.excerpt)] }), (0, jsx_runtime_1.jsx)("div", { className: "mbr-section-btn text-center", children: (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${post.uri}`, itemProp: "url", className: "btn btn-primary display-4", children: (0, jsx_runtime_1.jsx)("span", { itemProp: "headline", children: "Read More" }) }) })] }) }, idx))) }, index))) }) }), (0, jsx_runtime_1.jsxs)("section", { children: [previousPagePath && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${previousPagePath}`, children: "Previous page" }), (0, jsx_runtime_1.jsx)("br", {})] })), nextPagePath && (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: `/blog${nextPagePath}`, children: "Next page" })] })] }));
 };
 exports.default = BlogIndex;
 exports.pageQuery = (0, gatsby_1.graphql) `
@@ -48,10 +48,10 @@ exports.pageQuery = (0, gatsby_1.graphql) `
     wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid
-          title
         }
       }
     }

package/dist/src/templates/blog-post.js

@@ -18,7 +18,7 @@ const BlogPostTemplate = ({ data }) => {
     const { post, previous, next, page } = data;
     const featuredImageData = post.featuredImage?.node?.gatsbyImage ?? null;
     const featuredImageAlt = post.featuredImage?.node?.altText || "Featured image";
-    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: post.title || "", description: post.excerpt || undefined }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: page?.title ? (0, html_react_parser_1.default)(page.title) : "Blog", subhead: page?.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page?.featuredImage?.node?.guid || null, backgroundImageTitle: page?.title || null }), (0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: [(0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: post.title ? (0, html_react_parser_1.default)(post.title) : "" }), (0, jsx_runtime_1.jsx)("p", { children: post.date })] }), post.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(post.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "blog-post-nav", children: (0, jsx_runtime_1.jsxs)("ul", { style: {
+    return ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: post.title || "", description: post.excerpt || undefined }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: page?.title ? (0, html_react_parser_1.default)(page.title) : "Blog", subhead: page?.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page?.featuredImage?.node?.guid || null, overlayOpacity: page?.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined }), (0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsxs)("div", { className: "media-container-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-12 col-lg-8", children: (0, jsx_runtime_1.jsxs)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-blog-content", children: [(0, jsx_runtime_1.jsxs)("article", { className: "blog-post", itemScope: true, itemType: "http://schema.org/Article", children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsx)("h1", { itemProp: "headline", children: post.title ? (0, html_react_parser_1.default)(post.title) : "" }), (0, jsx_runtime_1.jsx)("p", { children: post.date })] }), post.content && ((0, jsx_runtime_1.jsx)("section", { itemProp: "articleBody", className: "blog-post-content", children: (0, html_react_parser_1.default)(post.content) })), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("footer", { children: (0, jsx_runtime_1.jsx)(Bio_1.default, {}) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "blog-post-nav", children: (0, jsx_runtime_1.jsxs)("ul", { style: {
                                                 display: `flex`,
                                                 flexWrap: `wrap`,
                                                 justifyContent: `space-between`,
@@ -57,6 +57,7 @@ exports.pageQuery = (0, gatsby_1.graphql) `
     page: wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid

package/dist/src/templates/page.js

@@ -13,7 +13,7 @@ const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
 const Shortcodes_1 = require("../utils/shortcodes/Shortcodes");
 // Gutenberg block styles
 require("../styles/vendor/wordpress-blocks.css");
-const Page = ({ data: { page } }) => ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: page.title }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: (0, html_react_parser_1.default)(page.title), subhead: page.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page.featuredImage?.node.guid || null, backgroundImageTitle: page.featuredImage?.node.title || null }), page.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: page.content }) }))] }));
+const Page = ({ data: { page } }) => ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: page.title }), (0, jsx_runtime_1.jsx)(HeroHeader_1.default, { title: (0, html_react_parser_1.default)(page.title), subhead: page.excerpt ? (0, html_react_parser_1.default)(page.excerpt) : "", backgroundImage: page.featuredImage?.node.guid || null, overlayOpacity: page.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined }), page.content && ((0, jsx_runtime_1.jsx)("section", { id: "soames-gatsby-content-container", className: "soames-gatsby-content", children: (0, jsx_runtime_1.jsx)(Shortcodes_1.Shortcodes, { children: page.content }) }))] }));
 exports.default = Page;
 exports.pageQuery = (0, gatsby_1.graphql) `
   query PageById($id: String!) {
@@ -22,9 +22,9 @@ exports.pageQuery = (0, gatsby_1.graphql) `
       title
       excerpt
       content
+      overlayOpacity
       featuredImage {
         node {
-          title
           guid
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soames-gatsby-theme",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A customizable Gatsby theme for personal websites using WordPress as a headless CMS.",
   "main": "dist/gatsby-config.js",
   "scripts": {

package/src/components/HeroHeader.tsx

@@ -4,7 +4,6 @@ export interface HeroHeaderProps {
   title: React.ReactNode;
   subhead?: React.ReactNode;
   backgroundImage?: string | null;
-  backgroundImageTitle?: string | null;
   overlayOpacity?: number;
 }
 
@@ -12,18 +11,10 @@ const HeroHeader = ({
   title,
   subhead,
   backgroundImage,
-  backgroundImageTitle,
   overlayOpacity,
 }: HeroHeaderProps) => {
   if (!backgroundImage) {
     backgroundImage = "https://picsum.photos/1080/720";
-  } else {
-    if (backgroundImageTitle?.includes("_02o_")) overlayOpacity = 0.2;
-    else if (backgroundImageTitle?.includes("_03o_")) overlayOpacity = 0.3;
-    else if (backgroundImageTitle?.includes("_04o_")) overlayOpacity = 0.4;
-    else if (backgroundImageTitle?.includes("_05o_")) overlayOpacity = 0.5;
-    else if (backgroundImageTitle?.includes("_06o_")) overlayOpacity = 0.6;
-    else if (backgroundImageTitle?.includes("_07o_")) overlayOpacity = 0.7;
   }
 
   if (!overlayOpacity) {

package/src/pages/preview.tsx

@@ -3,20 +3,32 @@ import parse from "html-react-parser";
 import Layout from "../components/Layout";
 import Seo from "../components/Seo";
 import HeroHeader from "../components/HeroHeader";
+import Bio from "../components/Bio";
+import BlogSidebar from "../components/BlogSidebar";
 import { Shortcodes } from "../utils/shortcodes/Shortcodes";
+import "../styles/vendor/wordpress-blocks.css";
 
 interface FeaturedImage {
   sourceUrl?: string;
   altText?: string;
 }
 
+interface BlogHero {
+  title?: string | null;
+  excerpt?: string | null;
+  guid?: string | null;
+  overlayOpacity?: string | null;
+}
+
 interface PreviewContent {
   type: string;
   title?: string;
   content?: string;
   excerpt?: string;
   date?: string;
+  overlayOpacity?: string | null;
   featuredImage?: FeaturedImage | null;
+  blogHero?: BlogHero | null;
 }
 
 const PreviewPage: React.FC = () => {
@@ -86,19 +98,33 @@ const PreviewPage: React.FC = () => {
     );
   }
 
-  const backgroundImage = content.featuredImage?.sourceUrl ?? null;
-  const backgroundImageTitle = content.title ?? null;
+  const isPost = content.type === "post";
+
+  // For posts, HeroHeader mirrors the Blog archive page hero (matching blog-post.tsx).
+  // For pages, use the page's own title and featured image (matching page.tsx).
+  const heroTitle = isPost
+    ? (content.blogHero?.title ? parse(content.blogHero.title) : "Blog")
+    : (content.title ? parse(content.title) : "Preview");
+  const heroSubhead = isPost
+    ? (content.blogHero?.excerpt ? parse(content.blogHero.excerpt) : "")
+    : (content.excerpt ? parse(content.excerpt) : "");
+  const heroBg = isPost
+    ? (content.blogHero?.guid ?? null)
+    : (content.featuredImage?.sourceUrl ?? null);
+  const heroOpacityStr = isPost
+    ? (content.blogHero?.overlayOpacity ?? null)
+    : (content.overlayOpacity ?? null);
 
   return (
     <Layout>
       <Seo title={`Preview: ${content.title ?? ""}`} />
       <HeroHeader
-        title={content.title ? parse(content.title) : "Preview"}
-        subhead={content.excerpt ? parse(content.excerpt) : ""}
-        backgroundImage={backgroundImage}
-        backgroundImageTitle={backgroundImageTitle}
+        title={heroTitle}
+        subhead={heroSubhead}
+        backgroundImage={heroBg}
+        overlayOpacity={heroOpacityStr ? parseFloat(heroOpacityStr) : undefined}
       />
-      {content.type === "post" ? (
+      {isPost ? (
         <section>
           <div className="media-container-row">
             <div className="col-12 col-lg-8">
@@ -106,19 +132,48 @@ const PreviewPage: React.FC = () => {
                 id="soames-gatsby-content-container"
                 className="soames-gatsby-blog-content"
               >
-                <article className="blog-post">
+                <article
+                  className="blog-post"
+                  itemScope
+                  itemType="http://schema.org/Article"
+                >
                   <header>
-                    <h1>{content.title ? parse(content.title) : ""}</h1>
+                    <h1 itemProp="headline">
+                      {content.title ? parse(content.title) : ""}
+                    </h1>
                     {content.date && <p>{content.date}</p>}
                   </header>
                   {content.content && (
-                    <section className="blog-post-content">
+                    <section
+                      itemProp="articleBody"
+                      className="blog-post-content"
+                    >
                       {parse(content.content)}
                     </section>
                   )}
+                  <hr />
+                  <footer>
+                    <Bio />
+                  </footer>
                 </article>
               </section>
             </div>
+            <div className="col-12 col-lg-4">
+              <section
+                id="soames-gatsby-sidebar-container"
+                className="soames-gatsby-sidebar"
+              >
+                {content.featuredImage?.sourceUrl && (
+                  <img
+                    src={content.featuredImage.sourceUrl}
+                    alt={content.featuredImage.altText || ""}
+                    style={{ marginBottom: 50, width: "100%" }}
+                  />
+                )}
+                <h1>Recent Posts</h1>
+                <BlogSidebar postId="" />
+              </section>
+            </div>
           </div>
         </section>
       ) : (

package/src/templates/blog-post-archive.tsx

@@ -22,10 +22,10 @@ interface PostNode {
 interface ArchivePage {
   title: string;
   excerpt: string;
+  overlayOpacity?: string | null;
   featuredImage?: {
     node: {
       guid: string;
-      title: string;
     };
   };
 }
@@ -53,7 +53,7 @@ const BlogIndex: React.FC<BlogPostArchiveProps> = ({ data, pageContext }) => {
           title={archive.title ? parse(archive.title) : "Blog"}
           subhead={archive.excerpt ? parse(archive.excerpt) : ""}
           backgroundImage={archive.featuredImage?.node.guid || null}
-          backgroundImageTitle={archive.featuredImage?.node.title || null}
+          overlayOpacity={archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined}
         />
         <p>
           No blog posts found. Add posts to your WordPress site and they'll appear here!
@@ -78,7 +78,7 @@ const BlogIndex: React.FC<BlogPostArchiveProps> = ({ data, pageContext }) => {
         title={archive.title ? parse(archive.title) : "Blog"}
         subhead={archive.excerpt ? parse(archive.excerpt) : ""}
         backgroundImage={archive.featuredImage?.node.guid || null}
-        backgroundImageTitle={archive.featuredImage?.node.title || null}
+        overlayOpacity={archive.overlayOpacity ? parseFloat(archive.overlayOpacity) : undefined}
       />
 
       <section className="soames-blog-roll">
@@ -156,10 +156,10 @@ export const pageQuery = graphql`
     wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid
-          title
         }
       }
     }

package/src/templates/blog-post.tsx

@@ -32,6 +32,7 @@ interface Post {
 interface Page {
   title?: string | null;
   excerpt?: string | null;
+  overlayOpacity?: string | null;
   featuredImage?: {
     node: {
       guid?: string | null;
@@ -66,7 +67,7 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({ data }) => {
         title={page?.title ? parse(page.title) : "Blog"}
         subhead={page?.excerpt ? parse(page.excerpt) : ""}
         backgroundImage={page?.featuredImage?.node?.guid || null}
-        backgroundImageTitle={page?.title || null}
+        overlayOpacity={page?.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined}
       />
       <section>
         <div className="media-container-row">
@@ -173,6 +174,7 @@ export const pageQuery = graphql`
     page: wpPage(isPostsPage: { eq: true }) {
       title
       excerpt
+      overlayOpacity
       featuredImage {
         node {
           guid

package/src/templates/page.tsx

@@ -16,9 +16,9 @@ type PageTemplateProps = PageProps<{
     title: string;
     excerpt?: string;
     content?: string;
+    overlayOpacity?: string | null;
     featuredImage?: {
       node: {
-        title: string;
         guid: string;
       };
     };
@@ -32,7 +32,7 @@ const Page: React.FC<PageTemplateProps> = ({ data: { page } }) => (
       title={parse(page.title)}
       subhead={page.excerpt ? parse(page.excerpt) : ""}
       backgroundImage={page.featuredImage?.node.guid || null}
-      backgroundImageTitle={page.featuredImage?.node.title || null}
+      overlayOpacity={page.overlayOpacity ? parseFloat(page.overlayOpacity) : undefined}
     />
     {page.content && (
       <section
@@ -54,9 +54,9 @@ export const pageQuery = graphql`
       title
       excerpt
       content
+      overlayOpacity
       featuredImage {
         node {
-          title
           guid
         }
       }