Page Request - /blogs/index.vue - Blog/Article Listing Page

[pghorpade]

Page Description

This Page is used to display craft blog/article entries as a list.
Requirements for this page is gathered based on preliminary discussion with UX by going over the figma design.

The design follows the same structure as news listing page on library main website.

Jira Epic

APPS-2695

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=6515-6885&t=AKcHmoc2zTuC2ETb-0
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=7038-11436&t=iIBdXOs4ZGMJpIWQ-0

If no mobile designs provided, please use your best judgment for responsiveness.

Route

This route link pages/blog/index.vue already exists in the Nuxt pages folder.

Craft Query

Only title, sumary and featured articles will be fetched from craft. This is content type https://craft.library.ucla.edu/admin/entries/ftvaListingArticles/4417312-ftva-listing-articles
Max 3 featured articles can be selected on the entry.

ES Query

1. There will be a new composable that queries paginated articles from Elastic search index.
2. There will be no filters for initial launch
3. The query will be similar to event series paginated list with sectionhandle set to ftvaArticle.

Page Styling, components update and ES logic

Desktop

1. The title and summary is centered and will be displayed using sectionwrapper component
2. The summary is required field , but there will be toggle field in craft if it is true show the summary in the center along with title if false do not show and only use it for SEO meta tags . Action item -> add this new requirement to the ticket

Featured Blogs

4. There is Dividerwayfinder next.
5. There is Sectionwrapper component with title=Featured Blogs, It will wrap one BannerFeatured component and 1 sectionTeaserCard with items props of length 2. Action item: use 3 BlockCardWithImage and style the layout and grouping of the features either in Sectionwrapper component or on the page template
6. the description/text on the banner featured and BlockCardWithImage vertical cards are the ftvaHomepageDescription field text. Will not need BannerFeatured
7. No Byline anywhere on this page.

Latest Blogs

1. This template will display all blogs, this should show all of the articles/blogs sorted by most recent first.
2. Use section-wrapper and pass the title
3. This is the paginated list, the implementation is similar to the EventSeries listing page
4. There is Section-staffarticle-list wrapped inside section-wrapper
5. There is SectionPagination component

Mobile

1. If there are 3 featured items on small screens show only the first one and hide the remaining.
2. Adding infinite scrolling is not required. It is nice to have a feature, UX has no preference whatever is easy we should build that. I am okay with either pagination or infinite-scroll, Pagination is already on the page for desktop, so we can continue using it for mobile screens to reduce the time required to add infinite-scroll code. As discussed on Jan 14th, 2025 with Jen Rhee, Devs can add the infinite scrolling either during the work on this epic or later after the templates are built. Devs look into extracting the infinite scroll logic in a composable.
3. See the design for the styles and how the components change or stack.
4. No filters on this page and no sticky titles on this page.

ScreenShots

Mobile screenshot

[pghorpade]

@axamei Please review this issue , I added some question in the issue for you.