on-this-day v1.2.0

On This Day

On this day is a webcomponent you can use to add historic feel to a web page. The webcomponent shows an event that happened on today's month-day combination in the past.

Usage

The internal name of an historic fact is incident and each incident is displayed in a tile. A tile consists of a title, an optional image and optional text block over the image.

Load the component

First load the javascript magic that defines our web component:

<script defer="defer" src="https://www.unpkg.com/on-this-day@1.1.0"></script>

Use the new html tag

After this you can use a HTML element called 'on-this-day' in your html page in which the incidents of a certain date (or date range) will be displayed. E.g.

<on-this-day></on-this-day>

The on-this-day element will use all the space it has been granted. To control this you can use css styling on the on-this-day element itself or wrap it in a container that has controlled dimensions:

<div class="small-container">
    <on-this-day country="nl" category="newsItem" no-image-src="https://tee-e.com/images/pic01.jpg" show-icons></on-this-day>
</div>

Please refer to index.html of this repo for a complete example.

Control the behaviour

Set attributes statically

The on-this-day element accepts parameters to control it's behaviour:

• country : fetch incidents that where newsworhty in this country(ies). Reference https://swagger.tee-e.com for a list of supported countries.
• category : fetch incidents for this category(ies). Reference https://swagger.tee-e.com for a list of supported categories.
• emotion : fetch incidents that match this emotion(s). Reference https://swagger.tee-e.com for a list of supported emotions.
• impact : fetch incidents had this impact(s). Reference https://swagger.tee-e.com for a list of supported emotions.
• shuffle : shuffle the results before displaying
• suppress-images : do not show any images
• no-image-src : what image should be shown when an incident's image is broken. Use a url or base64 encoded image
• report-broken-images : report broken images back to the server so that they can be repaired

Adjust the styling

The on-this-day element accepts css parameters to specify (significant parts of) it's styling:

• --on-this-day-title-color : the text color of the title of the tile
• --on-this-day-title-background-color: the background color of the title of the tile
• --on-this-day-title-font-size : the font size of the title text of the tile
• --on-this-day-text-color : the color of the content text of the tile
• --on-this-day-text-background-color : the color of the background of the content of the tile
• --on-this-day-text-font-size : the size of the title text of the tile
• --on-this-day-text-max-height : the maximum height of the text of the tile
• --on-this-day-background-color : the color of the background of the tile
• --on-this-day-image-min-height : the minimum height of the image
• --on-this-day-ruler-color : the color of the ruler that is displayed between two incidents vertically
• --on-this-day-icon-color : the color of the incident's category icon
• --on-this-day-attribution-font-size : the font size of the list of attributions / sources
• --on-this-day-attribution-font-color : the font color of the list of attributions / sources

Texts may be too long to fit the tile, this leads to scrollable text by default. If you don't want this you can place the text underneath the image by adding:

--on-this-day-text-position: static;
--on-this-day-text-max-height: 100%;

Development

Fetch all packages: npm ci
Run the application: npm run develop
Navigate to http://localhost:8000

Publication

Fetch all packages: npm ci
Version the application: npm version major|minor|patch
Build the application: npm run build:prod
Publish the application: npm publish