Page Request - /blog/[slug].vue for FTVA Article/Blog craft entry.

[pghorpade]

Page Description

This Page is used for all blog detail routes to display craft article entry content model/type and the components from the component library. The first iteration of requirements is captured here

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=28-3222&node-type=canvas&t=zp4axZF0p5bzC336-0
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=1737-22363&node-type=frame&t=nwH7S8oRC3dPAr4K-0

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

First Iteration of Requirements:

The route link to set up in the Nuxt pages folder is pages/blog/index.vue The route link to set up in the Nuxt pages folder is pages/blog/[slug].vue

Header:

1. We already have the Header-sticky component added to the layout.

Bread Crumb:

1. Bread Crumb is Blogs > Blog title, clicking the Blogs link takes the user to the blogs listing page /blogs
2. No nested routes for this content

Image or ImageCarousel:

1. The behavior is the same as the Event Detail and Series Detail page we built in the last epics.

Card Meta:

1. Category label is a string in the component, if the craft data as more than one category, on the page computed method will parse the categories and create a string with multiple categories concatenated by a comma.
2. The article title is shown after the category
3. Byline will be next, it comes from the external contributor field in craft, Right now we have 2 string type fields in Card Meta named byline 1 and byline 2, The stakeholder can combine all external contributor in one craft field and we can use a single byline string for this template. Bylines will be plain text, even in case of multiple names will use 1 field
4. Bylines have unique styles
5. The byline and date are combined in one line and separated by a diamond icon. This work needs extra thought and can be developed using sectionhandle field.
6. Do we will need a dateCreated prop for the published date. We should not use slot here for this content as we need to format this data inside the component. this will be used also on BlockCardWithImage for this content type which uses CardMeta.
7. Or DATE: Date: coming from the publish date. It is shown in mockups as a byline position and style, Axa is saying this will be the data that is feed to start-date field, that will require considerable work on our side, investigate using byline 2 field instead.
8. Add a story for Cardmeta where we add a slot for share button.

RichText

1. Add About the author title and its text under CardMeta,should we use section wrapper?

DividerWayFinder

FlexiblePageBlocks

This page template will have flexibleblocks component. To make flexibleblocks work on this template we need to following things working:

1. There is a FtvaFlexibleblocks fragment query? do we need multiple kinds of queries for future templates?
2. Do we need to update any flexible page blocks fragment query for FTVA?
3. We are assuming the content editors will be using mostly RichText, horizontal divider, pull quote flexible blocks, Media Gallery on this template @axamei can you confirm again?
4. We need to create FTVA variations for flexible pull quote and flexible richtext (@axamei will be updating design system with more examples)
5. We need GQL query and test data in Craft for testing the data structure.
6. FTVA variation of flexible-blocks , no zebra strikes like in library website, do we still keep the dividergeneral component, Add new flexible components to this component.

Read more most recent posts

1. Pull the 3 most recent published article/blog posts
2. Will have a link to view more blogs
3. Use SectionTeaserCard like on EventDetailPage and EventSeriesPage
4. Pass the section title, link title and link url to SectionWrapper, look at EventSeries detail page for an example.
5. DateCreated will be a new prop in SectionTeaserCard and BlockCardWithImage, which will be consumed by CardMeta eventually.
6. The Date created prop may need a different style and format for this template.
7. Background color will be ucla blue for BlockCardWithImage, use ftva theme to add this.
8. How are these cards sorted or ordered? @axamei can you provide more details?
9. Max cards to show is 3

Footer

1. We already have the footer component added to the layout.

Events

Describe any events that this page should handle.

1. No event handling on this page

Child components

1. NavBreadCrumb is used for BreadCrumb.
2. ResponsiveImage or FlexibleMediaGalleryNewLightbox is used for (Single Image or ImageCarousel) with credit text.
3. CardMeta and RichText is used for displaying Metadata of the Blog.
4. DividerWayFinder
5. FlexibleBlocks
6. SectionTeaserCard

Screenshots

Mobile:

[farosFreed]

Question that didn't occur to me until today: Are we keeping the 2 column layout for this? The mockups all show everything as 60% of the page content even though there is no sidebar.