Javascript library for showing the relevant content to the user.
npm install relevantA lot of time the target readers of article fall into different categories. For ex, consider you are writing an article about configuring a software. Your target reader's categories in this case will be Windows, Mac and Linux users. For configuring software, most of the steps are common but then there are some steps specific to platform. Common practice followed in writing such an article is to write common steps and then adding paragraphs mentioning platform specific steps. Though this approach works, it adds unnecessary clutter in the article. If reader is a linux user he will have to skim through the article to decide what are relevant steps for him and what steps should he ignore. Wouldn’t it be nice if the reader sees only the content relevant to him?
Relevant is a micro javascript library for showing the relevant content to the user. The author of the article will have to define the relevant keys and mark the relevancy in the HTML using "data-relevant-key" attribute. For example, if the article is about configuring software on different platforms then the keys can be "windows", "mac" and "linux". The example below shows how to use it.
``sh`This is common contentThis is windows specific contentThis is mac specific contentThis is linux specific contentThis is also common content
The result of calling relevant.showSpecificFromGroup("windows"); on above markup will besh`
This is common content
This is windows specific content
This is also common content
If the article is about tax saving tips. Then the reader's category could be "salaried", "self-employeed" etc, and markup can look as shown belowsh`This is a common tipThis tip is for salaried employeesThis tip is for self-employeedThis is also a common tip
Relevant also supports groups using the optional attribute "data-relevant-key-group". Grouping enables author to show relevant information from multiple groups at the same time. If group is not mentioned, the element becomes part of special group called "data-relevant-key-group-none".
For example, if the article is about desktop and mobile OS and the markup is as shown below -
` This is common content for desktop os. This is windows specific content This is mac specific content This is linux specific content This is also common content for desktop os This is common content for mobile os. This is windows specific content This is mac specific content This is linux specific content This is also common content for desktop ossh
`
If author want to show content for linux from desktop group and anroid from mobile group he will have to use showSpecificFromGroups api which accepts array of objects as shown below
`sh`
const desktop = {name: "linux", group: "desktop"};
const mobile = {name: "android", group: "mobile"};
relevant.showSpecificFromGroups([desktop, mobile]);
Deciding on UI/UX for showing the relevant content will be author's responsibility. For the example above, software configuration example above, author can choose to identify the OS when the page is loaded and call the showSpecific function with correct value.
The library exposes 3 public apis.
The library makes sure to restore the correct css display type of the element as shown in the example1.html in the repository.
`sh`
let r = new Relevant();
r.showSpecificFromGroup(name, group);
`sh``
import Relevant from 'relevant';
let r = new Relevant();
r.showSpecificFromGroup(name, group);