rwt-piqueme

v1.0.11

Published

3 years ago

A just-in-time continuous feed of articles featuring collapsable/expandable UI cards; a standards-based DOM Component

Downloads

0High
0Medium
0Low

joehonton

web-component custom-element html-template shadow-dom readwritetools

Premium DOM Component

Piqueme

Pique their interest

Background

Visitors appreciate the compact beauty of UI cards. They provide so much more than a simple hyperlink.

UI cards typically have some combination of these elements: image, headline and/or lede paragraph. UI cards give visitors the gist of hyperlinked articles without the effort — for visitors, there's no forward navigation to check out a new page; and there's no back navigation to continue where they left off.

UI cards keep visitors on the same page, and keep them reading your content.

The rwt-piqueme goes two steps further than the classic UI card: 1) it allows the visitor to read the entire article without ever leaving the original document, and 2) it saves network bandwidth by fetching articles only when needed.

The rwt-piqueme component has these features:

Articles are initially displayed in UI card format with splash image, caption, kicker, headline, subhead, byline, dateline and lede.
Visitors can choose to read the full article in situ, that is, without ever leaving the host page.
UI cards can be toggled between collapsed and expanded states, to show just the UI card, or the full article.
Articles are fetched just-in-time, when the visitor scrolls down to that part of the document.
A document that contains a large set of potential UI cards will only fetch what's needed, and only when it's needed.
Each component instance handles a single on-demand article.

In the wild

To see examples of this component in use, visit any of these sites, and be sure to look under-the-hood at the source code to see how easy it is to use the component.

Installation

Prerequisites

The rwt-piqueme DOM component works in any browser that supports modern W3C standards. It has no other prerequisites. Distribution and installation are done with either NPM or via Github.

Download

Using the component

After installation, you should add two things to your HTML page to make use of it:

Add a script tag to load the component's rwt-piqueme.js file:

<script src='/node_modules/rwt-piqueme/rwt-piqueme.js' type=module></script>

Add articles to the page one by one, identifying their location with the component's sourceref attribute:

<rwt-piqueme sourceref='/2021/Jan/article01.html'></rwt-piqueme>

<rwt-piqueme sourceref='/2021/Feb/article02.html'></rwt-piqueme>

<rwt-piqueme sourceref='/2021/Mar/article03.html'></rwt-piqueme>

<rwt-piqueme sourceref='/2021/Apr/article04.html'></rwt-piqueme>

Article meta data

The UI card properties that the visitor sees are extracted in real-time from each article. They are pulled from <meta> tags placed in each article's <head>. You should configure your web server to add the following meta tags:

All <meta> tags are optional. Configure only the ones that you want displayed in the UI card.

Note that all URL's are subject to the browser's same-origin security policy. If articles or images are coming from a different server, you must ask that server's administrator to configure CORS permissions for your origin server.

UI card layout and styling

The HTML layout for the UI card is configured in the component's rwt-piqueme.blue file. Only advanced applications will need to change this.

The default CSS styling uses a dark mode theme. It is configured in the rwt-piqueme.css file. You can replace the contents of this file with CSS that matches your website's typeface and color theme.

Life-cycle events

The component issues life-cycle events. These can be used in advanced applications to trigger other actions.

Reference

License

The rwt-piqueme DOM component is not freeware. After evaluating it and before using it in a public-facing website, eBook, mobile app, or desktop application, you must obtain a license from Read Write Tools .

Activation

To activate your license, copy the rwt-registration-keys.js file to the root directory of your website, providing the customer-number and access-key sent to your email address, and replacing example.com with your website's hostname. Follow this example: