feat: APPS-3023 Create composable useContentIndexer to index craft data used on all routes for FTVA

composables/useContentIndexer.js

@@ -0,0 +1,85 @@
+export function useContentIndexer() {
+  const esIndex = useRuntimeConfig().public.esTempIndex
+  const esURL = useRuntimeConfig().public.esURL
+  const esReadKey = useRuntimeConfig().public.esReadKey
+  const esWriteKey = useRuntimeConfig().esWriteKey
+
+  async function indexContent(data, slug) {
+    try {
+      if (data && slug && esIndex) {
+        /* console.log(
+                "this is the elasticsearch plugin: " + JSON.stringify(data)
+            ) */
+        // console.log(`Requesting URL: ${esURL}/${esIndex}/_doc/${slug}`)
+        const docExists = await fetch(
+                `${esURL}/${esIndex}/_doc/${slug}`,
+                {
+                  headers: {
+                    Authorization: `ApiKey ${esReadKey}`,
+                  },
+                }
+        )
+
+        const body = await docExists.text()
+        const docExistsResponseValue = JSON.parse(body)
+        // console.log('Existing data in ES', docExistsResponseValue)
+
+        if (docExistsResponseValue && docExistsResponseValue._source) {
+          // console.log('GET-RESPONSE: ' + slug)
+          const updateUrl = `${esURL}/${esIndex}/_update/${slug}`
+          // console.log('ES update url', updateUrl)
+          const postBody = {
+            doc: data
+          }
+          // console.log('postBody', JSON.stringify(postBody))
+          const updateResponse = await fetch(
+                    `${esURL}/${esIndex}/_update/${slug}`,
+                    {
+                      headers: {
+                        Authorization: `ApiKey ${esWriteKey}`,
+                        'Content-Type': 'application/json',
+                      },
+                      method: 'POST',
+                      body: JSON.stringify(postBody),
+                    }
+          )
+          // console.log('Update document in ES', updateResponse)
+          const updateJson = await updateResponse.text()
+          console.log('Update in ES', updateJson)
+        } else {
+          const response = await fetch(
+                    `${esURL}/${esIndex}/_doc/${slug}`,
+                    {
+                      headers: {
+                        Authorization: `ApiKey ${esWriteKey}`,
+                        'Content-Type': 'application/json',
+                      },
+                      method: 'POST',
+                      body: JSON.stringify(data),
+                    }
+          )
+
+          // console.log('Create a new document in ES:', await response.text())
+        }
+      } else {
+        console.warn('not indexing anything')
+      }
+    } catch (e) {
+      console.error('skip indexing if connection times out  during builds in the mean time: ' + e.message)
+      console.warn('skip indexing if connection times out  during builds in the mean time: ' + e.message)
+      throw new Error('Elastic Search Indexing failed ' + e) // TODO uncomment when cause is clear
+    }
+  }
+
+  return {
+    indexContent
+  }
+}
+
+// Checks the page slug
+// Calls ES (Elastic Search)
+//  Checks if the document exists in ES
+//   if the document already exists
+//    it overwrites/replaces it in the index
+//   if the document doesn't exist
+//    it adds it to the index

gql/queries/FTVAArticleDetail.gql

@@ -5,6 +5,7 @@ query FTVAArticleDetail($slug: [String!]) {
   ftvaArticle: entry(section: "ftvaArticle", slug: $slug)  {
     id
     typeHandle
+    sectionHandle
     postDate
     slug
     title

gql/queries/FTVACollectionDetail.gql

@@ -2,8 +2,9 @@
 
 query FTVACollectionDetail($slug: [String!]) {
   ftvaCollection: entry(section: "ftvaCollection", slug: $slug) {
+    id
     typeHandle
-    id 
+    sectionHandle
     imageCarousel {
       ... on imageCarousel_imageCarousel_BlockType {
         image {
@@ -15,7 +16,7 @@ query FTVACollectionDetail($slug: [String!]) {
     title
     sectionTitle
     ftvaCollectionType
-    richText 
+    richText
     videoEmbed
     viewAllSectionLink {
       ... on viewAllSectionLink_viewAllSection_BlockType {

gql/queries/FTVAEventDetail.gql

@@ -4,6 +4,7 @@ query FTVAEventDetail($slug: [String!]) {
   ftvaEvent: entry(section: "ftvaEvent", slug: $slug) {
     id
     typeHandle
+    sectionHandle
     slug
     uri
 

gql/queries/FTVAEventSeriesDetail.gql

@@ -10,6 +10,9 @@ query FTVAEventSeriesDetail ($slug: [String!]) {
         creditText
       }
     }
+    id
+    typeHandle
+    sectionHandle
     title
     guestSpeaker
     ftvaEventIntroduction

pages/blog/[slug].vue

@@ -8,10 +8,15 @@ import {
 
 // HELPERS
 import _get from 'lodash/get'
-import FTVAArticleDetail from '../gql/queries/FTVAArticleDetail.gql'
-import removeTags from '~/utils/removeTags'
 
 // GQL
+import FTVAArticleDetail from '../gql/queries/FTVAArticleDetail.gql'
+
+// COMPOSABLE
+import { useContentIndexer } from '~/composables/useContentIndexer'
+
+// UTILS
+import removeTags from '~/utils/removeTags'
 import socialList from '~/utils/socialList'
 
 const { $graphql } = useNuxtApp()
@@ -37,6 +42,19 @@ if (!data.value.ftvaArticle) {
   })
 }
 
+// This is creating an index of the main content (not related content)
+if (data.value.ftvaArticle && import.meta.prerender) {
+  try {
+    // Call the composable to use the indexing function
+    const { indexContent } = useContentIndexer()
+    // Index the article data using the composable during static build
+    await indexContent(data.value.ftvaArticle, route.params.slug)
+    // console.log('Article indexed successfully during static build')
+  } catch (error) {
+    console.error('FAILED TO INDEX ARTICLE during static build:', error)
+  }
+}
+
 const page = ref(_get(data.value, 'ftvaArticle', {}))
 const ftvaRecentPosts = ref(_get(data.value, 'ftvaRecentPosts', {}))
 
@@ -210,7 +228,10 @@ useHead({
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 // PAGE STYLES
 .page-article-detail {
   position: relative;

pages/collections/[slug].vue

@@ -6,10 +6,15 @@ import { BlockCallToAction, CardMeta, DividerWayFinder, NavBreadcrumb, Responsiv
 
 // HELPERS
 import _get from 'lodash/get'
-import FTVACollectionDetail from '../gql/queries/FTVACollectionDetail.gql'
-import removeTags from '~/utils/removeTags'
 
 // GQL
+import FTVACollectionDetail from '../gql/queries/FTVACollectionDetail.gql'
+
+// COMPOSABLE
+import { useContentIndexer } from '~/composables/useContentIndexer'
+
+// UTILS
+import removeTags from '~/utils/removeTags'
 import socialList from '~/utils/socialList'
 
 const { $graphql } = useNuxtApp()
@@ -35,6 +40,19 @@ if (!data.value.ftvaCollection) {
   })
 }
 
+// This is creating an index of the main content (not related content)
+if (data.value.ftvaCollection && import.meta.prerender) {
+  try {
+    // Call the composable to use the indexing function
+    const { indexContent } = useContentIndexer()
+    // Index the collection data using the composable during static build
+    await indexContent(data.value.ftvaCollection, route.params.slug)
+    // console.log('Collection indexed successfully during static build')
+  } catch (error) {
+    console.error('FAILED TO INDEX COLLECTION during static build:', error)
+  }
+}
+
 const page = ref(_get(data.value, 'ftvaCollection', {}))
 
 watch(data, (newVal, oldVal) => {
@@ -240,7 +258,11 @@ useHead({
     </SectionWrapper>
   </main>
 </template>
-<style lang="scss" scoped>
+
+<style
+  lang="scss"
+  scoped
+>
 .page-collection-detail {
   position: relative;
 

pages/events/[slug].vue

@@ -6,14 +6,20 @@ import { BlockEventDetail, BlockInfo, BlockTag, ButtonDropdown, CardMeta, Divide
 
 // HELPERS
 import _get from 'lodash/get'
-import removeTags from '../utils/removeTags'
 
 // GQL
 import FTVAEventDetail from '../gql/queries/FTVAEventDetail.gql'
 
+// COMPOSABLE
+import removeTags from '../utils/removeTags'
+import { useContentIndexer } from '~/composables/useContentIndexer'
+
+// UTILS
+
 const { $graphql } = useNuxtApp()
 
 const route = useRoute()
+
 // DATA
 const { data, error } = await useAsyncData(`events-detail-${route.params.slug}`, async () => {
   const data = await $graphql.default.request(FTVAEventDetail, { slug: route.params.slug })
@@ -33,6 +39,19 @@ if (!data.value.ftvaEvent) {
   })
 }
 
+// This is creating an index of the main content (not related content)
+if (data.value.ftvaEvent && import.meta.prerender) {
+  try {
+    // Call the composable to use the indexing function
+    const { indexContent } = useContentIndexer()
+    // Index the event data using the composable during static build
+    await indexContent(data.value.ftvaEvent, route.params.slug)
+    // console.log('Event indexed successfully during static build')
+  } catch (error) {
+    console.error('FAILED TO INDEX EVENT during static build:', error)
+  }
+}
+
 const page = ref(_get(data.value, 'ftvaEvent', {}))
 const series = ref(_get(data.value, 'ftvaEventSeries', {}))
 
@@ -252,7 +271,10 @@ useHead({
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 // PAGE STYLES
 .page-event-detail {
   position: relative;

pages/series/[slug].vue

@@ -6,10 +6,13 @@ import { BlockCardThreeColumn, BlockEventDetail, BlockInfo, BlockTag, CardMeta,
 
 // HELPERS
 import _get from 'lodash/get'
-import FTVAEventSeriesDetail from '../gql/queries/FTVAEventSeriesDetail.gql'
-import removeTags from '~/utils/removeTags'
 
 // GQL
+import FTVAEventSeriesDetail from '../gql/queries/FTVAEventSeriesDetail.gql'
+
+// COMPOSABLE
+import { useContentIndexer } from '~/composables/useContentIndexer'
+import removeTags from '~/utils/removeTags'
 
 const { $graphql } = useNuxtApp()
 
@@ -34,6 +37,19 @@ if (!data.value.ftvaEventSeries) {
   })
 }
 
+// This is creating an index of the main content (not related content)
+if (data.value.ftvaEventSeries && import.meta.prerender) {
+  try {
+    // Call the composable to use the indexing function
+    const { indexContent } = useContentIndexer()
+    // Index the event series data using the composable during static build
+    await indexContent(data.value.ftvaEventSeries, route.params.slug)
+    // console.log('Event series indexed successfully during static build')
+  } catch (error) {
+    console.error('FAILED TO INDEX EVENT SERIES during static build:', error)
+  }
+}
+
 const page = ref(_get(data.value, 'ftvaEventSeries', {}))
 const upcomingEvents = ref(_get(data.value, 'upcomingEvents', {}))
 const pastEvents = ref(_get(data.value, 'pastEvents', {}))
@@ -300,7 +316,10 @@ useHead({
   </main>
 </template>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 // GENERAL PAGE STYLES / DESKTOP
 .page-event-series-detail {
   position: relative;