Page Request - /[...slug] General Content Page

[jendiamond]

Tickets

• APPS-3139 Page: Add GQL Query and Create catch all page [...slug].vue - PR #109
• APPS-3153 Component: Add FTVA variation to Flexible Simple Cards - PR #690
• APPS-3154 Component: Add FTVA variation to Flexible Call to Action - PR #688
• APPS-3148 Component: Add FTVA variation to Flexible Forms - PR #689

In the works...

• APPS-3150 Component: Add FTVA variation to Flexible Impact Number Cards - PR #692
• APPS-3149 Component: Create an FTVA version of PageAnchor - PR #691
• APPS-3147 Component: Create a new component Flexible BlockInfo - PR #

---

• APPS-3168 Component: Add FTVA variation to Flexible Media With Text
• APPS-3144 Component: Add FTVA variation to Flexible Associated Topic Cards
• APPS-3171 Component: Add an FTVA variation of the FlexibleBlock component
• APPS-3151 Page: Assemble the general content page with components

---

Page Description

This Page is used to display any general content like the /about page.

Youtube video walk through with UX, Devs, & Jen Rhee

[CRAFT](https://craft.library.ucla.edu/admin/entries/ftvaGeneralContentPage/6278414?draftId=17559&fresh=1

Design

Please also see attached screenshots for quick reference.

• Desktop & Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=28-3221&p=f&t=4AkTrTgk2x2TM4TB-0

The Mobile version with need some different styling for the FlexiblePageBlocks as referred to here: https://youtu.be/8-VXZ_WA0wQ?si=8ZT3NyYTw3uEAyFr&t=2283

Developer Tips

• It will be formatted similar to the Article/Blog detail page that has two columns
  • The right side column will contain nothing.
    • https://github.com/UCLALibrary/ftva-website-nuxt/blob/main/pages/blog/%5Bslug%5D.vue
  • If it is a long page the PageAnchor.vue component will appear so the page can be reference easier
    • <page-anchor v-bind="args" />
• In the mobile state it will just collapse normally

Child components

import {
  TwoColLayoutWStickySideBar, NavBreadcrumb, ResponsiveImage, RichText, PageAnchor, FlexibleBlocks, SectionWrapper,
} from 'ucla-library-website-components'

1. <TwoColLayoutWStickySidebar.vue />
2. <NavBreadcrumb />
3. <ResponsiveImage />
4. <CardMetat />
5. <PageAnchor />
6. <SectionWrapper />
7. <FlexibleBlock />

These are the All of the FTVA Flexible Page Blocks AllFtvaFpb.gql

1. BlockAssociatedTopicCardsFragment.gql
2. BlockCallToActionFragment.gql
3. BlockFormFragment.gql
4. BlockHorizontalDividerFragment.gql
5. BlockInfoBlock.gql This is new.
6. BlockImpactNumberCardsFragment.gql
7. BlockMediaGalleryFragment.gql
8. BlockMediaWithTextFragment.gql
9. BlockPullQuoteFragment.gql
10. BlockRichTextFragment.gql
11. BlockSimpleCardsFragment.gql

Components to update and/or create

Some of the components for the FlexiblePageBlock will need to be created or updated.

1. Create an FTVA version of Flexible/BlockAssociatedTopicCardsFragment.gql
   • JIRA Ticket APPS-3144
   • Figma
   • Storybook
2. Create an FTVA version of Flexible/BlockCallToActionFragment.gql
   • JIRA Ticket APPS-3154
   • Figma
   • Storybook
3. Create an FTVA version of Flexible/BlockFormFragment.gql
   • JIRA Ticket APPS-3148
   • Storybook
4. Create an FTVA version of Flexible/BlockImpactNumberCardsFragment.gql
5. 1. Create a new component Flexible/BlockInfoFragment.gql
   • JIRA Ticket APPS-3147
   • Figma
   + [JIRA Ticket APPS-3150](https://uclalibrary.atlassian.net/browse/APPS-3150) + [Storybook](https://ucla-library-storybook.netlify.app/?path=/story/flexible-impact-number-cards--default)
6. Create an FTVA version of BlockMediaWithTextFragment.gql
   • JIRA Ticket APPS-3168
   • Figma
   • Storybook
7. Create an FTVA version of Flexible/BlockSimpleCardsFragment.gql
   • JIRA Ticket APPS-3153
   • Figma
   • Storybook
8. Create an FTVA version of PageAnchor.vue
   • JIRA Ticket APPS-3149
   • Figma
   • Storybook
   • PageAnchor. is used to quickly scroll through long pages. The logic is already in place in the library website page on the Collections Page
     • It will anchor to any h3 tag on the page

---

GQL Query for the page.

See the bottom of this page for the query to view it in Test Craft.

The argument this query receives is uri and not slug.
This is similar page on main library website repo library-website-nuxt/pages/[...slug].vue at main · UCLALibrary/library-website-nuxt

There will also be an image but Axa wasn't sure which one she wanted yet.

#import "../gql/fragments/Image.gql"
#import "../gql/fragments/Media.gql"

query FTVAGeneralContent {
  entry(section: "ftvaGeneralContentPage") {
    id
    title
    uri
    formattedTitle
    text: ftvaHomepageDescription
    ...AllFtvaFpb
  }
}

Explore the GraphQL API

query FTVAGeneralContent {
  entry(section: "ftvaGeneralContentPage") {
    id
    title
    uri
    formattedTitle
    text: ftvaHomepageDescription
    ...AllFtvaFpb
  }
}

fragment AllFtvaFpb on ElementInterface {
  blocks: allFtvaFpb {
    id
    typeHandle
    
    ... on allFpb_associatedTopicCards_BlockType {
        ...BlockAssociatedTopicCardsFragment
    }
    ... on allFtvaFpb_callToAction_BlockType {
      ...BlockCallToActionFragment
    }
    ... on allFtvaFpb_contactInfo_BlockType {
      ...BlockContactInfoFragment
    }
    ... on allFtvaFpb_form_BlockType {
      ...BlockFormFragment
    }
    ... on allFtvaFpb_horizontalDivider_BlockType {
      ...BlockHorizontalDividerFragment
    }
    ... on allFtvaFpb_infoBlock_BlockType {
      ...BlockInfoFragment
    }
    ... on allFtvaFpb_impactNumberCards_BlockType {
      ...BlockImpactNumberCardsFragment
    }
    ... on allFtvaFpb_mediaGallery_BlockType {
      ...BlockMediaGalleryFragment
    }
    ... on allFtvaFpb_mediaWithText_BlockType {
      ...BlockMediaWithTextFragment
    }
    ... on allFtvaFpb_pullQuote_BlockType {
      ...BlockPullQuoteFragment
    }
    ... on allFtvaFpb_richText_BlockType {
      ...BlockRichTextFragment
    }
    ... on allFtvaFpb_simpleCards_BlockType {
      ...BlockSimpleCardsFragment
    }
  }
}

fragment BlockAssociatedTopicCardsFragment on ElementInterface {
    id
    typeHandle
    sectionTitle: titleGeneral
    sectionSummary: summary
    associatedTopicsFlexiblePageBlock {
        ... on associatedTopicsFlexiblePageBlock_associatedTopics_BlockType {
            id
            topics {
                title
                typeHandle
                externalResourceUrl
                uri
                text: summary
                uri
                iconName: illustrationsResourcesAndServices
            }
        }
    }
}

fragment BlockCallToActionFragment on ElementInterface {
  id
  typeHandle
  callToAction {
    ... on callToAction_callToAction_BlockType {
      id
      titleCta
      summary
      icon
      buttonText
      buttonUrl: buttonLink
      backgroundColor
    }
  }
}

fragment BlockContactInfoFragment on ElementInterface {
  id
  typeHandle
  contactInfo {
    ... on contactInfo_contactInfo_BlockType {
      id
      title
    }
  }
}

fragment BlockFormFragment on ElementInterface {
  id
  form
  typeHandle
  sectionTitle: titleGeneral
  sectionSummary: summary
}

fragment BlockHorizontalDividerFragment on ElementInterface {
  id
  typeHandle
  horizontalDivider
}

fragment BlockInfoFragment on ElementInterface {
    id
    typeHandle
    infoBlock {
      ... on infoBlock_infoBlock_BlockType {
        icon
        text
      }
    }
}

fragment BlockImpactNumberCardsFragment on ElementInterface {
  id
  typehandle
  sectionSummary: summary
  sectionTitle: titleGeneral
  impactNumberCards {
    ... on impactNumberCards_impactNumberCard_BlockType {
      id
      title: titleGeneral
      text: description
      impactNumber
    }
  }
}

fragment BlockMediaGalleryFragment on ElementInterface {
  dataId: id
  sectionTitle: titleGeneral
  sectionSummary: summary
  mediaGallery {
    dataId: id
    captionTitle: captionHeading
    captionText: caption
    altText
    sortOrder
    ... on mediaGallery_image_BlockType {
      item: imageFile {
        ...MediaAsset
      }
    }
    ... on mediaGallery_audio_BlockType {
      item: audioFile {
        ...MediaAsset
      }
      embedCode: audioEmbedCode
      coverImage {
        ...MediaAsset
      }
    }
    ... on mediaGallery_video_BlockType {
      item: videoFile {
        ...MediaAsset
      }
      embedCode: embedCode
      coverImage {
        ...MediaAsset
      }
    }
  }
}

fragment BlockMediaWithTextFragment on ElementInterface {
  dataId: id
  typeHandle
  sectionTitle: titleGeneral
  sectionSummary: summary
  mediaWithText {
    ... on mediaWithText_mediaEmbed_BlockType {
      titleLink: titleEmbed
      description
      coverImage {
        ...MediaAsset
      }
      buttonText
      buttonUrl
      embedCode
      typeMedia
    }
    ... on mediaWithText_mediaUpload_BlockType {
      titleUpload
      description
      buttonText
      buttonUrl
      coverImage {
        ...MediaAsset
      }
      item: upload {
        ...MediaAsset
      }
      typeMedia
    }
  }
}

fragment BlockPullQuoteFragment on ElementInterface {
  id
  typeHandle
  pullQuote {
    ... on pullQuote_pullQuote_BlockType {
      text
      attribution
    }
  }
}

fragment BlockRichTextFragment on ElementInterface {
  richText
  typeHandle
  sectionTitle: titleGeneral
}

fragment BlockSimpleCardsFragment on ElementInterface {
  id
  typeHandle
  sectionTitle: titleGeneral
  sectionSummary: summary
  cards: simpleCards {
    ... on simpleCards_internalServiceOrResource_BlockType {
      id
      typeHandle
      contentLink {
        id
        uri
        slug
        title
        summary
        externalResourceUrl
      }
    }
    ... on simpleCards_externalServiceOrResource_BlockType {
      id
      typeHandle
      title: titleGeneral
      summary
      externalLink
    }
  }
}

fragment MediaAsset on AssetInterface {
  dataId: id
  src: url(transform: "fullscreen")
  srcset(sizes: ["375", "960", "1280", "1920", "2560"])
  height(transform: "fullscreen")
  width(transform: "fullscreen")
  title
  focalPoint
  kind
  type: mimeType
  alt: altText
}