Articles

Usage

<ArticleListItem 
  article={articleObj} 
  href="/articles/example-id" // Optional - if not provided, no link is created
/>

Displays a compact preview of an article, suitable for article listings. Shows the title, summary, author information, publication date, and estimated reading time. Optionally links to a detail page if the href prop is provided.

Usage

<ArticleCard 
  article={articleObj} 
  href="/articles/example-id" // Optional - if not provided, no link is created
/>

Displays a visual card for an article with the image as background. Shows the title, summary, author information, and estimated reading time. Designed for featured articles or grid layouts.

Usage

<ArticleMention 
  article={articleObj} 
  href="/articles/example-id" // Optional - if not provided, no link is created
/>

Displays a compact reference to an article, showing the title and author. It links to the article page when clicked. This component is used within the HighlightCard to display a reference to the source article.

Usage

<ArticleView 
  article={articleObj} 
  withHighlights={true} 
  HighlightComponent={CustomHighlightComponent} 
/>

Renders the full article with proper markdown support, including footnotes, tables, and code highlighting. Displays the article header with title, author information, publication date, and estimated reading time.

When withHighlights is enabled (default: true), the component fetches highlights for the article and displays them inline. Hover over highlighted text to see who created the highlight. You can provide a custom HighlightComponent to customize how highlights are rendered.