Skip to content
FiNAN Logo FiNAN Docs

Blog

The Blog component fetches the latest posts from Ghost CMS and renders them in a responsive grid with featured images, tags, and excerpts.

Overview

Section titled “Overview”
  • Type: Blog Component
  • Category: News and updates
  • Complexity: Moderate
  • File: src/components/Blog.astro
  • Data source: Ghost CMS via src/lib/ghost.ts

Features

Section titled “Features”
  • Automatic content - Pulls the latest posts from Ghost
  • Excerpt truncation - Caps excerpts to a readable length
  • Empty state - Provides fallback copy when no posts are returned
  • External linking - Posts open in a new tab with safe link attributes

Props

Section titled “Props”

This component has no props. All configuration is embedded in the component and Ghost CMS.

Usage

Section titled “Usage”

  1. Import the component into a page:

    ---
    import Blog from '../components/Blog.astro';
    ---

  2. Render the component where the news section should appear:

    <Blog />

  3. Configure Ghost CMS in src/lib/ghost.ts so the API can fetch posts.

Data fetching behavior

Section titled “Data fetching behavior”
const EXCERPT_MAX_LENGTH = 200;
const posts = await getBlogPosts(6);
  • Fetches the latest 6 posts.
  • Uses the first tag as the display label when available.
  • Truncates excerpts to 200 characters with an ellipsis.

For editors

Section titled “For editors”

Publishing posts that appear here

Section titled “Publishing posts that appear here”
  1. Create a post in Ghost CMS.
  2. Add a feature image so the grid has visuals.
  3. Publish the post and verify it appears on the FiNAN website.

Styling details

Section titled “Styling details”
  • Section background: bg-gray-50
  • Grid: 1 column on mobile, 2 on medium, 3 on large screens
  • Card: Border with hover shadow and image zoom effect
  • Badge: Tag label in a light gray pill

Accessibility

Section titled “Accessibility”
  • Each post title includes screen reader text for external links.
  • Images use the post title as alt text.

Used on

Section titled “Used on”
  • src/pages/index.astro
  • src/pages/about.astro
  • src/pages/contact.astro
  • src/pages/membership.astro
Section titled “Related components”
Section titled “Related documentation”

Source code

Section titled “Source code”

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/Blog.astro
https://github.com/poncardasm/finan-website/blob/main/src/lib/ghost.ts