@fullstackdatasolutions/articles 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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).
 
+## [1.1.0] - 2026-08-09
+
+### Added
+
+- **Configurable heading font family.** New `ArticlesTheme.headerFontFamily`, optional and falling back to inherit/nothing when unset - existing consumers who don't set it see byte-identical output. Threaded through `ArticleDetailHero` (new optional `config` prop), `RelatedArticlesSection`, and `ArticleCard` (both already accepted `config`) via inline `style={{ fontFamily: config?.theme?.headerFontFamily }}`, and into `ArticlesPage`'s `buildThemeVars` as `--articles-header-font-family`, consistent with the package's existing CSS-var theming pattern. Lets a site use a distinct display face for headings (e.g. a serif) separate from its body `fontFamily`, without hardcoding either into the package. Found auditing theroleplayersguild.com's article pages, which use a serif heading treatment the package couldn't previously express.
+
+### Fixed
+
+- **`ArticleCard` hardcoded an indigo hover color.** The title link's `hover:text-indigo-600` was a stray leftover unrelated to any theme token and would visibly clash with any site not using an indigo-ish primary color. Replaced with `hover:text-primary`, matching the token already used elsewhere in the same component.
+
 ## [1.0.0] - 2026-08-05
 
 ### Breaking

package/README.md

@@ -580,17 +580,18 @@ All theme values are applied as CSS custom properties on a wrapper `<div>`. Comp
 
 ```ts
 theme: {
-  fontFamily:      "'Inter', sans-serif",
-  headerColor:     '#111827',
-  textColor:       '#6b7280',
-  backgroundColor: '#ffffff',
-  linkColor:       '#4f46e5',
-  linkHoverColor:  '#4338ca',
-  borderRadius:    '0.5rem',
+  fontFamily:       "'Inter', sans-serif",
+  headerFontFamily: "'Cinzel', serif",
+  headerColor:      '#111827',
+  textColor:        '#6b7280',
+  backgroundColor:  '#ffffff',
+  linkColor:        '#4f46e5',
+  linkHoverColor:   '#4338ca',
+  borderRadius:     '0.5rem',
 }
 ```
 
-All fields are optional. Omitted fields fall back to your Tailwind theme tokens.
+All fields are optional. Omitted fields fall back to your Tailwind theme tokens. `headerFontFamily` styles article titles and card/section headings (`ArticleDetailHero`, `RelatedArticlesSection`, `ArticleCard`) separately from body text; omit it to let headings inherit `fontFamily` like everything else.
 
 ---
 

package/dist/index.cjs

@@ -650,6 +650,7 @@ function emitArticleEvent(handler, event) {
 // src/ArticleCard.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function ArticleCard({ article, config }) {
+  var _a;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rounded-lg border border-border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-shadow duration-300", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_image4.default,
@@ -663,14 +664,14 @@ function ArticleCard({ article, config }) {
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-2 mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded", children: article.category }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-lg font-semibold leading-none tracking-tight mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_link6.default,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "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__ */ (0, import_jsx_runtime8.jsx)(import_link6.default, { href: `/articles/${article.slug}`, className: "hover:text-primary transition-colors", children: article.title })
         }
-      ) }),
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-muted-foreground mb-4 line-clamp-3", children: article.excerpt }),
       article.authorSlug && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         import_link6.default,
@@ -993,6 +994,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;
@@ -1158,8 +1160,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__ */ (0, import_jsx_runtime13.jsxs)(
@@ -1240,7 +1244,14 @@ function ArticleDetailHero({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "text-4xl md:text-5xl font-bold mb-4", children: article.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "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__ */ (0, import_jsx_runtime13.jsxs)(
                 "div",
                 {
@@ -2006,9 +2017,17 @@ function RelatedArticlesSection({
   fromSlug,
   source = "category"
 }) {
+  var _a;
   if (articles.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: "mt-12 pt-8 border-t border-border", "aria-label": "Related articles", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "text-xl font-semibold text-foreground mb-6", children: heading != null ? heading : `More in ${category}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "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__ */ (0, import_jsx_runtime21.jsx)("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: articles.map((article) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {