Feat: Page Builder Featured Pages Component

[edborsa]

Issue: #357

[edborsa]

Hey @leandrocp could you help me with something here?

I am not really sure what to do with @published_date and @@image_path.
From the list returned by Beacon.Content.list_pages the inserted_at is a DateTime and there is no image_path.
Another thing that I was not sure how to make it right is a missing part for the @site_pages. Is the attr attribute correct? How woul you do it?

[leandrocp]

@edborsa I just realized the issue isn't well described but you're still on the right path. Components are supposed to be reusable, and even though this one is extracted from dockyard.com, it still needs to be as generic as possible providing a default implementation that can be overwritten, thus we need to:

1. let the user pass a function to fetch the pages (providing a default implementation)
2. let the user define how such pages are displayed (providing a default implementation)

So the component call will look like this:

<BeaconWeb.Components.featured_pages />

Which should render a row with 3 pages displaying the page.title and page.updated_at, a link to page.path around each "card" and format the date as the image below:

But the user may want to change which pages are displayed, so that component can accept a pages attr:

<BeaconWeb.Components.featured_pages pages={Beacon.Content.list_pages(@beacon.site, per_page: 3, query: "products", sort: :title)} />

Not only that but the user may want to customize how the pages are displayed as well:

<BeaconWeb.Components.featured_pages :let={page} pages={Beacon.Content.list_pages(...)}>
  <article ...>
    <%= page.title %>
  </article>
</BeaconWeb.Components.featured_pages>

---

Some notes:

• There is no image, that's an extra attribute used solely in the dockyard.com site
• Neither the header nor the footer has to be present in the component

---

I hope that's more clear now but feel free to ask. Thanks!

[edborsa]

@leandrocp I think I got it.
You can use with or without inner_content.

Without it will look like this:

[leandrocp]

❤️