@fullstackdatasolutions/articles 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.12.0] - 2026-08-03
+
+### Fixed
+
+- **SEO: `ArticlesPage` no longer requires client-side JS to expose article links.** Previously `ArticlesPage` fetched its article list entirely client-side via `useArticles()`, so the server-rendered HTML for `/articles` contained only a "Loading articles..." placeholder with zero `<a href>` links — crawlers that don't execute JS (or that snapshot the initial response) never discovered any article URLs from the index page. `ArticlesPage` now accepts optional `initialArticles`/`initialCategories` props; when a consuming app passes server-fetched data (e.g. via `getAllArticles()`/`getAllCategories()` from `@fullstackdatasolutions/articles/server` in an `async` Server Component), the first render is fully populated with real links and no client fetch occurs on mount. This matches the pattern `CategoryArticlesPage` and `AuthorArticlesPage` already used. Omitting the new props preserves the previous client-fetch behavior, so this is backward compatible.
+
+## [0.11.0] - 2026-07-30
+
+### Added
+
+- Added `mdxComponents` to `ArticlesConfig`, allowing consuming apps to register React components for explicit use inside article MDX bodies. Registered components are merged with the package's built-in MDX image override.
+
 ## [0.10.0] - 2026-07-23
 
 ### Added

package/README.md

@@ -110,11 +110,26 @@ export const siteConfig: ArticlesConfig = {
 // app/articles/page.tsx
 import type { Metadata } from 'next'
 import { ArticlesPage } from '@fullstackdatasolutions/articles'
-import { generateArticlesIndexMetadata } from '@fullstackdatasolutions/articles/server'
+import {
+  generateArticlesIndexMetadata,
+  getAllArticles,
+  getAllCategories,
+} from '@fullstackdatasolutions/articles/server'
 import { siteConfig } from '@/config/articles'
 export const metadata: Metadata = generateArticlesIndexMetadata(siteConfig)
-export default function Page() {
-  return <ArticlesPage config={siteConfig} />
+export default async function Page() {
+  // Fetching server-side and passing as initialArticles/initialCategories means the
+  // first response already contains real <a href> article links — required for
+  // crawlers that don't execute client JS. Omitting these props still works, but
+  // falls back to a client-side fetch and a "Loading articles..." placeholder in
+  // the initial HTML.
+  const [articles, categories] = await Promise.all([
+    getAllArticles(siteConfig),
+    getAllCategories(),
+  ])
+  return (
+    <ArticlesPage config={siteConfig} initialArticles={articles} initialCategories={categories} />
+  )
 }
 
 // app/articles/[...slug]/page.tsx
@@ -454,12 +469,39 @@ Use this if you don't need a custom API base path. For custom paths, use `create
 | `defaultAuthor`        | `string`                                            | —                    | Default author slug or name used when article frontmatter omits both `authors` and `author`.                                                        |
 | `breadcrumbs`          | `false \| BreadcrumbsConfig`                        | default trails       | Set to `false` to hide breadcrumbs, or configure article/category/author breadcrumb trails, custom URL items, separator, schema output, and labels. |
 | `linkTargetStrategy`   | `'external-new-tab' \| 'all-new-tab' \| 'same-tab'` | `'external-new-tab'` | Controls article body links. Internal links open in the same window by default; external `http`/`https` links open in a new window.                 |
+| `mdxComponents`        | `Record<string, ComponentType<never>>`              | -                    | Components exposed to article `.mdx` bodies by tag name. Merged with the built-in MDX image override.                                               |
 | `description`          | `string`                                            | —                    | Short description used as the RSS feed channel description. Falls back to `siteName` if omitted.                                                    |
 
 **Default layout order:** `['hero', 'search', 'featured', 'latest', 'categories']`
 
 To add a newsletter section, pass `layout: ['hero','search','featured','latest','categories','newsletter']` — the library renders `null` for `'newsletter'` so you can append your own component after `<ArticlesPage />`.
 
+### Custom MDX components
+
+Pass React components through `mdxComponents` to make them available to article `.mdx` files. The component key is the JSX tag authors write in the article.
+
+```tsx
+// config/articles.ts
+import type { ArticlesConfig } from '@fullstackdatasolutions/articles'
+import { LeadMagnetCTA } from '@/components/LeadMagnetCTA'
+
+export const siteConfig: ArticlesConfig = {
+  siteUrl: 'https://yoursite.com',
+  siteName: 'Your Site',
+  mdxComponents: {
+    LeadMagnetCTA,
+  },
+}
+```
+
+```mdx
+Article intro paragraph.
+
+<LeadMagnetCTA system="DND" segment="new-players" />
+```
+
+Imports inside individual `.mdx` article files are not supported. Define components in the consuming app and register them through `mdxComponents`.
+
 ### Authors
 
 Author profiles are optional. If an article has no configured author and no plain `author` frontmatter, author UI and author metadata are omitted for that article.

package/dist/index.cjs

@@ -715,12 +715,12 @@ function getBreadcrumbsConfig(config) {
 
 // src/useArticles.ts
 var import_react3 = require("react");
-function useArticles() {
+function useArticles(initialArticles, initialCategories) {
   const [searchQuery, setSearchQuery] = (0, import_react3.useState)("");
   const debounceRef = (0, import_react3.useRef)(null);
-  const [articles, setArticles] = (0, import_react3.useState)([]);
-  const [categories, setCategories] = (0, import_react3.useState)([]);
-  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [articles, setArticles] = (0, import_react3.useState)(initialArticles != null ? initialArticles : []);
+  const [categories, setCategories] = (0, import_react3.useState)(initialCategories != null ? initialCategories : []);
+  const [loading, setLoading] = (0, import_react3.useState)(initialArticles === void 0);
   const [error, setError] = (0, import_react3.useState)(null);
   const fetchArticles = (0, import_react3.useCallback)((query) => __async(this, null, function* () {
     try {
@@ -758,7 +758,7 @@ function useArticles() {
     }
   }), []);
   (0, import_react3.useEffect)(() => {
-    fetchArticles("");
+    if (initialArticles === void 0) fetchArticles("");
   }, [fetchArticles]);
   const handleSearch = (0, import_react3.useCallback)(
     (query) => {
@@ -889,9 +889,13 @@ function renderSection(section, ctx, config) {
       return null;
   }
 }
-function ArticlesPage({ config }) {
+function ArticlesPage({
+  config,
+  initialArticles,
+  initialCategories
+}) {
   var _a, _b, _c;
-  const state = useArticles();
+  const state = useArticles(initialArticles, initialCategories);
   const layout = (_a = config.layout) != null ? _a : DEFAULT_LAYOUT;
   const pageSize = (_b = config.pageSize) != null ? _b : DEFAULT_PAGE_SIZE;
   const categoriesPageSize = (_c = config.categoriesPageSize) != null ? _c : DEFAULT_CATEGORIES_PAGE_SIZE;