soames-gatsby-theme/dist/src/templates/blog-post-archive.js

A customizable Gatsby theme for personal websites using WordPress as a headless CMS.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.pageQuery = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const gatsby_1 = require("gatsby");
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 BlogIndex = ({ data, pageContext }) => {
    const posts = data.allWpPost.nodes;
    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!" })] }));
    }
    const groupedPosts = posts.reduce((groups, post, index) => {
        if (index % 3 === 0) {
            groups.push([post]);
        }
        else {
            groups[groups.length - 1].push(post);
        }
        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" })] })] }));
};
exports.default = BlogIndex;
exports.pageQuery = (0, gatsby_1.graphql) `
  query WordPressPostArchive($offset: Int!, $postsPerPage: Int!) {
    allWpPost(sort: { date: DESC }, limit: $postsPerPage, skip: $offset) {
      nodes {
        excerpt
        uri
        date(formatString: "MMMM DD, YYYY")
        title
        featuredImage {
          node {
            guid
            title
          }
        }
      }
    }
    wpPage(isPostsPage: { eq: true }) {
      title
      excerpt
      featuredImage {
        node {
          guid
          title
        }
      }
    }
  }
`;