# @financial-times/community-event-asset

> community event assets etc

Latest version **0.2.0** (published 2026-04-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install @financial-times/community-event-asset
pnpm add @financial-times/community-event-asset
yarn add @financial-times/community-event-asset
bun add @financial-times/community-event-asset
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-04-09 |
| First published | 2023-02-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 20.x |
| Dependencies | 1 |
| Unpacked size | 427.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | the-ft, rowanmanning, chee, alexwilson, aendra, emmalewis, notlee, seraph2000, hamza.samih, robertboulton, robgodfrey |

## Links

- npm: https://www.npmjs.com/package/@financial-times/community-event-asset
- Repository: https://github.com/Financial-Times/community-promo-kit
- Homepage: https://github.com/Financial-Times/community-promo-kit/tree/main/packages/community-event-asset#readme
- Issues: https://github.com/Financial-Times/community-promo-kit/issues
- npm.io page: https://npm.io/package/@financial-times/community-event-asset

## Dependencies (1)

- [@financial-times/community-event-common](https://npm.io/package/@financial-times/community-event-common.md) ^0.3.0

## Recent versions

- 0.2.0 (latest) — 2026-04-09
- 0.2.0-alpha.2673.1 (pre-release) — 2026-04-09
- 0.2.0-alpha.2673.0 — 2026-04-08
- 0.1.17 — 2025-12-17
- 0.1.17-alpha.0 — 2025-12-17
- 0.1.17-alpha.2608.0 — 2025-12-16
- 0.1.17-alpha.2603.0 — 2025-12-15
- 0.1.16 — 2025-05-14
- 0.1.16-alpha.0 — 2025-05-14
- 0.1.16-alpha.2442.0 — 2025-05-05
- 0.1.15 — 2025-04-15
- 0.1.15-alpha.2428.1 — 2025-04-15
- 0.1.15-alpha.2428.0 — 2025-04-14
- 0.1.14 — 2025-03-18
- 0.1.14-alpha.2387.1 — 2025-03-18
- … 49 more at https://npm.io/package/@financial-times/community-event-asset/versions

## README

# Community-event-asset

Storybook: https://symmetrical-winner-6cdae48b.pages.github.io/

## Description

- This is a package which contains UI components, as well as functions that can be used to do functionalities related to event assets
- It exports `EventAssetCard` component for rendering
- It also exports those functions/models: `initEventAssetCardTracking`, `getEventAssetsToPromote`, and `EventAssetCardProps`

### Note

- The `initEventAssetCardTracking` is using a reference of oTracking passed in the function. The package is tested and compatible with version `4.5.0`.

## Installation

```shell
npm install @financial-times/community-event-asset
```

## Usage
- Example of how to use `EventAssetCard`.

It accepts properties defined in `EventAssetCardProps` model in the current package.

```jsx
import { h, render } from "@financial-times/x-engine";
import { EventAssetCard } from "@financial-times/community-event-asset";

<EventAssetCard
  eventId="00000000-0000-0000-0000-000000000001"
  eventTitle="Event title"
  eventSubtitle="Event subtitle"
  targetUrl="https://ft.com"
  purchaseUntilDate={new Date("2021-09-04T12:00:00.000Z")}
  imgUrl="https://image-url"
  seriesTitle="FTWeekend Festival"
  componentPosition="10"
/>;
```

To include `EventAssetCard` scss:

```scss
@import "@financial-times/community-event-asset/main";

@include eventAssetCard();
```


- Example of how to use `getEventAssetsToPromote`.

```ts
import {
  getEventAssetsToPromote,
  EventAssetCardProps,
} from "@financial-times/community-event-asset";

// The below variable is map containing annotation id, a uuid value, along with its numeric weight. This map will be used to compare events. Consumer of this package is responsible to compose this map based on the usage context
const annotationsWeightingsMap = {
  "00000000-0000-0000-0000-111111111111": 3,
  "00000000-0000-0000-0000-222222222222": 2,
};

const numberOfEventAssetsToPickForPromotion = 3;
const eventAssetsToPromote = getEventAssetsToPromote(
  annotationsWeightingsMap,
  numberOfEventAssetsToPickForPromotion
);

// Now you can use use any of eventAssetsToPromote element as argument to EventAssetCard
<EventAssetCard {..eventAssset1}>
```

## Development

### Setting up your local environment

- Simply clone this repo, cd into the directory and run:

```shell
npm install
```

### Sync live events

You need to have a valid content API key to access live events at `https://api.ft.com`

```shell
export CONTENT_API_KEY={PROD_CONTENT_API_KEY}
```

```shell
npm run sync-live-events
```

---
_Source: https://npm.io/package/@financial-times/community-event-asset · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._