soames-gatsby-theme 0.1.6 → 0.1.8

package/dist/src/pages/preview.js

@@ -9,90 +9,40 @@ 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");
-const POST_PREVIEW_QUERY = `
-  query PreviewPost($id: ID!) {
-    post(id: $id, idType: DATABASE_ID, asPreview: true) {
-      title
-      content
-      excerpt
-      date
-      featuredImage {
-        node {
-          sourceUrl
-          altText
-        }
-      }
-    }
-  }
-`;
-const PAGE_PREVIEW_QUERY = `
-  query PreviewPage($id: ID!) {
-    page(id: $id, idType: DATABASE_ID, asPreview: true) {
-      title
-      content
-      excerpt
-      featuredImage {
-        node {
-          sourceUrl
-          altText
-        }
-      }
-    }
-  }
-`;
+require("../styles/vendor/wordpress-blocks.css");
 const PreviewPage = () => {
     const [content, setContent] = (0, react_1.useState)(null);
-    const [contentType, setContentType] = (0, react_1.useState)("post");
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (typeof window === "undefined")
             return;
         const params = new URLSearchParams(window.location.search);
-        const id = params.get("id");
-        const type = (params.get("type") || "post").toLowerCase();
         const token = params.get("token");
-        setContentType(type);
-        if (!id) {
-            setError("No preview ID provided. Please use the Preview button in WordPress admin.");
+        if (!token) {
+            setError("No preview token provided. Please use the Preview button in WordPress admin.");
             setLoading(false);
             return;
         }
-        const wpGraphQLUrl = process.env.GATSBY_WORDPRESS_URL;
-        if (!wpGraphQLUrl) {
+        const wpUrl = process.env.GATSBY_WORDPRESS_URL;
+        if (!wpUrl) {
             setError("WordPress URL is not configured.");
             setLoading(false);
             return;
         }
-        const query = type === "page" ? PAGE_PREVIEW_QUERY : POST_PREVIEW_QUERY;
-        fetch(wpGraphQLUrl, {
-            method: "POST",
-            credentials: token ? "omit" : "include",
-            headers: {
-                "Content-Type": "application/json",
-                ...(token ? { Authorization: `Bearer ${token}` } : {}),
-            },
-            body: JSON.stringify({ query, variables: { id } }),
-        })
+        const wpOrigin = new URL(wpUrl).origin;
+        const endpoint = `${wpOrigin}/wp-json/soames/v1/preview?token=${encodeURIComponent(token)}`;
+        fetch(endpoint)
             .then((res) => res.json())
             .then((data) => {
-            const node = data?.data?.post ?? data?.data?.page ?? null;
-            if (!node) {
-                const firstError = data?.errors?.[0]?.message;
-                if (firstError &&
-                    (firstError.toLowerCase().includes("forbidden") ||
-                        firstError.toLowerCase().includes("authorization"))) {
-                    setError("Preview token expired or invalid. Please click Preview again from WordPress admin.");
-                }
-                else {
-                    setError(firstError
-                        ? `Could not load preview: ${firstError}`
-                        : "Could not load preview content. The post or page may not exist.");
-                }
+            if (data.code) {
+                setError(data.message ?? "Could not load preview content.");
             }
             else {
-                setContent(node);
+                setContent(data);
             }
             setLoading(false);
         })
@@ -107,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?.node?.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 }), contentType === "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 heroBgTitle = isPost
+        ? (content.blogHero?.title ?? null)
+        : (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: heroTitle, subhead: heroSubhead, backgroundImage: heroBg, backgroundImageTitle: heroBgTitle }), 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/package.json

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

package/src/pages/preview.tsx

@@ -3,59 +3,34 @@ 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 {
-  node: {
-    sourceUrl?: string;
-    altText?: string;
-  };
+  sourceUrl?: string;
+  altText?: string;
+}
+
+interface BlogHero {
+  title?: string | null;
+  excerpt?: string | null;
+  guid?: string | null;
 }
 
 interface PreviewContent {
+  type: string;
   title?: string;
   content?: string;
   excerpt?: string;
   date?: string;
   featuredImage?: FeaturedImage | null;
+  blogHero?: BlogHero | null;
 }
 
-const POST_PREVIEW_QUERY = `
-  query PreviewPost($id: ID!) {
-    post(id: $id, idType: DATABASE_ID, asPreview: true) {
-      title
-      content
-      excerpt
-      date
-      featuredImage {
-        node {
-          sourceUrl
-          altText
-        }
-      }
-    }
-  }
-`;
-
-const PAGE_PREVIEW_QUERY = `
-  query PreviewPage($id: ID!) {
-    page(id: $id, idType: DATABASE_ID, asPreview: true) {
-      title
-      content
-      excerpt
-      featuredImage {
-        node {
-          sourceUrl
-          altText
-        }
-      }
-    }
-  }
-`;
-
 const PreviewPage: React.FC = () => {
   const [content, setContent] = useState<PreviewContent | null>(null);
-  const [contentType, setContentType] = useState<string>("post");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -63,60 +38,33 @@ const PreviewPage: React.FC = () => {
     if (typeof window === "undefined") return;
 
     const params = new URLSearchParams(window.location.search);
-    const id = params.get("id");
-    const type = (params.get("type") || "post").toLowerCase();
     const token = params.get("token");
 
-    setContentType(type);
-
-    if (!id) {
+    if (!token) {
       setError(
-        "No preview ID provided. Please use the Preview button in WordPress admin."
+        "No preview token provided. Please use the Preview button in WordPress admin."
       );
       setLoading(false);
       return;
     }
 
-    const wpGraphQLUrl = process.env.GATSBY_WORDPRESS_URL;
-    if (!wpGraphQLUrl) {
+    const wpUrl = process.env.GATSBY_WORDPRESS_URL;
+    if (!wpUrl) {
       setError("WordPress URL is not configured.");
       setLoading(false);
       return;
     }
 
-    const query = type === "page" ? PAGE_PREVIEW_QUERY : POST_PREVIEW_QUERY;
-
-    fetch(wpGraphQLUrl, {
-      method: "POST",
-      credentials: token ? "omit" : "include",
-      headers: {
-        "Content-Type": "application/json",
-        ...(token ? { Authorization: `Bearer ${token}` } : {}),
-      },
-      body: JSON.stringify({ query, variables: { id } }),
-    })
+    const wpOrigin = new URL(wpUrl).origin;
+    const endpoint = `${wpOrigin}/wp-json/soames/v1/preview?token=${encodeURIComponent(token)}`;
+
+    fetch(endpoint)
       .then((res) => res.json())
       .then((data) => {
-        const node = data?.data?.post ?? data?.data?.page ?? null;
-        if (!node) {
-          const firstError: string | undefined = data?.errors?.[0]?.message;
-          if (
-            firstError &&
-            (firstError.toLowerCase().includes("forbidden") ||
-              firstError.toLowerCase().includes("authorization"))
-          ) {
-            setError(
-              "Preview token expired or invalid. Please click Preview again from WordPress admin."
-            );
-          } else {
-            setError(
-              firstError
-                ? `Could not load preview: ${firstError}`
-                : "Could not load preview content. The post or page may not exist."
-            );
-          }
+        if (data.code) {
+          setError(data.message ?? "Could not load preview content.");
         } else {
-          setContent(node as PreviewContent);
+          setContent(data as PreviewContent);
         }
         setLoading(false);
       })
@@ -148,19 +96,33 @@ const PreviewPage: React.FC = () => {
     );
   }
 
-  const backgroundImage = content.featuredImage?.node?.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 heroBgTitle = isPost
+    ? (content.blogHero?.title ?? null)
+    : (content.title ?? 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}
+        backgroundImageTitle={heroBgTitle}
       />
-      {contentType === "post" ? (
+      {isPost ? (
         <section>
           <div className="media-container-row">
             <div className="col-12 col-lg-8">
@@ -168,19 +130,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>
       ) : (