[FEATURE] ShListCards - New constructor

jpradocueva commented 4 months ago

ShListCards New Constructor

We need a new constructor ShListCards to represent a list of news. See example, Latest News at the bottom of the index page.

Properties: see spreadsheet

[x] comments: This is by default
[x] ui: Property to introduce style
[x] wrapper: Attribute that contains classes
[x] cols: Indicate the number of columns to list the news, see the above example
[x] title: Indicates title of cards
[x] subtitle: Indicates the subtitle of the list of cards
[x] text: Allow to introduce text below the title and subtitle
[x] description: We should include a new property description on ALL the constructors. The description will describe the constructor's position concerning the other components.
[x] cardID: This ID is used to determine the order of the card in the sequence.
[x] tags: Optional, list of tags to display. This property displays the tags inside the ShCard. A click on one of the tag values filters the list based on the selection.
[x] The body text should be from the beginning of the news until the element tag 
[x] The gap between Cards needs to be reviewed.
[x] The content to render as news is moved now inside the news/articles folder, but the files listed under urlUpperBase, inside of the news Card don't render.
[x] cardID order doesn't work see PR #69 in news index carID is set to render 36 news file first but it doesn't
[x] Move gap from property to attribute inside of ui

Example

This is a possible example of how this new constructor can be used:

::ShListCard
---
description: This module is indented inside of a ShColum
cols: 3 # three columns of news
title: News
subtitle: Latest Information on LwM2M
text: |
        Open Mobile Alliance continues advancing its LwM2M protocol into the smart meter vertical ...
cardID: 1, 30, 2, 45, 8, 3, 100 # This is the order in which the news will be listed from left to right and top to bottom inside of a matrix of 3 columns and n rows.
tags: 5G, Security, LwM2M, SmartMeter # A click on one of these tags will filter the list of Card based on that selection
---
::

Changes to `ShCard`

In order to render e.g., a list of news as in the example, Latest News. We need to introduce the following changes to the ShCard constructor:

Changes to Properties

[x] description: New property used to describe the constructor concerning the other constructors
[x] tags: A new property is used to classify the card type. See example. This value will be used to filter news see example on LwM2M News . Click on one of the existing tags to filter the news cards to the selected option.
[x] cardID: It is used as an index to determine which cards and in which order should be listed in the columns and rows. See LwM2M News
[x] : This comment references a pointer inside of the ShCard content and displays it only from the beginning of the card until this pointer. See example below: . This function is used only when the card content is displayed inside of the ShListCard or ShCard. Once we click `ShCard, ' the content should appear on a new page and be full. See the example on LwM2M News.

News

ShCard and ShListCards are used to content and display news on any page. All the news should be stored in a specific folder called News, and the files containing the news follow the following filename schema:

[x] YYYY-MM-DD-title. This helps to organize the news content

FroudeDescartes commented 3 months ago

PR related to this issue

FroudeDescartes commented 3 months ago

As I have merged this PR, I have realized that tags and content excerpt are not implemented, so those will be addressed in additional PR

jpradocueva commented 3 months ago

Other improvements

@FroudeDescartes I list here other less pressing improvements, some are related to ShCards

[x] We need add more space between text and margins.
[x] Set pb-0 but some images still show margin on left and right.
[x] Is possible to add a footer to the Cards to look like these others ...
[x] Some parts of the image is not rendered correctly due to strange aspect ratios. While here are listed correctly, https://lwm2m.openmobilealliance.org/news/

jpradocueva commented 3 months ago

Issues identified:

[x] It fails to read correctly the excerpt of the content.
- For example:
  - It cannot be an empty line at the beginning
  - It doesn't accept markdown constructors
  - It doesn't accept empty lines
  - It doesn't accept HTML elements
[x] It doesn't refresh (crashes after each refresh)

jpradocueva commented 3 months ago

Issues Identified: @FroudeDescartes

[x] The clickable area in the card is reduced to the image only. We need to change it to make any area within the card clickable.
[x] When opening the Card, the image, title, subtitle, and footer information, together with the tags, must be displayed.

jpradocueva commented 3 months ago

Issues Identified:

[x] urlUpperBase when present, should overrun the hard-coded script. CANCELLED

FroudeDescartes commented 2 months ago

PR related to this issue (one of many)

jpradocueva commented 2 months ago

All the issues have been resolved.

standards-hub / docs