soames-gatsby-theme
Version:
A customizable Gatsby theme for personal websites using WordPress as a headless CMS.
68 lines (67 loc) • 4.87 kB
JavaScript
"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 gatsby_plugin_image_1 = require("gatsby-plugin-image");
const html_react_parser_1 = __importDefault(require("html-react-parser"));
require("../styles/vendor/wordpress-blocks.css");
const Bio_1 = __importDefault(require("../components/Bio"));
const Layout_1 = __importDefault(require("../components/Layout"));
const Seo_1 = __importDefault(require("../components/Seo"));
const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
const BlogSidebar_1 = __importDefault(require("../components/BlogSidebar"));
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: {
display: `flex`,
flexWrap: `wrap`,
justifyContent: `space-between`,
listStyle: `none`,
padding: 0,
}, children: [(0, jsx_runtime_1.jsx)("li", { children: previous && ((0, jsx_runtime_1.jsxs)(gatsby_1.Link, { to: `/blog${previous.uri}`, rel: "prev", children: ["\u2190 ", previous.title ? (0, html_react_parser_1.default)(previous.title) : ""] })) }), (0, jsx_runtime_1.jsx)("li", { children: next && ((0, jsx_runtime_1.jsxs)(gatsby_1.Link, { to: `/blog${next.uri}`, rel: "next", children: [next.title ? (0, html_react_parser_1.default)(next.title) : "", " \u2192"] })) })] }) })] }) }), (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: [featuredImageData && ((0, jsx_runtime_1.jsx)(gatsby_plugin_image_1.GatsbyImage, { image: featuredImageData, alt: featuredImageAlt, style: { marginBottom: 50 } })), (0, jsx_runtime_1.jsx)("h1", { children: "Recent Posts" }), (0, jsx_runtime_1.jsx)(BlogSidebar_1.default, { postId: post.id })] }) })] }) })] }));
};
exports.default = BlogPostTemplate;
exports.pageQuery = (0, gatsby_1.graphql) `
query BlogPostById($id: String!, $previousPostId: String, $nextPostId: String) {
post: wpPost(id: { eq: $id }) {
id
excerpt
content
title
date(formatString: "MMMM DD, YYYY")
featuredImage {
node {
altText
gatsbyImage(
width: 1200
layout: CONSTRAINED
placeholder: BLURRED
)
}
}
}
previous: wpPost(id: { eq: $previousPostId }) {
uri
title
}
next: wpPost(id: { eq: $nextPostId }) {
uri
title
}
page: wpPage(isPostsPage: { eq: true }) {
title
excerpt
featuredImage {
node {
guid
}
}
}
}
`;