@fullstackdatasolutions/articles 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -232,6 +232,14 @@ type ArticlesSection = 'hero' | 'search' | 'featured' | 'latest' | 'categories'
 interface ArticlesTheme {
     /** Font family for the articles section. Example: `"'Inter', sans-serif"` */
     fontFamily?: string;
+    /**
+     * Font family for headings only (article title, card titles, section
+     * headings) - falls back to `fontFamily` when omitted. Lets a site use a
+     * distinct display face for headings (e.g. a serif) while keeping a
+     * separate body font, without hardcoding either into the package.
+     * Example: `"'Cinzel', serif"`
+     */
+    headerFontFamily?: string;
     /** Color for article card titles and section headings. Example: `'#111827'` */
     headerColor?: string;
     /** Color for body and excerpt text. Example: `'#6b7280'` */
@@ -453,8 +461,10 @@ type ArticleDetailHeroProps = Readonly<{
     showDate?: boolean;
     showAuthor?: boolean;
     authors?: AuthorProfile[];
+    /** Optional - when `config.theme.headerFontFamily` is set, applies it to the title. */
+    config?: ArticlesConfig;
 }>;
-declare function ArticleDetailHero({ article, categoryBasePath, showDate, showAuthor, authors, }: ArticleDetailHeroProps): react_jsx_runtime.JSX.Element;
+declare function ArticleDetailHero({ article, categoryBasePath, showDate, showAuthor, authors, config, }: ArticleDetailHeroProps): react_jsx_runtime.JSX.Element;
 
 type ArticleSearchBarProps = Readonly<{
     value: string;

package/dist/index.d.ts

@@ -232,6 +232,14 @@ type ArticlesSection = 'hero' | 'search' | 'featured' | 'latest' | 'categories'
 interface ArticlesTheme {
     /** Font family for the articles section. Example: `"'Inter', sans-serif"` */
     fontFamily?: string;
+    /**
+     * Font family for headings only (article title, card titles, section
+     * headings) - falls back to `fontFamily` when omitted. Lets a site use a
+     * distinct display face for headings (e.g. a serif) while keeping a
+     * separate body font, without hardcoding either into the package.
+     * Example: `"'Cinzel', serif"`
+     */
+    headerFontFamily?: string;
     /** Color for article card titles and section headings. Example: `'#111827'` */
     headerColor?: string;
     /** Color for body and excerpt text. Example: `'#6b7280'` */
@@ -453,8 +461,10 @@ type ArticleDetailHeroProps = Readonly<{
     showDate?: boolean;
     showAuthor?: boolean;
     authors?: AuthorProfile[];
+    /** Optional - when `config.theme.headerFontFamily` is set, applies it to the title. */
+    config?: ArticlesConfig;
 }>;
-declare function ArticleDetailHero({ article, categoryBasePath, showDate, showAuthor, authors, }: ArticleDetailHeroProps): react_jsx_runtime.JSX.Element;
+declare function ArticleDetailHero({ article, categoryBasePath, showDate, showAuthor, authors, config, }: ArticleDetailHeroProps): react_jsx_runtime.JSX.Element;
 
 type ArticleSearchBarProps = Readonly<{
     value: string;

package/dist/index.js

@@ -589,6 +589,7 @@ function emitArticleEvent(handler, event) {
 // src/ArticleCard.tsx
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ArticleCard({ article, config }) {
+  var _a;
   return /* @__PURE__ */ jsxs8("div", { className: "rounded-lg border border-border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-shadow duration-300", children: [
     /* @__PURE__ */ jsx8("div", { className: "p-0", children: /* @__PURE__ */ jsx8(
       Image4,
@@ -602,14 +603,14 @@ function ArticleCard({ article, config }) {
     ) }),
     /* @__PURE__ */ jsxs8("div", { className: "p-6", children: [
       /* @__PURE__ */ jsx8("div", { className: "flex gap-2 mb-3", children: /* @__PURE__ */ jsx8("span", { className: "bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded", children: article.category }) }),
-      /* @__PURE__ */ jsx8("h3", { className: "text-lg font-semibold leading-none tracking-tight mb-2", children: /* @__PURE__ */ jsx8(
-        Link6,
+      /* @__PURE__ */ jsx8(
+        "h3",
         {
-          href: `/articles/${article.slug}`,
-          className: "hover:text-indigo-600 transition-colors",
-          children: article.title
+          className: "text-lg font-semibold leading-none tracking-tight mb-2",
+          style: { fontFamily: (_a = config == null ? void 0 : config.theme) == null ? void 0 : _a.headerFontFamily },
+          children: /* @__PURE__ */ jsx8(Link6, { href: `/articles/${article.slug}`, className: "hover:text-primary transition-colors", children: article.title })
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground mb-4 line-clamp-3", children: article.excerpt }),
       article.authorSlug && /* @__PURE__ */ jsxs8(
         Link6,
@@ -932,6 +933,7 @@ function buildThemeVars(theme) {
   if (!theme) return {};
   const vars = {};
   if (theme.fontFamily) vars["--articles-font-family"] = theme.fontFamily;
+  if (theme.headerFontFamily) vars["--articles-header-font-family"] = theme.headerFontFamily;
   if (theme.headerColor) vars["--articles-header-color"] = theme.headerColor;
   if (theme.textColor) vars["--articles-text-color"] = theme.textColor;
   if (theme.backgroundColor) vars["--articles-bg-color"] = theme.backgroundColor;
@@ -1097,8 +1099,10 @@ function ArticleDetailHero({
   categoryBasePath = "/articles/category",
   showDate = false,
   showAuthor = true,
-  authors = []
+  authors = [],
+  config
 }) {
+  var _a;
   const showConfiguredAuthors = showAuthor && authors.length > 0;
   const showLegacyAuthor = showAuthor && authors.length === 0 && article.author.trim().length > 0;
   return /* @__PURE__ */ jsxs13(
@@ -1179,7 +1183,14 @@ function ArticleDetailHero({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx13("h1", { className: "text-4xl md:text-5xl font-bold mb-4", children: article.title }),
+              /* @__PURE__ */ jsx13(
+                "h1",
+                {
+                  className: "text-4xl md:text-5xl font-bold mb-4",
+                  style: { fontFamily: (_a = config == null ? void 0 : config.theme) == null ? void 0 : _a.headerFontFamily },
+                  children: article.title
+                }
+              ),
               /* @__PURE__ */ jsxs13(
                 "div",
                 {
@@ -1945,9 +1956,17 @@ function RelatedArticlesSection({
   fromSlug,
   source = "category"
 }) {
+  var _a;
   if (articles.length === 0) return null;
   return /* @__PURE__ */ jsxs20("section", { className: "mt-12 pt-8 border-t border-border", "aria-label": "Related articles", children: [
-    /* @__PURE__ */ jsx21("h2", { className: "text-xl font-semibold text-foreground mb-6", children: heading != null ? heading : `More in ${category}` }),
+    /* @__PURE__ */ jsx21(
+      "h2",
+      {
+        className: "text-xl font-semibold text-foreground mb-6",
+        style: { fontFamily: (_a = config == null ? void 0 : config.theme) == null ? void 0 : _a.headerFontFamily },
+        children: heading != null ? heading : `More in ${category}`
+      }
+    ),
     /* @__PURE__ */ jsx21("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: articles.map((article) => /* @__PURE__ */ jsx21(
       "div",
       {