soames-gatsby-theme 0.1.4 → 0.1.6

package/README.md

@@ -16,6 +16,32 @@ A customizable Gatsby theme for building personal websites using WordPress as a
 
 npm install soames-gatsby-theme
 
+## WordPress Preview Setup
+
+Soames supports previewing draft posts and pages directly from the WordPress admin, and fixes the "View Post" / "View Page" links that would otherwise land on the home page.
+
+### Requirements
+
+1. **WP Gatsby plugin** — install [WP Gatsby](https://wordpress.org/plugins/wp-gatsby/) on your WordPress backend. This plugin intercepts the Preview button and redirects to the Gatsby `/preview/` page with a short-lived auth token.
+2. **WPGraphQL** — already required by `gatsby-source-wordpress`, so this should already be active.
+
+### WP Gatsby configuration
+
+In the WP Gatsby settings in WordPress admin:
+- **Frontend URL** — set to your Gatsby site's public URL (e.g. `https://yoursite.com`)
+
+That's it. WP Gatsby will redirect Preview clicks to `https://yoursite.com/preview/?id=<id>&type=<post|page>&token=<token>`. The Soames theme handles the rest.
+
+### How it works
+
+- **Preview** — the `/preview/` page fetches draft content from the WordPress GraphQL endpoint using the token supplied by WP Gatsby, then renders it using the same layout as the published version.
+- **View Post** — a redirect is generated at build time from the WordPress permalink (e.g. `/2024/01/my-post/`) to the Gatsby blog path (e.g. `/blog/2024/01/my-post/`).
+- **View Page** — WordPress pages are already served at their WordPress URI, so no redirect is needed.
+
+Preview requires the editor to be logged into WordPress in the same browser session. The token expires shortly after being generated; if the preview page shows an error, click Preview again in WordPress admin.
+
+---
+
 ## Known Security Notices
 
 After installation, `npm audit` will report a number of vulnerabilities. All remaining issues fall into two categories:

package/dist/gatsby-config.js

@@ -16,6 +16,7 @@ const themeConfig = (themeOptions = {}) => {
                     url,
                 },
             },
+            require.resolve('gatsby-plugin-netlify'),
         ],
     };
 };

package/dist/src/pages/404.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gatsby_1 = require("gatsby");
+const Layout_1 = __importDefault(require("../components/Layout"));
+const Seo_1 = __importDefault(require("../components/Seo"));
+const NotFoundPage = () => ((0, jsx_runtime_1.jsxs)(Layout_1.default, { children: [(0, jsx_runtime_1.jsx)(Seo_1.default, { title: "404: Page Not Found" }), (0, jsx_runtime_1.jsxs)("section", { style: { padding: "4rem 2rem", textAlign: "center" }, children: [(0, jsx_runtime_1.jsx)("h1", { children: "Page Not Found" }), (0, jsx_runtime_1.jsx)("p", { children: "The page you're looking for doesn't exist." }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: "/", children: "Go home" }), " or ", (0, jsx_runtime_1.jsx)(gatsby_1.Link, { to: "/blog", children: "browse the blog" }), "."] })] })] }));
+exports.default = NotFoundPage;

package/dist/src/pages/preview.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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 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.");
+            setLoading(false);
+            return;
+        }
+        const wpGraphQLUrl = process.env.GATSBY_WORDPRESS_URL;
+        if (!wpGraphQLUrl) {
+            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 } }),
+        })
+            .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.");
+                }
+            }
+            else {
+                setContent(node);
+            }
+            setLoading(false);
+        })
+            .catch((err) => {
+            setError(`Failed to connect to WordPress: ${err.message}`);
+            setLoading(false);
+        });
+    }, []);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)(Layout_1.default, { children: (0, jsx_runtime_1.jsx)("section", { style: { padding: "4rem 2rem", textAlign: "center" }, children: (0, jsx_runtime_1.jsx)("p", { children: "Loading preview\u2026" }) }) }));
+    }
+    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 }) })))] }));
+};
+exports.default = PreviewPage;

package/gatsby-node.js

@@ -25,7 +25,7 @@ const path = require('path');
 const { chunk } = require('lodash');
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
-  const { createPage } = actions;
+  const { createPage, createRedirect } = actions;
 
   // Fetch posts
   const postsResult = await graphql(`
@@ -87,6 +87,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         nextPostId: next ? next.id : null,
       },
     });
+    // Redirect WordPress "View Post" permalink to the Gatsby /blog/ path.
+    // WordPress generates view links using node.uri (e.g. /2024/01/my-post/)
+    // but Gatsby serves posts at /blog/2024/01/my-post/.
+    createRedirect({
+      fromPath: node.uri,
+      toPath: `/blog${node.uri}`,
+      isPermanent: false,
+    });
   });
 
   // Create blog post archive pages

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soames-gatsby-theme",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "A customizable Gatsby theme for personal websites using WordPress as a headless CMS.",
   "main": "dist/gatsby-config.js",
   "scripts": {
@@ -64,6 +64,7 @@
     "bootstrap": "^5.3.5",
     "gatsby-plugin-image": "^3.14.0",
     "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-netlify": "^5.1.1",
     "gatsby-plugin-react-helmet": "^6.14.0",
     "gatsby-plugin-sharp": "^5.14.0",
     "gatsby-source-filesystem": "^5.14.0",
@@ -71,6 +72,7 @@
     "gatsby-transformer-sharp": "^5.14.0",
     "html-react-parser": "^5.2.3",
     "jquery": "^3.7.1",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "rimraf": "^3.0.2"
   }
 }

package/src/pages/404.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "gatsby";
+import Layout from "../components/Layout";
+import Seo from "../components/Seo";
+
+const NotFoundPage: React.FC = () => (
+  <Layout>
+    <Seo title="404: Page Not Found" />
+    <section style={{ padding: "4rem 2rem", textAlign: "center" }}>
+      <h1>Page Not Found</h1>
+      <p>The page you&apos;re looking for doesn&apos;t exist.</p>
+      <p>
+        <Link to="/">Go home</Link> or <Link to="/blog">browse the blog</Link>.
+      </p>
+    </section>
+  </Layout>
+);
+
+export default NotFoundPage;

package/src/pages/preview.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useState } from "react";
+import parse from "html-react-parser";
+import Layout from "../components/Layout";
+import Seo from "../components/Seo";
+import HeroHeader from "../components/HeroHeader";
+import { Shortcodes } from "../utils/shortcodes/Shortcodes";
+
+interface FeaturedImage {
+  node: {
+    sourceUrl?: string;
+    altText?: string;
+  };
+}
+
+interface PreviewContent {
+  title?: string;
+  content?: string;
+  excerpt?: string;
+  date?: string;
+  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);
+
+  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."
+      );
+      setLoading(false);
+      return;
+    }
+
+    const wpGraphQLUrl = process.env.GATSBY_WORDPRESS_URL;
+    if (!wpGraphQLUrl) {
+      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 } }),
+    })
+      .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."
+            );
+          }
+        } else {
+          setContent(node as PreviewContent);
+        }
+        setLoading(false);
+      })
+      .catch((err: Error) => {
+        setError(`Failed to connect to WordPress: ${err.message}`);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <Layout>
+        <section style={{ padding: "4rem 2rem", textAlign: "center" }}>
+          <p>Loading preview&hellip;</p>
+        </section>
+      </Layout>
+    );
+  }
+
+  if (error || !content) {
+    return (
+      <Layout>
+        <Seo title="Preview Unavailable" />
+        <section style={{ padding: "4rem 2rem", textAlign: "center" }}>
+          <h2>Preview Unavailable</h2>
+          <p>{error ?? "No preview content found."}</p>
+        </section>
+      </Layout>
+    );
+  }
+
+  const backgroundImage = content.featuredImage?.node?.sourceUrl ?? null;
+  const backgroundImageTitle = 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}
+      />
+      {contentType === "post" ? (
+        <section>
+          <div className="media-container-row">
+            <div className="col-12 col-lg-8">
+              <section
+                id="soames-gatsby-content-container"
+                className="soames-gatsby-blog-content"
+              >
+                <article className="blog-post">
+                  <header>
+                    <h1>{content.title ? parse(content.title) : ""}</h1>
+                    {content.date && <p>{content.date}</p>}
+                  </header>
+                  {content.content && (
+                    <section className="blog-post-content">
+                      {parse(content.content)}
+                    </section>
+                  )}
+                </article>
+              </section>
+            </div>
+          </div>
+        </section>
+      ) : (
+        content.content && (
+          <section
+            id="soames-gatsby-content-container"
+            className="soames-gatsby-content"
+          >
+            <Shortcodes>{content.content}</Shortcodes>
+          </section>
+        )
+      )}
+    </Layout>
+  );
+};
+
+export default PreviewPage;