# BlogPost

A single live-blog entry — headline, authors and timestamps above slotted body content. Pairs with BlogTOC.

**Category:** Components/Blog/BlogPost

**Import:** `import { BlogPost } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `title` | `string` | `'Reuters Graphics blog post'` |  | Title of the blog post |
| `slugTitle` | `string` | `'Reuters Graphics blog post'` |  | A sluggable title of the blog post.  **Important:** Do not change this title after publishing the post. Changes will break published links to the post. |
| `authors` | `string[]` | `[]` |  | Array of author names, which will be slugified to create links to Reuters author pages |
| `publishTime` | `string` | `''` |  | Publish time as a datetime string. |
| `updateTime` | `string` | `''` |  | Update time as a datetime string. |
| `id` | `string` | `''` |  | Add an id to target post headline with custom CSS. |
| `cls` | `string` | `''` |  | Add extra classes to target post headline with custom CSS. |
| `isLastPost` | `boolean` | `false` |  | If the post is the last on the page, remove the dividing rule used to separate posts. |
| `children` | `import('svelte').Snippet` | — |  | — |

## Examples

### Demo

```svelte
<BlogPost
  title="Iran fires ballistic missiles at Israel in major escalation"
  slugTitle="Iran fires ballistic missiles at Israel in major escalation"
  authors={['John Smith', 'Jane Doe']}
  publishTime="2024-10-01T18:30:00Z"
  updateTime="2024-10-01T21:45:00Z"
>
  <BodyText
    text="Iran launched a barrage of ballistic missiles at Israel on Tuesday in its first direct attack on Israeli territory, marking a significant escalation in the conflict gripping the Middle East."
  />
  <BodyText
    text="The attack, which Iran said was in retaliation for Israeli strikes that killed senior Hezbollah and Hamas leaders, prompted Israel and the United States to vow a response."
  />
</BlogPost>
```

## Documentation

# BlogPost

The `BlogPost` component renders a single entry in a graphics blog page, including a headline, dateline, authors and a divider. Body content is passed as children.

```svelte
<script>
  import { BlogPost } from '@reuters-graphics/graphics-components';
  import { resolve } from '$app/paths';
</script>

<BlogPost
  title="Iran fires ballistic missiles at Israel in major escalation"
  slugTitle="Iran fires ballistic missiles at Israel in major escalation"
  authors={['John Smith', 'Jane Doe']}
  publishTime="2024-10-01T18:30:00Z"
  updateTime="2024-10-01T21:45:00Z"
  {resolve}
>
  <!-- Post body content goes here -->
</BlogPost>
```

> **Important:** Do not change `slugTitle` after publishing. It is used to generate the post's anchor link — changing it will break any published links to the post.