@financial-times/n-definitions

n-definitions

A client-side component that searches article content for terms with a matching definition in Lexicon, and adds an expandable definition for the term.

Demo page

An example of the markup of this component being used in an article can be found on /demo/index.html or remotely on this link.

The article selected for the demo page includes multiple terms from the Lexicon spreadsheet.

A demo app, where you can try this component on the same article, can be started with this command:

npm start

The demo app will get the body of the sample article and will render the template. The template imports the client-side script and the stylesheets. When these finish loading, n-definitions will initialise, which will run the function, insertDefinitions, to add the markup for the term and the definition expander. It will then add the functionality to toggle the definition expanders and apply the styling.