Skip to content
FiNAN Logo FiNAN Docs

BlogRepresentation

The BlogRepresentation component displays a regional feed of Ghost CMS posts based on a country tag. It is used on representation pages to surface localized news and events.

Overview

Section titled “Overview”
  • Type: Blog Component
  • Category: Representation content
  • Complexity: Complex
  • File: src/components/BlogRepresentation.astro
  • Data config: src/data/representation/blogRepresentation.ts

Features

Section titled “Features”
  • Country-specific filtering - Fetches posts by Ghost tags
  • Configurable headings - Each country has custom copy
  • Shared styling - Matches the primary Blog component
  • Empty state - Displays a message when no tagged posts exist

Props

Section titled “Props”
import type { RepresentationCountry } from '../data/representation/blogRepresentation';


interface Props {
  country: RepresentationCountry;
}

Prop details

Section titled “Prop details”
PropTypeDefaultDescription
countryRepresentationCountryrequiredCountry key used to look up heading and Ghost tags

Usage

Section titled “Usage”
---
import BlogRepresentation from '../../components/BlogRepresentation.astro';
---


<BlogRepresentation country="finland" />

Data configuration

Section titled “Data configuration”

The configuration maps countries to headings, descriptions, and Ghost tags.

export interface BlogRepresentationConfig {
  heading: string;
  description: string;
  tag: string | string[];
}


export const blogRepresentationConfig = {
  finland: {
    heading: 'Latest from Finland',
    description: 'Stay updated with the latest news, events, and insights from FiNAN Finland.',
    tag: 'Finland',
  },
  'kingdom-denmark': {
    heading: 'Latest from Kingdom of Denmark',
    description: 'Stay updated with the latest news, events, and insights from FiNAN Kingdom of Denmark.',
    tag: ['Kingdom of Denmark', 'Denmark', 'Faroe Islands', 'Greenland'],
  },
} as const;

For editors

Section titled “For editors”

Add a new country feed

Section titled “Add a new country feed”
  1. Add a Ghost tag that matches the country name.
  2. Update src/data/representation/blogRepresentation.ts with a new config entry.
  3. Render the component on the target representation page.

Rendering behavior

Section titled “Rendering behavior”
  • Fetches up to 6 posts with getBlogPostsByTag.
  • Uses the first tag name as a label when tags exist.
  • Truncates excerpts to 200 characters.

Styling details

Section titled “Styling details”
  • Section background: bg-gray-50
  • Grid: md:grid-cols-2 and lg:grid-cols-3
  • Cards: Hover shadow and image zoom on hover

Accessibility

Section titled “Accessibility”
  • Post titles include screen reader text for external links.
  • Date and tag labels use readable contrast on gray pills.

Used on

Section titled “Used on”
  • src/pages/representation/*.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/BlogRepresentation.astro
https://github.com/poncardasm/finan-website/blob/main/src/data/representation/blogRepresentation.ts
https://github.com/poncardasm/finan-website/blob/main/src/lib/ghost.ts