Post

Display post information in a card format

npm run add Post

Use the Post component to display blog posts or articles. It includes a title, description, author, publish date, and optional image. They can be used to summarize and highlight key details of an article, such as its title, featured image and snippet, giving users a quick overview before navigating.

Preview

Diagram explaining Astro Islands architecture

Core Concept Understanding Astro Islands Architecture

Josh Wayne 2024/03/12

Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity. Read more ->

Unlock code

<Post
    img={{
        src: '/img/featured-img.png',
        alt: 'post',
        width: 600,
        height: 200
    }}
    badge={{
        text: 'Core Concept',
        icon: rocket // Import your icon as an SVG string
    }}
    title="Understanding Astro Islands Architecture"
    author={{
        avatar: {
            img: '/img/avatars/john-wayne.png'
        },
        name: 'John Wayne'
    }}
    publishDate="2024/03/12"
    description="Astro Islands let you ship zero JavaScript..."
    href="/astro-islands"
    cta="Read more ->"
/>

The Post component accepts the above props. However, only the title, description and href props are required, all other props are optional.

Post with only required props

Understanding Astro Islands Architecture Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Images

The component also supports displaying an image. You can use the img prop that expects an object with the following properties: src, alt, width and height. Optionally, you can set the lazy prop to true to enable lazy loading. In case the image is present, it’ll also act as a link to the post.

Post with featured image

Understanding Astro Islands Architecture Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Unlock code

<Post
    ...
    img={{
        src: '/img/placeholder9.png',
        alt: 'Diagram explaining Astro Islands architecture',
        width: 1200,
        height: 200,
        lazy: true
    }}
/>

Badges

To display badges, you can use the badge prop that expects an object in the form of BadgeProps, along with a text property and an optional icon property:

Post with badge

Core Concept Understanding Astro Islands Architecture Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Post with themed badge

Core Concept Understanding Astro Islands Architecture Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Unlock code

<Post
    ...
    badge={{
        text: 'Core Concept',
        icon: rocket // Import your icon as an SVG string
    }}
/>

Unlock code

<Post
    ...
    badge={{
        text: 'Core Concept',
        icon: rocket,
        theme: 'info',
        transparent: true
    }}
/>

Author Information

Under the title, you can display author information, including name and an optional avatar photo using the author prop. The avatar inside the author prop expects an AvatarProps object. You can also display a publish date:

Post with author only

Core Concept Understanding Astro Islands

Josh Wayne

Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Post with publish date only

Core Concept Understanding Astro Islands 2024/03/12 Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Post with author and publish date

Core Concept Understanding Astro Islands

Josh Wayne 2024/03/12

Astro Islands let you ship zero JavaScript by default while hydrating only the components that need interactivity.

Unlock code

<Post
    ...
    publishDate="2024/03/12"
    author={{
        avatar: { // Avatar is optional
            img: '/img/avatar0.png'
        },
        name: 'Josh Wayne'
    }}
/>

CTAs

At the end of the post, you can display an additional link (The image, title, and cta props will act as a link to the post, all using the href prop) in the form of a CTA. Pass a string to the cta prop to display a text-only CTA at the end of the post.

Post with CTA

Astro components with multiple frameworks

Components Using Multiple UI Frameworks in Astro

Chris Floyd 2024/05/10

Astro allows you to mix and match UI frameworks like React, Vue, and Svelte in the same project. Read more ->

Unlock code

<Post
    href="/astro-islands"
    cta="Read more"
/>

API

Unlock code

type PostProps = {
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    badge?: {
        text: string
        icon?: string
    } & BadgeProps
    title: string
    author?: {
        avatar?: AvatarProps
        name: string
    }
    publishDate?: string
    description: string
    href: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    cta?: string
    className?: string
}

BadgeProps Documentation

AvatarProps Documentation

Prop	Purpose
`img`	Sets a featured image for the post.
`img.src`	Sets the path for the image.
`img.alt`	Sets an alternate text for the image.
`img.width`	Sets the width of the image.
`img.height`	Sets the height of the image.
`img.lazy`	Set to `true` to enable lazy loading for the image.
`badge`	Sets a badge for the post below the image.
`badge.text`	Sets the text for the badge.
`badge.icon`	Sets an icon for the badge. You can pass SVG strings, or an icon type for Astro components.
`title`	Sets the title of the post.
`author`	Sets the author of the post.
`author.avatar`	Sets an optional avatar for the author.
`author.name`	Sets the name of the author.
`publishDate`	Sets the publish date of the post under the author's name.
`description`	Sets a short description of the post.
`href`	Sets the href for the image, title and cta.
`target`	Sets the target of the link.
`cta`	Sets a CTA for the post under the description.
`className`	Pass additional CSS classes for the card.