@fullstackdatasolutions/articles 0.3.0 → 0.4.2
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/README.md +76 -5
- package/dist/index.cjs +287 -105
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +24 -2
- package/dist/index.d.ts +24 -2
- package/dist/index.js +280 -100
- package/dist/index.js.map +1 -1
- package/dist/server.cjs +2 -1
- package/dist/server.cjs.map +1 -1
- package/dist/server.d.cts +1 -1
- package/dist/server.d.ts +1 -1
- package/dist/server.js +2 -1
- package/dist/server.js.map +1 -1
- package/package.json +3 -2
- package/src/ArticleDetailHero.tsx +31 -5
- package/src/ArticleNavigation.tsx +56 -0
- package/src/ArticleSocialShare.tsx +96 -0
- package/src/CategoryArticlesPage.tsx +21 -4
- package/src/__tests__/ArticleCategoryGrid.test.tsx +34 -1
- package/src/__tests__/ArticleDetailHero.test.tsx +42 -10
- package/src/__tests__/ArticleNavigation.test.tsx +127 -0
- package/src/__tests__/ArticleSocialShare.test.tsx +187 -0
- package/src/__tests__/ArticlesPage.test.tsx +147 -1
- package/src/__tests__/CommentItem.test.tsx +110 -0
- package/src/__tests__/seoUtils.test.ts +35 -0
- package/src/index.ts +3 -0
- package/src/seoUtils.ts +7 -1
package/README.md
CHANGED
|
@@ -187,13 +187,63 @@ import { ArticleDetailHero } from '@fullstackdatasolutions/articles'
|
|
|
187
187
|
| Prop | Type | Required | Description |
|
|
188
188
|
|---|---|---|---|
|
|
189
189
|
| `article` | `Article` | yes | Article object returned by `getArticleMetadata` |
|
|
190
|
-
| `categoryBasePath` | `string` | no | Base path for category links
|
|
190
|
+
| `categoryBasePath` | `string` | no | Base path for category links. Defaults to `"/articles/category"`. Pass `""` to render categories as plain text. |
|
|
191
|
+
| `showDate` | `boolean` | no | Show the article date. Defaults to `false` (hidden). |
|
|
191
192
|
|
|
192
193
|
- Category tags are capped at 4. When an article has more than 4 categories, only the first 4 are shown.
|
|
194
|
+
- The date field is hidden by default. Pass `showDate={true}` to display it.
|
|
193
195
|
- All layout styles are inline so the component renders correctly regardless of whether `@source` is configured for the package.
|
|
194
196
|
|
|
195
197
|
---
|
|
196
198
|
|
|
199
|
+
## ArticleSocialShare
|
|
200
|
+
|
|
201
|
+
`ArticleSocialShare` renders a row of sharing buttons (LinkedIn, Facebook, Twitter, Reddit, WhatsApp, Telegram, Email, Copy Link). Use it below the article body in your `app/articles/[slug]/page.tsx`.
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
import { ArticleSocialShare } from '@fullstackdatasolutions/articles'
|
|
205
|
+
|
|
206
|
+
<ArticleSocialShare
|
|
207
|
+
title={article.title}
|
|
208
|
+
url={articleUrl}
|
|
209
|
+
excerpt={article.excerpt}
|
|
210
|
+
shareMessage="Optional footer note shown below the buttons."
|
|
211
|
+
/>
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
| Prop | Type | Required | Description |
|
|
215
|
+
|---|---|---|---|
|
|
216
|
+
| `title` | `string` | yes | Article title - used in share text |
|
|
217
|
+
| `url` | `string` | yes | Canonical URL to share |
|
|
218
|
+
| `excerpt` | `string` | no | Used as email body pre-fill |
|
|
219
|
+
| `shareMessage` | `string` | no | Optional paragraph rendered below the share buttons |
|
|
220
|
+
|
|
221
|
+
---
|
|
222
|
+
|
|
223
|
+
## ArticleNavigation
|
|
224
|
+
|
|
225
|
+
`ArticleNavigation` renders previous/next article links at the bottom of an article. Returns `null` when both `previous` and `next` are absent (no output, no wrapper element). Use `getAdjacentArticles` from the server entry to fetch the data.
|
|
226
|
+
|
|
227
|
+
```tsx
|
|
228
|
+
import { ArticleNavigation } from '@fullstackdatasolutions/articles'
|
|
229
|
+
import { getAdjacentArticles } from '@fullstackdatasolutions/articles/server'
|
|
230
|
+
|
|
231
|
+
const { previous, next } = await getAdjacentArticles(slug)
|
|
232
|
+
|
|
233
|
+
<ArticleNavigation previous={previous} next={next} basePath="/articles" />
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
| Prop | Type | Required | Description |
|
|
237
|
+
|---|---|---|---|
|
|
238
|
+
| `previous` | `{ slug: string; title: string } \| null` | yes | Previous article, or `null` |
|
|
239
|
+
| `next` | `{ slug: string; title: string } \| null` | yes | Next article, or `null` |
|
|
240
|
+
| `basePath` | `string` | yes | Route prefix (e.g. `"/articles"`) prepended to each slug |
|
|
241
|
+
|
|
242
|
+
- Titles longer than 60 characters are truncated with an ellipsis.
|
|
243
|
+
- No output is rendered when both `previous` and `next` are `null`.
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
197
247
|
## Comments setup
|
|
198
248
|
|
|
199
249
|
### 1. Enable in config
|
|
@@ -226,6 +276,8 @@ app/api/articles/[slug]/comments/[commentId]/route.ts ← DELETE (soft)
|
|
|
226
276
|
|
|
227
277
|
## SEO utilities
|
|
228
278
|
|
|
279
|
+
### Article and category metadata
|
|
280
|
+
|
|
229
281
|
```ts
|
|
230
282
|
// app/articles/[slug]/page.tsx
|
|
231
283
|
import { generateArticleMetadata } from '@fullstackdatasolutions/articles/server'
|
|
@@ -237,15 +289,31 @@ export const generateMetadata = ({ params }) =>
|
|
|
237
289
|
import { generateCategoryMetadata } from '@fullstackdatasolutions/articles/server'
|
|
238
290
|
export const generateMetadata = ({ params }) =>
|
|
239
291
|
generateCategoryMetadata(params.category, siteConfig)
|
|
292
|
+
```
|
|
240
293
|
|
|
294
|
+
### Sitemaps
|
|
295
|
+
|
|
296
|
+
Use `getArticleSitemapEntries` to generate article and category sitemap entries. Pass your `ArticlesConfig` object (preferred) or a plain URL string.
|
|
297
|
+
|
|
298
|
+
```ts
|
|
241
299
|
// app/sitemap.ts
|
|
242
300
|
import { getArticleSitemapEntries } from '@fullstackdatasolutions/articles/server'
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
301
|
+
import { siteConfig } from '@/config/articles'
|
|
302
|
+
import type { MetadataRoute } from 'next'
|
|
303
|
+
|
|
304
|
+
const staticPages: MetadataRoute.Sitemap = [
|
|
305
|
+
{ url: 'https://yoursite.com', changeFrequency: 'weekly', priority: 1.0 },
|
|
306
|
+
{ url: 'https://yoursite.com/about', changeFrequency: 'monthly', priority: 0.8 },
|
|
307
|
+
]
|
|
308
|
+
|
|
309
|
+
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
|
310
|
+
const articleEntries = await getArticleSitemapEntries(siteConfig)
|
|
311
|
+
return [...staticPages, ...articleEntries]
|
|
246
312
|
}
|
|
247
313
|
```
|
|
248
314
|
|
|
315
|
+
Returns article entries (priority 0.8, changeFrequency 'weekly') and category entries (priority 0.7, changeFrequency 'weekly'). Alternative: pass a plain URL string instead of `siteConfig`: `getArticleSitemapEntries('https://yoursite.com')`.
|
|
316
|
+
|
|
249
317
|
JSON-LD structured data (`ArticleSchema`, `BreadcrumbSchema`, `CollectionPageSchema`) is rendered automatically inside the library components — no extra wiring required.
|
|
250
318
|
|
|
251
319
|
---
|
|
@@ -330,7 +398,10 @@ This app uses `@fullstackdatasolutions/articles` for the articles section.
|
|
|
330
398
|
The package ships its source TypeScript files so Tailwind can scan them.
|
|
331
399
|
`app/globals.css` contains:
|
|
332
400
|
@source "./node_modules/@fullstackdatasolutions/articles/src";
|
|
333
|
-
If this line is missing, most component classes will not render correctly. Note: `ArticleCategoryGrid` image
|
|
401
|
+
If this line is missing, most component classes will not render correctly. Note: `ArticleCategoryGrid` images, `CategoryArticlesPage` hero, and `ArticleDetailHero` image use inline styles for critical layout so they render correctly without this line. All other styling still requires it.
|
|
402
|
+
|
|
403
|
+
### Server utilities
|
|
404
|
+
For sitemaps and metadata: `import { getArticleSitemapEntries, generateArticleMetadata, generateCategoryMetadata } from '@fullstackdatasolutions/articles/server'`. See README for usage examples.
|
|
334
405
|
|
|
335
406
|
### Rules
|
|
336
407
|
- Change `config/articles.ts` first; only edit library source if config cannot express the need.
|