soames-gatsby-theme 0.1.6 → 0.1.7

package/dist/src/pages/preview.js

@@ -10,89 +10,36 @@ const Layout_1 = __importDefault(require("../components/Layout"));
 const Seo_1 = __importDefault(require("../components/Seo"));
 const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
 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
-        }
-      }
-    }
-  }
-`;
 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 +54,8 @@ 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 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 }), 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 }) })))] }));
+    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 }) })))] }));
 };
 exports.default = PreviewPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soames-gatsby-theme",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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

@@ -6,13 +6,12 @@ import HeroHeader from "../components/HeroHeader";
 import { Shortcodes } from "../utils/shortcodes/Shortcodes";
 
 interface FeaturedImage {
-  node: {
-    sourceUrl?: string;
-    altText?: string;
-  };
+  sourceUrl?: string;
+  altText?: string;
 }
 
 interface PreviewContent {
+  type: string;
   title?: string;
   content?: string;
   excerpt?: string;
@@ -20,42 +19,8 @@ interface PreviewContent {
   featuredImage?: FeaturedImage | 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 +28,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;
+    const wpOrigin = new URL(wpUrl).origin;
+    const endpoint = `${wpOrigin}/wp-json/soames/v1/preview?token=${encodeURIComponent(token)}`;
 
-    fetch(wpGraphQLUrl, {
-      method: "POST",
-      credentials: token ? "omit" : "include",
-      headers: {
-        "Content-Type": "application/json",
-        ...(token ? { Authorization: `Bearer ${token}` } : {}),
-      },
-      body: JSON.stringify({ query, variables: { id } }),
-    })
+    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,7 +86,7 @@ const PreviewPage: React.FC = () => {
     );
   }
 
-  const backgroundImage = content.featuredImage?.node?.sourceUrl ?? null;
+  const backgroundImage = content.featuredImage?.sourceUrl ?? null;
   const backgroundImageTitle = content.title ?? null;
 
   return (
@@ -160,7 +98,7 @@ const PreviewPage: React.FC = () => {
         backgroundImage={backgroundImage}
         backgroundImageTitle={backgroundImageTitle}
       />
-      {contentType === "post" ? (
+      {content.type === "post" ? (
         <section>
           <div className="media-container-row">
             <div className="col-12 col-lg-8">