feat: APPS 3108 Add Article Listing GQL query (#95)

* wip: add gql query for page data * wip: load placeholder page data, add useHead * Update article queries with listing image field --------- Co-authored-by: tinuola <[email protected]>
UCLALibrary · Jan 15, 2025 · 75ebf88 · 75ebf88 · github-actions · Jan 15, 2025
1 parent 1b8b6bb
commit 75ebf88
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 16 deletions.
diff --git a/gql/queries/FTVAArticleDetail.gql b/gql/queries/FTVAArticleDetail.gql
@@ -11,6 +11,10 @@ query FTVAArticleDetail($slug: [String!]) {
     title
     uri
 
+    ftvaImage {
+      ...Image
+    }
+
     imageCarousel {
       ... on imageCarousel_imageCarousel_BlockType {
         image {

diff --git a/gql/queries/FTVAArticleList.gql b/gql/queries/FTVAArticleList.gql
@@ -1,9 +1,32 @@
-query FTVAArticleList {
-  entries(section: ["ftvaArticle"], orderBy: "postDate") {
+#import "../gql/fragments/Image.gql"
+
+query FTVAArticleList($slug: [String!]) {
+  entry(section: ["ftvaListingArticles"], slug: $slug) {
+    id
+    typeHandle
+    sectionHandle
+    title: titleGeneral
+    summary
+    ftvaFeaturedArticles {
+      title
+      postDate
+      ftvaHomepageDescription
+      uri
+      ftvaImage {
+        ...Image
+      }
+    }
+  }
+  entries(section: ["ftvaArticle"], orderBy: "postDate DESC") {
     typeHandle
     id
     title
-    to: slug
-    text: summary
+    postDate
+    ftvaHomepageDescription
+    uri
+    ftvaImage {
+      ...Image
+    }
   }
 }
+
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -8,6 +8,9 @@ import _get from 'lodash/get'
 // GQL
 import FTVAArticleList from '../gql/queries/FTVAArticleList.gql'
 
+// COMPOSABLE
+import { useContentIndexer } from '~/composables/useContentIndexer'
+
 const { $graphql } = useNuxtApp()
 
 const { data, error } = await useAsyncData('article-list', async () => {
@@ -30,24 +33,43 @@ if (!data.value.entries) {
   })
 }
 
-const page = ref(_get(data.value, 'entries', {}))
-
-// const recent = ref(_get(data.value, 'entries[0]', {}))
-
-// const people = ref(_get(data.value, 'entries[0]', {}))
+// This is creating an index of the content for ES search
+if (data.value.entry && 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.entry, route.params.slug)
+    // console.log('Article indexed successfully during static build')
+  } catch (error) {
+    console.error('FAILED TO INDEX ARTICLES during static build:', error)
+  }
+}
 
-// const interviews = ref(_get(data.value, 'entries[0]', {}))
+const page = ref(_get(data.value, 'entry', {}))
+const featuredArticles = page.value.ftvaFeaturedArticles
+const articleList = ref(_get(data.value, 'entries', {}))
+console.log(data.value)
 
-// const preservation_restoration = ref(_get(data.value, 'entries[0]', {}))
+useHead({
+  title: page.value ? page.value.title : '... loading',
+  meta: [
+    {
+      hid: 'description',
+      name: 'description',
+      content: removeTags(page.value.summary)
+    }
+  ]
+})
 </script>
 
 <template>
   <div
     class="page page-article-list"
     style="padding: 25px 100px;"
   >
-    <section-wrapper section-title="Recent">
-      <div
+    <section-wrapper section-title="Archive Blog">
+      <!--<div
         v-for="article in data.entries"
         :key="article?.id"
       >
@@ -56,10 +78,15 @@ const page = ref(_get(data.value, 'entries', {}))
         </NuxtLink>
 
         <divider-general />
-      </div>
+      </div>-->
+
+      <h3>Featured Articles</h3>
+      <pre>{{ featuredArticles }}</pre>
+
+      <divider-general />
 
-      <h3>PAGE DATA</h3>
-      <pre> {{ page }}</pre>
+      <h3>Article List (Truncated)</h3>
+      <pre> {{ articleList.slice(0, 15) }}</pre>
     </section-wrapper>
   </div>
 </template>