# Byline

An article byline and dateline: linked author names with formatted publish and update times.

**Category:** Components/Text elements/Byline

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

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `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. |
| `align` | `'auto' \| 'center'` | `'auto'` |  | Alignment of the byline. Options: `auto`, `center` |
| `id` | `string` | `''` |  | Add an id to to target with custom CSS. |
| `cls` | `string` | `''` |  | Add extra classes to target with custom CSS. |
| `getAuthorPage` | `(author: string) => string` | `getAuthorPageUrl` |  | Custom function that returns an author page URL. |
| `byline` | `Snippet` | — |  | Optional snippet for a custom byline. |
| `published` | `Snippet` | — |  | Optional snippet for a custom published dateline. |
| `updated` | `Snippet` | — |  | Optional snippet for a custom updated dateline. |

## Examples

### Demo

```svelte
<Byline
  authors={/* authors */}
  publishTime={new Date('2021-09-12').toISOString()}
  updateTime={new Date('2021-09-12T13:57:00').toISOString()}
/>
```

### Customised

```svelte
<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
  {#snippet byline()}
    <strong>BY REUTERS GRAPHICS</strong>
  {/snippet}
  {#snippet published()}
    PUBLISHED on some custom date and time
  {/snippet}
  {#snippet updated()}
    <em>Updated every 5 minutes</em>
  {/snippet}
</Byline>
```

### Translation

```svelte
In locale = `es`:
<Byline
  publishTime="2021-09-12T00:00:00Z"
  {authors}
  byline={locale === 'es' ? esByline : undefined}
  published={locale === 'es' ? esPublished : undefined}
></Byline>

In locale = `en`:
<Byline
  publishTime="2021-09-12T00:00:00Z"
  {authors}
  byline={undefined}
  published={undefined}
/>
```

### Custom author page

```svelte
<Byline
  authors={/* authors */}
  publishTime="2021-09-12T00:00:00Z"
  updateTime="2021-09-12T13:57:00Z"
  getAuthorPage={(author: string) => {
      return `mailto:${author.replace(' ', '')}@example.com`;
    }}
/>
```

## Documentation

# Byline

The `Byline` component adds a byline, published and updated datelines to your page.

```svelte
<script>
  import { Byline } from '@reuters-graphics/graphics-components';
</script>

<Byline
  authors={[
    'Dea Bankova',
    'Prasanta Kumar Dutta',
    'Anurag Rao',
    'Mariano Zafra',
  ]}
  publishTime="2021-09-12T00:00:00.000Z"
  updateTime="2021-09-12T12:57:00.000Z"
/>
```

## Using with ArchieML docs

With the graphics kit, you'll likely get your text value from an ArchieML doc...

```yaml
# ArchieML doc
[authors]
* Dea Bankova
* Prasanta Kumar Dutta
* Anurag Rao
* Mariano Zafra
[]
publishTime: 2021-09-12T00:00:00.000Z
updateTime: 2021-09-12T12:57:00.000Z
```

... which you'll pass to the `Byline` component.

```svelte
<script>
  import { Byline } from '@reuters-graphics/graphics-components';
  let { content }: Props = $props();
</script>

<Byline
  authors={content.authors}
  publishTime={content.publishTime}
  updateTime={content.updateTime}
/>
```

## Custom byline, published and updated datelines

Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.

```svelte
<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
  <!-- Optional custom byline -->
  {#snippet byline()}
    <strong>BY REUTERS GRAPHICS</strong>
  {/snippet}

  <!-- Optional custom published dateline -->
  {#snippet published()}
    PUBLISHED on some custom date and time
  {/snippet}

  <!-- Optional custom updated dateline -->
  {#snippet updated()}
    <em>Updated every 5 minutes</em>
  {/snippet}
</Byline>
```

## Translated byline and datelines

Use [snippets](https://svelte.dev/docs/svelte/snippet) to conditionally customise the byline, published and updated datelines for different languages.

```svelte
<!-- In App.svelte -->
<script>
  import {
    Byline,
    getAuthorPageUrl,
    formatTime,
  } from '@reuters-graphics/graphics-components';

  let { content }: Props = $props();

  // Note: In graphics kit, `locale` is already defined in `App.svelte`
</script>
```

```svelte
<!-- In App.svelte -->
<!-- Define custom translation snippets for different languages above the <Byline/> component -->
{#snippet esByline()}
  Por
  {#each content.authors as author, i}
    <a
      class="no-underline whitespace-nowrap text-primary font-bold"
      href={getAuthorPageUrl(author)}
      rel="author"
    >
      {author.trim()}</a
    >{#if content.authors.length > 1 && i < content.authors.length - 2},{/if}
    {#if content.authors.length > 1 && i === content.authors.length - 2}y&nbsp;{/if}
  {/each}
{/snippet}

{#snippet esPublished()}
  Publicado <time datetime="2026-04-08T10:00:00.000Z">
    {new Date(content.publishTime).toLocaleDateString('es-ES', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })}&nbsp;&nbsp;{formatTime(content.publishTime)}</time
  >
{/snippet}
```

```svelte
<!-- In App.svelte -->
<!-- Conditionally render custom translation snippets depending on the locale -->
<Byline
  authors={content.authors}
  publishTime={content.publishTime}
  byline={locale === 'es' ? esByline : undefined}
  published={locale === 'es' ? esPublished : undefined}
/>
```

## Custom author page

By default, the `Byline` component will hyperlink each author's byline to their Reuters.com page, formatted `https://www.reuters.com/authors/{author-slug}/`.

To hyperlink to different pages or email addresses, pass a custom function to the `getAuthorPage` prop.

```svelte
<!-- Pass a custom function as `getAuthorPage` -->
<Byline
  authors={[
    'Dea Bankova',
    'Prasanta Kumar Dutta',
    'Anurag Rao',
    'Mariano Zafra',
  ]}
  publishTime="2021-09-12T00:00:00Z"
  updateTime="2021-09-12T13:57:00Z"
  getAuthorPage={(author) => {
    return `mailto:${author.replace(' ', '')}@example.com`;
  }}
/>
```

```
```