feat: APPS-3139 Add GQL Query and Create catch all page [...slug].vue

gql/fragments/BlockAssociatedTopicCardsFragment.gql

@@ -1,20 +1,20 @@
 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
-            }
-        }
+  id
+  typeHandle
+  sectionTitle: titleGeneral
+  sectionSummary: summary
+  associatedTopicsFlexiblePageBlock {
+    ... on associatedTopicsFlexiblePageBlock_associatedTopics_BlockType {
+      id
+      topics {
+        title
+        typeHandle
+        externalResourceUrl
+        uri
+        text: summary
+        uri
+        iconName: illustrationsResourcesAndServices
+      }
     }
+  }
 }

gql/fragments/BlockInfoFragment.gql

@@ -0,0 +1,18 @@
+fragment BlockInfoFragment on ElementInterface {
+  id
+  typeHandle
+  infoBlock {
+    ... on infoBlock_infoBlock_BlockType {
+      typeHandle
+      icon
+      heading
+      text
+    }
+    ... on infoBlock_contactInfoBlock_BlockType {
+      typeHandle
+      email
+      phone
+      address
+    }
+  }
+}

gql/fragments/collections/AllFtvaFpb.gql

@@ -1,10 +1,9 @@
-#import "../gql/fragments/Image.gql"
-#import "../gql/fragments/MediaAsset.gql"
+#import "../gql/fragments/BlockAssociatedTopicCardsFragment.gql"
 #import "../gql/fragments/BlockCallToActionFragment.gql"
-#import "../gql/fragments/BlockContactInfoFragment.gql"
 #import "../gql/fragments/BlockFormFragment.gql"
 #import "../gql/fragments/BlockHorizontalDividerFragment.gql"
 #import "../gql/fragments/BlockImpactNumberCardsFragment.gql"
+#import "../gql/fragments/BlockInfoFragment.gql"
 #import "../gql/fragments/BlockMediaGalleryFragment.gql"
 #import "../gql/fragments/BlockMediaWithTextFragment.gql"
 #import "../gql/fragments/BlockPullQuoteFragment.gql"
@@ -16,12 +15,12 @@ fragment AllFtvaFpb on ElementInterface {
         id
         typeHandle
 
+        ... on allFtvaFpb_associatedTopics_BlockType {
+           ...BlockAssociatedTopicCardsFragment
+        }
         ... on allFtvaFpb_callToAction_BlockType {
             ...BlockCallToActionFragment
         }
-        ... on allFtvaFpb_contactInfo_BlockType {
-            ...BlockContactInfoFragment
-        }
         ... on allFtvaFpb_form_BlockType {
             ...BlockFormFragment
         }
@@ -31,6 +30,9 @@ fragment AllFtvaFpb on ElementInterface {
         ... on allFtvaFpb_impactNumberCards_BlockType {
             ...BlockImpactNumberCardsFragment
         }
+        ... on allFtvaFpb_infoBlock_BlockType {
+            ...BlockInfoFragment
+        }
         ... on allFtvaFpb_mediaGallery_BlockType {
             ...BlockMediaGalleryFragment
         }

gql/queries/FTVAGeneralContentDetail.gql

@@ -0,0 +1,28 @@
+#import "../gql/fragments/collections/AllFtvaFpb.gql"
+#import "../gql/fragments/Image.gql"
+
+query FTVAGeneralContent($slug: [String!]) {
+  entry(section: "ftvaGeneralContentPage", slug: $slug) {
+    ... on ftvaGeneralContentPage_generalContentPage_Entry {
+      id
+      uri
+      slug
+      title
+      formattedTitle
+      ftvaHomepageDescription
+      imageCarousel {
+      ...on imageCarousel_imageCarousel_BlockType {
+        image {
+          ...Image
+        }
+        creditText
+      }
+    }
+      ...AllFtvaFpb
+    }
+  }
+}
+
+# Because the generalcontent page uses ftva/ in the uri
+# to differentiate between the library and meap websites
+# the GQL query will need the slug instead of the uri

nuxt.config.ts

@@ -65,7 +65,7 @@ export default defineNuxtConfig({
         const postPages = await response.json()
         // console.log('All pages', JSON.stringify(postPages.data.entries))
         if (postPages && postPages.data && postPages.data.entries) {
-          const postWithoutPayloadRoutes = postPages.data.entries.filter(item => item.sectionHandle.includes('ftva')).map(entry => '/' + entry.uri)
+          const postWithoutPayloadRoutes = postPages.data.entries.filter(item => item.sectionHandle.includes('ftva')).map(entry => '/' + entry.uri.replace(/^ftva\//, ''))
           allRoutes.push(...postWithoutPayloadRoutes)
         }
 

pages/[...slug].vue

@@ -0,0 +1,189 @@
+<script setup>
+// COMPONENT RE-IMPORTS
+// TODO: remove when we have implemented component library as a module
+// https://nuxt.com/docs/guide/directory-structure/components#library-authors
+import {
+  TwoColLayoutWStickySideBar, NavBreadcrumb, ResponsiveImage, CardMeta, RichText, PageAnchor, FlexibleBlocks, SectionWrapper,
+} from 'ucla-library-website-components'
+
+import { onMounted, nextTick } from 'vue'
+
+// HELPERS
+import _get from 'lodash/get'
+
+// GQL
+import FTVA_GENERAL_CONTENT_DETAIL from '../gql/queries/FTVAGeneralContentDetail.gql'
+
+const { $graphql } = useNuxtApp()
+
+const route = useRoute()
+
+const path = route.path.replace(/^\/|\/$/g, '') // trim initial and/or final slashes
+
+// Because the generalcontent page uses ftva / in the uri
+// to differentiate between the library and meap websites
+// the GQL query will need the slug instead of the uri
+const { data, error } = await useAsyncData(`general-content-${path}`, async () => {
+  const data = await $graphql.default.request(FTVA_GENERAL_CONTENT_DETAIL, {
+    slug: path.substring(
+      path.lastIndexOf('/') + 1
+    ),
+  })
+  return data
+})
+
+if (error.value) {
+  throw createError({
+    ...error.value, statusMessage: 'Page not found.' + error.value, fatal: true
+  })
+}
+
+if (!data.value.entry) {
+  // console.log('no data')
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true
+  })
+}
+
+if (data.value.entry && import.meta.prerender) {
+  // Call the composable to use the indexing function
+  const { indexContent } = useContentIndexer()
+  await indexContent(data.value.entry, path.replaceAll('/', '--'))
+}
+
+const page = ref(_get(data.value, 'entry', {}))
+
+watch(data, (newVal, oldVal) => {
+  // eslint-disable-next-line no-console
+  console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
+  page.value = _get(newVal, 'entry', {})
+})
+
+const h2Array = ref([]) // anchor tags
+
+// Get data for Image or Carousel at top of page
+const parsedImage = computed(() => {
+  return page.value.imageCarousel
+})
+
+// Transform data for Carousel
+const parsedCarouselData = computed(() => {
+  // map image to item, map creditText to credit
+  return parsedImage.value.map((rawItem, index) => {
+    return {
+      item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
+      credit: rawItem?.creditText,
+    }
+  })
+})
+
+useHead({
+  title: page.value ? page.value.title : '... loading'
+})
+
+onMounted(() => {
+  if (import.meta.client) {
+    // Directly access headers assuming the DOM is ready
+    h2Array.value = getHeaders()
+  }
+})
+</script>
+
+<template lang="html">
+  <main
+    id="main"
+    class="page page-detail page-general-content"
+  >
+    <div class="one-column">
+      <NavBreadcrumb data-test="breadcrumb" />
+
+      <ResponsiveImage
+        v-if="parsedImage && parsedImage.length === 1 && parsedImage[0]?.image && parsedImage[0]?.image?.length === 1"
+        data-test="single-image"
+        :media="parsedImage[0]?.image[0]"
+        :aspect-ratio="43.103"
+      />
+
+      <div
+        v-else
+        class="lightbox-container"
+      >
+        <FlexibleMediaGalleryNewLightbox
+          data-test="image-carousel"
+          :items="parsedCarouselData"
+          inline="true"
+        >
+          <template #default="slotProps">
+            <BlockTag
+              data-test="credit-text"
+              :label="parsedCarouselData[slotProps.selectionIndex]?.creditText"
+            />
+          </template>
+        </FlexibleMediaGalleryNewLightbox>
+      </div>
+    </div>
+
+    <TwoColLayoutWStickySideBar
+      data-test="second-column"
+      class="two-column"
+    >
+      <template #primaryTop>
+        <div v-if="page.formattedTitle">
+          <h3 class="page-title">
+            <rich-text :rich-text-content="page.formattedTitle" />
+          </h3>
+        </div>
+
+        <div v-else>
+          <h3 class="page-title">
+            {{ page.title }}
+          </h3>
+        </div>
+      </template>
+
+      <template #primaryMid>
+        <FlexibleBlocks
+          class="flexible-content"
+          :blocks="page.blocks"
+        />
+      </template>
+
+      <template #sidebarTop>
+        <PageAnchor
+          v-if="h2Array.length >= 3"
+          :section-titles="h2Array"
+        />
+      </template>
+    </TwoColLayoutWStickySideBar>
+
+    <SectionWrapper section-title="HEADERS for the PageAnchors">
+      <code> {{ getHeaders() }}</code>
+    </SectionWrapper>
+
+    <SectionWrapper section-title="PAGE DATA">
+      <code>{{ page }}</code>
+    </SectionWrapper>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+.page-general-content {
+  position: relative;
+
+  .page-title {
+    display: block;
+
+    .translation {
+      display: block;
+    }
+
+    @include ftva-h2;
+    color: $heading-grey;
+    margin: 0 0 24px;
+  }
+}
+
+@import 'assets/styles/slug-pages.scss';
+</style>

pages/series/index.vue

@@ -301,7 +301,7 @@ watch(() => route.query,
         <SectionPagination
           v-if="
             totalPages
-            !== 1 && !isMobile"
+              !== 1 && !isMobile"
           class="pagination"
           :pages="totalPages"
           :initial-current-page="currentPage"

utils/getHeaders.js

@@ -0,0 +1,43 @@
+export default function getHeaders() {
+  if (typeof document === 'undefined') {
+    // eslint-disable-next-line no-console
+    console.warn('getHeaders() called on server-side. Skipping execution.')
+    return []
+  }
+
+  const elements = document.querySelectorAll('.section-title, .section-header2, .section-header3, section-header4')
+
+  if (!elements.length) {
+    // eslint-disable-next-line no-console
+    console.warn('No header elements found. getHeaders() is running too early.')
+    return []
+  }
+
+  const h2Array = []
+
+  elements.forEach((element) => {
+    if (element.textContent.trim() !== 'More Information') {
+      h2Array.push(element.textContent.trim())
+    }
+  })
+  // console.log('HEY HEY HEY HEADER ARRAY:', h2Array)
+  return h2Array
+}
+
+// This Function
+// Finds all elements with class name "section-header2" or "section-header3"
+// Loop through each section-header element and push it into the array
+// Excludes the section-header2 More Information which is a visually-hidden element above the divider-way-finder in the Flexible Block component
+
+// This Function along with the onMounted function on the page
+// Prevents getHeaders() from running during SSR (Server-Side Rendering).
+// Adds a setTimeout(500ms) delay to ensure DOM updates are finished.
+// Checks for document and .section-header elements before running querySelectorAll().
+
+// See the [...slug].vue page around line 70
+// onMounted(() => {
+//   if (import.meta.client) {
+//     // Directly access headers assuming the DOM is ready
+//     h2Array.value = getHeaders()
+//   }
+// })