soames-gatsby-theme 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/pages/preview.js +19 -3
- package/package.json +1 -1
- package/src/pages/preview.tsx +63 -10
|
@@ -9,7 +9,10 @@ const html_react_parser_1 = __importDefault(require("html-react-parser"));
|
|
|
9
9
|
const Layout_1 = __importDefault(require("../components/Layout"));
|
|
10
10
|
const Seo_1 = __importDefault(require("../components/Seo"));
|
|
11
11
|
const HeroHeader_1 = __importDefault(require("../components/HeroHeader"));
|
|
12
|
+
const Bio_1 = __importDefault(require("../components/Bio"));
|
|
13
|
+
const BlogSidebar_1 = __importDefault(require("../components/BlogSidebar"));
|
|
12
14
|
const Shortcodes_1 = require("../utils/shortcodes/Shortcodes");
|
|
15
|
+
require("../styles/vendor/wordpress-blocks.css");
|
|
13
16
|
const PreviewPage = () => {
|
|
14
17
|
const [content, setContent] = (0, react_1.useState)(null);
|
|
15
18
|
const [loading, setLoading] = (0, react_1.useState)(true);
|
|
@@ -54,8 +57,21 @@ const PreviewPage = () => {
|
|
|
54
57
|
if (error || !content) {
|
|
55
58
|
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." })] })] }));
|
|
56
59
|
}
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
+
const isPost = content.type === "post";
|
|
61
|
+
// For posts, HeroHeader mirrors the Blog archive page hero (matching blog-post.tsx).
|
|
62
|
+
// For pages, use the page's own title and featured image (matching page.tsx).
|
|
63
|
+
const heroTitle = isPost
|
|
64
|
+
? (content.blogHero?.title ? (0, html_react_parser_1.default)(content.blogHero.title) : "Blog")
|
|
65
|
+
: (content.title ? (0, html_react_parser_1.default)(content.title) : "Preview");
|
|
66
|
+
const heroSubhead = isPost
|
|
67
|
+
? (content.blogHero?.excerpt ? (0, html_react_parser_1.default)(content.blogHero.excerpt) : "")
|
|
68
|
+
: (content.excerpt ? (0, html_react_parser_1.default)(content.excerpt) : "");
|
|
69
|
+
const heroBg = isPost
|
|
70
|
+
? (content.blogHero?.guid ?? null)
|
|
71
|
+
: (content.featuredImage?.sourceUrl ?? null);
|
|
72
|
+
const heroBgTitle = isPost
|
|
73
|
+
? (content.blogHero?.title ?? null)
|
|
74
|
+
: (content.title ?? null);
|
|
75
|
+
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 }) })))] }));
|
|
60
76
|
};
|
|
61
77
|
exports.default = PreviewPage;
|
package/package.json
CHANGED
package/src/pages/preview.tsx
CHANGED
|
@@ -3,13 +3,22 @@ import parse from "html-react-parser";
|
|
|
3
3
|
import Layout from "../components/Layout";
|
|
4
4
|
import Seo from "../components/Seo";
|
|
5
5
|
import HeroHeader from "../components/HeroHeader";
|
|
6
|
+
import Bio from "../components/Bio";
|
|
7
|
+
import BlogSidebar from "../components/BlogSidebar";
|
|
6
8
|
import { Shortcodes } from "../utils/shortcodes/Shortcodes";
|
|
9
|
+
import "../styles/vendor/wordpress-blocks.css";
|
|
7
10
|
|
|
8
11
|
interface FeaturedImage {
|
|
9
12
|
sourceUrl?: string;
|
|
10
13
|
altText?: string;
|
|
11
14
|
}
|
|
12
15
|
|
|
16
|
+
interface BlogHero {
|
|
17
|
+
title?: string | null;
|
|
18
|
+
excerpt?: string | null;
|
|
19
|
+
guid?: string | null;
|
|
20
|
+
}
|
|
21
|
+
|
|
13
22
|
interface PreviewContent {
|
|
14
23
|
type: string;
|
|
15
24
|
title?: string;
|
|
@@ -17,6 +26,7 @@ interface PreviewContent {
|
|
|
17
26
|
excerpt?: string;
|
|
18
27
|
date?: string;
|
|
19
28
|
featuredImage?: FeaturedImage | null;
|
|
29
|
+
blogHero?: BlogHero | null;
|
|
20
30
|
}
|
|
21
31
|
|
|
22
32
|
const PreviewPage: React.FC = () => {
|
|
@@ -86,19 +96,33 @@ const PreviewPage: React.FC = () => {
|
|
|
86
96
|
);
|
|
87
97
|
}
|
|
88
98
|
|
|
89
|
-
const
|
|
90
|
-
|
|
99
|
+
const isPost = content.type === "post";
|
|
100
|
+
|
|
101
|
+
// For posts, HeroHeader mirrors the Blog archive page hero (matching blog-post.tsx).
|
|
102
|
+
// For pages, use the page's own title and featured image (matching page.tsx).
|
|
103
|
+
const heroTitle = isPost
|
|
104
|
+
? (content.blogHero?.title ? parse(content.blogHero.title) : "Blog")
|
|
105
|
+
: (content.title ? parse(content.title) : "Preview");
|
|
106
|
+
const heroSubhead = isPost
|
|
107
|
+
? (content.blogHero?.excerpt ? parse(content.blogHero.excerpt) : "")
|
|
108
|
+
: (content.excerpt ? parse(content.excerpt) : "");
|
|
109
|
+
const heroBg = isPost
|
|
110
|
+
? (content.blogHero?.guid ?? null)
|
|
111
|
+
: (content.featuredImage?.sourceUrl ?? null);
|
|
112
|
+
const heroBgTitle = isPost
|
|
113
|
+
? (content.blogHero?.title ?? null)
|
|
114
|
+
: (content.title ?? null);
|
|
91
115
|
|
|
92
116
|
return (
|
|
93
117
|
<Layout>
|
|
94
118
|
<Seo title={`Preview: ${content.title ?? ""}`} />
|
|
95
119
|
<HeroHeader
|
|
96
|
-
title={
|
|
97
|
-
subhead={
|
|
98
|
-
backgroundImage={
|
|
99
|
-
backgroundImageTitle={
|
|
120
|
+
title={heroTitle}
|
|
121
|
+
subhead={heroSubhead}
|
|
122
|
+
backgroundImage={heroBg}
|
|
123
|
+
backgroundImageTitle={heroBgTitle}
|
|
100
124
|
/>
|
|
101
|
-
{
|
|
125
|
+
{isPost ? (
|
|
102
126
|
<section>
|
|
103
127
|
<div className="media-container-row">
|
|
104
128
|
<div className="col-12 col-lg-8">
|
|
@@ -106,19 +130,48 @@ const PreviewPage: React.FC = () => {
|
|
|
106
130
|
id="soames-gatsby-content-container"
|
|
107
131
|
className="soames-gatsby-blog-content"
|
|
108
132
|
>
|
|
109
|
-
<article
|
|
133
|
+
<article
|
|
134
|
+
className="blog-post"
|
|
135
|
+
itemScope
|
|
136
|
+
itemType="http://schema.org/Article"
|
|
137
|
+
>
|
|
110
138
|
<header>
|
|
111
|
-
<h1
|
|
139
|
+
<h1 itemProp="headline">
|
|
140
|
+
{content.title ? parse(content.title) : ""}
|
|
141
|
+
</h1>
|
|
112
142
|
{content.date && <p>{content.date}</p>}
|
|
113
143
|
</header>
|
|
114
144
|
{content.content && (
|
|
115
|
-
<section
|
|
145
|
+
<section
|
|
146
|
+
itemProp="articleBody"
|
|
147
|
+
className="blog-post-content"
|
|
148
|
+
>
|
|
116
149
|
{parse(content.content)}
|
|
117
150
|
</section>
|
|
118
151
|
)}
|
|
152
|
+
<hr />
|
|
153
|
+
<footer>
|
|
154
|
+
<Bio />
|
|
155
|
+
</footer>
|
|
119
156
|
</article>
|
|
120
157
|
</section>
|
|
121
158
|
</div>
|
|
159
|
+
<div className="col-12 col-lg-4">
|
|
160
|
+
<section
|
|
161
|
+
id="soames-gatsby-sidebar-container"
|
|
162
|
+
className="soames-gatsby-sidebar"
|
|
163
|
+
>
|
|
164
|
+
{content.featuredImage?.sourceUrl && (
|
|
165
|
+
<img
|
|
166
|
+
src={content.featuredImage.sourceUrl}
|
|
167
|
+
alt={content.featuredImage.altText || ""}
|
|
168
|
+
style={{ marginBottom: 50, width: "100%" }}
|
|
169
|
+
/>
|
|
170
|
+
)}
|
|
171
|
+
<h1>Recent Posts</h1>
|
|
172
|
+
<BlogSidebar postId="" />
|
|
173
|
+
</section>
|
|
174
|
+
</div>
|
|
122
175
|
</div>
|
|
123
176
|
</section>
|
|
124
177
|
) : (
|