create-brainerce-store 1.46.0 → 1.47.1
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/index.js
CHANGED
|
@@ -31,7 +31,7 @@ var require_package = __commonJS({
|
|
|
31
31
|
"package.json"(exports2, module2) {
|
|
32
32
|
module2.exports = {
|
|
33
33
|
name: "create-brainerce-store",
|
|
34
|
-
version: "1.
|
|
34
|
+
version: "1.47.1",
|
|
35
35
|
description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
|
|
36
36
|
bin: {
|
|
37
37
|
"create-brainerce-store": "dist/index.js"
|
package/package.json
CHANGED
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Blog post detail page — renders a single published blog post by its slug.
|
|
3
|
+
*
|
|
4
|
+
* - Fetches the post from the Brainerce SDK (returns null on 404)
|
|
5
|
+
* - Generates full SEO metadata (title, description, OG image)
|
|
6
|
+
* - Injects Article JSON-LD for Google rich snippets
|
|
7
|
+
* - Body HTML is sanitized before rendering
|
|
8
|
+
*
|
|
9
|
+
* Security: always pass blog content through sanitizeHtml before dangerouslySetInnerHTML.
|
|
10
|
+
*/
|
|
11
|
+
import * as React from 'react';
|
|
12
|
+
import type { Metadata } from 'next';
|
|
13
|
+
import { notFound } from 'next/navigation';
|
|
14
|
+
import Link from 'next/link';
|
|
15
|
+
import Image from 'next/image';
|
|
16
|
+
|
|
17
|
+
import { getServerClient } from '@/lib/brainerce';
|
|
18
|
+
import { sanitizeHtml } from '@/lib/sanitize';
|
|
19
|
+
import { decodeSlug } from '@/lib/utils';
|
|
20
|
+
|
|
21
|
+
<% if (i18nEnabled) { %>
|
|
22
|
+
type PageProps = {
|
|
23
|
+
params: Promise<{ locale: string; slug: string }>;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
|
27
|
+
const { locale, slug: rawSlug } = await params;
|
|
28
|
+
const slug = decodeSlug(rawSlug);
|
|
29
|
+
const post = await getServerClient(locale).blog.getPost(slug).catch(() => null);
|
|
30
|
+
if (!post) return { title: slug };
|
|
31
|
+
return {
|
|
32
|
+
title: post.seoTitle ?? post.title,
|
|
33
|
+
description: post.seoDescription ?? post.excerpt,
|
|
34
|
+
openGraph: {
|
|
35
|
+
title: post.seoTitle ?? post.title,
|
|
36
|
+
description: post.seoDescription ?? post.excerpt ?? undefined,
|
|
37
|
+
type: 'article',
|
|
38
|
+
publishedTime: post.publishedAt ?? undefined,
|
|
39
|
+
authors: post.author ? [post.author] : undefined,
|
|
40
|
+
images: post.ogImageUrl
|
|
41
|
+
? [{ url: post.ogImageUrl }]
|
|
42
|
+
: post.coverImageUrl
|
|
43
|
+
? [{ url: post.coverImageUrl }]
|
|
44
|
+
: undefined,
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export default async function BlogPostPage({ params }: PageProps) {
|
|
50
|
+
const { locale, slug: rawSlug } = await params;
|
|
51
|
+
const slug = decodeSlug(rawSlug);
|
|
52
|
+
const post = await getServerClient(locale).blog.getPost(slug).catch(() => null);
|
|
53
|
+
if (!post) notFound();
|
|
54
|
+
|
|
55
|
+
const isHe = locale === 'he';
|
|
56
|
+
const dir = isHe ? 'rtl' : 'ltr';
|
|
57
|
+
const backLabel = isHe ? '← חזרה לבלוג' : '← Back to blog';
|
|
58
|
+
|
|
59
|
+
const articleJsonLd = {
|
|
60
|
+
'@context': 'https://schema.org',
|
|
61
|
+
'@type': 'Article',
|
|
62
|
+
headline: post.title,
|
|
63
|
+
description: post.excerpt ?? undefined,
|
|
64
|
+
image: post.coverImageUrl ?? undefined,
|
|
65
|
+
datePublished: post.publishedAt ?? undefined,
|
|
66
|
+
dateModified: post.updatedAt,
|
|
67
|
+
author: post.author ? { '@type': 'Person', name: post.author } : undefined,
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<main dir={dir} className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
|
|
72
|
+
<script
|
|
73
|
+
type="application/ld+json"
|
|
74
|
+
dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd).replace(/</g, '\\u003c') }}
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
{/* Back link */}
|
|
78
|
+
<Link
|
|
79
|
+
href="/blog"
|
|
80
|
+
className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
81
|
+
>
|
|
82
|
+
{backLabel}
|
|
83
|
+
</Link>
|
|
84
|
+
|
|
85
|
+
{/* Category */}
|
|
86
|
+
{post.category && (
|
|
87
|
+
<div className="mb-3">
|
|
88
|
+
<span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
|
|
89
|
+
{post.category}
|
|
90
|
+
</span>
|
|
91
|
+
</div>
|
|
92
|
+
)}
|
|
93
|
+
|
|
94
|
+
{/* Title */}
|
|
95
|
+
<h1 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl leading-tight">
|
|
96
|
+
{post.title}
|
|
97
|
+
</h1>
|
|
98
|
+
|
|
99
|
+
{/* Meta row: author + date + tags */}
|
|
100
|
+
<div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground border-b border-border pb-6">
|
|
101
|
+
{post.author && <span className="font-medium text-foreground">{post.author}</span>}
|
|
102
|
+
{post.publishedAt && (
|
|
103
|
+
<time dateTime={post.publishedAt}>
|
|
104
|
+
{new Date(post.publishedAt).toLocaleDateString(isHe ? 'he-IL' : 'en-US', {
|
|
105
|
+
year: 'numeric',
|
|
106
|
+
month: 'long',
|
|
107
|
+
day: 'numeric',
|
|
108
|
+
})}
|
|
109
|
+
</time>
|
|
110
|
+
)}
|
|
111
|
+
{post.tags && post.tags.length > 0 && (
|
|
112
|
+
<div className="flex flex-wrap gap-1.5">
|
|
113
|
+
{post.tags.map((tag) => (
|
|
114
|
+
<span
|
|
115
|
+
key={tag}
|
|
116
|
+
className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
|
|
117
|
+
>
|
|
118
|
+
{tag}
|
|
119
|
+
</span>
|
|
120
|
+
))}
|
|
121
|
+
</div>
|
|
122
|
+
)}
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
{/* Cover image */}
|
|
126
|
+
{post.coverImageUrl && (
|
|
127
|
+
<div className="mb-8 overflow-hidden rounded-xl">
|
|
128
|
+
<Image
|
|
129
|
+
src={post.coverImageUrl}
|
|
130
|
+
alt={post.coverImageAlt ?? post.title}
|
|
131
|
+
width={800}
|
|
132
|
+
height={450}
|
|
133
|
+
className="w-full object-cover"
|
|
134
|
+
priority
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
)}
|
|
138
|
+
|
|
139
|
+
{/* Excerpt */}
|
|
140
|
+
{post.excerpt && (
|
|
141
|
+
<p className="mb-6 text-lg text-muted-foreground leading-relaxed font-light italic border-s-2 border-primary/40 ps-4">
|
|
142
|
+
{post.excerpt}
|
|
143
|
+
</p>
|
|
144
|
+
)}
|
|
145
|
+
|
|
146
|
+
{/* Body */}
|
|
147
|
+
<div
|
|
148
|
+
className="prose prose-neutral dark:prose-invert max-w-none"
|
|
149
|
+
dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.content) }}
|
|
150
|
+
/>
|
|
151
|
+
</main>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
<% } else { %>
|
|
155
|
+
type PageProps = {
|
|
156
|
+
params: Promise<{ slug: string }>;
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
|
160
|
+
const { slug: rawSlug } = await params;
|
|
161
|
+
const slug = decodeSlug(rawSlug);
|
|
162
|
+
const post = await getServerClient().blog.getPost(slug).catch(() => null);
|
|
163
|
+
if (!post) return { title: slug };
|
|
164
|
+
return {
|
|
165
|
+
title: post.seoTitle ?? post.title,
|
|
166
|
+
description: post.seoDescription ?? post.excerpt,
|
|
167
|
+
openGraph: {
|
|
168
|
+
title: post.seoTitle ?? post.title,
|
|
169
|
+
description: post.seoDescription ?? post.excerpt ?? undefined,
|
|
170
|
+
type: 'article',
|
|
171
|
+
publishedTime: post.publishedAt ?? undefined,
|
|
172
|
+
authors: post.author ? [post.author] : undefined,
|
|
173
|
+
images: post.ogImageUrl
|
|
174
|
+
? [{ url: post.ogImageUrl }]
|
|
175
|
+
: post.coverImageUrl
|
|
176
|
+
? [{ url: post.coverImageUrl }]
|
|
177
|
+
: undefined,
|
|
178
|
+
},
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
export default async function BlogPostPage({ params }: PageProps) {
|
|
183
|
+
const { slug: rawSlug } = await params;
|
|
184
|
+
const slug = decodeSlug(rawSlug);
|
|
185
|
+
const post = await getServerClient().blog.getPost(slug).catch(() => null);
|
|
186
|
+
if (!post) notFound();
|
|
187
|
+
|
|
188
|
+
const articleJsonLd = {
|
|
189
|
+
'@context': 'https://schema.org',
|
|
190
|
+
'@type': 'Article',
|
|
191
|
+
headline: post.title,
|
|
192
|
+
description: post.excerpt ?? undefined,
|
|
193
|
+
image: post.coverImageUrl ?? undefined,
|
|
194
|
+
datePublished: post.publishedAt ?? undefined,
|
|
195
|
+
dateModified: post.updatedAt,
|
|
196
|
+
author: post.author ? { '@type': 'Person', name: post.author } : undefined,
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
return (
|
|
200
|
+
<main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
|
|
201
|
+
<script
|
|
202
|
+
type="application/ld+json"
|
|
203
|
+
dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd).replace(/</g, '\\u003c') }}
|
|
204
|
+
/>
|
|
205
|
+
|
|
206
|
+
<Link
|
|
207
|
+
href="/blog"
|
|
208
|
+
className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
209
|
+
>
|
|
210
|
+
← Back to blog
|
|
211
|
+
</Link>
|
|
212
|
+
|
|
213
|
+
{post.category && (
|
|
214
|
+
<div className="mb-3">
|
|
215
|
+
<span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
|
|
216
|
+
{post.category}
|
|
217
|
+
</span>
|
|
218
|
+
</div>
|
|
219
|
+
)}
|
|
220
|
+
|
|
221
|
+
<h1 className="mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl leading-tight">
|
|
222
|
+
{post.title}
|
|
223
|
+
</h1>
|
|
224
|
+
|
|
225
|
+
<div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground border-b border-border pb-6">
|
|
226
|
+
{post.author && <span className="font-medium text-foreground">{post.author}</span>}
|
|
227
|
+
{post.publishedAt && (
|
|
228
|
+
<time dateTime={post.publishedAt}>
|
|
229
|
+
{new Date(post.publishedAt).toLocaleDateString('en-US', {
|
|
230
|
+
year: 'numeric',
|
|
231
|
+
month: 'long',
|
|
232
|
+
day: 'numeric',
|
|
233
|
+
})}
|
|
234
|
+
</time>
|
|
235
|
+
)}
|
|
236
|
+
{post.tags && post.tags.length > 0 && (
|
|
237
|
+
<div className="flex flex-wrap gap-1.5">
|
|
238
|
+
{post.tags.map((tag) => (
|
|
239
|
+
<span
|
|
240
|
+
key={tag}
|
|
241
|
+
className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground"
|
|
242
|
+
>
|
|
243
|
+
{tag}
|
|
244
|
+
</span>
|
|
245
|
+
))}
|
|
246
|
+
</div>
|
|
247
|
+
)}
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
{post.coverImageUrl && (
|
|
251
|
+
<div className="mb-8 overflow-hidden rounded-xl">
|
|
252
|
+
<Image
|
|
253
|
+
src={post.coverImageUrl}
|
|
254
|
+
alt={post.coverImageAlt ?? post.title}
|
|
255
|
+
width={800}
|
|
256
|
+
height={450}
|
|
257
|
+
className="w-full object-cover"
|
|
258
|
+
priority
|
|
259
|
+
/>
|
|
260
|
+
</div>
|
|
261
|
+
)}
|
|
262
|
+
|
|
263
|
+
{post.excerpt && (
|
|
264
|
+
<p className="mb-6 text-lg text-muted-foreground leading-relaxed font-light italic border-s-2 border-primary/40 ps-4">
|
|
265
|
+
{post.excerpt}
|
|
266
|
+
</p>
|
|
267
|
+
)}
|
|
268
|
+
|
|
269
|
+
<div
|
|
270
|
+
className="prose prose-neutral dark:prose-invert max-w-none"
|
|
271
|
+
dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.content) }}
|
|
272
|
+
/>
|
|
273
|
+
</main>
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
<% } %>
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Blog listing page — fetches published posts from the Brainerce blog API.
|
|
3
|
+
*
|
|
4
|
+
* Merchants manage posts in the Brainerce dashboard under Sell → Blog.
|
|
5
|
+
* The storefront renders them here. Each post links to /blog/[slug].
|
|
6
|
+
*
|
|
7
|
+
* Posts are only visible when status=PUBLISHED and publishedAt <= NOW().
|
|
8
|
+
* Category and tag filtering available via query params.
|
|
9
|
+
*/
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
import type { Metadata } from 'next';
|
|
12
|
+
import Link from 'next/link';
|
|
13
|
+
import Image from 'next/image';
|
|
14
|
+
|
|
15
|
+
import { getServerClient } from '@/lib/brainerce';
|
|
16
|
+
|
|
17
|
+
<% if (i18nEnabled) { %>
|
|
18
|
+
type PageProps = {
|
|
19
|
+
params: Promise<{ locale: string }>;
|
|
20
|
+
searchParams: Promise<{ category?: string; tag?: string; page?: string }>;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
|
24
|
+
const { locale } = await params;
|
|
25
|
+
return {
|
|
26
|
+
title: locale === 'he' ? 'בלוג' : 'Blog',
|
|
27
|
+
description: locale === 'he' ? 'מאמרים וסיפורים מהחנות' : 'Articles and stories from our store',
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default async function BlogListPage({ params, searchParams }: PageProps) {
|
|
32
|
+
const { locale } = await params;
|
|
33
|
+
const { category, tag, page: pageParam } = await searchParams;
|
|
34
|
+
const page = Number(pageParam ?? '1') || 1;
|
|
35
|
+
|
|
36
|
+
const client = getServerClient(locale);
|
|
37
|
+
const { data: posts, meta } = await client.blog
|
|
38
|
+
.getPosts({ category, tag, page, limit: 12 })
|
|
39
|
+
.catch(() => ({ data: [], meta: { page: 1, limit: 12, total: 0, totalPages: 1 } }));
|
|
40
|
+
|
|
41
|
+
const isHe = locale === 'he';
|
|
42
|
+
const dir = isHe ? 'rtl' : 'ltr';
|
|
43
|
+
const emptyLabel = isHe ? 'עדיין אין פוסטים.' : 'No posts yet.';
|
|
44
|
+
const blogLabel = isHe ? 'בלוג' : 'Blog';
|
|
45
|
+
const readMoreLabel = isHe ? 'קרא עוד' : 'Read more';
|
|
46
|
+
const prevLabel = isHe ? 'הקודם' : 'Previous';
|
|
47
|
+
const nextLabel = isHe ? 'הבא' : 'Next';
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<main dir={dir} className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
|
|
51
|
+
<h1 className="mb-8 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
52
|
+
{blogLabel}
|
|
53
|
+
</h1>
|
|
54
|
+
|
|
55
|
+
{posts.length === 0 ? (
|
|
56
|
+
<p className="text-muted-foreground">{emptyLabel}</p>
|
|
57
|
+
) : (
|
|
58
|
+
<>
|
|
59
|
+
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
60
|
+
{posts.map((post) => (
|
|
61
|
+
<article
|
|
62
|
+
key={post.id}
|
|
63
|
+
className="group flex flex-col overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm transition-shadow hover:shadow-md"
|
|
64
|
+
>
|
|
65
|
+
{post.coverImageUrl && (
|
|
66
|
+
<Link href={`/blog/${encodeURIComponent(post.slug)}`} tabIndex={-1}>
|
|
67
|
+
<div className="relative aspect-[16/9] overflow-hidden">
|
|
68
|
+
<Image
|
|
69
|
+
src={post.coverImageUrl}
|
|
70
|
+
alt={post.coverImageAlt ?? post.title}
|
|
71
|
+
fill
|
|
72
|
+
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
73
|
+
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
74
|
+
/>
|
|
75
|
+
</div>
|
|
76
|
+
</Link>
|
|
77
|
+
)}
|
|
78
|
+
|
|
79
|
+
<div className="flex flex-1 flex-col gap-3 p-5">
|
|
80
|
+
{/* Category badge */}
|
|
81
|
+
{post.category && (
|
|
82
|
+
<span className="w-fit rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
|
|
83
|
+
{post.category}
|
|
84
|
+
</span>
|
|
85
|
+
)}
|
|
86
|
+
|
|
87
|
+
{/* Title */}
|
|
88
|
+
<Link href={`/blog/${encodeURIComponent(post.slug)}`}>
|
|
89
|
+
<h2 className="line-clamp-2 text-lg font-semibold leading-snug text-foreground hover:text-primary transition-colors">
|
|
90
|
+
{post.title}
|
|
91
|
+
</h2>
|
|
92
|
+
</Link>
|
|
93
|
+
|
|
94
|
+
{/* Excerpt */}
|
|
95
|
+
{post.excerpt && (
|
|
96
|
+
<p className="line-clamp-3 text-sm text-muted-foreground leading-relaxed">
|
|
97
|
+
{post.excerpt}
|
|
98
|
+
</p>
|
|
99
|
+
)}
|
|
100
|
+
|
|
101
|
+
{/* Meta: author + date */}
|
|
102
|
+
<div className="mt-auto flex items-center gap-2 pt-2 text-xs text-muted-foreground">
|
|
103
|
+
{post.author && <span>{post.author}</span>}
|
|
104
|
+
{post.author && post.publishedAt && <span>·</span>}
|
|
105
|
+
{post.publishedAt && (
|
|
106
|
+
<time dateTime={post.publishedAt}>
|
|
107
|
+
{new Date(post.publishedAt).toLocaleDateString(isHe ? 'he-IL' : 'en-US', {
|
|
108
|
+
year: 'numeric',
|
|
109
|
+
month: 'short',
|
|
110
|
+
day: 'numeric',
|
|
111
|
+
})}
|
|
112
|
+
</time>
|
|
113
|
+
)}
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<Link
|
|
117
|
+
href={`/blog/${encodeURIComponent(post.slug)}`}
|
|
118
|
+
className="mt-1 text-sm font-medium text-primary hover:underline"
|
|
119
|
+
>
|
|
120
|
+
{readMoreLabel} →
|
|
121
|
+
</Link>
|
|
122
|
+
</div>
|
|
123
|
+
</article>
|
|
124
|
+
))}
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
{/* Pagination */}
|
|
128
|
+
{meta.totalPages > 1 && (
|
|
129
|
+
<nav className="mt-10 flex items-center justify-center gap-4">
|
|
130
|
+
{page > 1 && (
|
|
131
|
+
<Link
|
|
132
|
+
href={`/blog?page=${page - 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
|
|
133
|
+
className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
|
|
134
|
+
>
|
|
135
|
+
{prevLabel}
|
|
136
|
+
</Link>
|
|
137
|
+
)}
|
|
138
|
+
<span className="text-sm text-muted-foreground">
|
|
139
|
+
{page} / {meta.totalPages}
|
|
140
|
+
</span>
|
|
141
|
+
{page < meta.totalPages && (
|
|
142
|
+
<Link
|
|
143
|
+
href={`/blog?page=${page + 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
|
|
144
|
+
className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
|
|
145
|
+
>
|
|
146
|
+
{nextLabel}
|
|
147
|
+
</Link>
|
|
148
|
+
)}
|
|
149
|
+
</nav>
|
|
150
|
+
)}
|
|
151
|
+
</>
|
|
152
|
+
)}
|
|
153
|
+
</main>
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
<% } else { %>
|
|
157
|
+
type PageProps = {
|
|
158
|
+
searchParams: Promise<{ category?: string; tag?: string; page?: string }>;
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
export const metadata: Metadata = {
|
|
162
|
+
title: 'Blog',
|
|
163
|
+
description: 'Articles and stories from our store',
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
export default async function BlogListPage({ searchParams }: PageProps) {
|
|
167
|
+
const { category, tag, page: pageParam } = await searchParams;
|
|
168
|
+
const page = Number(pageParam ?? '1') || 1;
|
|
169
|
+
|
|
170
|
+
const { data: posts, meta } = await getServerClient()
|
|
171
|
+
.blog.getPosts({ category, tag, page, limit: 12 })
|
|
172
|
+
.catch(() => ({ data: [], meta: { page: 1, limit: 12, total: 0, totalPages: 1 } }));
|
|
173
|
+
|
|
174
|
+
return (
|
|
175
|
+
<main className="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
|
|
176
|
+
<h1 className="mb-8 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
|
|
177
|
+
Blog
|
|
178
|
+
</h1>
|
|
179
|
+
|
|
180
|
+
{posts.length === 0 ? (
|
|
181
|
+
<p className="text-muted-foreground">No posts yet.</p>
|
|
182
|
+
) : (
|
|
183
|
+
<>
|
|
184
|
+
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
185
|
+
{posts.map((post) => (
|
|
186
|
+
<article
|
|
187
|
+
key={post.id}
|
|
188
|
+
className="group flex flex-col overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm transition-shadow hover:shadow-md"
|
|
189
|
+
>
|
|
190
|
+
{post.coverImageUrl && (
|
|
191
|
+
<Link href={`/blog/${encodeURIComponent(post.slug)}`} tabIndex={-1}>
|
|
192
|
+
<div className="relative aspect-[16/9] overflow-hidden">
|
|
193
|
+
<Image
|
|
194
|
+
src={post.coverImageUrl}
|
|
195
|
+
alt={post.coverImageAlt ?? post.title}
|
|
196
|
+
fill
|
|
197
|
+
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
198
|
+
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
199
|
+
/>
|
|
200
|
+
</div>
|
|
201
|
+
</Link>
|
|
202
|
+
)}
|
|
203
|
+
|
|
204
|
+
<div className="flex flex-1 flex-col gap-3 p-5">
|
|
205
|
+
{post.category && (
|
|
206
|
+
<span className="w-fit rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
|
|
207
|
+
{post.category}
|
|
208
|
+
</span>
|
|
209
|
+
)}
|
|
210
|
+
|
|
211
|
+
<Link href={`/blog/${encodeURIComponent(post.slug)}`}>
|
|
212
|
+
<h2 className="line-clamp-2 text-lg font-semibold leading-snug text-foreground hover:text-primary transition-colors">
|
|
213
|
+
{post.title}
|
|
214
|
+
</h2>
|
|
215
|
+
</Link>
|
|
216
|
+
|
|
217
|
+
{post.excerpt && (
|
|
218
|
+
<p className="line-clamp-3 text-sm text-muted-foreground leading-relaxed">
|
|
219
|
+
{post.excerpt}
|
|
220
|
+
</p>
|
|
221
|
+
)}
|
|
222
|
+
|
|
223
|
+
<div className="mt-auto flex items-center gap-2 pt-2 text-xs text-muted-foreground">
|
|
224
|
+
{post.author && <span>{post.author}</span>}
|
|
225
|
+
{post.author && post.publishedAt && <span>·</span>}
|
|
226
|
+
{post.publishedAt && (
|
|
227
|
+
<time dateTime={post.publishedAt}>
|
|
228
|
+
{new Date(post.publishedAt).toLocaleDateString('en-US', {
|
|
229
|
+
year: 'numeric',
|
|
230
|
+
month: 'short',
|
|
231
|
+
day: 'numeric',
|
|
232
|
+
})}
|
|
233
|
+
</time>
|
|
234
|
+
)}
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<Link
|
|
238
|
+
href={`/blog/${encodeURIComponent(post.slug)}`}
|
|
239
|
+
className="mt-1 text-sm font-medium text-primary hover:underline"
|
|
240
|
+
>
|
|
241
|
+
Read more →
|
|
242
|
+
</Link>
|
|
243
|
+
</div>
|
|
244
|
+
</article>
|
|
245
|
+
))}
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
{meta.totalPages > 1 && (
|
|
249
|
+
<nav className="mt-10 flex items-center justify-center gap-4">
|
|
250
|
+
{page > 1 && (
|
|
251
|
+
<Link
|
|
252
|
+
href={`/blog?page=${page - 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
|
|
253
|
+
className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
|
|
254
|
+
>
|
|
255
|
+
Previous
|
|
256
|
+
</Link>
|
|
257
|
+
)}
|
|
258
|
+
<span className="text-sm text-muted-foreground">
|
|
259
|
+
{page} / {meta.totalPages}
|
|
260
|
+
</span>
|
|
261
|
+
{page < meta.totalPages && (
|
|
262
|
+
<Link
|
|
263
|
+
href={`/blog?page=${page + 1}${category ? `&category=${category}` : ''}${tag ? `&tag=${tag}` : ''}`}
|
|
264
|
+
className="rounded-lg border border-border px-4 py-2 text-sm hover:bg-muted transition-colors"
|
|
265
|
+
>
|
|
266
|
+
Next
|
|
267
|
+
</Link>
|
|
268
|
+
)}
|
|
269
|
+
</nav>
|
|
270
|
+
)}
|
|
271
|
+
</>
|
|
272
|
+
)}
|
|
273
|
+
</main>
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
<% } %>
|