@fullstackdatasolutions/articles 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstackdatasolutions/articles",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "license": "MIT",
   "funding": {

package/src/ArticleCard.tsx

@@ -32,11 +32,11 @@ export function ArticleCard({ article, config }: ArticleCardProps) {
             {article.category}
           </span>
         </div>
-        <h3 className="text-lg font-semibold leading-none tracking-tight mb-2">
-          <Link
-            href={`/articles/${article.slug}`}
-            className="hover:text-indigo-600 transition-colors"
-          >
+        <h3
+          className="text-lg font-semibold leading-none tracking-tight mb-2"
+          style={{ fontFamily: config?.theme?.headerFontFamily }}
+        >
+          <Link href={`/articles/${article.slug}`} className="hover:text-primary transition-colors">
             {article.title}
           </Link>
         </h3>

package/src/ArticleDetailHero.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Calendar, Clock, User } from 'lucide-react'
 import type { Article, AuthorProfile } from './articleTypes'
+import type { ArticlesConfig } from './articlesConfig'
 
 type ArticleDetailHeroProps = Readonly<{
   article: Article
@@ -10,6 +11,8 @@ type ArticleDetailHeroProps = Readonly<{
   showDate?: boolean
   showAuthor?: boolean
   authors?: AuthorProfile[]
+  /** Optional - when `config.theme.headerFontFamily` is set, applies it to the title. */
+  config?: ArticlesConfig
 }>
 
 function toSlug(cat: string): string {
@@ -25,6 +28,7 @@ export function ArticleDetailHero({
   showDate = false,
   showAuthor = true,
   authors = [],
+  config,
 }: ArticleDetailHeroProps) {
   const showConfiguredAuthors = showAuthor && authors.length > 0
   const showLegacyAuthor = showAuthor && authors.length === 0 && article.author.trim().length > 0
@@ -98,7 +102,12 @@ export function ArticleDetailHero({
             )}
           </div>
         )}
-        <h1 className="text-4xl md:text-5xl font-bold mb-4">{article.title}</h1>
+        <h1
+          className="text-4xl md:text-5xl font-bold mb-4"
+          style={{ fontFamily: config?.theme?.headerFontFamily }}
+        >
+          {article.title}
+        </h1>
         <div
           style={{
             display: 'flex',

package/src/ArticlesPage.tsx

@@ -36,6 +36,7 @@ function buildThemeVars(theme?: ArticlesTheme): React.CSSProperties {
   if (!theme) return {}
   const vars: Record<string, string> = {}
   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

package/src/RelatedArticlesSection.tsx

@@ -29,7 +29,10 @@ export function RelatedArticlesSection({
 
   return (
     <section className="mt-12 pt-8 border-t border-border" aria-label="Related articles">
-      <h2 className="text-xl font-semibold text-foreground mb-6">
+      <h2
+        className="text-xl font-semibold text-foreground mb-6"
+        style={{ fontFamily: config?.theme?.headerFontFamily }}
+      >
         {heading ?? `More in ${category}`}
       </h2>
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

package/src/articlesConfig.ts

@@ -18,6 +18,14 @@ export type ArticlesSection =
 export 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'` */