@financial-times/x-teaser-timeline

v14.6.2

Display a list of teasers grouped by day and/or last visit time For more information about how to use this package see README

Latest version published 29 days ago

License: ISC

NPM

GitHub

Package Health Score

76 / 100

security
No known security issues
popularity
Limited
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
14.6.2	\|	03/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
14.5.2	\|	02/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
14.0.2	\|	09/2023	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
13.0.1	\|	08/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
12.0.2	\|	08/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

ISC

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (171)

GitHub Stars: 37
Forks: 7
Contributors: 90

Direct Usage Popularity

The npm package @financial-times/x-teaser-timeline receives a total of 171 downloads a week. As such, we scored @financial-times/x-teaser-timeline popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package @financial-times/x-teaser-timeline, we found that it has been starred 37 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 90
Funding: No

With more than 10 contributors for the @financial-times/x-teaser-timeline repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like @financial-times/x-teaser-timeline is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 27
Open PR: 17
Last Release: 29 days ago
Last Commit: 29 days ago

Further analysis of the maintenance status of @financial-times/x-teaser-timeline based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that @financial-times/x-teaser-timeline demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: 16

Age: 5 years
Dependencies: 4 Direct
Versions: 143
Install Size: 700 kB
Dist-tags: 2
# of Files: 17
Maintainers: 10
TS Typings: No

@financial-times/x-teaser-timeline has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

x-teaser-timeline

This component renders a list of articles in reverse chronological order, grouped by day, according to the user's timezone. It will optionally group today's articles into "latest" and "earlier" too.

Installation

This module is supported on Node 12 and is distributed on npm.

npm install --save @financial-times/x-teaser-timeline

The x-engine module is used to inject your chosen runtime into the component. Please read the x-engine documentation first if you are consuming x- components for the first time in your application.

Other dependencies

o-teaser styles will need to be imported by the consumer of this component.

If selectively importing o-teaser's styles via scss, then you will need the following:

$o-teaser-is-silent: true;
@import '@financial-times/o-teaser/main';
@include oTeaser(('default', 'images', 'timestamp'), ('small'));

See the x-teaser documentation.

Usage

The components provided by this module are all functions that expect a map of properties. They can be used with vanilla JavaScript or JSX (If you are not familiar check out WTF is JSX first). For example if you were writing your application using React you could use the component like this:

import React from 'react'
import { TeaserTimeline } from '@financial-times/x-teaser-timeline'

// A == B == C
const a = TeaserTimeline(props)
const b = 
const c = React.createElement(TeaserTimeline, props)

All x- components are designed to be compatible with a variety of runtimes, not just React. Check out the x-engine documentation for a list of recommended libraries and frameworks.

Properties

Feature	Type	Notes
`items`	Array	(Mandatory) Array of objects, in Teaser format, representating content items to render. The items should be in newest-first order.
`timezoneOffset`	Number	(Defaults using runtime clock) Minutes to offset item publish times in order to display in user's timezone. Negative means ahead of UTC.
`localTodayDate`	String	(Defaults using runtime clock) ISO format YYYY-MM-DD representating today's date in the user's timezone.
`latestItemsTime`	String	ISO time (HH:mm:ss). If provided, will be used in combination with `localTodayDate` to render today's items into separate "Latest" and "Earlier" groups.
`showSaveButtons`	Boolean	(Default to true). Option to hide x-article-save-buttons if they are not needed. Those buttons will get their saved/unsaved state from a `saved` property of the content item.
`customSlotContent`	String or Array	Content to insert at `customSlotPosition`.
`customSlotPosition`	Number or Array	(Default is 2). Where to insert `customSlotContent`. The custom content will be inserted after the item at this position number. If this position is greater than the number items to render, then it will be inserted last.
`csrfToken`	String	A CSRF token that will be used by the save buttons (if shown).
`latestItemsAgeHours`	Number	(Optional). If provided, used to calculate a cutoff time before which no article will count as "latest", regardless of the value of `latestItemsTime`. If omitted, articles before midnight this morning will not count as "latest".

Example:

@financial-times/x-teaser-timeline dependencies

@financial-times/x-article-save-button @financial-times/x-engine @financial-times/x-teaser date-fns

@financial-times/x-teaser-timeline development dependencies

@financial-times/o-colors @financial-times/o-grid @financial-times/o-typography @financial-times/x-rollup @financial-times/x-test-utils check-engine sass

FAQs

What is @financial-times/x-teaser-timeline?

Display a list of teasers grouped by day and/or last visit time. Visit Snyk Advisor to see a full health score report for @financial-times/x-teaser-timeline, including popularity, security, maintenance & community analysis.

Is @financial-times/x-teaser-timeline popular?

The npm package @financial-times/x-teaser-timeline receives a total of 171 weekly downloads. As such, @financial-times/x-teaser-timeline popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is @financial-times/x-teaser-timeline well maintained?

We found that @financial-times/x-teaser-timeline demonstrated a healthy version release cadence and project activity. It has a community of 90 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is @financial-times/x-teaser-timeline safe to use?

The npm package @financial-times/x-teaser-timeline was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 1 April-2024, at 11:44 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP