# BlogTOC

A collapsible table of contents for a live blog, grouping posts by date with in-page anchor links. Pairs with BlogPost.

**Category:** Components/Blog/BlogTOC

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `posts` | `Post[]` | — | ✓ | — |
| `label` | `string` | `'Show all articles'` |  | The label for the table of contents toggle button. |
| `maxHeight` | `number` | `300` |  | The maximum height of the table of contents list in pixels. |

## Examples

### Demo

```svelte
<Headline
  section="Graphics"
  hed="Maps of the Iran crisis"
  hedSize="big"
  width="normal"
  class="mb-2"
/>

<ClockWall
  cities={[
    { name: 'Tehran', tzIdentifier: 'Asia/Tehran' },
    { name: 'Tel Aviv', tzIdentifier: 'Asia/Tel_Aviv' },
    { name: 'Washington D.C.', tzIdentifier: 'America/New_York' },
  ]}
/>

<BlogTOC {posts} />

<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

# BlogTOC

The `BlogTOC` component renders a collapsible table of contents for a graphics blog page, listing all posts sorted chronologically. It only renders when there are two or more posts.

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

<BlogTOC
  posts={[
    {
      title: 'Iran fires ballistic missiles at Israel',
      slugTitle: 'Iran fires ballistic missiles at Israel',
      publishTime: '2024-10-01T18:30:00Z',
    },
    {
      title: 'Israel vows response',
      slugTitle: 'Israel vows response',
      publishTime: '2024-10-02T09:15:00Z',
    },
  ]}
  {resolve}
/>
```

Pass SvelteKit's `resolve` function (from `$app/paths`) so that post links resolve correctly against your project's base path.

Each post in the `posts` array must have:

- `title` — the display title
- `slugTitle` — used to generate the anchor link; **do not change after publishing**
- `publishTime` — an ISO datetime string used for sorting and the dateline