Press Page

[bennypowers]

• copy the table to csv
• load the csv in 11ty data cascade
• generate a page per row in the table, with tags, link, etc specified from there
• page template will fetch opengraph image, article summary/description, title, etc and render a blogroll-style link
• create an index page (paginated?) with links to each article as well

[bennypowers]

cc @TomerFi

about pagination in 11ty https://www.11ty.dev/docs/pagination/

here's an example of how we generate pages from data in red hat design system: https://github.com/RedHat-UX/red-hat-design-system/blob/694fd26b63fc1a49992c24a546b26167dff83ec3/docs/components/demos.html

the linked example filters the items in the demos global data array, taking every item which has a permalink property, and generates a page for each individual item with the content of the file at a permalink.

---

for this case, my thought was to generate an index page with let's say 10 items, and show the opengraph image and the text summary, with a "read more" link

[bennypowers]

#31 did most of the work
design, individual story pages, webscraping, are still missing

[ShiranHi]

I recommend using the card component (with an image) for this page and for the "Posts" page to make it easier to read and to make it more visual and less textual/list view.

Card UI:
https://ux.redhat.com/components/card/

For cards without an image: let's try to find a relevant image for all of our posts (please make sure to use images with the right license, for example from this website).

[bennypowers]

Thanks @ShiranHi this is great.
This issue is blocked by RedHat-UX/red-hat-design-system#538

[ShiranHi]

Like this layout:

[bennypowers]

This is great, @ShiranHi , thanks

We'll need to figure out what to do when a card has multiple links, e.g. https://github.com/RedHat-Israel/red-hat-israel-site/blob/1dbecf95a054311f442c387190954b2bfdb13659/_data/publicity.yaml#L60-L76

This currently renders like so:

<h2>גאווה ישראלית: יחידת ממר&quot;ם זכתה בפרס החדשנות הטכנולוגית לשנת 2022 באירוע ה-Summit הגלובלי של רד האט</h2>
  <p>קראו עוד באתרי</p>
  <ul>
    <li>
      <a href="https://itnews.co.il/news/events-expos/?p=38337" rel="noreferrer nofollow" target="_blank">IT News</a>
    </li>
    <li>
      <a href="http://www.talniri.co.il/marketnews/article.asp?id=108191" rel="noreferrer nofollow" target="_blank">Talniri</a>
    </li>
    <li>
      <a href="http://www.softnews.co.il/news/fgbhj-jgegf.html" rel="noreferrer nofollow" target="_blank">Soft News</a>
    </li>
    <li>
      <a href="https://www.funder.co.il/article/134309–" rel="noreferrer nofollow" target="_blank">Funder</a>
    </li>
    <li>
      <a href="https://www.biti.co.il/mamram-red-hat/" rel="noreferrer nofollow" target="_blank">Biti</a>
    </li>
    <li>
      <a href="https://www.ice.co.il/digital-140/news/article/860081" rel="noreferrer nofollow" target="_blank">ICE</a>
    </li>
    <li>
      <a href="https://www.pc.co.il/upcoming-conferences/363732/" rel="noreferrer nofollow" target="_blank">אנשים ומחשבים</a>
    </li>
  </ul>

current design specs don't say much about single-cards-with-multiple-links. cc @coreyvickery

[ShiranHi]

@bennypowers can these links be clickable labels/tags?

[bennypowers]

not sure, better to ask @coreyvickery or @marionnegp (PTO until wed)

[marionnegp]

@ShiranHi, our labels are typically used to show meta data, like categories for sorting info, so I'm not sure this would be the best application of labels. A group of Brick CTAs might work, depending on how wide the card will be.

Otherwise, I've mostly seen multiple links in a card be used like this on the homepage or this on the Cloud Computing page.

[coreyvickery]

@ShiranHi It is not wise to show too many links in a card, especially if there are multiple cards in one row; a user might have a hard time making a choice if there are too many things to select. I like how your layout above has only one CTA or link per card. You may need to use a wider card or band layout if you wish to include more than two CTAs or links in one space.

Let us know if you need further design guidance.

[ShiranHi]

I agree @coreyvickery , experience wise it is better to have only one CTA.
@bennypowers what if each link will be a card? We can have titles to separate the cards with topics. This way we will have only one link on each card. What do you think?

[coreyvickery]

@ShiranHi I know you asked Benny, but that sounds like a nice solution to me.