Skip to content
FiNAN Logo FiNAN Docs

PublicationCard

The PublicationCard component renders a vertical list of publication entries with consistent styling and metadata links. It is designed to surface evidence-based research on representation pages.

Overview

Section titled “Overview”


File: src/components/PublicationCard.astro
Data config: src/data/representation/publication/*.ts
Used on: src/pages/representation/finland.astro

This component is ideal for:

  • Listing peer-reviewed publications with standardized metadata
  • Highlighting research output for a specific country or chapter
  • Providing links to DOI or URN sources

Props

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


interface Props {
  publications: Publication[];
}

Prop details

Section titled “Prop details”
  • publications: Array of publication objects rendered in order

Publication type

Section titled “Publication type”
export interface Publication {
  title: string;
  journal: string;
  doi?: string;
  urn?: string;
  isbn?: string;
}

Usage

Section titled “Usage”

  1. Import the component and data source:

    ---
    import PublicationCard from '../../components/PublicationCard.astro';
    import { finlandPublications } from '../../data/representation/publication';
    ---

  2. Render the component with the publications array:

    <PublicationCard publications={finlandPublications.publications} />

  3. Update the data file as needed:

    • Path: src/data/representation/publication/finlandPublications.ts
    • Add or edit items in the publications array

Data configuration

Section titled “Data configuration”

Example data file

Section titled “Example data file”
import type { PublicationData } from './types';


export const finlandPublications: PublicationData = {
  country: 'finland',
  publications: [
    {
      title:
        'Recognition of Nursing Qualification and Credentialing Pathway of Filipino Nurses in Finland: A Qualitative Study',
      journal: 'International Nursing Review',
      doi: '10.1111/inr.12901',
      urn: 'URN:NBN:fi-fe2024082866649',
    },
  ],
} as const;

Rendering behavior

Section titled “Rendering behavior”
  • Renders a card per publication
  • Shows a document icon on medium screens and up
  • Metadata rows are optional; DOI and URN become outbound links
  • ISBN is rendered as plain text when provided

Styling details

Section titled “Styling details”
  • Card layout: flex with gap-6 and rounded-lg borders
  • Icon: Hidden on mobile, visible at md breakpoint
  • Text hierarchy: Title (text-lg + font-bold), journal (text-base)
  • Links: text-blue-800 with underline on hover

Accessibility

Section titled “Accessibility”
  • Clear text hierarchy for screen readers
  • Document icon includes descriptive alt text
  • Link targets include rel="noopener noreferrer"

For content editors

Section titled “For content editors”

Adding a new publication

Section titled “Adding a new publication”

  1. Open the data file:

    • Repository: finan-website
    • Path: src/data/representation/publication/finlandPublications.ts

  2. Add a new publication object in the array:

    {
      title: 'New publication title',
      journal: 'Journal name',
      doi: '10.0000/example',
    },

  3. Save and preview the page to confirm formatting.

Section titled “Related components”