npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@financial-times/n-concept

v8.1.1

Published

n-concept provides a card for concepts (e.g. topic, author) and their articles

Downloads

259

Readme

n-concept

n-concept is a card that shows a list of articles for a concept (topic, author, etc.) with links to myFT actions

Install

Add the component to bower.json and package.json

Run npm install n-concept --save && bower install n-concept --save

Add the following line to your main sass file: @import "n-concept/main";

Usage

Server-side

	{{> n-concept/templates/concept }}

Client-side

const myftTemplate = require('../../../views/partials/myft.html');
const myFtHtml = myftTemplate(data);

n-concept requires at least the following data:

  • url - url for the concept stream page
  • name - name of the concept e.g. World
  • conceptId
  • items an array of objects that are the headlines to show
  • imageUrl for the image that appears at the top. You don't have to use the presenter to do this, but you will probably want to

Please view the source for more information.

Extra data

n-concept comes with 3 decorators

concept combines the 2 decorators below

responsive-grids handles scenarios where you want particular cards to be hidden at certain breakpoints. For example, on the home page only 3 myFT concept cards are shown between the medium and large breakpoints. This decorator requires the data item show with the settings in an object e.g. { default: true, M: false, XL: true }

concept-image retrieves the image for the concept card. It requires the list of articles in an array of objects called items, which should be in your data anyway.

The decorator finds an image from the list of articles to be displayed, and if it cannot find one uses a default.

##Demo page $ make demo: Serves examples of the component locally (http://localhost:5005), using dummy data and in isolation from an app.

This is done on a simple express app which renders a single demo page that calls the partials to exhibit, populating them with data from a fixture.

##Pa11y $ make a11y: Serves page of demo components, on which it runs Pa11y accessibility tests (errors flagging up accessibility infringements), which will also be run as part of the Continuous Integration (CI) process.