From 49a352ca17a2f2d48e5e7c7329c4bab54236bc74 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Wed, 20 Nov 2024 13:17:30 -0500
Subject: [PATCH 1/8] Updated tools and resources, news and events, and Apps
 pages

---
 .../SubmitNewsSection.vue                     |  45 +--
 components/Paper/Paper.vue                    |   4 +-
 components/Resources/ResourcePage.vue         | 224 +++++------
 pages/apps/index.vue                          | 141 ++++---
 .../community-spotlight/index.vue             | 300 +++++++--------
 pages/news-and-events/events/index.vue        | 296 ++++++---------
 pages/news-and-events/index.vue               | 235 +++++-------
 pages/news-and-events/model.js                |   4 +
 pages/news-and-events/news/index.vue          | 354 ++++++++----------
 store/index.js                                | 124 ++++--
 10 files changed, 764 insertions(+), 963 deletions(-)

diff --git a/components/NewsEventsResourcesPage/SubmitNewsSection.vue b/components/NewsEventsResourcesPage/SubmitNewsSection.vue
index 3a1b218c..014001a0 100644
--- a/components/NewsEventsResourcesPage/SubmitNewsSection.vue
+++ b/components/NewsEventsResourcesPage/SubmitNewsSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <paper
+  <Paper
     :text="parseMarkdown(searchPaperText)"
     :button-text="searchPaperNEButton"
     :button-link="{ name: 'contact-us', query: { type: 'news-event'} }"
@@ -7,29 +7,30 @@
   />
 </template>
 
-<script>
-import Paper from '@/components/Paper/Paper.vue'
-import marked from '@/mixins/marked/index'
+<script setup>
+import { useNuxtApp, useRuntimeConfig } from '#imports';
+import Paper from '@/components/Paper/Paper.vue';
+import { marked } from 'marked'
+import DOMPurify from 'isomorphic-dompurify'
 
-export default {
-  name: 'SubmitNewsSection',
+// Setup
+const config = useRuntimeConfig();
+const { $contentfulClient } = useNuxtApp();
 
-  mixins: [marked],
-
-  components: {
-    Paper
-  },
-
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient } = useNuxtApp()
-    const response = await $contentfulClient.getEntry(config.public.ctf_news_and_events_page_id)
-    const searchPaperNEButton = response.fields.searchPaperNeButton
-    const searchPaperText = response.fields.searchPaperText
-    return {
-      searchPaperNEButton,
-      searchPaperText
-    }
+// Fetch data
+const { data } = await useAsyncData('newsAndEventsPage', async () => {
+  const pageData = await $contentfulClient.getEntry(config.public.ctf_news_and_events_page_id);
+  return {
+    fields: pageData.fields || {},
   }
+});
+
+const searchPaperNEButton = computed(() => data.value?.fields.searchPaperNeButton || '')
+const searchPaperText = computed(() => data.value?.fields.searchPaperText || '')
+// Markdown parser with sanitization
+const parseMarkdown = (markdown = '', purifyOptions = {}) => {
+  purifyOptions = { ...purifyOptions, ADD_ATTR: ['target'] }
+  return DOMPurify.sanitize(marked(markdown), purifyOptions)
 }
+
 </script>
diff --git a/components/Paper/Paper.vue b/components/Paper/Paper.vue
index 109bc4ff..93a5d00b 100644
--- a/components/Paper/Paper.vue
+++ b/components/Paper/Paper.vue
@@ -10,12 +10,12 @@
           </div>
         </div>
       </div>
-      <NuxtLink v-if="buttonText != '' && buttonLinkExternal == ''" class="margin-top-auto" :to="buttonLink"
+      <nuxt-link v-if="buttonText != '' && buttonLinkExternal == ''" class="margin-top-auto" :to="buttonLink"
         :target="newTab ? '_blank' : '_self'">
         <el-button class="secondary">
           {{ buttonText }}
         </el-button>
-      </NuxtLink>
+      </nuxt-link>
       <a v-if="buttonText != '' && buttonLinkExternal != ''" class="margin-top-auto" :href="buttonLinkExternal"
         target="_blank">
         <el-button class="secondary">
diff --git a/components/Resources/ResourcePage.vue b/components/Resources/ResourcePage.vue
index cc5a1caf..ca6e0548 100644
--- a/components/Resources/ResourcePage.vue
+++ b/components/Resources/ResourcePage.vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="`Browse ${title}`" />
   </Head>
   <div class="page-data">
-    <breadcrumb :breadcrumb="breadcrumb" :title=title />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="title" />
     <div class="container">
       <h1 hidden>Search for tools and resources</h1>
       <div class="search-tabs__container">
@@ -19,7 +19,7 @@
           <li v-for="searchType in searchTypes" :key="searchType.label">
             <nuxt-link
               class="search-tabs__button"
-              :class="{ active: searchType.path == path }"
+              :class="{ active: searchType.path === path }"
               :to="{
                 path: searchType.path,
                 query: {
@@ -39,7 +39,7 @@
         <search-controls-contentful
           class="search-bar"
           placeholder="Enter search criteria"
-          :path=path
+          :path="path"
           showSearchText
         />
       </div>
@@ -67,16 +67,16 @@
               :lg='18'
             >
               <div class="search-heading mb-16">
-                <div class="label1" v-show="resources.items.length">
-                  {{ resources.total }} Results | Showing
+                <div class="label1" v-show="resources?.items?.length">
+                  {{ resources?.total }} Results | Showing
                   <client-only>
                     <pagination-menu
-                      :page-size="resources.limit"
+                      :page-size="resources?.limit"
                       @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
                 </div>
-                <span v-if="resources.items.length" class="label1">
+                <span v-if="resources?.items?.length" class="label1">
                   Sort
                   <client-only>
                     <sort-menu  
@@ -88,29 +88,29 @@
                 </span>
               </div>
               <div class="subpage">
-                <client-only><resources-search-results :table-data="resources.items" /></client-only>
+                <client-only><resources-search-results :table-data="resources?.items" /></client-only>
                 <alternative-search-results
                   ref="altSearchResults"
-                  :search-had-results="resources.items.length > 0"
+                  :search-had-results="resources?.items?.length > 0"
                   @vue:mounted="altResultsMounted"
                 />
               </div>
               <div class="search-heading">
-                <div class="label1" v-if="resources.items.length">
-                  {{ resources.total }} Results | Showing
+                <div class="label1" v-if="resources?.items?.length">
+                  {{ resources?.total }} Results | Showing
                   <client-only>
                     <pagination-menu
-                      :page-size="resources.limit"
+                      :page-size="resources?.limit"
                       @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
                 </div>
                 <client-only>
                   <pagination
-                    v-if="resources.limit < resources.total"
+                    v-if="resources?.limit < resources?.total"
                     :selected="curSearchPage"
-                    :page-size="resources.limit"
-                    :total-count="resources.total"
+                    :page-size="resources?.limit"
+                    :total-count="resources?.total"
                     @select-page="onPaginationPageChange"
                   />
                 </client-only>
@@ -126,149 +126,107 @@
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
-import { propOr } from 'ramda'
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useNuxtApp } from '#imports'
+import { useAsyncData } from '#app'
 import SearchControlsContentful from '@/components/SearchControlsContentful/SearchControlsContentful.vue'
 import SortMenu from '@/components/SortMenu/SortMenu.vue'
 import ResourcesSearchResults from '@/components/Resources/ResourcesSearchResults.vue'
 import ToolsAndResourcesFacetMenu from '@/components/FacetMenu/ToolsAndResourcesFacetMenu.vue'
 import AlternativeSearchResults from '@/components/AlternativeSearchResults/AlternativeSearchResultsResources.vue'
-import { fetchResources, searchTypes, sortOptions } from '@/pages/resources/utils'
 import SubmitToolSection from '@/components/Resources/SubmitToolSection.vue'
+import { fetchResources, searchTypes, sortOptions } from '@/pages/resources/utils'
 
-export default {
-  name: 'ResourcePage',
+const route = useRoute()
+const { $contentfulClient } = useNuxtApp()
+const searchType = searchTypes.find(searchType => searchType.path === route.path)
+const title = searchType.label
+const isTool = title === 'Tools'
 
-  components: {
-    SearchControlsContentful,
-    ResourcesSearchResults,
-    ToolsAndResourcesFacetMenu,
-    SortMenu,
-    SubmitToolSection,
-    AlternativeSearchResults
-  },
+const { data : resources } = await useAsyncData(
+  'resources',
+  () => {
+    return fetchResources(route.query.resourceType, route.query.selectedResourcesFundingIds, isTool, route.query.search, undefined, route.query.type, 10, 0)
+  }
+)
 
-  async setup() {
-    const route = useRoute()
-    const { $contentfulClient } = useNuxtApp()
-    const searchType = searchTypes.find(searchType => searchType.path == route.path)
-    const title = searchType.label
-    const isTool = title == 'Tools'
-    const resources = await fetchResources(undefined, undefined, isTool, route.query.search, undefined, undefined, 10, 0)
-    let resourcesFundingFacets = []
-    await $contentfulClient.getContentType('sparcPartners').then(contentType => {
-      contentType.fields.forEach((field) => {
+// Fetch funding facets using useAsyncData
+const { data: resourcesFundingFacets } = await useAsyncData(
+  'resources-funding-facets',
+  async () => {
+    const facetData = []
+    try {
+      const contentType = await $contentfulClient.getContentType('sparcPartners')
+      contentType.fields.forEach(field => {
         if (field.name === 'Program') {
           let fundingItems = field.items?.validations[0]['in']
-          let facetData = []
           fundingItems.forEach(itemLabel => {
             facetData.push({
               label: itemLabel,
               id: itemLabel,
             })
           })
-          resourcesFundingFacets = facetData
         }
       })
-    })
-    return {
-      resources: ref(resources),
-      title,
-      resourcesFundingFacets
+    } catch (e) {
+      console.error('Error fetching funding facets:', e)
     }
-  },
+    return facetData
+  }
+)
 
-  data() {
-    return {
-      selectedSortOption: sortOptions[0],
-      sortOptions,
-      searchTypes,
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'Tools & Resources',
-          to: {
-            name: 'tools'
-          }
-        }
-      ]
-    }
-  },
+// Data properties
+const altSearchResults = ref(null)
+const selectedSortOption = ref(sortOptions[0])
+const sortOptionsRef = ref(sortOptions)
+const breadcrumb = ref([
+  { label: 'Home', to: { name: 'index' } },
+  { label: 'Tools & Resources', to: { name: 'tools' } }
+])
 
-  watch: {
-    '$route.query': {
-      handler: async function () {
-        this.resources = await fetchResources(this.resourceType, this.fundingProgram, this.isTool, this.$route.query.search, this.sortOrder, this.type, 10, 0)
-        this.$refs.altSearchResults?.retrieveAltTotals()
-      },
-      immediate: true
-    }
-  },
+// Computed properties
+const curSearchPage = computed(() => resources.value.skip / resources.value.limit + 1)
 
-  computed: {
-    /**
-     * Compute the current page based off the limit and the offset
-     * @returns {Number}
-     */
-    curSearchPage: function() {
-      return this.resources.skip / this.resources.limit + 1
-    },
-    sortOrder: function() {
-      return propOr('-fields.name', 'sortOrder', this.selectedSortOption)
-    },
-    resourceType: function () {
-      return this.$route.query.resourceType || undefined
-    },
-    fundingProgram: function () {
-      return this.$route.query.selectedResourcesFundingIds || undefined
-    },
-    type: function() {
-      return this.$route.query.type || undefined
-    },
-    path() {
-      return this.$route.path
-    },
-    isTool: function () {
-      return this.title == 'Tools'
-    }
-  },
+const sortOrder = computed(() => {
+  return selectedSortOption.value ? selectedSortOption.value['sortOrder'] : '-fields.name'
+})
 
-  methods: {
-    /**
-     * Get more events for the new page
-     * @param {Number} page
-     */
-    async onPaginationPageChange(page) {
-      const { limit } = this.resources
-      const offset = (page - 1) * limit
-      const response = await fetchResources(this.resourceType, this.fundingProgram, this.isTool, this.$route.query.search, this.sortOrder, this.type, limit, offset)
-      this.resources = response
-    },
-    /**
-     * Update limit based on pagination menu selection and get more events
-     * @param {Number} limit
-     */
-    async onPaginationLimitChange(limit) {
-      const newLimit = limit === 'View All' ? this.resources.total : limit
-      const response = await fetchResources(this.resourceType, this.fundingProgram, this.isTool, this.$route.query.search, this.sortOrder, this.type, newLimit, 0)
-      this.resources = response
-    },
-    async onSortOptionChange(option) {
-      this.selectedSortOption = option
-      const response = await fetchResources(this.resourceType, this.fundingProgram, this.isTool, this.$route.query.search, this.sortOrder, this.type, this.resources.limit, 0)
-      this.resources = response
-    },
-    altResultsMounted() {
-      this.$refs.altSearchResults?.retrieveAltTotals()
-    }
-  }
+const resourceType = computed(() => route.query.resourceType || undefined)
+const fundingProgram = computed(() => route.query.selectedResourcesFundingIds || undefined)
+const type = computed(() => route.query.type || undefined)
+const path = computed(() => route.path)
+const isToolComputed = computed(() => title === 'Tools')
+
+// Pagination handlers
+const onPaginationPageChange = async (page) => {
+  const { limit } = resources.value
+  const offset = (page - 1) * limit
+  const response = await fetchResources(resourceType.value, fundingProgram.value, isToolComputed.value, route.query.search, sortOrder.value, type.value, limit, offset)
+  resources.value = response
 }
+
+const onPaginationLimitChange = async (limit) => {
+  const newLimit = limit === 'View All' ? resources.value.total : limit
+  const response = await fetchResources(resourceType.value, fundingProgram.value, isToolComputed.value, route.query.search, sortOrder.value, type.value, newLimit, 0)
+  resources.value = response
+}
+
+const onSortOptionChange = async (option) => {
+  selectedSortOption.value = option
+  const response = await fetchResources(resourceType.value, fundingProgram.value, isToolComputed.value, route.query.search, sortOrder.value, type.value, resources.value.limit, 0)
+  resources.value = response
+}
+
+const altResultsMounted = () => {
+  altSearchResults.value?.retrieveAltTotals()
+}
+
+// Watch for route query changes
+watch(() => route.query, async () => {
+  resources.value = await fetchResources(resourceType.value, fundingProgram.value, isToolComputed.value, route.query.search, sortOrder.value, type.value, 10, 0)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index d3dc4215..aa8eb7e9 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -1,40 +1,63 @@
 <template>
   <Head>
-    <Title>{{ fields.title }}</Title>
-    <Meta name="og:title" hid="og:title" :content="fields.title" />
-    <Meta name="twitter:title" :content="fields.title" />
-    <Meta name="description" hid="description" :content="fields.description" />
-    <Meta name="og:description" hid="og:description" :content="fields.description" />
-    <Meta name="twitter:description" :content="fields.description" />
+    <Title>{{ fields?.title }}</Title>
+    <Meta name="og:title" hid="og:title" :content="fields?.title" />
+    <Meta name="twitter:title" :content="fields?.title" />
+    <Meta name="description" hid="description" :content="fields?.description" />
+    <Meta name="og:description" hid="og:description" :content="fields?.description" />
+    <Meta name="twitter:description" :content="fields?.description" />
   </Head>
   <div>
-    <breadcrumb :breadcrumb="breadcrumb" :title="title" />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="title" />
     <page-hero class="py-24">
       <h1>{{ title }}</h1>
-      <p>
-        {{ description }}
-      </p>
+      <p>{{ description }}</p>
     </page-hero>
-    <portal-features :features="appEntries" :title="appsSectionTitle" :icon-is-top-element="false" :max-per-row="3" />
-    <div class="container" :style="'text-align: center; margin-top: 1rem; margin-bottom: 2rem;'" v-html="parseMarkdown(footer)" />
+    <portal-features
+      :features="appEntries"
+      :title="appsSectionTitle"
+      :icon-is-top-element="false"
+      :max-per-row="3"
+    />
+    <div
+      class="container"
+      :style="'text-align: center; margin-top: 1rem; margin-bottom: 2rem;'"
+      v-html="parseMarkdown(footer)"
+    />
   </div>
 </template>
 
-<script>
-import PortalFeatures from '@/components/PortalFeatures/PortalFeatures.vue'
-import MarkedMixin from '@/mixins/marked'
-import { pathOr, propOr } from 'ramda'
+<script setup>
+import { computed } from 'vue'
+import { pathOr } from 'ramda'
+import { marked } from 'marked'
+import DOMPurify from 'isomorphic-dompurify'
+import { useAsyncData, useRuntimeConfig } from '#app'
 
+// Breadcrumb structure
+const breadcrumb = [
+  {
+    to: { name: 'index' },
+    label: 'Home',
+  },
+]
+
+// Markdown parser with sanitization
+const parseMarkdown = (markdown = '', purifyOptions = {}) => {
+  purifyOptions = { ...purifyOptions, ADD_ATTR: ['target'] }
+  return DOMPurify.sanitize(marked(markdown), purifyOptions)
+}
+
+// Function to construct portal feature entries
 const constructPortalFeatureEntries = (apps) => {
-  if (apps == undefined) {
-    return []
-  }
-  let entries = []
-  apps.forEach(app => {
-    const buttonLink = app.fields.requiresDetailsPage ? `/resources/${app.sys.id}` : pathOr('', ['fields', 'url'], app)
-    const appEntry = {
+  if (!apps) return []
+  return apps.map((app) => {
+    const buttonLink = app.fields.requiresDetailsPage
+      ? `/resources/${app.sys.id}`
+      : pathOr('', ['fields', 'url'], app)
+    return {
       fields: {
-        buttonLink: buttonLink,
+        buttonLink,
         buttonText: pathOr('', ['fields', 'buttonText'], app),
         description: pathOr('', ['fields', 'description'], app),
         title: pathOr('', ['fields', 'name'], app),
@@ -45,67 +68,31 @@ const constructPortalFeatureEntries = (apps) => {
             },
           },
         },
-      }
+      },
     }
-    entries.push(
-      appEntry
-    )
   })
-  return entries
 }
 
-export default {
-  name: 'AppsPage',
-  components: {
-    PortalFeatures
-  },
-  mixins: [MarkedMixin],
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient } = useNuxtApp()
-    try {
-      const appPage = await $contentfulClient.getEntry(config.public.ctf_apps_page_id)
-      const appEntries = constructPortalFeatureEntries(appPage.fields?.apps)
-      return {
-        appEntries,
-        fields: appPage.fields,
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  },
-
-  data() {
-    return {
-      breadcrumb: [
-        {
-          to: {
-            name: 'index'
-          },
-          label: 'Home'
-        }
-      ]
-    }
-  },
+const config = useRuntimeConfig()
 
-  computed: {
-    title: function () {
-      return this.fields.title
-    },
-    description: function () {
-      return this.fields.description
-    },
-    appsSectionTitle: function () {
-      return propOr('', 'appsSectionTitle', this.fields)
-    },
-    footer: function () {
-      return propOr('', 'footerText', this.fields)
-    }
+const { data: appData } = await useAsyncData('apps-page-data', async () => {
+  const { $contentfulClient } = useNuxtApp()
+  const appPage = await $contentfulClient.getEntry(config.public.ctf_apps_page_id)
+  return {
+    fields: appPage.fields || {},
+    appEntries: constructPortalFeatureEntries(appPage.fields?.apps),
   }
-}
+})
+
+// Reactive properties
+const fields = computed(() => appData.value.fields || {})
+const appEntries = computed(() => appData.value.appEntries || [])
+const title = computed(() => fields.value?.title || '')
+const description = computed(() => fields.value?.description || '')
+const appsSectionTitle = computed(() => fields.value?.appsSectionTitle || '')
+const footer = computed(() => fields.value?.footerText || '')
 </script>
 
 <style lang="scss" scoped>
 @import 'sparc-design-system-components-2/src/assets/_variables.scss';
-
 </style>
diff --git a/pages/news-and-events/community-spotlight/index.vue b/pages/news-and-events/community-spotlight/index.vue
index 86407021..050d036d 100644
--- a/pages/news-and-events/community-spotlight/index.vue
+++ b/pages/news-and-events/community-spotlight/index.vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="`Browse ${searchTypes[2].label}`" />
   </Head>
   <div class="page-data">
-    <breadcrumb :breadcrumb="breadcrumb" title="Community Spotlight" />
+    <Breadcrumb :breadcrumb="breadcrumb" title="Community Spotlight" />
     <div class="container">
       <h1 hidden>Search for community spotlights</h1>
       <div class="search-tabs__container">
@@ -69,11 +69,11 @@
               :lg='18'
             >
               <div class="search-heading mt-32 mb-16">
-                <div class="label1" v-show="communitySpotlightItems.items.length">
-                  {{ communitySpotlightItems.total }} Results | Showing
+                <div class="label1" v-show="communitySpotlightItems?.items?.length">
+                  {{ communitySpotlightItems?.total }} Results | Showing
                   <client-only>
                     <pagination-menu
-                      :page-size="communitySpotlightItems.limit"
+                      :page-size="communitySpotlightItems?.limit"
                       @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
@@ -90,10 +90,10 @@
                 </span>
               </div>
               <div class="subpage">
-                <template v-if="communitySpotlightItems.items.length > 0">
+                <template v-if="communitySpotlightItems?.items?.length > 0">
                   <client-only>
                     <community-spotlight-item
-                      v-for="(item, index) in communitySpotlightItems.items"
+                      v-for="(item, index) in communitySpotlightItems?.items"
                       :key="index"
                       :story="getLinkedItems(item)"
                     />
@@ -108,27 +108,27 @@
                 <client-only>
                   <alternative-search-results-news
                     ref="altSearchResults"
-                    :search-had-results="communitySpotlightItems.items.length > 0"
+                    :search-had-results="communitySpotlightItems?.items?.length > 0"
                     @vue:mounted="altResultsMounted"
                   />
                 </client-only>
               </div>
               <div class="search-heading">
-                <div class="label1" v-if="communitySpotlightItems.items.length">
-                  {{ communitySpotlightItems.total }} Results | Showing
+                <div class="label1" v-if="communitySpotlightItems?.items?.length">
+                  {{ communitySpotlightItems?.total }} Results | Showing
                   <client-only>
                     <pagination-menu
-                      :page-size="communitySpotlightItems.limit"
+                      :page-size="communitySpotlightItems?.limit"
                       @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
                 </div>
                 <client-only>
                   <pagination
-                    v-if="communitySpotlightItems.limit < communitySpotlightItems.total"
+                    v-if="communitySpotlightItems?.limit < communitySpotlightItems?.total"
                     :selected="curSearchPage"
-                    :page-size="communitySpotlightItems.limit"
-                    :total-count="communitySpotlightItems.total"
+                    :page-size="communitySpotlightItems?.limit"
+                    :total-count="communitySpotlightItems?.total"
                     @select-page="onPaginationPageChange"
                   />
                 </client-only>
@@ -144,8 +144,9 @@
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useAsyncData } from '#app'
 import { pathOr, propOr } from 'ramda'
 import CommunitySpotlightItem from '@/components/CommunitySpotlight/CommunitySpotlightItem.vue'
 import CommunitySpotlightFacetMenu from '@/components/FacetMenu/CommunitySpotlightFacetMenu.vue'
@@ -153,40 +154,32 @@ import SearchControlsContentful from '@/components/SearchControlsContentful/Sear
 import SortMenu from '@/components/SortMenu/SortMenu.vue'
 import SubmitCommunitySection from '~/components/NewsEventsResourcesPage/SubmitCommunitySection.vue'
 import AlternativeSearchResultsNews from '~/components/AlternativeSearchResults/AlternativeSearchResultsNews.vue'
-
 import { fetchCommunitySpotlightItems } from '../model.js'
 
+
 const searchTypes = [
-  {
-    label: 'News',
-    path: 'news'
-  },
-  {
-    label: 'Events',
-    path: 'events'
-  },
-  {
-    label: 'Community Spotlight',
-    path: 'community-spotlight'
-  }
+  { label: 'News', path: 'news' },
+  { label: 'Events', path: 'events' },
+  { label: 'Community Spotlight', path: 'community-spotlight' }
 ]
 
 const sortOptions = [
-  {
-    label: 'Latest',
-    id: 'latest',
-    sortOrder: '-fields.publishedDate'
-  },
-  {
-    label: 'A-Z',
-    id: 'alphabatical',
-    sortOrder: 'fields.title'
-  },
-  {
-    label: 'Z-A',
-    id: 'reverseAlphabatical',
-    sortOrder: '-fields.title'
-  },
+  { label: 'Latest', id: 'latest', sortOrder: '-fields.publishedDate' },
+  { label: 'A-Z', id: 'alphabatical', sortOrder: 'fields.title' },
+  { label: 'Z-A', id: 'reverseAlphabatical', sortOrder: '-fields.title' }
+]
+
+const route = useRoute()
+const { $contentfulClient } = useNuxtApp()
+
+const altSearchResults = ref(null)
+const communitySpotlightFacetMenu = ref(null)
+
+const selectedSortOption = ref(sortOptions[0])
+
+const breadcrumb = [
+  { label: 'Home', to: { name: 'index' } },
+  { label: 'News & Events', to: { name: 'news-and-events' } }
 ]
 
 const SPOTLIGHT_TYPE_MAPPING = [
@@ -200,144 +193,103 @@ const SPOTLIGHT_TYPE_MAPPING = [
   }
 ]
 
-export default {
-  name: 'CommunitySpotlightPage',
+const selectedAnatomicalStructures = computed(() => {
+  return route.query.selectedAnatomicalStructures?.split(",") || undefined
+})
 
-  components: {
-    CommunitySpotlightItem,
-    CommunitySpotlightFacetMenu,
-    SearchControlsContentful,
-    SortMenu,
-    SubmitCommunitySection,
-    AlternativeSearchResultsNews
-  },
+const spotlightTypes = computed(() => {
+  return route.query.selectedSpotlightTypes || undefined
+})
 
-  // In order to allow for sorting or fireside chats and success stories we needed
-  // to restructure the content types in contentful to share a common model since you cannot query on 
-  // multiple content types while applying a field filter or order in contentful api as outlined here:
-  // https://www.contentfulcommunity.com/t/how-to-query-on-multiple-content-types/473
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    const route = useRoute()
-    const communitySpotlightItems = await fetchCommunitySpotlightItems($contentfulClient, route.query.search, undefined, undefined, undefined, 10, 0)
-    // get all the available pre-defined values for creating the facet menu
-    let anatomicalStructures = {}
-    await $contentfulClient.getContentType('communitySpotlight').then(contentType => {
-      contentType.fields.forEach((field) => {
-        if (field.id === 'anatomicalStructure') {
-          let structures = field.items?.validations[0]['in']
-          let facetData = []
-          structures.forEach(itemLabel => {
-            facetData.push({
-              label: itemLabel,
-              id: itemLabel,
-            })
+const sortOrder = computed(() => {
+  return propOr('-fields.startDate', 'sortOrder', selectedSortOption.value)
+})
+
+const curSearchPage = computed(() => {
+  return communitySpotlightItems.value?.skip / communitySpotlightItems.value?.limit + 1
+})
+
+const { data: communitySpotlightItems } = useAsyncData('communitySpotlightItems', () => {
+  return fetchCommunitySpotlightItems($contentfulClient, route.query.search, spotlightTypes.value, selectedAnatomicalStructures.value, sortOrder.value, 10, 0)
+})
+
+const { data: anatomicalStructures } = useAsyncData('anatomicalStructures', async () => {
+  let anatomicalStructures = {}
+  await $contentfulClient.getContentType('communitySpotlight').then(contentType => {
+    contentType.fields.forEach((field) => {
+      if (field.id === 'anatomicalStructure') {
+        let structures = field.items?.validations[0]['in']
+        let facetData = []
+        structures.forEach(itemLabel => {
+          facetData.push({
+            label: itemLabel,
+            id: itemLabel,
           })
-          anatomicalStructures = {
-            label: 'Focus',
-            id: 'spotlightAnatomicalStructure',
-            data: facetData
-          }
+        })
+        anatomicalStructures = {
+          label: 'Focus',
+          id: 'spotlightAnatomicalStructure',
+          data: facetData
         }
-      })
+      }
     })
+  })
+  return anatomicalStructures
+})
 
-    return {
-      communitySpotlightItems: ref(communitySpotlightItems),
-      anatomicalStructures
-    }
-  },
-  data() {
-    return {
-      searchTypes,
-      selectedSortOption: sortOptions[0],
-      sortOptions,
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'News & Events',
-          to: {
-            name: 'news-and-events'
-          }
-        }
-      ]
-    }
-  },
-  watch: {
-    '$route.query': {
-      handler: async function() {
-        const { $contentfulClient } = useNuxtApp()
-        this.communitySpotlightItems = await fetchCommunitySpotlightItems($contentfulClient, this.$route.query.search, this.spotlightTypes, this.selectedAnatomicalStructures, this.sortOrder, 10, 0)
-        this.$refs.altSearchResults?.retrieveAltTotals()
-      },
-      immediate: true
-    },
-  },
-  computed: {
-    spotlightTypes: function() {
-      return this.$route.query.selectedSpotlightTypes || undefined
-    },
-    selectedAnatomicalStructures: function() {
-      return this.$route.query.selectedAnatomicalStructures?.split(",") || undefined
-    },
-    sortOrder: function() {
-      return propOr('-fields.startDate', 'sortOrder', this.selectedSortOption)
-    },
-    curSearchPage: function() {
-      return this.communitySpotlightItems.skip / this.communitySpotlightItems.limit + 1
-    },
-  },
-  methods: {
-    /**
-     * Get more events for the new page
-     * @param {Number} page
-     */
-    async onPaginationPageChange(page) {
-      const { $contentfulClient } = useNuxtApp()
-      const { limit } = this.communitySpotlightItems
-      const offset = (page - 1) * limit
-      const response = await fetchCommunitySpotlightItems($contentfulClient, this.$route.query.search, this.spotlightTypes, this.selectedAnatomicalStructures, this.sortOrder, limit, offset)
-      this.communitySpotlightItems = response
-    },
-    /**
-     * Update limit based on pagination menu selection and get more events
-     * @param {Number} limit
-     */
-    async onPaginationLimitChange(limit) {
-      const { $contentfulClient } = useNuxtApp()
-      const newLimit = limit === 'View All' ? this.communitySpotlightItems.total : limit
-      const response = await fetchCommunitySpotlightItems($contentfulClient, this.$route.query.search, this.spotlightTypes, this.selectedAnatomicalStructures, this.sortOrder, newLimit, 0)
-      this.communitySpotlightItems = response
-    },
-    async onSortOptionChange(option) {
-      const { $contentfulClient } = useNuxtApp()
-      this.selectedSortOption = option
-      const response = await fetchCommunitySpotlightItems($contentfulClient, this.$route.query.search, this.spotlightTypes, this.selectedAnatomicalStructures, this.sortOrder, this.communitySpotlightItems.limit, 0)
-      this.communitySpotlightItems = response
-    },
-    // The community spotlight item component needs to use the properties off the actual success stories/fireside chats
-    getLinkedItems(communitySpotlightItem) {
-      const linkedItem = pathOr('', ['fields','linkedItem'], communitySpotlightItem)
-      const anatomicalStructures = pathOr('', ['fields','anatomicalStructure'], communitySpotlightItem)
-      const spotlightTypeId = pathOr('', ['fields','itemType'], communitySpotlightItem)
-      const spotlightType = SPOTLIGHT_TYPE_MAPPING.find(item => {
-        return item.id == spotlightTypeId
-      })?.label
-      return {
-        ...linkedItem,
-        spotlightType,
-        anatomicalStructures
-      }
-    },
-    altResultsMounted() {
-      this.$refs.altSearchResults?.retrieveAltTotals()
-    }
+watch(
+  () => route.query,
+  async () => {
+    communitySpotlightItems.value = await fetchCommunitySpotlightItems(
+      $contentfulClient,
+      route.query.search,
+      spotlightTypes.value,
+      selectedAnatomicalStructures.value,
+      sortOrder.value,
+      10,
+      0
+    )
+    altSearchResults.value?.retrieveAltTotals();
   },
+  { immediate: true }
+)
+
+const onPaginationPageChange = async (page) => {
+  const { limit } = communitySpotlightItems.value
+  const offset = (page - 1) * limit
+  const response = await fetchCommunitySpotlightItems($contentfulClient, route.query.search, spotlightTypes.value, selectedAnatomicalStructures.value, sortOrder.value, limit, offset)
+  communitySpotlightItems.value = response
+}
+
+const onPaginationLimitChange = async (limit) => {
+  const newLimit = limit === 'View All' ? communitySpotlightItems.value?.total : limit
+  const response = await fetchCommunitySpotlightItems($contentfulClient, route.query.search, spotlightTypes.value, selectedAnatomicalStructures.value, sortOrder.value, newLimit, 0)
+  communitySpotlightItems.value = response
+}
+
+const onSortOptionChange = async (option) => {
+  selectedSortOption.value = option
+  const response = await fetchCommunitySpotlightItems($contentfulClient, route.query.search, spotlightTypes.value, selectedAnatomicalStructures.value, sortOrder.value, communitySpotlightItems.value.limit, 0)
+  communitySpotlightItems.value = response
+}
+
+const altResultsMounted = () => {
+  altSearchResults.value?.retrieveAltTotals()
+}
+
+// The community spotlight item component needs to use the properties off the actual success stories/fireside chats
+const getLinkedItems = (communitySpotlightItem) => {
+  const linkedItem = pathOr('', ['fields','linkedItem'], communitySpotlightItem)
+  const anatomicalStructures = pathOr('', ['fields','anatomicalStructure'], communitySpotlightItem)
+  const spotlightTypeId = pathOr('', ['fields','itemType'], communitySpotlightItem)
+  const spotlightType = SPOTLIGHT_TYPE_MAPPING.find(item => {
+    return item.id == spotlightTypeId
+  })?.label
+  return {
+    ...linkedItem,
+    spotlightType,
+    anatomicalStructures
+  }
 }
 </script>
 
diff --git a/pages/news-and-events/events/index.vue b/pages/news-and-events/events/index.vue
index a4d1722e..b199cf77 100644
--- a/pages/news-and-events/events/index.vue
+++ b/pages/news-and-events/events/index.vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="`Browse ${searchTypes[1].label}`" />
   </Head>
   <div class="page-data">
-    <breadcrumb :breadcrumb="breadcrumb" title="Events" />
+    <Breadcrumb :breadcrumb="breadcrumb" title="Events" />
     <div class="container">
       <h1 hidden>Search for events</h1>
       <div class="search-tabs__container">
@@ -68,11 +68,11 @@
               :lg='18'
             >
               <div class="search-heading mt-32 mb-16">
-                <div class="label1" v-show="events.items.length">
-                  {{ events.total }} Results | Showing
+                <div class="label1" v-show="events?.items.length">
+                  {{ events?.total }} Results | Showing
                   <client-only>
                     <pagination-menu
-                      :page-size="events.limit"
+                      :page-size="events?.limit"
                       @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
@@ -91,34 +91,34 @@
               <div ref="eventsWrap" class="subpage">
                 <client-only>
                   <event-list-item
-                    v-for="item in events.items"
+                    v-for="item in events?.items"
                     :key="item.sys.id"
                     :item="item"
                     :show-past-events-divider="showPastEventsDivider && item.sys.id == firstPastEventId"
                   />
                   <alternative-search-results-news
                     ref="altSearchResults"
-                    :search-had-results="events.items.length > 0"
+                    :search-had-results="events?.items?.length > 0"
                     @vue:mounted="altResultsMounted"
                   />
                 </client-only>
               </div>
               <div class="search-heading">
-                <div class="label1" v-if="events.items.length">
-                  {{ events.total }} Results | Showing
+                <div class="label1" v-if="events?.items?.length">
+                  {{ events?.total }} Results | Showing
                   <client-only>
                     <pagination-menu
-                      :page-size="events.limit"
+                      :page-size="events?.limit"
                       @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
                 </div>
                 <client-only>
                   <pagination
-                    v-if="events.limit < events.total"
+                    v-if="events?.limit < events?.total"
                     :selected="curSearchPage"
-                    :page-size="events.limit"
-                    :total-count="events.total"
+                    :page-size="events?.limit"
+                    :total-count="events?.total"
                     @select-page="onPaginationPageChange"
                   />
                 </client-only>
@@ -134,8 +134,9 @@
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useAsyncData } from '#app'
 import { pathOr, propOr } from 'ramda'
 import EventsFacetMenu from '@/components/FacetMenu/EventsFacetMenu.vue'
 import EventListItem from '@/components/EventListItem/EventListItem.vue'
@@ -143,186 +144,125 @@ import SearchControlsContentful from '@/components/SearchControlsContentful/Sear
 import SortMenu from '@/components/SortMenu/SortMenu.vue'
 import SubmitNewsSection from '~/components/NewsEventsResourcesPage/SubmitNewsSection.vue'
 import AlternativeSearchResultsNews from '~/components/AlternativeSearchResults/AlternativeSearchResultsNews.vue'
-
 import { fetchEvents } from '../model'
 
 const searchTypes = [
-  {
-    label: 'News',
-    path: 'news'
-  },
-  {
-    label: 'Events',
-    path: 'events'
-  },
-  {
-    label: 'Community Spotlight',
-    path: 'community-spotlight'
-  }
+  { label: 'News', path: 'news' },
+  { label: 'Events', path: 'events' },
+  { label: 'Community Spotlight', path: 'community-spotlight' }
 ]
 
 const sortOptions = [
-  {
-    label: 'Upcoming',
-    id: 'upcoming',
-    sortOrder: '-fields.upcomingSortOrder'
-  },
-  {
-    label: 'Latest',
-    id: 'latest',
-    sortOrder: '-fields.startDate'
-  },
-  {
-    label: 'A-Z',
-    id: 'alphabatical',
-    sortOrder: 'fields.title'
-  },
-  {
-    label: 'Z-A',
-    id: 'reverseAlphabatical',
-    sortOrder: '-fields.title'
-  },
+  { label: 'Upcoming', id: 'upcoming', sortOrder: '-fields.upcomingSortOrder' },
+  { label: 'Latest', id: 'latest', sortOrder: '-fields.startDate' },
+  { label: 'A-Z', id: 'alphabatical', sortOrder: 'fields.title' },
+  { label: 'Z-A', id: 'reverseAlphabatical', sortOrder: '-fields.title' }
 ]
 
-export default {
-  name: 'EventsPage',
+const route = useRoute()
+const { $contentfulClient } = useNuxtApp()
 
-  components: {
-    AlternativeSearchResultsNews,
-    EventsFacetMenu,
-    EventListItem,
-    SearchControlsContentful,
-    SortMenu,
-    SubmitNewsSection
-  },
+const altSearchResults = ref(null)
+const eventsFacetMenu = ref(null)
 
-  async setup() {
-    const route = useRoute()
-    const { $contentfulClient } = useNuxtApp()
-    const events = await fetchEvents($contentfulClient, route.query.search, undefined, undefined, undefined, undefined, 10, 0)
-    return {
-      events: ref(events)
-    }
-  },
+const selectedSortOption = ref(sortOptions[0])
 
-  data() {
-    return {
-      searchTypes,
-      selectedSortOption: sortOptions[0],
-      sortOptions,
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'News & Events',
-          to: {
-            name: 'news-and-events'
-          }
-        }
-      ]
-    }
-  },
+const breadcrumb = [
+  { label: 'Home', to: { name: 'index' } },
+  { label: 'News & Events', to: { name: 'news-and-events' } }
+]
 
-  watch: {
-    '$route.query': {
-      handler: async function() {
-        const { $contentfulClient } = useNuxtApp()
-        this.events = await fetchEvents(
-          $contentfulClient,
-          this.$route.query.search, 
-          this.$refs.eventsFacetMenu?.getStartLessThanDate(), 
-          this.$refs.eventsFacetMenu?.getStartGreaterThanOrEqualToDate(),
-          this.eventTypes, 
-          this.sortOrder, 
-          10, 
-          0
-        )
-        this.$refs.altSearchResults?.retrieveAltTotals()
-      },
-      immediate: true
-    },
-  },
+const startLessThanDate = computed(() => {
+  return eventsFacetMenu.value?.getStartLessThanDate()
+})
 
-  computed: {
-    /**
-     * Compute the current page based off the limit and the offset
-     * @returns {Number}
-     */
-    curSearchPage: function() {
-      return this.events.skip / this.events.limit + 1
-    },
-    startLessThanDate: function() {
-      return this.$refs.eventsFacetMenu?.getStartLessThanDate()
-    },
-    startGreaterThanOrEqualToDate: function() {
-      return this.$refs.eventsFacetMenu?.getStartGreaterThanOrEqualToDate()
-    },
-    eventTypes: function() {
-      return this.$route.query.selectedEventTypeOptions || undefined
-    },
-    sortOrder: function() {
-      return propOr('-fields.startDate', 'sortOrder', this.selectedSortOption)
-    },
-    firstPastEventId: function() {
-      const events = propOr([], 'items', this.events)
-      for (let i = 0; i < events.length; i++) {
-        const event = events[i]
-        const upcomingSortOrder = pathOr("", ['fields','upcomingSortOrder'], event)
-        if (upcomingSortOrder < 0) {
-          return pathOr("", ['sys','id'], event)
-        }
-      }
-      return -1
-    },
-    showPastEventsDivider: function() {
-      if (this.selectedSortOption.id != "upcoming") {
-        return false
-      }
-      const events = propOr([], 'items', this.events)
-      if (events.length == 0) {
-        return false
-      }
-      const firstEventId = pathOr(-1, ['sys', 'id'], events[0])
-      return this.firstPastEventId != firstEventId
-    }
-  },
+const startGreaterThanOrEqualToDate = computed(() => {
+  return eventsFacetMenu.value?.getStartGreaterThanOrEqualToDate()
+})
+
+const eventTypes = computed(() => {
+  return route.query.selectedEventTypeOptions || undefined
+})
 
-  methods: {
-    /**
-     * Get more events for the new page
-     * @param {Number} page
-     */
-    async onPaginationPageChange(page) {
-      const { $contentfulClient } = useNuxtApp()
-      const { limit } = this.events
-      const offset = (page - 1) * limit
-      const response = await fetchEvents($contentfulClient, this.$route.query.search, this.startLessThanDate, this.startGreaterThanOrEqualToDate, this.eventTypes, this.sortOrder, limit, offset)
-      this.events = response
-    },
-    /**
-     * Update limit based on pagination menu selection and get more events
-     * @param {Number} limit
-     */
-    async onPaginationLimitChange(limit) {
-      const { $contentfulClient } = useNuxtApp()
-      const newLimit = limit === 'View All' ? this.events.total : limit
-      const response = await fetchEvents($contentfulClient, this.$route.query.search, this.startLessThanDate, this.startGreaterThanOrEqualToDate, this.eventTypes, this.sortOrder, newLimit, 0)
-      this.events = response
-    },
-    async onSortOptionChange(option) {
-      const { $contentfulClient } = useNuxtApp()
-      this.selectedSortOption = option
-      const response = await fetchEvents($contentfulClient, this.$route.query.search, this.startLessThanDate, this.startGreaterThanOrEqualToDate, this.eventTypes, this.sortOrder, this.events.limit, 0)
-      this.events = response
-    },
-    altResultsMounted() {
-      this.$refs.altSearchResults?.retrieveAltTotals()
+const sortOrder = computed(() => {
+  return propOr('-fields.startDate', 'sortOrder', selectedSortOption.value)
+})
+
+const curSearchPage = computed(() => {
+  return events.value?.skip / events.value?.limit + 1
+})
+
+const firstPastEventId = computed(() => {
+  if (!events.value?.items) return -1;
+
+  for (let i = 0; i < events.value?.items?.length; i++) {
+    const event = events.value?.items[i];
+    const upcomingSortOrder = pathOr("", ['fields', 'upcomingSortOrder'], event);
+    if (upcomingSortOrder < 0) {
+      return pathOr("", ['sys', 'id'], event);
     }
   }
+  return -1;
+})
+
+const showPastEventsDivider = computed(() => {
+  if (!events.value?.items || selectedSortOption.value?.id !== "upcoming") {
+    return false;
+  }
+
+  const items = events.value?.items;
+  if (!items?.length) {
+    return false;
+  }
+
+  const firstEventId = pathOr(-1, ['sys', 'id'], items[0]);
+  return firstPastEventId.value !== firstEventId;
+})
+
+// Fetch events data using `useAsyncData` for server-side rendering
+const { data: events } = useAsyncData('events', () => {
+  return fetchEvents($contentfulClient, route.query.search, startLessThanDate.value, startGreaterThanOrEqualToDate.value, eventTypes.value, sortOrder.value, 10, 0)
+})
+
+watch(
+  () => route.query,
+  async () => {
+    events.value = await fetchEvents(
+      $contentfulClient,
+      route.query.search, 
+      startLessThanDate.value, 
+      startGreaterThanOrEqualToDate.value,
+      eventTypes.value, 
+      sortOrder.value, 
+      10, 
+      0
+    )
+    altSearchResults.value?.retrieveAltTotals();
+  },
+  { immediate: true }
+)
+
+const onPaginationPageChange = async (page) => {
+  const { limit } = events.value
+  const offset = (page - 1) * limit
+  const response = await fetchEvents($contentfulClient, route.query.search, startLessThanDate.value, startGreaterThanOrEqualToDate.value, eventTypes.value, sortOrder.value, limit, offset)
+  events.value = response
+}
+
+const onPaginationLimitChange = async (limit) => {
+  const newLimit = limit === 'View All' ? events.value?.total : limit
+  const response = await fetchEvents($contentfulClient, route.query.search, startLessThanDate.value, startGreaterThanOrEqualToDate.value, eventTypes.value, sortOrder.value, newLimit, 0)
+  events.value = response
+}
+
+const onSortOptionChange = async (option) => {
+  selectedSortOption.value = option
+  const response = await fetchEvents($contentfulClient, route.query.search, startLessThanDate.value, startGreaterThanOrEqualToDate.value, eventTypes.value, sortOrder.value, events.value.limit, 0)
+  events.value = response
+}
+
+const altResultsMounted = () => {
+  altSearchResults.value?.retrieveAltTotals()
 }
 </script>
 
diff --git a/pages/news-and-events/index.vue b/pages/news-and-events/index.vue
index dd4e0d7a..f4dfbc6b 100644
--- a/pages/news-and-events/index.vue
+++ b/pages/news-and-events/index.vue
@@ -1,21 +1,22 @@
 <template>
   <Head>
-    <Title>{{ page.fields.page_title }}</Title>
-    <Meta name="og:title" hid="og:title" :content="page.fields.page_title" />
-    <Meta name="twitter:title" :content="page.fields.page_title" />
-    <Meta name="description" hid="description" :content="page.fields.heroCopy" />
-    <Meta name="og:description" hid="og:description" :content="page.fields.heroCopy" />
-    <Meta name="twitter:description" :content="page.fields.heroCopy" />
+    <Title>{{ page?.fields?.page_title }}</Title>
+    <Meta name="og:title" hid="og:title" :content="page?.fields?.page_title" />
+    <Meta name="twitter:title" :content="page?.fields?.page_title" />
+    <Meta name="description" hid="description" :content="page?.fields?.heroCopy" />
+    <Meta name="og:description" hid="og:description" :content="page?.fields?.heroCopy" />
+    <Meta name="twitter:description" :content="page?.fields?.heroCopy" />
   </Head>
   <div class="page-data">
-    <breadcrumb :breadcrumb="breadcrumb" :title="title" />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="title" />
     <page-hero class="py-24">
-      <h1>{{ page.fields.page_title }}</h1>
-      <!-- eslint-disable vue/no-v-html -->
-      <!-- marked will sanitize the HTML injected -->
-      <div v-html="parseMarkdown(page.fields.heroCopy)" />
-      <img v-if="page.fields.heroImage" :v-slot="image" class="page-hero-img"
-        :src="page.fields.heroImage.fields.file.url" />
+      <h1>{{ page?.fields?.page_title }}</h1>
+      <div v-html="parseMarkdown(page?.fields?.heroCopy)" />
+      <img
+        v-if="page?.fields?.heroImage"
+        class="page-hero-img"
+        :src="page.fields.heroImage.fields.file.url"
+      />
       <NuxtLink to="/news-and-events/news">
         <el-button class="secondary mb-16">Browse All News &amp; Events</el-button>
       </NuxtLink>
@@ -25,42 +26,44 @@
       <div class="container">
         <div v-if="Object.keys(featuredEvent).length" class="mb-48">
           <div class="heading2 mb-16">Featured Event</div>
-          <featured-event :event="featuredEvent" />
+          <FeaturedEvent :event="featuredEvent" />
         </div>
 
         <el-row :gutter="32">
           <el-col class="mb-16" :sm="12">
             <div class="heading2 mb-16">Latest News</div>
             <div class="subpage news-wrap">
-              <div>
-                <news-list-item v-for="newsItem in news.items" :key="newsItem.sys.id" :item="newsItem" />
-
-                <nuxt-link class="btn-load-more mt-16" :to="{
-                    name: 'news-and-events-news'
-                  }">
-                  View All News
-                </nuxt-link>
-              </div>
+              <news-list-item
+                v-for="newsItem in news.items"
+                :key="newsItem.sys.id"
+                :item="newsItem"
+              />
+              <nuxt-link class="btn-load-more mt-16" to="/news-and-events/news">
+                View All News
+              </nuxt-link>
             </div>
           </el-col>
           <el-col :sm="12">
             <div class="heading2 mb-16">Events</div>
             <div class="upcoming-events">
-              <event-card v-for="event in upcomingEvents.items" :key="event.sys.id" :event="event" />
-            </div>
-            <div class="mt-16">
-              <nuxt-link class="btn-load-more" :to="{
-                  name: 'news-and-events-events',
-                }">
-                View All Events
-              </nuxt-link>
+              <event-card
+                v-for="event in upcomingEvents.items"
+                :key="event.sys.id"
+                :event="event"
+              />
             </div>
+            <nuxt-link class="btn-load-more mt-16" to="/news-and-events/events">
+              View All Events
+            </nuxt-link>
           </el-col>
         </el-row>
 
         <div>
           <div class="heading2 mb-16 mt-32">Community Spotlight</div>
-          <community-spotlight-listings :stories="stories.items" :bottom-link="true" />
+          <community-spotlight-listings
+            :stories="stories.items"
+            :bottom-link="true"
+          />
         </div>
 
         <div id="stayConnected" class="heading2 mt-32 mb-16">Stay Connected</div>
@@ -68,46 +71,41 @@
           <el-row :gutter="32">
             <el-col :xs="24" :sm="12" class="newsletter-wrap">
               <div class="heading2">Sign up for the SPARC Newsletter</div>
-              <div class="body1 mb-16 mt-8">Keep up to date with all the latest news and events from the SPARC Portal.
+              <div class="body1 mb-16 mt-8">
+                Keep up to date with all the latest news and events from the SPARC Portal.
               </div>
               <newsletter-form />
               <div class="newsletter-archive mt-16">
                 <div class="heading2 mt-24">Current Newsletter</div>
-                <div>
-                  <a class="mt-8" href="https://docs.sparc.science/docs/sparc-plug-current"
-                    target="_blank">
-                    Read the current SPARC Plug Newsletter<svgo-icon-open />
-                  </a>
-                </div>
-                <div>
-                  <a class="mt-8" href="https://docs.sparc.science/docs/sparc-plug-newsletter-archive"
-                    target="_blank">
-                    View Newsletters Archive<svgo-icon-open />
-                  </a>
-                </div>
+                <a
+                  class="mt-8"
+                  href="https://docs.sparc.science/docs/sparc-plug-current"
+                  target="_blank"
+                >
+                  Read the current SPARC Plug Newsletter<svgo-icon-open />
+                </a>
+                <a
+                  class="mt-8"
+                  href="https://docs.sparc.science/docs/sparc-plug-newsletter-archive"
+                  target="_blank"
+                >
+                  View Newsletters Archive<svgo-icon-open />
+                </a>
               </div>
             </el-col>
             <el-col :xs="24" :sm="12" class="newsletter-wrap right-panel">
               <div class="heading2 mt-24">Get Involved</div>
-              <div class="body1 mb-16 mt-8">Empower SPARC to promote your science and interests by submitting your
-                science story, news, or event.</div>
+              <div class="body1 mb-16 mt-8">
+                Empower SPARC to promote your science and interests by submitting your science
+                story, news, or event.
+              </div>
               <div class="get-involved-buttons-container">
-                <nuxt-link :to="{
-                    name: 'contact-us',
-                    query: {
-                      type: 'news-event'
-                    }
-                  }" target="_blank">
+                <nuxt-link :to="{ name: 'contact-us', query: { type: 'news-event' } }">
                   <el-button class="get-involved-button secondary">
                     Share News Or Events
                   </el-button>
                 </nuxt-link>
-                <nuxt-link :to="{
-                    name: 'contact-us',
-                    query: {
-                      type: 'story'
-                    }
-                  }" target="_blank">
+                <nuxt-link :to="{ name: 'contact-us', query: { type: 'story' } }">
                   <el-button class="get-involved-button secondary mt-8">
                     Submit A Community Spotlight Idea
                   </el-button>
@@ -121,104 +119,45 @@
   </div>
 </template>
 
-<script>
-import FeaturedEvent from '@/components/FeaturedEvent/FeaturedEvent.vue';
-import NewsListItem from '@/components/NewsListItem/NewsListItem.vue';
-import EventCard from '@/components/EventCard/EventCard.vue';
-import CommunitySpotlightListings from '@/components/CommunitySpotlight/CommunitySpotlightListings.vue';
-import NewsletterForm from '@/components/NewsletterForm/NewsletterForm.vue';
-
-import MarkedMixin from '@/mixins/marked'
-
-import { fetchData, fetchNews } from './model';
-
-export default {
-  name: 'NewsAndEventPage',
-
-  mixins: [
-    MarkedMixin
-  ],
-
-  components: {
-    FeaturedEvent,
-    NewsListItem,
-    EventCard,
-    CommunitySpotlightListings,
-    NewsletterForm
+<script setup>
+import { computed } from 'vue';
+import { useAsyncData } from '#app';
+import { fetchData } from './model';
+import { marked } from 'marked'
+import DOMPurify from 'isomorphic-dompurify'
+
+const breadcrumb = [
+  {
+    to: { name: 'index' },
+    label: 'Home',
   },
+];
 
-  async setup() {
-    try {
-      const { $contentfulClient } = useNuxtApp()
-      const data = await fetchData($contentfulClient, '', 2)
-      return data
-    } catch(e) {
-    }
-  },
+const title = 'News & Events';
 
-  watch: {
-    '$route.query': {
-      handler: async function() {
-        const { $contentfulClient } = useNuxtApp()
-        const { upcomingEvents, news, page, stories } = await fetchData($contentfulClient, this.$route.query.search, 2)
-        this.upcomingEvents = upcomingEvents;
-        this.news = news;
-        this.page = page;
-        this.stories = stories;
-      },
-      immediate: true
-    }
-  },
+// Fetch initial data
+const { data: pageData } = await useAsyncData(() => {
+  const { $contentfulClient } = useNuxtApp();
+  return fetchData($contentfulClient, '', 2);
+});
 
-  data: function() {
-    return {
-      title: 'News & Events',
-      breadcrumb: [
-        {
-          to: {
-            name: 'index'
-          },
-          label: 'Home'
-        }
-      ],
-      upcomingEvents: {},
-      news: {},
-      page: {
-        fields: {
-          'page_title': 'News & Events'
-        }
-      },
-      stories: {}
-    }
-  },
+// Extract data
+const page = computed(() => pageData.value?.page || {});
+const news = computed(() => pageData.value?.news || {});
+const upcomingEvents = computed(() => pageData.value?.upcomingEvents || {});
+const stories = computed(() => pageData.value?.stories || {});
 
-  computed: {
-    /**
-     * Compute featured event
-     * @returns {Object}
-     */
-    featuredEvent: function() {
-      return this.page.fields.featuredEvent || {}
-    },
-  },
+// Computed for featured event
+const featuredEvent = computed(() => page.value?.fields?.featuredEvent || {});
 
-  methods: {
-    /**
-     * Get all news
-     */
-    getAllNews: async function() {
-      const { $contentfulClient } = useNuxtApp()
-      const news = await fetchNews($contentfulClient, this.$route.query.search, undefined, undefined, undefined, undefined, this.news.total, 2)
-      this.news = { ...this.news, items: { ...this.news.items, ...news.items } }
-    },
-    currentMonth() {
-      return new Date().getMonth()
-    }
-  }
+// Markdown parser with sanitization
+const parseMarkdown = (markdown = '', purifyOptions = {}) => {
+  purifyOptions = { ...purifyOptions, ADD_ATTR: ['target'] }
+  return DOMPurify.sanitize(marked(markdown), purifyOptions)
 }
 </script>
 
-<style scoped lang="scss" >
+<style scoped lang="scss">
 @import 'sparc-design-system-components-2/src/assets/_variables.scss';
 .page-data {
   background-color: $background;
diff --git a/pages/news-and-events/model.js b/pages/news-and-events/model.js
index 903687b7..d9e5a5a6 100644
--- a/pages/news-and-events/model.js
+++ b/pages/news-and-events/model.js
@@ -86,6 +86,10 @@ export const fetchNews = async (client, terms, publishedLessThanDate, publishedG
   }
 }
 
+// In order to allow for sorting or fireside chats and success stories we needed
+// to restructure the content types in contentful to share a common model since you cannot query on 
+// multiple content types while applying a field filter or order in contentful api as outlined here:
+// https://www.contentfulcommunity.com/t/how-to-query-on-multiple-content-types/473
 export const fetchCommunitySpotlightItems = async (client, terms, spotlightTypes, anatomicalStructures, sortOrder, limit, skip) => {
   const query = replaceTerms(terms)
   try {
diff --git a/pages/news-and-events/news/index.vue b/pages/news-and-events/news/index.vue
index 936755b2..312749ee 100644
--- a/pages/news-and-events/news/index.vue
+++ b/pages/news-and-events/news/index.vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="`Browse ${searchTypes[0].label}`" />
   </Head>
   <div class="page-data">
-    <breadcrumb :breadcrumb="breadcrumb" title="News" />
+    <Breadcrumb :breadcrumb="breadcrumb" title="News" />
     <div class="container">
       <h1 hidden>Search for news</h1>
       <div class="search-tabs__container">
@@ -48,81 +48,81 @@
       <el-row :gutter="32" type="flex">
         <el-col :span="24">
           <el-row :gutter="32">
-              <el-col
-                class="facet-menu"
-                :sm="24"
-                :md="6"
-                :lg="6"
-              >
-                <client-only>
-                  <news-facet-menu
-                    ref="newsFacetMenu"
-                    class="news-facet-menu"
-                    @news-selections-changed="onPaginationPageChange(1)"
-                  />
-                </client-only>
-              </el-col>
-              <el-col
-                :sm='24'
-                :md='18'
-                :lg='18'
-              >
-                <div class="search-heading mt-32 mb-16">
-                  <div class="label1" v-show="news.items?.length">
-                    {{ news.total }} Results | Showing
-                    <client-only>
-                      <pagination-menu
-                        :page-size="news.limit"
-                        @update-page-size="onPaginationLimitChange"
-                      />
-                    </client-only>
-                  </div>
-                  <span class="label1">
-                    Sort
-                    <client-only>
-                      <sort-menu
-                        :options="sortOptions"
-                        :selected-option="selectedSortOption"
-                        @update-selected-option="onSortOptionChange"
-                      />
-                    </client-only>
-                  </span>
-                </div>
-                <div class="subpage">
-                  <template v-for="(item, index) in news.items" :key="index">
-                    <news-list-item
-                      :item="item"
-                    />
-                  </template>
+            <el-col
+              class="facet-menu"
+              :sm="24"
+              :md="6"
+              :lg="6"
+            >
+              <client-only>
+                <news-facet-menu
+                  ref="newsFacetMenu"
+                  class="news-facet-menu"
+                  @news-selections-changed="onPaginationPageChange(1)"
+                />
+              </client-only>
+            </el-col>
+            <el-col
+              :sm='24'
+              :md='18'
+              :lg='18'
+            >
+              <div class="search-heading mt-32 mb-16">
+                <div class="label1" v-show="news?.items?.length">
+                  {{ news?.total }} Results | Showing
                   <client-only>
-                    <alternative-search-results-news
-                      ref="altSearchResults"
-                      :search-had-results="news.items.length > 0"
-                      @vue:mounted="altResultsMounted"
+                    <pagination-menu
+                      :page-size="news?.limit"
+                      @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
                 </div>
-                <div class="search-heading">
-                  <div class="label1" v-if="news.items?.length">
-                    {{ news.total }} Results | Showing
-                    <client-only>
-                      <pagination-menu
-                        :page-size="news.limit"
-                        @update-page-size="onPaginationLimitChange"
-                      />
-                    </client-only>
-                  </div>
+                <span class="label1">
+                  Sort
                   <client-only>
-                    <pagination
-                      v-if="news.limit < news.total"
-                      :selected="curSearchPage"
-                      :page-size="news.limit"
-                      :total-count="news.total"
-                      @select-page="onPaginationPageChange"
+                    <sort-menu
+                      :options="sortOptions"
+                      :selected-option="selectedSortOption"
+                      @update-selected-option="onSortOptionChange"
+                    />
+                  </client-only>
+                </span>
+              </div>
+              <div class="subpage">
+                <template v-for="(item, index) in news?.items" :key="index">
+                  <news-list-item
+                    :item="item"
+                  />
+                </template>
+                <client-only>
+                  <alternative-search-results-news
+                    ref="altSearchResults"
+                    :search-had-results="news?.items?.length > 0"
+                    @vue:mounted="altResultsMounted"
+                  />
+                </client-only>
+              </div>
+              <div class="search-heading">
+                <div class="label1" v-if="news?.items?.length">
+                  {{ news?.total }} Results | Showing
+                  <client-only>
+                    <pagination-menu
+                      :page-size="news?.limit"
+                      @update-page-size="onPaginationLimitChange"
                     />
                   </client-only>
                 </div>
-              </el-col>
+                <client-only>
+                  <pagination
+                    v-if="news?.limit < news?.total"
+                    :selected="curSearchPage"
+                    :page-size="news?.limit"
+                    :total-count="news?.total"
+                    @select-page="onPaginationPageChange"
+                  />
+                </client-only>
+              </div>
+            </el-col>
           </el-row>
         </el-col>
       </el-row>
@@ -133,164 +133,108 @@
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useAsyncData } from '#app'
 import { propOr } from 'ramda'
 import NewsFacetMenu from '@/components/FacetMenu/NewsFacetMenu.vue'
 import NewsListItem from '@/components/NewsListItem/NewsListItem.vue'
-import SearchControlsContentful from '@/components/SearchControlsContentful/SearchControlsContentful.vue';
+import SearchControlsContentful from '@/components/SearchControlsContentful/SearchControlsContentful.vue'
 import SortMenu from '@/components/SortMenu/SortMenu.vue'
 import SubmitNewsSection from '~/components/NewsEventsResourcesPage/SubmitNewsSection.vue'
 import AlternativeSearchResultsNews from '~/components/AlternativeSearchResults/AlternativeSearchResultsNews.vue'
-
 import { fetchNews } from '../model'
 
 const searchTypes = [
-  {
-    label: 'News',
-    path: 'news'
-  },
-  {
-    label: 'Events',
-    path: 'events'
-  },
-  {
-    label: 'Community Spotlight',
-    path: 'community-spotlight'
-  }
+  { label: 'News', path: 'news' },
+  { label: 'Events', path: 'events' },
+  { label: 'Community Spotlight', path: 'community-spotlight' }
 ]
 
 const sortOptions = [
-  {
-    label: 'Latest',
-    id: 'latest',
-    sortOrder: '-fields.publishedDate'
-  },
-  {
-    label: 'A-Z',
-    id: 'alphabatical',
-    sortOrder: 'fields.title'
-  },
-  {
-    label: 'Z-A',
-    id: 'reverseAlphabatical',
-    sortOrder: '-fields.title'
-  },
+  { label: 'Latest', id: 'latest', sortOrder: '-fields.publishedDate' },
+  { label: 'A-Z', id: 'alphabatical', sortOrder: 'fields.title' },
+  { label: 'Z-A', id: 'reverseAlphabatical', sortOrder: '-fields.title' }
 ]
 
-export default {
-  name: 'NewsPage',
+const route = useRoute()
+const { $contentfulClient } = useNuxtApp()
 
-  components: {
-    NewsFacetMenu,
-    NewsListItem,
-    SearchControlsContentful,
-    SortMenu,
-    SubmitNewsSection,
-    AlternativeSearchResultsNews
-  },
+const altSearchResults = ref(null)
+const newsFacetMenu = ref(null)
 
-  async setup() {
-    const route = useRoute()
-    const { $contentfulClient } = useNuxtApp()
-    const news = await fetchNews($contentfulClient, route.query.search, undefined, undefined, undefined, undefined, 10, 0)
-    return {
-      news : ref(news)
-    }
-  },
+const selectedSortOption = ref(sortOptions[0])
 
-  data() {
-    return {
-      searchTypes,
-      selectedSortOption: sortOptions[0],
-      sortOptions,
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'News & Events',
-          to: {
-            name: 'news-and-events'
-          }
-        }
-      ]
-    }
-  },
+const breadcrumb = [
+  { label: 'Home', to: { name: 'index' } },
+  { label: 'News & Events', to: { name: 'news-and-events' } }
+]
 
-  watch: {
-    '$route.query': {
-      handler: async function() {
-          const { $contentfulClient } = useNuxtApp()
-          this.news = await fetchNews(
-            $contentfulClient,
-            this.$route.query.search, 
-            this.$refs.newsFacetMenu?.getPublishedLessThanDate(), 
-            this.$refs.newsFacetMenu?.getPublishedGreaterThanOrEqualToDate(),
-            this.subjects, 
-            this.sortOrder, 
-            10, 
-            0
-          )
-          this.$refs.altSearchResults?.retrieveAltTotals()
-      },
-      immediate: true
-    },
-  },
+const publishedLessThanDate = computed(() => {
+  return newsFacetMenu.value?.getPublishedLessThanDate()
+})
+
+const publishedGreaterThanOrEqualToDate = computed(() => {
+  return newsFacetMenu.value?.getPublishedGreaterThanOrEqualToDate()
+})
+
+const subjects = computed(() => {
+  return route.query.selectedNewsSubjectIds || undefined
+})
 
-  computed: {
-    /**
-     * Compute the current page based off the limit and the offset
-     * @returns {Number}
-     */
-    curSearchPage: function() {
-      return this.news.skip / this.news.limit + 1
-    },
-    publishedLessThanDate: function() {
-      return this.$refs.newsFacetMenu?.getPublishedLessThanDate()
-    },
-    publishedGreaterThanOrEqualToDate: function() {
-      return this.$refs.newsFacetMenu?.getPublishedGreaterThanOrEqualToDate()
-    },
-    subjects: function() {
-      return this.$route.query.selectedNewsSubjectIds || undefined
-    },
-    sortOrder: function() {
-      return propOr('-fields.publishedDate', 'sortOrder', this.selectedSortOption)
-    }
+const sortOrder = computed(() => {
+  return propOr('-fields.publishedDate', 'sortOrder', selectedSortOption.value)
+})
+
+// Fetch news data using `useAsyncData` for server-side rendering
+const { data: news } = useAsyncData('news', () => {
+  return fetchNews($contentfulClient, route.query.search, publishedLessThanDate.value,
+  publishedGreaterThanOrEqualToDate.value, subjects.value, sortOrder.value, 10, 0)
+})
+
+const curSearchPage = computed(() => {
+  return news.value?.skip / news.value?.limit + 1
+})
+
+watch(
+  () => route.query,
+  async () => {
+    news.value = await fetchNews(
+      $contentfulClient,
+      route.query.search,
+      publishedLessThanDate.value,
+      publishedGreaterThanOrEqualToDate.value,
+      subjects.value,
+      sortOrder.value,
+      10,
+      0
+    );
+    altSearchResults.value?.retrieveAltTotals();
   },
+  { immediate: true }
+)
 
-  methods: {
-    async onPaginationPageChange(page) {
-      const { $contentfulClient } = useNuxtApp()
-      const { limit } = this.news
-      const offset = (page - 1) * limit
-      const response = await fetchNews($contentfulClient, this.$route.query.search, this.publishedLessThanDate, this.publishedGreaterThanOrEqualToDate, this.subjects, this.sortOrder, limit, offset)
-      this.news = response
-    },
-    /**
-     * Update limit based on pagination menu selection and get more news
-     * @param {Number} limit
-     */
-    async onPaginationLimitChange(limit) {
-      const { $contentfulClient } = useNuxtApp()
-      const newLimit = limit === 'View All' ? this.news.total : limit
-      const response = await fetchNews($contentfulClient, this.$route.query.search, this.publishedLessThanDate, this.publishedGreaterThanOrEqualToDate, this.subjects, this.sortOrder, newLimit, 0)
-      this.news = response
-    },
-    async onSortOptionChange(option) {
-      const { $contentfulClient } = useNuxtApp()
-      this.selectedSortOption = option
-      const response = await fetchNews($contentfulClient, this.$route.query.search, this.publishedLessThanDate, this.publishedGreaterThanOrEqualToDate, this.subjects, this.sortOrder, this.news.limit, 0)
-      this.news = response
-    },
-    altResultsMounted() {
-        this.$refs.altSearchResults?.retrieveAltTotals()
-    }
-  }
+const onPaginationPageChange = async (page) => {
+  const { limit } = news.value
+  const offset = (page - 1) * limit
+  const response = await fetchNews($contentfulClient, route.query.search, publishedLessThanDate.value, publishedGreaterThanOrEqualToDate.value, subjects.value, sortOrder.value, limit, offset)
+  news.value = response
+}
+
+const onPaginationLimitChange = async (limit) => {
+  const newLimit = limit === 'View All' ? news.value?.total : limit
+  const response = await fetchNews($contentfulClient, route.query.search, publishedLessThanDate.value, publishedGreaterThanOrEqualToDate.value, subjects.value, sortOrder.value, newLimit, 0)
+  news.value = response
+}
+
+const onSortOptionChange = async (option) => {
+  selectedSortOption.value = option
+  const response = await fetchNews($contentfulClient, route.query.search, publishedLessThanDate.value, publishedGreaterThanOrEqualToDate.value, subjects.value, sortOrder.value, news.value.limit, 0)
+  news.value = response
+}
+
+const altResultsMounted = () => {
+  altSearchResults.value?.retrieveAltTotals()
 }
 </script>
 
diff --git a/store/index.js b/store/index.js
index 54e229b8..2a17c070 100644
--- a/store/index.js
+++ b/store/index.js
@@ -61,7 +61,28 @@ export const useMainStore = defineStore('main', {
   },
   actions: {
     async init() {
-      await Promise.all([this.fetchContactUsFormOptions(), this.fetchFooterData(), this.fetchPortalNotification()])
+      // Server-side cookie check to ensure this runs only once
+      const appInitializedCookie = useCookie('appInitialized')
+
+      // If the cookie exists, prevent re-initialization
+      if (appInitializedCookie.value === 'true') {
+        console.log('App already initialized')
+        return
+      }
+
+      // If not, run the initialization actions
+      try {
+        await Promise.all([
+          this.fetchContactUsFormOptions(),
+          this.fetchFooterData(),
+          this.fetchPortalNotification()
+        ])
+
+        // Set the cookie to mark the app as initialized
+        appInitializedCookie.value = 'true'
+      } catch (error) {
+        console.error('Error during initialization:', error)
+      }
     },
     updateDisabledScrolling(value) {
       this.disableScrolling = value
@@ -85,37 +106,92 @@ export const useMainStore = defineStore('main', {
       this.formOptions = value
     },
     async fetchContactUsFormOptions() {
-      try {
-        const response = await useNuxtApp().$contentfulClient.getEntry(useRuntimeConfig().public.ctf_contact_us_form_options_id)
-        const fields = response.fields
+      // Fetch data server-side using `useAsyncData`
+      const { data, error } = await useAsyncData(
+        'contact-us-form-options',
+        async () => {
+          try {
+            const response = await useNuxtApp().$contentfulClient.getEntry(
+              useRuntimeConfig().public.ctf_contact_us_form_options_id
+            )
+            const fields = response.fields
   
-        const formOptions = {
-          userTypes: propOr([], 'typeOfUser', fields),
-          areasOfSparc: propOr([], 'areaOfSparcPortal', fields),
-          services: propOr([], 'services', fields),
-          resourceCategories: propOr([], 'resourceCategories', fields)
+            const formOptions = {
+              userTypes: propOr([], 'typeOfUser', fields),
+              areasOfSparc: propOr([], 'areaOfSparcPortal', fields),
+              services: propOr([], 'services', fields),
+              resourceCategories: propOr([], 'resourceCategories', fields),
+            }
+            return formOptions
+          } catch (e) {
+            console.error(e)
+            return null
+          }
+        },
+        {
+          server: true
         }
-        
-        this.setFormOptions(formOptions)
-      } catch (e) {
-        console.error(e)
+      )
+
+      if (data) {
+        this.setFormOptions(data)
       }
     },
+
     async fetchPortalNotification() {
-      try {
-        const response = await useNuxtApp().$contentfulClient.getEntry(useRuntimeConfig().public.ctf_portal_notification_entry_id)
-        this.setPortalNotification(response.fields)
-      } catch (e) {
-        console.error(e)
+      // Fetch data server-side using `useAsyncData`
+      const { data, error } = await useAsyncData(
+        'portal-notification',
+        async () => {
+          try {
+            const response = await useNuxtApp().$contentfulClient.getEntry(
+              useRuntimeConfig().public.ctf_portal_notification_entry_id
+            )
+            return response.fields
+          } catch (e) {
+            console.error(e)
+            return null
+          }
+        },
+        {
+          server: true
+        }
+      )
+
+      if (data) {
+        this.setPortalNotification(data)
       }
     },
+
     async fetchFooterData() {
-      try {
-        const response = await useNuxtApp().$contentfulClient.getEntry(useRuntimeConfig().public.ctf_home_page_id)
-        const { footerDescription, learnMoreLinks, policiesLinks, helpUsImproveLinks, stayUpdatedLinks } = response.fields
-        this.setFooterData({ footerDescription, learnMoreLinks, policiesLinks, helpUsImproveLinks, stayUpdatedLinks })
-      } catch (e) {
-        console.error(e)
+      // Fetch data server-side using `useAsyncData`
+      const { data, error } = await useAsyncData(
+        'footer-data',
+        async () => {
+          try {
+            const response = await useNuxtApp().$contentfulClient.getEntry(
+              useRuntimeConfig().public.ctf_home_page_id
+            )
+            const { footerDescription, learnMoreLinks, policiesLinks, helpUsImproveLinks, stayUpdatedLinks } = response.fields
+            return {
+              footerDescription,
+              learnMoreLinks,
+              policiesLinks,
+              helpUsImproveLinks,
+              stayUpdatedLinks,
+            }
+          } catch (e) {
+            console.error(e)
+            return null
+          }
+        },
+        {
+          server: true
+        }
+      )
+
+      if (data) {
+        this.setFooterData(data)
       }
     },
     setUserProfile(value) {

From aecc9fa6026d95b4d1ab8db8440026f3963ca6c9 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Wed, 20 Nov 2024 14:08:03 -0500
Subject: [PATCH 2/8] updated news, event, and spotlight item pages

---
 .../SubmitNewsSection.vue                     |  10 +-
 mixins/format-date/index.js                   |  11 +-
 pages/apps/index.vue                          |   9 +-
 .../success-stories/[id].vue                  | 195 ++++++------------
 pages/news-and-events/events/[id].vue         | 175 +++++++---------
 pages/news-and-events/index.vue               |  10 +-
 pages/news-and-events/news/[id].vue           | 102 ++++-----
 utils/dateUtils.js                            |  10 +
 utils/formattingUtils.js                      |  12 ++
 9 files changed, 192 insertions(+), 342 deletions(-)
 create mode 100644 utils/dateUtils.js
 create mode 100644 utils/formattingUtils.js

diff --git a/components/NewsEventsResourcesPage/SubmitNewsSection.vue b/components/NewsEventsResourcesPage/SubmitNewsSection.vue
index 014001a0..73dc25da 100644
--- a/components/NewsEventsResourcesPage/SubmitNewsSection.vue
+++ b/components/NewsEventsResourcesPage/SubmitNewsSection.vue
@@ -10,14 +10,11 @@
 <script setup>
 import { useNuxtApp, useRuntimeConfig } from '#imports';
 import Paper from '@/components/Paper/Paper.vue';
-import { marked } from 'marked'
-import DOMPurify from 'isomorphic-dompurify'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 
-// Setup
 const config = useRuntimeConfig();
 const { $contentfulClient } = useNuxtApp();
 
-// Fetch data
 const { data } = await useAsyncData('newsAndEventsPage', async () => {
   const pageData = await $contentfulClient.getEntry(config.public.ctf_news_and_events_page_id);
   return {
@@ -27,10 +24,5 @@ const { data } = await useAsyncData('newsAndEventsPage', async () => {
 
 const searchPaperNEButton = computed(() => data.value?.fields.searchPaperNeButton || '')
 const searchPaperText = computed(() => data.value?.fields.searchPaperText || '')
-// Markdown parser with sanitization
-const parseMarkdown = (markdown = '', purifyOptions = {}) => {
-  purifyOptions = { ...purifyOptions, ADD_ATTR: ['target'] }
-  return DOMPurify.sanitize(marked(markdown), purifyOptions)
-}
 
 </script>
diff --git a/mixins/format-date/index.js b/mixins/format-date/index.js
index d3386fc9..bc41693e 100644
--- a/mixins/format-date/index.js
+++ b/mixins/format-date/index.js
@@ -1,14 +1,7 @@
-import { format, parseISO } from 'date-fns'
+import { formatDate } from '~/utils/dateUtils'
 
 export default {
   methods: {
-    /**
-     * Format date for display
-     * @param {Date} date
-     * @returns {String}
-     */
-    formatDate: function(date) {
-      return date != '' ? format(parseISO(date), 'MMMM d, yyyy') : ''
-    }
+    formatDate
   }
 }
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index aa8eb7e9..cb4246ae 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -30,8 +30,7 @@
 <script setup>
 import { computed } from 'vue'
 import { pathOr } from 'ramda'
-import { marked } from 'marked'
-import DOMPurify from 'isomorphic-dompurify'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 import { useAsyncData, useRuntimeConfig } from '#app'
 
 // Breadcrumb structure
@@ -42,12 +41,6 @@ const breadcrumb = [
   },
 ]
 
-// Markdown parser with sanitization
-const parseMarkdown = (markdown = '', purifyOptions = {}) => {
-  purifyOptions = { ...purifyOptions, ADD_ATTR: ['target'] }
-  return DOMPurify.sanitize(marked(markdown), purifyOptions)
-}
-
 // Function to construct portal feature entries
 const constructPortalFeatureEntries = (apps) => {
   if (!apps) return []
diff --git a/pages/news-and-events/community-spotlight/success-stories/[id].vue b/pages/news-and-events/community-spotlight/success-stories/[id].vue
index 5fcda2a9..dc564d6c 100644
--- a/pages/news-and-events/community-spotlight/success-stories/[id].vue
+++ b/pages/news-and-events/community-spotlight/success-stories/[id].vue
@@ -8,22 +8,17 @@
     <Meta name="twitter:description" :content="entry.summary" />
   </Head>
   <div class="events-page">
-    <breadcrumb :breadcrumb="breadcrumb" :title="title" />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="title" />
     <page-hero class="py-24">
       <h1>{{ title }}</h1>
       <br />
-      <p>
-        {{ entry.summary }}
-      </p>
+      <p>{{ entry.summary }}</p>
     </page-hero>
     <div class="container pb-24">
       <div class="subpage">
         <el-row :gutter="38">
           <el-col :sm="13">
-            <div
-              class="content"
-              v-html="parseMarkdown(entry.story)"
-            />
+            <div class="content" v-html="parseMarkdown(entry.story)" />
           </el-col>
           <el-col :sm="11">
             <div class="banner-wrapper">
@@ -44,50 +39,34 @@
               />
             </div>
             <div class="seperator-path my-32" />
-            <div class="label4">
-              AUTHOR
-            </div>
-            <div class="content body4">
-              {{ author }}
-            </div>
+            <div class="label4">AUTHOR</div>
+            <div class="content body4">{{ author }}</div>
             <br />
             <template v-if="entry.publishedDate">
-              <div class="label4">
-                PUBLISHED DATE
-              </div>
-              <div class="content body4">
-                {{ formatDate(entry.publishedDate) }}
-              </div>
+              <div class="label4">PUBLISHED DATE</div>
+              <div class="content body4">{{ formatDate(entry.publishedDate) }}</div>
               <br />
             </template>
             <template v-if="entry.contributorsMarkdown">
-              <div class="label4">
-                TEAM MEMBERS
-              </div>
+              <div class="label4">TEAM MEMBERS</div>
               <div class="content body4" v-html="parseMarkdown(entry.contributorsMarkdown)" />
               <br />
             </template>
             <template v-if="entry.referencesMarkdown">
-              <div class="label4">
-                SUPPORTING INFORMATION
-              </div>
+              <div class="label4">SUPPORTING INFORMATION</div>
               <div class="content body4" v-html="parseMarkdown(entry.referencesMarkdown)" />
               <br />
             </template>
-            <div class="label4">
-              Share
-            </div>
+            <div class="label4">Share</div>
             <share-links />
             <div class="seperator-path my-32" />
             <template v-if="entry.associatedDatasets">
-              <div class="label4">
-                ASSOCIATED DATASETS
-              </div>
+              <div class="label4">ASSOCIATED DATASETS</div>
               <br />
               <div
                 v-for="(datasetUrl, index) in entry.associatedDatasets"
                 :key="'dataset' + index"
-                class="body4 "
+                class="body4"
               >
                 <dataset-card :id="datasetIdFromUrl(datasetUrl)" />
               </div>
@@ -105,121 +84,65 @@
       </nuxt-link>
       <div class="subpage">
         Have something to share with the community? We would love to hear from you! Submit your success story
-        <nuxt-link to="/contact-us?type=story">
-          here
-        </nuxt-link>
+        <nuxt-link to="/contact-us?type=story">here</nuxt-link>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import { successMessage, failMessage } from '@/utils/notification-messages'
+<script setup>
+import { useAsyncData } from '#app'
+import { computed } from 'vue'
 import DatasetCard from '@/components/DatasetCard/DatasetCard.vue'
 import youtubeEmbeddedSource from '@/mixins/youtube-embedded-src'
-import MarkedMixin from '@/mixins/marked'
-import FormatDate from '@/mixins/format-date'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
+import { formatDate } from '@/utils/dateUtils.js'
 import ShareLinks from '~/components/ShareLinks/ShareLinks.vue'
 
-export default {
-  name: 'StoryPage',
-  components: {
-    DatasetCard,
-    ShareLinks
-},
-  mixins: [FormatDate, MarkedMixin],
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    const route = useRoute()
-    try {
-      const results = await $contentfulClient.getEntries({
-        content_type: 'successStoryDisplay',
-        'fields.storyRoute[match]': route.params.id,
-        include: 1,
-        order: '-fields.publishedDate',
-      })
-      return {
-        entry: results.items[0].fields,
-        slug: route.params.slug,
-        title: results.items[0].fields.storyTitle
-      }
-    } catch (error) {
-      return {
-        title: '',
-        entry: {},
-        slug: ''
-      }
-    }
-  },
-  data: function() {
-    return {
-      title: '',
-      entry: {},
-      slug: '',
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'News & Events',
-          to: {
-            name: 'news-and-events'
-          }
-        },
-        {
-          label: 'Community Spotlight',
-          to: {
-            name: 'news-and-events-community-spotlight'
-          }
-        },
-        {
-          label: 'Success Stories',
-          to: {
-            name: 'news-and-events-community-spotlight-success-stories'
-          }
-        }
-      ]
-    }
-  },
-  computed: {
-    pageUrl: function() {
-      return `${process.env.ROOT_URL}${this.$route.fullPath}`
-    },
-    embeddedVideoSrc: function() {
-      return youtubeEmbeddedSource(this.entry.youtubeUrl)
-    },
-    author: function(){
-      if (this.entry.name) return this.entry.name
-      if (this.entry.author) return this.entry.author
-      else return ''
-    }
-  },
-  methods: {
-    // Retrieve dataset id form sparc.science, discover.pennsieve, or just the id
-    datasetIdFromUrl: function(url) {
-      if (!url.includes('/')) return Number(url)
-      let datasetId = url.split('/').pop()
-      if (datasetId.includes('?')) datasetId = datasetId.split('?')[0]
-      return Number(datasetId)
-    },
-    copyLink: function() {
-      this.$copyText(this.pageUrl).then(
-        () => {
-          successMessage('Share link copied to clipboard.')
-        },
-        () => {
-          failMessage('Failed to copy share link.')
-        }
-      )
-    }
+const { $contentfulClient } = useNuxtApp()
+const route = useRoute()
+
+// Fetch data using useAsyncData to avoid rendering on both client and server
+const { data, error } = await useAsyncData('story', async () => {
+  try {
+    const results = await $contentfulClient.getEntries({
+      content_type: 'successStoryDisplay',
+      'fields.storyRoute[match]': route.params.id,
+      include: 1,
+      order: '-fields.publishedDate',
+    })
+    return results.items[0]?.fields || {}
+  } catch (err) {
+    console.error(err)
+    return {}
   }
+})
+
+// Variables from the fetched data
+const entry = computed(() => data.value || {})
+const title = computed(() => entry.value?.storyTitle || '')
+const breadcrumb = computed(() => [
+  { label: 'Home', to: { name: 'index' } },
+  { label: 'News & Events', to: { name: 'news-and-events' } },
+  { label: 'Community Spotlight', to: { name: 'news-and-events-community-spotlight' } },
+  { label: 'Success Stories', to: { name: 'news-and-events-community-spotlight-success-stories' } },
+])
+
+// Computed properties
+const pageUrl = computed(() => `${process.env.ROOT_URL}${route.fullPath}`)
+const embeddedVideoSrc = computed(() => youtubeEmbeddedSource(entry.value?.youtubeUrl))
+const author = computed(() => entry.value?.name || entry.value?.author || '')
+
+// Methods
+const datasetIdFromUrl = (url) => {
+  if (!url.includes('/')) return Number(url)
+  let datasetId = url.split('/').pop()
+  if (datasetId.includes('?')) datasetId = datasetId.split('?')[0]
+  return Number(datasetId)
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 @import 'sparc-design-system-components-2/src/assets/_variables.scss';
 .events-page {
   background-color: $background;
@@ -246,8 +169,6 @@ export default {
   min-width: 25.68rem;
 }
 
-// Used for sizing iframes that are in the content
-
 :deep(.content) {
   color: $grey;
   p {
diff --git a/pages/news-and-events/events/[id].vue b/pages/news-and-events/events/[id].vue
index 0c30c0bb..0363eadd 100644
--- a/pages/news-and-events/events/[id].vue
+++ b/pages/news-and-events/events/[id].vue
@@ -37,118 +37,85 @@
   </news-events-resources-page>
 </template>
 
-<script>
-import { pathOr } from 'ramda'
-import NewsEventsResourcesPage from '@/components/NewsEventsResourcesPage/NewsEventsResourcesPage'
-import FormatDate from '@/mixins/format-date'
-
-const getEventPage = async (id) => {
-  const { $contentfulClient } = useNuxtApp()
-  const config = useRuntimeConfig()
-  try {
-    const isSlug = id.split('-').length > 1
-
-    const item = isSlug
+<script setup>
+import { computed } from 'vue';
+import { pathOr } from 'ramda';
+import NewsEventsResourcesPage from '@/components/NewsEventsResourcesPage/NewsEventsResourcesPage';
+import { useNuxtApp, useRoute, useRouter } from '#app';
+import { formatDate } from '@/utils/dateUtils.js'
+
+const route = useRoute();
+const router = useRouter();
+const { $contentfulClient } = useNuxtApp();
+const config = useRuntimeConfig();
+
+// Fetch event page data
+const { data: page, error } = useAsyncData(
+  'eventPage',
+  async () => {
+    const id = route.params.id;
+    const isSlug = id.split('-').length > 1;
+
+    const result = isSlug
       ? await $contentfulClient.getEntries({
           content_type: config.public.ctf_event_id,
           'fields.slug': id
         })
-      : await $contentfulClient.getEntry(id)
-    return isSlug ? item.items[0] : item
-  } catch (error) {
-    return {}
-  }
-}
-
-export default {
-  name: 'EventPage',
+      : await $contentfulClient.getEntry(id);
 
-  components: {
-    NewsEventsResourcesPage
-  },
+    const eventPage = isSlug ? result.items[0] : result;
 
-  mixins: [FormatDate],
-
-  async setup() {
-    const route = useRoute()
-    const router = useRouter()
-    try {
-      const page = await getEventPage(route.params.id)
-      const slug = pathOr(null, ['fields', 'slug'], page)
-      if (slug !== null && route.params.id !== slug) {
-        router.push(`/news-and-events/events/${slug}`)
-      }
-      return { page }
-    } catch (error) {
-      return {
-        page: {
-          fields: []
-        }
-      }
+    // Redirect if the slug doesn't match
+    const slug = pathOr(null, ['fields', 'slug'], eventPage);
+    if (slug && id !== slug) {
+      router.replace(`/news-and-events/events/${slug}`);
     }
-  },
 
-  data() {
-    return {
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'News & Events',
-          to: {
-            name: 'news-and-events'
-          }
-        },
-        {
-          label: 'Events',
-          to: {
-            name: 'news-and-events-events'
-          }
-        }
-      ]
-    }
-  },
+    return eventPage || { fields: [] };
+  }
+);
 
-  computed: {
-    /**
-     * Get news and event image
-     * @returns {String}
-     */
-    newsImage: function() {
-      return pathOr('', ['fields', 'image', 'fields', 'file', 'url'], this.page)
-    },
-
-    /**
-     * Get news and event image alt tag
-     * @returns {String}
-     */
-    newsImageAlt: function() {
-      return pathOr('', ['fields', 'image', 'fields', 'title'], this.page)
-    },
-
-    eventDetails: function() {
-      return pathOr(null, ['fields', 'eventDetails'], this.page)
-    },
-
-    /**
-     * Get event date range, if there is no end date, default to start date
-     * @returns {String}
-     */
-    eventDate: function() {
-      const startDate = this.formatDate(this.page.fields?.startDate || '')
-      const endDate = this.formatDate(this.page.fields?.endDate || '')
-      return startDate === endDate || !endDate
-        ? startDate
-        : `${startDate} - ${endDate}`
-    },
-
-    hasEventDetailsPage: function() {
-      return this.eventDetails !== null
-    },
+// Breadcrumb configuration
+const breadcrumb = [
+  {
+    label: 'Home',
+    to: { name: 'index' }
+  },
+  {
+    label: 'News & Events',
+    to: { name: 'news-and-events' }
+  },
+  {
+    label: 'Events',
+    to: { name: 'news-and-events-events' }
   }
-}
+];
+
+// Computed properties
+const newsImage = computed(() =>
+  pathOr('', ['fields', 'image', 'fields', 'file', 'url'], page.value)
+);
+
+const newsImageAlt = computed(() =>
+  pathOr('', ['fields', 'image', 'fields', 'title'], page.value)
+);
+
+const eventDetails = computed(() =>
+  pathOr(null, ['fields', 'eventDetails'], page.value)
+);
+
+const hasEventDetailsPage = computed(() => eventDetails.value !== null);
+
+const eventDate = computed(() => {
+  const startDate = page.value.fields?.startDate
+    ? formatDate(page.value.fields.startDate)
+    : '';
+  const endDate = page.value.fields?.endDate
+    ? formatDate(page.value.fields.endDate)
+    : '';
+  return startDate === endDate || !endDate
+    ? startDate
+    : `${startDate} - ${endDate}`;
+});
 </script>
+
diff --git a/pages/news-and-events/index.vue b/pages/news-and-events/index.vue
index f4dfbc6b..e768c20b 100644
--- a/pages/news-and-events/index.vue
+++ b/pages/news-and-events/index.vue
@@ -123,8 +123,7 @@
 import { computed } from 'vue';
 import { useAsyncData } from '#app';
 import { fetchData } from './model';
-import { marked } from 'marked'
-import DOMPurify from 'isomorphic-dompurify'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 
 const breadcrumb = [
   {
@@ -141,20 +140,13 @@ const { data: pageData } = await useAsyncData(() => {
   return fetchData($contentfulClient, '', 2);
 });
 
-// Extract data
 const page = computed(() => pageData.value?.page || {});
 const news = computed(() => pageData.value?.news || {});
 const upcomingEvents = computed(() => pageData.value?.upcomingEvents || {});
 const stories = computed(() => pageData.value?.stories || {});
 
-// Computed for featured event
 const featuredEvent = computed(() => page.value?.fields?.featuredEvent || {});
 
-// Markdown parser with sanitization
-const parseMarkdown = (markdown = '', purifyOptions = {}) => {
-  purifyOptions = { ...purifyOptions, ADD_ATTR: ['target'] }
-  return DOMPurify.sanitize(marked(markdown), purifyOptions)
-}
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/news-and-events/news/[id].vue b/pages/news-and-events/news/[id].vue
index 67f32e46..54968d85 100644
--- a/pages/news-and-events/news/[id].vue
+++ b/pages/news-and-events/news/[id].vue
@@ -32,79 +32,49 @@
   </news-events-resources-page>
 </template>
 
-<script>
-import { pathOr } from 'ramda'
-import NewsEventsResourcesPage from '@/components/NewsEventsResourcesPage/NewsEventsResourcesPage'
-import FormatDate from '@/mixins/format-date'
+<script setup>
+import { computed } from 'vue';
+import { pathOr } from 'ramda';
+import NewsEventsResourcesPage from '@/components/NewsEventsResourcesPage/NewsEventsResourcesPage';
+import { useNuxtApp, useRoute } from '#app';
+import { formatDate } from '@/utils/dateUtils.js'
 
-export default {
-  name: 'NewsPage',
-
-  components: {
-    NewsEventsResourcesPage
+const breadcrumb = [
+  {
+    label: 'Home',
+    to: { name: 'index' }
   },
+  {
+    label: 'News & Events',
+    to: { name: 'news-and-events' }
+  }
+]
 
-  mixins: [FormatDate],
+const route = useRoute();
+const { $contentfulClient } = useNuxtApp()
 
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    const route = useRoute()
+const { data: page, error } = useAsyncData(
+  'newsPage',
+  async () => {
     try {
-      const page = await $contentfulClient.getEntry(route.params.id)
-      return { page }
-    } catch (error) {
-      return {
-        page: {
-          fields: []
-        }
-      }
+      return await $contentfulClient.getEntry(route.params.id);
+    } catch {
+      return { fields: [] };
     }
-  },
+  }
+)
 
-  data() {
-    return {
-      breadcrumb: [
-        {
-          label: 'Home',
-          to: {
-            name: 'index'
-          }
-        },
-        {
-          label: 'News & Events',
-          to: {
-            name: 'news-and-events'
-          }
-        }
-      ]
-    }
-  },
-  computed: {
-    /**
-     * Get news and event image
-     * @returns {String}
-     */
-    newsImage: function() {
-      return pathOr('', ['fields', 'image', 'fields', 'file', 'url'], this.page)
-    },
+const newsImage = computed(() =>
+  pathOr('', ['fields', 'image', 'fields', 'file', 'url'], page.value)
+)
 
-    /**
-     * Get news and event image alt tag
-     * @returns {String}
-     */
-    newsImageAlt: function() {
-      return pathOr('', ['fields', 'image', 'fields', 'title'], this.page)
-    },
+const newsImageAlt = computed(() =>
+  pathOr('', ['fields', 'image', 'fields', 'title'], page.value)
+)
 
-    /**
-     * Compute and formate start date
-     * @returns {String}
-     */
-    publishedDate: function() {
-      return this.page.fields.publishedDate
-        ? this.formatDate(this.page.fields.publishedDate)
-        : ''
-    }
-  }
-}
+const publishedDate = computed(() =>
+  page.value.fields.publishedDate
+    ? formatDate(page.value.fields.publishedDate)
+    : ''
+)
 </script>
diff --git a/utils/dateUtils.js b/utils/dateUtils.js
new file mode 100644
index 00000000..fb69e05c
--- /dev/null
+++ b/utils/dateUtils.js
@@ -0,0 +1,10 @@
+import { format, parseISO } from 'date-fns'
+
+/**
+ * Format date for display
+ * @param {String} date
+ * @returns {String}
+ */
+export function formatDate(date) {
+  return date !== '' ? format(parseISO(date), 'MMMM d, yyyy') : ''
+}
diff --git a/utils/formattingUtils.js b/utils/formattingUtils.js
new file mode 100644
index 00000000..0b161dfe
--- /dev/null
+++ b/utils/formattingUtils.js
@@ -0,0 +1,12 @@
+import { marked } from 'marked'
+import DOMPurify from 'isomorphic-dompurify'
+
+/**
+ * Parse markdown
+ * @param {String} markdown
+ * @returns {HTML}
+ */
+export function parseMarkdown(markdown = '', purifyOptions = {}) {
+  purifyOptions = {...purifyOptions, ADD_ATTR: ['target']}
+  return DOMPurify.sanitize(marked(markdown), purifyOptions)
+}

From 8ed4ce3c5e755668b5267bb7faa9abad7c7f1b22 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Fri, 22 Nov 2024 15:49:08 -0500
Subject: [PATCH 3/8] converted about, about details, and part of the homepage

---
 components/Consortias/Consortias.vue          |  29 +-
 components/Gallery/Gallery.vue                |   6 +-
 .../ProjectsAndDatasetsCard.vue               |   2 +
 components/SparcNumbers/SparcNumbers.vue      |   6 +-
 pages/about/[aboutDetailsId].vue              | 132 ++++----
 pages/about/index.vue                         | 291 ++++++++---------
 pages/index.vue                               | 305 +++++++++---------
 7 files changed, 374 insertions(+), 397 deletions(-)

diff --git a/components/Consortias/Consortias.vue b/components/Consortias/Consortias.vue
index abfcfdd5..eefca681 100644
--- a/components/Consortias/Consortias.vue
+++ b/components/Consortias/Consortias.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="body1">
-    The SPARC Portal currently supports <b><span class="heading2">{{ consortias.length }}</span></b> consortia. Visit
+    The SPARC Portal currently supports <b><span class="heading2">{{ items.length }}</span></b> consortia. Visit
     the consortia pages to find out more about them:
   </div>
   <div class="data-wrap py-16">
-    <nuxt-link v-for="item in consortias" :key="item.sys.id" class="consortia-item"
-      :to="`/about/consortia/${item.fields.slug}`">
+    <nuxt-link
+      v-for="item in items"
+      :key="item.sys.id"
+      class="consortia-item"
+      :to="`/about/consortia/${item.fields.slug}`"
+    >
       <img :src="logoUrl(item)" :alt="`Logo for ${item.fields.title}`" />
       <p class="mb-0 mt-8">
         {{ item.fields.title }}
@@ -19,20 +23,11 @@ import { pathOr } from 'ramda'
 
 export default {
   name: 'Consortias',
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient } = useNuxtApp()
-    const consortias =
-      await $contentfulClient.getEntries({
-        content_type: config.public.ctf_consortia_content_type_id,
-        order: 'fields.displayOrder'
-      }).then(({ items }) => {
-        return items
-      }).catch(() => {
-        return []
-      })
-    return {
-      consortias
+
+  props: {
+    items: {
+      type: Array,
+      default: () => []
     }
   },
   methods: {
diff --git a/components/Gallery/Gallery.vue b/components/Gallery/Gallery.vue
index 078ad9a5..721f3838 100644
--- a/components/Gallery/Gallery.vue
+++ b/components/Gallery/Gallery.vue
@@ -3,7 +3,7 @@
     <div class="resources-gallery-strip">
       <div class="card-line">
         <!--template needed in order to force windowedItems to recompute when items changes-->
-        <template v-if="items.length">
+        <template v-if="items?.length">
           <span v-for="(item, index) in windowedItems" :key="index" :class="['key-image-span']">
             <template v-if="item">
               <component v-if="galleryItemType === 'resources'" :is="galleryItemComponent" :width="cardWidth"
@@ -31,7 +31,7 @@
       </div>
     </div>
     <client-only>
-      <pagination v-if="items.length > 0" background :total-count="itemCount" :selected="currentIndex"
+      <pagination v-if="items?.length > 0" background :total-count="itemCount" :selected="currentIndex"
         :page-size="numberOfItemsVisible" :pager-count=7 @select-page="indicatorClicked" />
     </client-only>
   </div>
@@ -109,7 +109,7 @@ export default {
       return defaultTo('', galleryItemComponents[this.galleryItemType])
     },
     itemCount() {
-      return this.items.length
+      return this.items?.length
     },
     isPrevPossible() {
       return this.currentIndex > 0
diff --git a/components/ProjectsAndDatasets/ProjectsAndDatasetsCard/ProjectsAndDatasetsCard.vue b/components/ProjectsAndDatasets/ProjectsAndDatasetsCard/ProjectsAndDatasetsCard.vue
index eab045af..c9c65d29 100644
--- a/components/ProjectsAndDatasets/ProjectsAndDatasetsCard/ProjectsAndDatasetsCard.vue
+++ b/components/ProjectsAndDatasets/ProjectsAndDatasetsCard/ProjectsAndDatasetsCard.vue
@@ -94,6 +94,7 @@ export default {
   aspect-ratio: 1;
   border: 1px solid $lineColor2;
   max-width: 12rem;
+  min-width: 5rem;
 }
 .subpage-col {
   display: flex;
@@ -101,6 +102,7 @@ export default {
   align-items: flex-start;
   background-color: white;
   padding: .5rem;
+  min-width: 7rem;
 }
 
 .subpage-row {
diff --git a/components/SparcNumbers/SparcNumbers.vue b/components/SparcNumbers/SparcNumbers.vue
index 3ab09d8d..65c965d4 100644
--- a/components/SparcNumbers/SparcNumbers.vue
+++ b/components/SparcNumbers/SparcNumbers.vue
@@ -3,7 +3,7 @@
     <div class="heading2">
       SPARC by the numbers
     </div>
-    <Consortias />
+    <Consortias :items=consortiaItems />
     <div class="body1">
       We have <b><span class="heading2">{{ totalContributors }}</span></b> total contributors. Explore the data to
       find out what amazing research we have:
@@ -63,6 +63,10 @@ export default {
     exploreData: {
       type: Array,
       default: () => []
+    },
+    consortiaItems: {
+      type: Array,
+      default: () => []
     }
   },
   methods: {
diff --git a/pages/about/[aboutDetailsId].vue b/pages/about/[aboutDetailsId].vue
index 466777ee..751601cb 100644
--- a/pages/about/[aboutDetailsId].vue
+++ b/pages/about/[aboutDetailsId].vue
@@ -1,34 +1,33 @@
+
 <template>
   <Head>
-    <Title>{{ aboutDetailsItem.fields.title }}</Title>
-    <Meta name="og:title" hid="og:title" :content="aboutDetailsItem.fields.title" />
-    <Meta name="twitter:title" :content="aboutDetailsItem.fields.title" />
-    <Meta name="description" hid="description" :content="aboutDetailsItem.fields.summary" />
-    <Meta name="og:description" hid="og:description" :content="aboutDetailsItem.fields.summary" />
-    <Meta name="twitter:description" :content="aboutDetailsItem.fields.summary" />
+    <Title>{{ aboutDetailsItem?.fields?.title }}</Title>
+    <Meta name="og:title" hid="og:title" :content="aboutDetailsItem?.fields?.title" />
+    <Meta name="twitter:title" :content="aboutDetailsItem?.fields?.title" />
+    <Meta name="description" hid="description" :content="aboutDetailsItem?.fields?.summary" />
+    <Meta name="og:description" hid="og:description" :content="aboutDetailsItem?.fields?.summary" />
+    <Meta name="twitter:description" :content="aboutDetailsItem?.fields?.summary" />
   </Head>
   <div>
-    <breadcrumb :breadcrumb="breadcrumb" :title="aboutDetailsItem.fields.title" />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="aboutDetailsItem?.fields?.title" />
     <page-hero class="py-24">
-      <h1>{{ aboutDetailsItem.fields.title }}</h1>
-      <p>{{ aboutDetailsItem.fields.summary }}</p>
+      <h1>{{ aboutDetailsItem?.fields?.title }}</h1>
+      <p>{{ aboutDetailsItem?.fields?.summary }}</p>
     </page-hero>
     <div class="container">
       <div class="subpage">
-        <div v-html="parseMarkdown(aboutDetailsItem.fields.description)" />
+        <div v-html="parseMarkdown(aboutDetailsItem?.fields?.description)" />
         <hr />
-        <p class="share-text">
-          SHARE
-        </p>
+        <p class="share-text">SHARE</p>
         <share-links />
       </div>
-      <div v-if="aboutDetailsItem.fields.learnMore" class="subpage">
+      <div v-if="aboutDetailsItem?.fields?.learnMore" class="subpage">
         <div class="heading2 mb-16">Learn More</div>
         <template v-for="(item, index) in aboutDetailsItem.fields.learnMore" :key="item + index">
           <div>
-            <learn-more-card :about-details-item="item" :parent-path="aboutDetailsItem.fields.slug" />
+            <learn-more-card :about-details-item="item" :parent-path="aboutDetailsItem?.fields?.slug" />
             <hr
-              v-if="aboutDetailsItem.fields.learnMore.length > 1 && index != aboutDetailsItem.fields.learnMore.length - 1" />
+              v-if="aboutDetailsItem?.fields?.learnMore.length > 1 && index !== aboutDetailsItem?.fields?.learnMore.length - 1" />
           </div>
         </template>
       </div>
@@ -36,73 +35,64 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useRuntimeConfig, useAsyncData } from '#app'
 import { pathOr, isEmpty } from 'ramda'
-import Breadcrumb from '@/components/Breadcrumb/Breadcrumb.vue'
 import LearnMoreCard from '@/components/LearnMoreCard/LearnMoreCard.vue'
 import ShareLinks from '~/components/ShareLinks/ShareLinks.vue'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 
-import marked from '@/mixins/marked'
-
-export default {
-  name: 'AboutDetailsId',
+const config = useRuntimeConfig()
+const { $contentfulClient } = useNuxtApp()
+const { params } = useRoute()
+const router = useRouter()
 
-  components: {
-    Breadcrumb,
-    LearnMoreCard,
-    ShareLinks
-  },
+const { data: aboutDetailsItem } = useAsyncData('aboutDetailsItem', async () => {
+  try {
+    const entries = await $contentfulClient.getEntries({
+      content_type: config.public.ctf_about_details_content_type_id,
+      'fields.slug': params.aboutDetailsId
+    })
 
-  mixins: [marked],
+    if (entries.items.length === 0) {
+      const response = await $contentfulClient.getEntry(params.aboutDetailsId)
+      const slug = pathOr('', ['fields', 'slug'], response)
 
-  data: () => ({
-    aboutDetailsItem: null,
-    heroCopy: '',
-    copy: '',
-    breadcrumb: [
-      {
-        to: {
-          name: 'index'
-        },
-        label: 'Home'
-      },
-      {
-        label: 'About',
-        to: {
-          name: 'about'
-        }
+      if (!isEmpty(slug)) {
+        await router.replace({ path: `/about/${slug}` })
       }
-    ]
-  }),
+      return response
+    } else {
+      return entries.items[0]
+    }
+  } catch (err) {
+    console.error('Error fetching about details item:', err)
+    return null
+  }
+})
 
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    const { params } = useRoute()
-    const config = useRuntimeConfig()
-    const aboutDetailsItem =
-      await $contentfulClient.getEntries({
-        content_type: config.public.ctf_about_details_content_type_id,
-        'fields.slug': params.aboutDetailsId
-      }).then(async ({ items }) => {
-        if (items.length == 0) {
-          return await $contentfulClient.getEntry(params.aboutDetailsId).then(async (response) => {
-            const slug = pathOr("", ['fields', 'slug'], response)
-            if (!isEmpty(slug)) {
-              const router = useRouter()
-              await router.replace({ path: `/about/${slug}` })
-            }
-            return response
-          })
-        }
-        else {
-          return items[0]
-        }
-      })
-    return { aboutDetailsItem }
+const breadcrumb = computed(() => [
+  {
+    to: { name: 'index' },
+    label: 'Home'
+  },
+  {
+    label: 'About',
+    to: { name: 'about' }
   }
-}
+])
+
 </script>
 
+<style scoped>
+.share-text {
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+}
+</style>
+
 <style scoped lang="scss">
 @import 'sparc-design-system-components-2/src/assets/_variables.scss';
 .subpage {
diff --git a/pages/about/index.vue b/pages/about/index.vue
index fd9d181d..03914a0a 100644
--- a/pages/about/index.vue
+++ b/pages/about/index.vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="heroCopy" />
   </Head>
   <div class="about-page pb-16">
-    <breadcrumb :breadcrumb="breadcrumb" title="About" />
+    <Breadcrumb :breadcrumb="breadcrumb" title="About" />
     <page-hero class="py-24" v-if="heroCopy">
       <h1>{{ pageTitle }}</h1>
       <div v-html="parseMarkdown(heroCopy)" />
@@ -18,7 +18,7 @@
         button-link-external="https://docs.sparc.science/docs/sparc-portal-roadmap" />
       <div class="who-we-support-container p-24 mt-32">
         <div class="heading2">Who We Support</div>
-        <Consortias />
+        <Consortias :items="consortiaItems" />
         <nuxt-link to="/about/projects">
           <el-button class="secondary">
             View All Projects
@@ -55,175 +55,152 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
+import { useRuntimeConfig, useAsyncData } from '#app'
 import Paper from '~/components/Paper/Paper.vue'
 import Gallery from '~/components/Gallery/Gallery.vue'
 import Consortias from '~/components/Consortias/Consortias.vue'
-
-import marked from '@/mixins/marked'
 import { getPreviousDate } from '@/utils/common'
-import { pathOr } from 'ramda'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
+
+const config = useRuntimeConfig()
+const currentDate = new Date()
+const currentDay = currentDate.getDate().toString().padStart(2, '0')
+let currentMonth = currentDate.getMonth() + 1
+currentMonth = currentMonth.toString().padStart(2, '0')
+const currentYear = currentDate.getFullYear()
+const whatWeOfferPageId = config.public.ctf_what_we_offer_page_id
+const teamAndLeadershipPageId = config.public.ctf_team_and_leadership_page_id
+const getInvolvedPageId = config.public.ctf_get_involved_page_id
+const lastMonthsDate = getPreviousDate(currentMonth, currentYear)
 
 const months = [
-  'January',
-  'Febuary',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December'
+  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
 ]
 
-export default {
-  name: 'AboutPage',
-
-  components: {
-    Consortias,
-    Paper,
-    Gallery
-  },
+const { data: pageData, error: pageDataError } = useAsyncData('pageData', async () => {
+  try {
+    const { $contentfulClient } = useNuxtApp()
+    const cfPage = await $contentfulClient.getEntry(config.public.ctf_about_page_id)
+    return cfPage.fields
+  } catch (err) {
+    console.error('Could not fetch page data from Contentful.', err)
+    return {}
+  }
+})
 
-  mixins: [marked],
+const { data: consortiaItems, error: consortiaError } = useAsyncData('consortiaItems', async () => {
+  try {
+    const { $contentfulClient } = useNuxtApp()
+    const { items } = await $contentfulClient.getEntries({
+      content_type: config.public.ctf_consortia_content_type_id,
+      order: 'fields.displayOrder',
+    })
+    return items
+  } catch (err) {
+    console.error('Could not fetch consortia data from Contentful.', err)
+    return []
+  }
+})
 
-  data: () => {
-    const config = useRuntimeConfig()
+const { data: metricsData, error: metricsError } = useAsyncData('metricsData', async () => {
+  try {
+    const { $axios } = useNuxtApp()
+    const url = `${config.public.METRICS_URL}/pennsieve?year=${lastMonthsDate.year}&month=${lastMonthsDate.month}`
+    const response = await $axios.get(url)
+    const metrics = response.data[0]
     return {
-      heroCopy: '',
-      copy: '',
-      breadcrumb: [
-        {
-          to: {
-            name: 'index'
-          },
-          label: 'Home'
-        }
-      ],
-      metricsItems: [],
-      highlights: [],
-      projectId: config.public.ctf_project_id,
-      heroImage: {},
-      futurePlans: '',
-      aboutPortalPageId: config.public.ctf_about_portal_page_id,
-      whatWeOfferPageId: config.public.ctf_what_we_offer_page_id,
-      teamAndLeadershipPageId: config.public.ctf_team_and_leadership_page_id,
-      getInvolvedPageId: config.public.ctf_get_involved_page_id,
-      contentfulError: false
+      totalContributors: parseInt(metrics['number_of_sparc_users_overall']['N']),
+      newContributors: parseInt(metrics['number_of_new_sparc_users_last_quarter']['N']),
+      downloadsLastMonth: parseInt(metrics['number_of_sparc_downloads_last_mo']['N'])
     }
-  },
-
-  setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient, $axios } = useNuxtApp()
-    const currentDay = new Date().getDate().toString().padStart(2, "0")
-    let currentMonth = new Date().getMonth() + 1
-    currentMonth = currentMonth.toString().padStart(2, "0")
-    const currentYear = new Date().getFullYear()
-    // we use last months date to get the metrics bc the metrics for the current month aren't published until the end of the month
-    const lastMonthsDate = getPreviousDate(currentMonth, currentYear)
-    let dateUsed = lastMonthsDate
-    return Promise.all([
-      /**
-       * Page data
-       */
-      $contentfulClient
-        .getEntry(config.public.ctf_about_page_id)
-        .then(({fields}) => {
-          return fields
-        })
-        .catch(err => console.error('Could not fetch page data from Contentful.', err)),
-      /**
-       * Metrics
-       */
-      $axios
-        .get(config.public.METRICS_URL + `/pennsieve?year=${lastMonthsDate.year}&month=${lastMonthsDate.month}`)
-        .then(({ data }) => {
-          const metrics = data[0]
-          return {
-            totalContributors: parseInt(metrics['number_of_sparc_users_overall']['N']),
-            newContributors: parseInt(metrics['number_of_new_sparc_users_last_quarter']['N']),
-            downloadsLastMonth: parseInt(metrics['number_of_sparc_downloads_last_mo']['N'])
-          }
-        })
-        .catch(() => {
-          const monthBeforeLastDate = getPreviousDate(lastMonthsDate.month, lastMonthsDate.year)
-          dateUsed = monthBeforeLastDate
-          return $axios
-            .get(config.public.METRICS_URL + `/pennsieve?year=${monthBeforeLastDate.year}&month=${monthBeforeLastDate.month}`)
-            .then(({ data }) => {
-              const metrics = data[0]
-              return {
-                totalContributors: parseInt(metrics['number_of_sparc_users_overall']['N']),
-                newContributors: parseInt(metrics['number_of_new_sparc_users_last_quarter']['N']),
-                downloadsLastMonth: parseInt(metrics['number_of_sparc_downloads_last_mo']['N'])
-              }
-            })
-            .catch(err => {
-              console.error('Could not retreive metrics: ', err)
-            })
-        }),
-      /**
-       * Download count
-       */
-      $axios
-        .get(config.public.discover_api_host + `/metrics/dataset/downloads/summary?startDate=2020-01-01&endDate=${currentYear}-${currentMonth}-${currentDay}`)
-        .then(response => {
-          let totalDownloads = 0
-          response.data.forEach(item => {
-            if (item.origin === 'SPARC') {
-              totalDownloads += parseInt(item['downloads'])
-            }
-          })
-          return totalDownloads
-        })
-        .catch(err => console.log('Error retreiving download count.', err)),
-      /**
-       * Highlights
-       */
-      $contentfulClient.getEntries({
-        'content_type': config.public.ctf_news_id,
-        order: '-fields.publishedDate',
-        limit: '999',
-        'fields.subject': 'Highlight'
-      })
-        .then(({ items }) => items)
-        .catch(err => {
-          console.log('Could not retrieve highlights.', err)
-        })
-    ]).then(([cfPage, metrics={}, totalDownloads, highlights]) => ({
-      ...cfPage,
-      highlights,
-      metricsItems: [{
-        title: 'Total Downloads',
-        data: totalDownloads.toString(),
-        subData: `(${metrics.downloadsLastMonth} in ${months[dateUsed.month - 1]})`
-      }, {
-        title: 'Dataset Contributors',
-        data: metrics.totalContributors?.toString(),
-        subData: `(${metrics.newContributors} new in ${months[dateUsed.month - 1]})`
-      }]
-    }))
-  },
-
-  methods: {
-    /**
-     * Compute the link to the help article
-     * This will use the slug if available, and fallback
-     * to the ID of the entry if not
-     * @returns {Object}
-     */
-    aboutLink(aboutDetailsId) {
-      const name = 'about-aboutDetailsId'
-      return { name, params: { aboutDetailsId } }
-    },
-    logoUrl: function (item) {
-      return pathOr('', ['fields', 'logo', 'fields', 'file', 'url'], item)
+  } catch (err) {
+    const monthBeforeLastDate = getPreviousDate(lastMonthsDate.month, lastMonthsDate.year)
+    const url = `${config.public.METRICS_URL}/pennsieve?year=${monthBeforeLastDate.year}&month=${monthBeforeLastDate.month}`
+    const response = await $axios.get(url)
+    const metrics = response.data[0]
+    return {
+      totalContributors: parseInt(metrics['number_of_sparc_users_overall']['N']),
+      newContributors: parseInt(metrics['number_of_new_sparc_users_last_quarter']['N']),
+      downloadsLastMonth: parseInt(metrics['number_of_sparc_downloads_last_mo']['N'])
+    }
+  }
+})
+
+const { data: totalDownloadsData, error: totalDownloadsError } = useAsyncData('totalDownloadsData', async () => {
+  try {
+    const { $axios } = useNuxtApp()
+    const url = `${config.public.discover_api_host}/metrics/dataset/downloads/summary?startDate=2020-01-01&endDate=${currentYear}-${currentMonth}-${currentDay}`
+    const response = await $axios.get(url)
+    let totalDownloads = 0
+    response.data.forEach(item => {
+      if (item.origin === 'SPARC') {
+        totalDownloads += parseInt(item['downloads'])
+      }
+    })
+    return totalDownloads
+  } catch (err) {
+    console.error('Error retrieving download count.', err)
+    return 0
+  }
+})
+
+const { data: highlights, error: highlightsError } = useAsyncData('highlightsData', async () => {
+  try {
+    const { $contentfulClient } = useNuxtApp()
+    const response = await $contentfulClient.getEntries({
+      'content_type': config.public.ctf_news_id,
+      order: '-fields.publishedDate',
+      limit: 999,
+      'fields.subject': 'Highlight'
+    })
+    return response.items
+  } catch (err) {
+    console.log('Could not retrieve highlights.', err)
+    return []
+  }
+})
+
+const metricsItems = computed(() => {
+  return [
+    {
+      title: 'Total Downloads',
+      data: totalDownloadsData.value?.toString(),
+      subData: `(${metricsData.value?.downloadsLastMonth} in ${months[lastMonthsDate.month - 1]})`
     },
+    {
+      title: 'Dataset Contributors',
+      data: metricsData.value?.totalContributors?.toString(),
+      subData: `(${metricsData.value?.newContributors} new in ${months[lastMonthsDate.month - 1]})`
+    }
+  ]
+})
+
+const breadcrumb = computed(() => [
+  {
+    to: { name: 'index' },
+    label: 'Home'
   }
+])
+
+const pageTitle = computed(() => pageData.value?.pageTitle || 'About Page')
+
+const heroCopy = computed(() => pageData.value?.heroCopy || '')
+
+const sparcPortal = computed(() => pageData.value?.sparcPortal || '')
+
+const whatWeOffer = computed(() => pageData.value?.whatWeOffer || '')
+
+const teamLeadership = computed(() => pageData.value?.teamLeadership || '')
+
+const getInvolved = computed(() => pageData.value?.getInvolved || '')
+
+const historyOfSparc = computed(() => pageData.value?.historyOfSparc || '')
+
+const aboutLink = (aboutDetailsId) => {
+  const name = 'about-aboutDetailsId'
+  return { name, params: { aboutDetailsId } }
 }
 </script>
 
diff --git a/pages/index.vue b/pages/index.vue
index 51522ed1..a4d3aae3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
         <img
           v-if="heroImage"
           class="page-hero-img"
-          :src="heroImage.fields?.file.url"
+          :src="heroImage?.fields?.file.url"
         />
       </template>
     </page-hero>
@@ -19,7 +19,7 @@
     <portal-features class="secondary-background" :features="portalFeatures" />
     <hr />
     <div>
-      <client-only><sparc-numbers :explore-data="exploreData"/></client-only>
+      <sparc-numbers :explore-data="exploreData" :consortiaItems="consortiaItems"/>
     </div>
     <hr />
     <div class="secondary-background">
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import FeaturedData from '@/components/FeaturedData/FeaturedData.vue'
 import SparcNumbers from '@/components/SparcNumbers/SparcNumbers.vue'
 import HomepageNews from '@/components/HomepageNews/HomepageNews.vue'
@@ -45,163 +45,172 @@ import PortalFeatures from '@/components/PortalFeatures/PortalFeatures.vue'
 import ProjectsAndDatasets from '@/components/ProjectsAndDatasets/ProjectsAndDatasets.vue'
 import StayConnected from '@/components/StayConnected/StayConnected.vue'
 import { failMessage } from '@/utils/notification-messages'
-import marked from '@/mixins/marked/index'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 import getHomepageFields from '@/utils/homepageFields'
 import { useMainStore } from '../store/index.js'
 import { mapState } from 'pinia'
 import { clone, pathOr } from 'ramda'
-
-export default {
-  name: 'SparcHomepage',
-
-  components: {
-    FeaturedData,
-    SparcNumbers,
-    HomepageNews,
-    PortalFeatures,
-    ProjectsAndDatasets,
-    StayConnected
-  },
-
-  mixins: [marked],
-
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient, $axios } = useNuxtApp()
-    useHead({
-      title: 'SPARC Portal',
-      meta: [
-        {
-          hid: 'description',
-          name: 'description',
-          content:
-            'The open community platform for bridging the body and the brain through neuroscience and systems physiology data, computational and spatial modeling, and device design.'
-        },
-        {
-          name: 'og:type',
-          content: 'website'
-        },
-        {
-          hid: 'og:title',
-          property: 'og:title',
-          content: 'SPARC Portal'
-        },
-        {
-          hid: 'og:image',
-          property: 'og:image',
-          content: 'https://images.ctfassets.net/6bya4tyw8399/7r5WTb92QnHkub8RsExuc1/2ac134de2ddfd65eb6316421df7578f9/sparc-logo-primary.png'
-        },
-        {
-          hid: 'og:image:secure_url', property: 'og:image:secure_url',
-          content: 'https://images.ctfassets.net/6bya4tyw8399/7r5WTb92QnHkub8RsExuc1/2ac134de2ddfd65eb6316421df7578f9/sparc-logo-primary.png'
-        },
-        {
-          name: 'og:site_name',
-          content: 'SPARC Portal'
-        },
-        {
-          name: 'twitter:card',
-          content: 'summary'
-        },
-        {
-          name: 'twitter:site',
-          content: '@sparc_science'
-        },
-        {
-          name: 'twitter:title',
-          content: 'SPARC Portal'
-        },
-        {
-          name: 'twitter:image',
-          content: 'https://images.ctfassets.net/6bya4tyw8399/7r5WTb92QnHkub8RsExuc1/2ac134de2ddfd65eb6316421df7578f9/sparc-logo-primary.png'
-        },
-        {
-          name: 'twitter:description',
-          content: 'The open community platform for bridging the body and the brain through neuroscience and systems physiology data, computational and spatial modeling, and device design.'
-        }
-      ]
-    })
-    try {
-      const homepage = await $contentfulClient.getEntry(config.public.ctf_home_page_id)
-
-      let fields = getHomepageFields(homepage.fields)
-      const datasetSectionTitle = homepage.fields.datasetSectionTitle
-
-      const { data } = await $axios.get(`${config.public.portal_api}/get_featured_dataset`)
-      const datasets = data?.datasets
-      if (datasets != undefined && datasets.length > 0) {
-        const featuredDataset = {
-          title: datasets[0].name,
-          description: datasets[0].description,
-          banner: datasets[0].banner,
-          id: datasets[0].id,
-        }
-        fields = { ...fields, featuredDataset, datasetSectionTitle }
-      }
-
-      const institutionId = pathOr(undefined, ["featuredProject", "fields", "institution", "sys", "id"], fields)
-
-      if (institutionId) {
-        const institutionResponse = await $contentfulClient.getEntry(institutionId)
-        fields.featuredProject.fields.banner = institutionResponse.fields.logo.fields?.file.url
-      }
-
-      if (datasets == undefined || datasets.length <= 0 || homepage == undefined || fields == undefined) {
-        failMessage("Some services are temporarily unavailable, which may cause certain pages to load incompletely.")
-      }
-
-      return fields
-    } catch (error) {
-      console.error(error)
-      failMessage("Some services are temporarily unavailable, which may cause certain pages to load incompletely.")
-      return
-    }
-  },
-  
-  watch: {
-    profileComplete: {
-      handler: function () {
-        if (this.userProfile && !this.profileComplete) {
-          this.$router.push("/welcome")
-        }
-      },
-      immediate: true
+import { useRuntimeConfig, useAsyncData } from '#app'
+
+const config = useRuntimeConfig()
+const { $contentfulClient, $axios } = useNuxtApp()
+useHead({
+  title: 'SPARC Portal',
+  meta: [
+    {
+      hid: 'description',
+      name: 'description',
+      content:
+        'The open community platform for bridging the body and the brain through neuroscience and systems physiology data, computational and spatial modeling, and device design.'
+    },
+    {
+      name: 'og:type',
+      content: 'website'
+    },
+    {
+      hid: 'og:title',
+      property: 'og:title',
+      content: 'SPARC Portal'
+    },
+    {
+      hid: 'og:image',
+      property: 'og:image',
+      content: 'https://images.ctfassets.net/6bya4tyw8399/7r5WTb92QnHkub8RsExuc1/2ac134de2ddfd65eb6316421df7578f9/sparc-logo-primary.png'
+    },
+    {
+      hid: 'og:image:secure_url', property: 'og:image:secure_url',
+      content: 'https://images.ctfassets.net/6bya4tyw8399/7r5WTb92QnHkub8RsExuc1/2ac134de2ddfd65eb6316421df7578f9/sparc-logo-primary.png'
+    },
+    {
+      name: 'og:site_name',
+      content: 'SPARC Portal'
     },
+    {
+      name: 'twitter:card',
+      content: 'summary'
+    },
+    {
+      name: 'twitter:site',
+      content: '@sparc_science'
+    },
+    {
+      name: 'twitter:title',
+      content: 'SPARC Portal'
+    },
+    {
+      name: 'twitter:image',
+      content: 'https://images.ctfassets.net/6bya4tyw8399/7r5WTb92QnHkub8RsExuc1/2ac134de2ddfd65eb6316421df7578f9/sparc-logo-primary.png'
+    },
+    {
+      name: 'twitter:description',
+      content: 'The open community platform for bridging the body and the brain through neuroscience and systems physiology data, computational and spatial modeling, and device design.'
+    }
+  ]
+})
+    
+const { data: consortiaItems, error: consortiaError } = useAsyncData('consortiaItems', async () => {
+  try {
+    const { items } = await $contentfulClient.getEntries({
+      content_type: config.public.ctf_consortia_content_type_id,
+      order: 'fields.displayOrder',
+    })
+    return items
+  } catch (err) {
+    console.error('Could not fetch consortia data from Contentful.', err)
+    return []
+  }
+})
+
+const { data: homepageData, error: homepageError } = useAsyncData('homepage', async () => {
+  return $contentfulClient.getEntry(config.public.ctf_home_page_id);
+});
+
+const { data: featuredDatasets, error: featuredDatasetsError } = useAsyncData('featuredDatasets', async () => {
+  const response = await $axios.get(`${config.public.portal_api}/get_featured_dataset`);
+  return response.data?.datasets;
+});
+
+const institutionId = computed(() => 
+  pathOr(
+    undefined,
+    ['featuredProject', 'fields', 'institution', 'sys', 'id'],
+    homepageData?.value?.fields
+  )
+);
+
+const { data: institutionData, error: institutionError } = useAsyncData(
+  'institution',
+  async () => {
+    if (!institutionId.value) return null;
+    return $contentfulClient.getEntry(institutionId.value);
   },
+  { watch: [institutionId] }
+);
 
-  computed: {
-    ...mapState(useMainStore, ['profileComplete', 'userProfile']),
-  },
+const fields = computed(() => {
+  if (!homepageData.value) return null;
+
+  let fields = getHomepageFields(homepageData.value?.fields);
+  const datasetSectionTitle = homepageData.value?.fields.datasetSectionTitle;
 
-  beforeMount() {
-    // When trying to do federated sign in using a middleware (like we do for sign out), Cognito's callback would only
-    // execute client-side (after the middleware had already redirected to the new page) causing it to overwrite the 
-    // previous redirect. This issue was supposed to be addressed by https://github.com/aws-amplify/amplify-js/pull/3588, 
-    // but attempting to handle dynamic routing after amplify federated sign in via a custom state hook as suggested 
-    // here: https://github.com/aws-amplify/amplify-js/issues/3125#issuecomment-814265328 did not work
-    const signInRedirectCookie = useCookie('sign-in-redirect-url')
-    if (signInRedirectCookie.value != null) {
-      const signInRedirectUrl = clone(signInRedirectCookie.value)
-      signInRedirectCookie.value = null
-      return navigateTo(signInRedirectUrl)
+  if (featuredDatasets.value?.length > 0) {
+    const featuredDataset = {
+      title: featuredDatasets.value[0].name,
+      description: featuredDatasets.value[0].description,
+      banner: featuredDatasets.value[0].banner,
+      id: featuredDatasets.value[0].id,
     }
-  },
+    fields = { ...fields, featuredDataset, datasetSectionTitle }
+  }
+
+  if (institutionData.value) {
+    fields.featuredProject.fields.banner = institutionData.value?.fields.logo.fields.file.url;
+  }
+
+  return fields;
+})
+
+const heroHeading = computed(() => fields?.value.heroHeading)
+const heroImage = computed(() => fields?.value.heroImage)
+const heroCopy = computed(() => fields?.value.heroCopy)
+const portalFeatures = computed(() => fields?.value.portalFeatures)
+const exploreData = computed(() => fields?.value.exploreData)
+const featuredData = computed(() => fields?.value.featuredData)
+const featuredDataset = computed(() => fields?.value.featuredDataset)
+const featuredProject = computed(() => fields?.value.featuredProject)
+const datasetSectionTitle = computed(() => fields?.value.datasetSectionTitle)
+const newsAndEvents = computed(() => fields?.value.newsAndEvents)
+
+if (homepageError.value || featuredDatasetsError.value || institutionError.value) {
+  console.error(homepageError.value || featuredDatasetsError.value || institutionError.value);
+  failMessage("Some services are temporarily unavailable, which may cause certain pages to load incompletely.");
+}
+  
+const { profileComplete, userProfile } = storeToRefs(useMainStore)
 
-  data: () => {
-    return {
-      featuredData: [],
-      exploreData: [],
-      newsAndEvents: [],
-      portalFeatures: [],
-      featuredProject: {},
-      datasetSectionTitle: '',
-      featuredDataset: {},
-      heroCopy: '',
-      heroHeading: '',
-      heroImage: {}
+watch(
+  () => profileComplete?.value, (newVal) => {
+    if (userProfile?.value && !newVal) {
+      // Redirect to the welcome page if profile is incomplete
+      navigateTo('/welcome');
     }
   },
-}
+  { immediate: true }
+)
+
+// When trying to do federated sign in using a middleware (like we do for sign out), Cognito's callback would only
+// execute client-side (after the middleware had already redirected to the new page) causing it to overwrite the 
+// previous redirect. This issue was supposed to be addressed by https://github.com/aws-amplify/amplify-js/pull/3588, 
+// but attempting to handle dynamic routing after amplify federated sign in via a custom state hook as suggested 
+// here: https://github.com/aws-amplify/amplify-js/issues/3125#issuecomment-814265328 did not work
+onBeforeMount(() => {
+  const signInRedirectCookie = useCookie('sign-in-redirect-url');
+  if (signInRedirectCookie.value) {
+    const signInRedirectUrl = signInRedirectCookie.value;
+    signInRedirectCookie.value = null;
+    return navigateTo(signInRedirectUrl);
+  }
+});
 </script>
 
 <style lang="scss" scoped>

From c0e9b7b2e9eb15b6adcf7ce8701583e18e61ca40 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Sun, 24 Nov 2024 13:52:24 -0500
Subject: [PATCH 4/8] converted homepage

---
 components/Consortias/Consortias.vue          |   2 +-
 components/FeaturedData/FeaturedData.vue      | 198 ++++++++----------
 .../ProjectsAndDatasets.vue                   |   8 +-
 pages/index.vue                               |  40 ++--
 4 files changed, 123 insertions(+), 125 deletions(-)

diff --git a/components/Consortias/Consortias.vue b/components/Consortias/Consortias.vue
index eefca681..1662bf1d 100644
--- a/components/Consortias/Consortias.vue
+++ b/components/Consortias/Consortias.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="body1">
-    The SPARC Portal currently supports <b><span class="heading2">{{ items.length }}</span></b> consortia. Visit
+    The SPARC Portal currently supports <b><span class="heading2">{{ items?.length }}</span></b> consortia. Visit
     the consortia pages to find out more about them:
   </div>
   <div class="data-wrap py-16">
diff --git a/components/FeaturedData/FeaturedData.vue b/components/FeaturedData/FeaturedData.vue
index 950f7be3..b5aed136 100644
--- a/components/FeaturedData/FeaturedData.vue
+++ b/components/FeaturedData/FeaturedData.vue
@@ -6,124 +6,110 @@
         <el-option v-for="category in categories" :key="category" :label="category" :value="category" />
       </el-select>
     </div>
-    <gallery galleryItemType="featuredData" :card-width=Number(10) :items="selectedCategoryFeaturedData" :key="refreshKey" />
+    <client-only><gallery galleryItemType="featuredData" :card-width=Number(10) :items="selectedCategoryFeaturedData" /></client-only>
   </div>
 </template>
-<script>
-import Gallery from '@/components/Gallery/Gallery.vue'
+<script setup>
+import { ref, reactive, watch, computed } from 'vue'
 import { getAlgoliaFacets, facetPropPathMapping } from '../../utils/algolia'
-import { ref } from 'vue'
-import { isEmpty, pathOr } from 'ramda'
+import { pathOr, isEmpty } from 'ramda'
 
-export default {
-  name: 'FeaturedData',
-  components: {
-    Gallery
-  },
-  props: {
-    featuredData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    let categories = []
-    await $contentfulClient.getContentType('featuredData').then(contentType => {
-      contentType.fields.forEach((field) => {
-        if (field.id === 'facetType') {
-          categories = field.items?.validations[0]['in']
-        }
-      })
-    })
-    const selectedCategory = ref(categories[0])
+const config = useRuntimeConfig()
+const { $algoliaClient } = useNuxtApp()
 
-    return {
-      categories,
-      selectedCategory,
-    }
+// Props
+const props = defineProps({
+  featuredData: {
+    type: Array,
+    default: () => []
   },
+  categories: {
+    type: Array,
+    default: () => []
+  }
+})
 
-  data: () => {
-    return {
-      facets: [],
-      viewMore: false,
-      refreshKey: 0
-    }
-  },
+// Reactive state and refs
+const selectedCategory = ref(null)
+const facets = ref([])
+const viewMore = ref(false)
+const localFeaturedData = reactive([...props.featuredData])
+
+if (props.categories?.length > 0) {
+  selectedCategory.value = props.categories[0]
+}
 
-  computed: {
-    viewMoreText() {
-      return this.viewMore ? 'View Less' : 'View More'
-    },
-    selectedCategoryFeaturedData() {
-      return this.featuredData.filter(data => data.fields.facetType == this.selectedCategory)
+// Watch for changes in featuredData and sync localFeaturedData
+watch(
+  () => props.featuredData,
+  (newVal) => {
+    localFeaturedData.splice(0, localFeaturedData.length, ...newVal)
+  }
+)
+watch(
+  () => props.categories,
+  (newVal) => {
+    if (newVal?.length > 0 && !selectedCategory.value) {
+      selectedCategory.value = newVal[0]
     }
-  },
+  }
+)
 
-  watch: {
-    selectedCategory: {
-      handler: async function () {
-        const categoryKey = facetPropPathMapping.find(item => item.label == this.selectedCategory).facetPropPath
-        // Load facets so that we can determine the link for the featured data
-        const algoliaIndex = this.$algoliaClient.initIndex(this.$config.public.ALGOLIA_INDEX)
-        const facets = await getAlgoliaFacets(algoliaIndex, facetPropPathMapping)
-          .then(data => {
-            return data.find(
-              facet => facet.key == categoryKey
-            ).children
-          })
-        this.featuredData.forEach(({ fields }) => {
-          fields['linkWithFacets'] = this.getLink(fields, facets)
-        })
-        this.refreshKey += 1
-      },
-      immediate: true
-    },
-  },
+const selectedCategoryFeaturedData = ref([])
 
-  methods: {
-    /**
-     * Get image URL for the featured data
-     * @param {Object} item
-     * @returns {String}
-     */
-    imageUrl: function(item) {
-      return pathOr('', ['fields', 'image', 'fields', 'file', 'url'], item)
-    },
-    filterOrgans(contentfulFields, organFacets) {
-      const normStr = str => str.toLowerCase().trim()
-      let organs = organFacets.filter(
-        organ =>
-          normStr(organ.label).includes(normStr(contentfulFields.label)) ||
-          (contentfulFields.containsSearch && contentfulFields.containsSearch.some(keyword => normStr(organ.label).includes(normStr(keyword))))
-      )
-      organFacets.forEach(organFacet => {
-        if (organFacet == undefined || organFacet.children == undefined) {
-          return
-        }
-        if (organFacet.children.length == 0) {
-          return
-        }
-        const subOrgans = organFacet.children.filter(
-          subOrgan =>
-            normStr(subOrgan.label).includes(normStr(contentfulFields.label)) ||
-            (contentfulFields.containsSearch && contentfulFields.containsSearch.some(keyword => normStr(subOrgan.label).includes(normStr(keyword))))
-        )
-        organs = organs.concat(subOrgans)
-      })
-      return organs
-    },
-    getLink(contentfulFields, organFacets) {
-      if (isEmpty(organFacets)) {
-        return contentfulFields.link
-      }
-      var organIds = this.filterOrgans(contentfulFields, organFacets).map(organ => organ.id)
-      return organIds.length === 0
-        ? contentfulFields.link
-        : `${contentfulFields.link}&selectedFacetIds=${organIds.join(',')}`
-    }
+// Watch for changes in selectedCategory
+watch(selectedCategory, async (newCategory) => {
+  const categoryKey = facetPropPathMapping.find(item => item.label == newCategory)?.facetPropPath
+
+  if (categoryKey) {
+    // Load facets to determine links for the featured data
+    const algoliaIndex = $algoliaClient.initIndex(config.public.ALGOLIA_INDEX)
+    const facetsData = await getAlgoliaFacets(algoliaIndex, facetPropPathMapping)
+    facets.value = facetsData.find(facet => facet.key == categoryKey)?.children || []
+
+    // Update localFeaturedData with the links
+    localFeaturedData.forEach(({ fields }) => {
+      fields['linkWithFacets'] = getLink(fields, facets.value)
+    })
+    selectedCategoryFeaturedData.value = localFeaturedData.filter(data => data.fields.facetType == newCategory)
+  }
+},
+  { immediate: true }
+)
+
+// Methods
+const imageUrl = (item) => pathOr('', ['fields', 'image', 'fields', 'file', 'url'], item)
+
+const filterOrgans = (contentfulFields, organFacets) => {
+  const normStr = str => str.toLowerCase().trim()
+  let organs = organFacets.filter(
+    organ =>
+      normStr(organ.label).includes(normStr(contentfulFields.label)) ||
+      (contentfulFields.containsSearch &&
+        contentfulFields.containsSearch.some(keyword => normStr(organ.label).includes(normStr(keyword))))
+  )
+  organFacets.forEach(organFacet => {
+    if (!organFacet?.children?.length) return
+
+    const subOrgans = organFacet.children.filter(
+      subOrgan =>
+        normStr(subOrgan.label).includes(normStr(contentfulFields.label)) ||
+        (contentfulFields.containsSearch &&
+          contentfulFields.containsSearch.some(keyword => normStr(subOrgan.label).includes(normStr(keyword))))
+    )
+    organs = organs.concat(subOrgans)
+  })
+  return organs
+}
+
+const getLink = (contentfulFields, organFacets) => {
+  if (isEmpty(organFacets)) {
+    return contentfulFields.link
   }
+  const organIds = filterOrgans(contentfulFields, organFacets).map(organ => organ.id)
+  return organIds.length === 0
+    ? contentfulFields.link
+    : `${contentfulFields.link}&selectedFacetIds=${organIds.join(',')}`
 }
 </script>
 <style lang="scss" scoped>
diff --git a/components/ProjectsAndDatasets/ProjectsAndDatasets.vue b/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
index 4c3552e9..3040dec5 100644
--- a/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
+++ b/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
@@ -7,7 +7,7 @@
         <template v-if="isProject">
           <div class="body2 mb-16">Here is a project you might be interested in:</div>
           <projects-and-datasets-card 
-            v-if="projectOrResource.fields"
+            v-if="projectOrResource?.fields"
             :title="projectOrResource.fields.title" 
             :description="projectOrResource.fields.shortDescription" 
             :banner="projectOrResource.fields.banner" 
@@ -22,7 +22,7 @@
         <template v-else>
           <div class="body2 mb-16">Here is a resource you might be interested in:</div>
           <projects-and-datasets-card
-            v-if="projectOrResource.fields"
+            v-if="projectOrResource?.fields"
             :title="projectOrResource.fields.name" 
             :description="projectOrResource.fields.description" 
             :banner="projectOrResource.fields.logo.fields.file.url" 
@@ -34,7 +34,7 @@
           </nuxt-link>
         </template>
       </div>
-      <div v-if="dataset.title" class="col p-16">
+      <div v-if="dataset?.title" class="col p-16">
         <div class="body2 mb-16">{{ datasetSectionTitle }}</div>
         <projects-and-datasets-card 
           :title="dataset.title" 
@@ -91,7 +91,7 @@ export default {
       }
     },
     resourceLink() {
-      if (this.projectOrResource.fields.requiresDetailsPage) {
+      if (this.projectOrResource?.fields.requiresDetailsPage) {
         return {
           isInternal: true,
           path: "resources/" + pathOr("", ["sys","id"], this.projectOrResource)
diff --git a/pages/index.vue b/pages/index.vue
index a4d3aae3..78cd9d8e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -23,7 +23,7 @@
     </div>
     <hr />
     <div class="secondary-background">
-      <client-only><featured-data :featured-data="featuredData" /></client-only>
+      <featured-data :featured-data="featuredData" :categories="featuredDataCategories"/>
     </div>
     <hr />
     <projects-and-datasets :datasetSectionTitle="datasetSectionTitle" :projectOrResource="featuredProject" :dataset="featuredDataset" />
@@ -48,8 +48,7 @@ import { failMessage } from '@/utils/notification-messages'
 import { parseMarkdown } from '@/utils/formattingUtils.js'
 import getHomepageFields from '@/utils/homepageFields'
 import { useMainStore } from '../store/index.js'
-import { mapState } from 'pinia'
-import { clone, pathOr } from 'ramda'
+import { pathOr } from 'ramda'
 import { useRuntimeConfig, useAsyncData } from '#app'
 
 const config = useRuntimeConfig()
@@ -123,7 +122,20 @@ const { data: consortiaItems, error: consortiaError } = useAsyncData('consortiaI
 
 const { data: homepageData, error: homepageError } = useAsyncData('homepage', async () => {
   return $contentfulClient.getEntry(config.public.ctf_home_page_id);
-});
+})
+
+const { data: featuredDataCategories, error: featuredDataCategoriesError } = useAsyncData('featuredDataCategories', async () => {
+  let categories = []
+  await $contentfulClient.getContentType('featuredData').then(contentType => {
+    contentType.fields.forEach((field) => {
+      if (field.id === 'facetType') {
+        categories = field.items?.validations[0]['in']
+      }
+    })
+  })
+  console.log("CATS = ", categories)
+  return categories
+})
 
 const { data: featuredDatasets, error: featuredDatasetsError } = useAsyncData('featuredDatasets', async () => {
   const response = await $axios.get(`${config.public.portal_api}/get_featured_dataset`);
@@ -170,16 +182,16 @@ const fields = computed(() => {
   return fields;
 })
 
-const heroHeading = computed(() => fields?.value.heroHeading)
-const heroImage = computed(() => fields?.value.heroImage)
-const heroCopy = computed(() => fields?.value.heroCopy)
-const portalFeatures = computed(() => fields?.value.portalFeatures)
-const exploreData = computed(() => fields?.value.exploreData)
-const featuredData = computed(() => fields?.value.featuredData)
-const featuredDataset = computed(() => fields?.value.featuredDataset)
-const featuredProject = computed(() => fields?.value.featuredProject)
-const datasetSectionTitle = computed(() => fields?.value.datasetSectionTitle)
-const newsAndEvents = computed(() => fields?.value.newsAndEvents)
+const heroHeading = computed(() => fields.value?.heroHeading)
+const heroImage = computed(() => fields.value?.heroImage)
+const heroCopy = computed(() => fields.value?.heroCopy)
+const portalFeatures = computed(() => fields.value?.portalFeatures)
+const exploreData = computed(() => fields.value?.exploreData)
+const featuredData = computed(() => fields.value?.featuredData)
+const featuredDataset = computed(() => fields.value?.featuredDataset)
+const featuredProject = computed(() => fields.value?.featuredProject)
+const datasetSectionTitle = computed(() => fields.value?.datasetSectionTitle)
+const newsAndEvents = computed(() => fields.value?.newsAndEvents)
 
 if (homepageError.value || featuredDatasetsError.value || institutionError.value) {
   console.error(homepageError.value || featuredDatasetsError.value || institutionError.value);

From 412aebd0cb99bcc36d9d8e4e2549d44a2631367a Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Sun, 24 Nov 2024 15:45:57 -0500
Subject: [PATCH 5/8] converted consortia id page

---
 pages/about/consortia/[id].vue      | 357 ++++++++++++----------------
 pages/news-and-events/news/[id].vue |  32 +--
 2 files changed, 164 insertions(+), 225 deletions(-)

diff --git a/pages/about/consortia/[id].vue b/pages/about/consortia/[id].vue
index bef3329d..b7667b45 100644
--- a/pages/about/consortia/[id].vue
+++ b/pages/about/consortia/[id].vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="overview" />
   </Head>
   <div :style="consortiaStyle" class="pb-32">
-    <breadcrumb :breadcrumb="breadcrumb" :title="title" />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="title" />
     <div class="container pt-32">
       <paper class="row" :text="parseMarkdown(overview)" :logoSrc="logoUrl" show-share-links />
       <div class="row mt-32">
@@ -39,230 +39,169 @@
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
-import Paper from '~/components/Paper/Paper.vue'
-import Gallery from '~/components/Gallery/Gallery.vue'
-import ProjectsAndDatasetsCard from '~/components/ProjectsAndDatasets/ProjectsAndDatasetsCard/ProjectsAndDatasetsCard.vue'
-import LearnMoreCard from '@/components/LearnMoreCard/LearnMoreCard.vue'
-import { useLocalStorage } from '~/composables/useLocalStorage'
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAsyncData, useRoute, useNuxtApp, useRuntimeConfig } from '#app';
 
-import marked from '@/mixins/marked'
-import { pathOr, propOr, isEmpty } from 'ramda'
+import Paper from '~/components/Paper/Paper.vue';
+import Gallery from '~/components/Gallery/Gallery.vue';
+import ProjectsAndDatasetsCard from '~/components/ProjectsAndDatasets/ProjectsAndDatasetsCard/ProjectsAndDatasetsCard.vue';
+import LearnMoreCard from '@/components/LearnMoreCard/LearnMoreCard.vue';
 
-const { storeInLocalStorage, getFromLocalStorage, storeTimeDelta, hasTimeDeltaPassed, resetTimestamp } = useLocalStorage()
+import { pathOr } from 'ramda';
+import { parseMarkdown } from '@/utils/formattingUtils.js'
+import { useLocalStorage } from '~/composables/useLocalStorage';
 
-export default {
-  name: 'ConsortiaPage',
+const { storeInLocalStorage, getFromLocalStorage, storeTimeDelta, hasTimeDeltaPassed, resetTimestamp } = useLocalStorage();
 
-  components: {
-    Paper,
-    Gallery,
-    ProjectsAndDatasetsCard,
-    LearnMoreCard
-  },
+// Fetch data using useAsyncData
+const route = useRoute();
+const { $contentfulClient, $pennsieveApiClient } = useNuxtApp();
+const config = useRuntimeConfig();
 
-  mixins: [marked],
+const { data: consortiaItem, error: contentfulError } = await useAsyncData(async () => {
+  const response = await $contentfulClient.getEntries({
+    content_type: config.public.ctf_consortia_content_type_id,
+    'fields.slug': route.params.id.toLowerCase(),
+  });
+  return pathOr([], ['items'], response)[0];
+});
 
-  data: () => {
-    return {
-      featuredDatasetId: null,
-      featuredDataset: {},
-      breadcrumb: [
-        {
-          to: {
-            name: 'index'
-          },
-          label: 'Home'
-        },
-        {
-          label: 'About',
-          to: {
-            name: 'about'
-          }
-        }
-      ]
-    }
-  },
+const highlights = ref([]);
+const { items } = await $contentfulClient
+  .getEntries({
+    content_type: config.public.ctf_news_id,
+    order: '-fields.publishedDate',
+    limit: 999,
+    'fields.consortiaHighlight[in]': consortiaItem.value?.fields?.slug,
+  })
+  highlights.value = items;
 
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient } = useNuxtApp()
-    const { params } = useRoute()
-    let contentfulError = false
-    const consortiaItem =
-      await $contentfulClient.getEntries({
-        content_type: config.public.ctf_consortia_content_type_id,
-        'fields.slug': params.id.toLowerCase()
-      }).then(response => {
-        return propOr([], 'items', response)[0]
-      }).catch(e => {
-        contentfulError = true
-      })
-    let highlights = ref([])
-    $contentfulClient.getEntries({
-      'content_type': config.public.ctf_news_id,
-      order: '-fields.publishedDate',
-      limit: '999',
-      'fields.consortiaHighlight[in]': consortiaItem.fields.slug
-    }).then(({ items }) => {
-      highlights.value = items
-    }).catch(() => {
-      highlights.value = []
-    })
-    return {
-      consortiaItem,
-      highlights,
-      contentfulError
-    }
-  },
-  async mounted() {
-    const featuredDatasetIds = pathOr('', ['fields', 'featuredDatasets'], this.consortiaItem)
-    const organizationFilter = pathOr('', ['fields', 'organizations'], this.consortiaItem)
-    const dateToShowFeaturedDatasetsUntil = pathOr('', ['fields', 'dateToShowFeaturedDatasets'], this.consortiaItem)
-    const timeDeltaForFeaturedDatasets = pathOr('', ['fields', 'timeDelta'], this.consortiaItem)
+// Data and computed properties
+const breadcrumb = [
+  { to: { name: 'index' }, label: 'Home' },
+  { to: { name: 'about' }, label: 'About' },
+];
 
-    // Check if any of the values have been changed
-    const updatedFeaturedDatasetIds = storeInLocalStorage(this.featuredDatasetIdsKey, featuredDatasetIds)
-    const updatedOrganizationFilter = storeInLocalStorage(this.organizationFilterKey, organizationFilter)
-    const updatedDateToShowFeaturedDatasetsUntil = storeInLocalStorage(this.dateToShowFeaturedDatasetsUntilKey, dateToShowFeaturedDatasetsUntil)
-    const updatedTimeDeltaForFeaturedDatasets = storeTimeDelta(this.timeDeltaForFeaturedDatasetsKey, timeDeltaForFeaturedDatasets)
-    const hasAnyFeaturedDatasetsValuesChanged = updatedFeaturedDatasetIds || updatedOrganizationFilter || updatedDateToShowFeaturedDatasetsUntil || updatedTimeDeltaForFeaturedDatasets
+const title = computed(() => pathOr('', ['fields', 'title'], consortiaItem.value));
+const overview = computed(() => pathOr('', ['fields', 'overview'], consortiaItem.value));
+const whoWeAre = computed(() => pathOr('', ['fields', 'whoWeAre'], consortiaItem.value));
+const whoWeAreButtonText = computed(() => pathOr('', ['fields', 'whoWeAreButtonText'], consortiaItem.value))
+const whoWeAreButtonLink = computed(() => pathOr('', ['fields', 'whoWeAreButtonLink'], consortiaItem.value))
+const ourResearch = computed(() => pathOr('', ['fields', 'ourResearch'], consortiaItem.value))
+const ourResearchButtonText = computed(() => pathOr('', ['fields', 'ourResearchButtonText'], consortiaItem.value))
+const ourResearchButtonLink = computed(() => pathOr('', ['fields', 'ourResearchButtonLink'], consortiaItem.value))
 
-    let listWasReset = false
-    let availableFeaturedDatasetIds = getFromLocalStorage(this.listOfAvailableDatasetIdsKey)
-    if (hasAnyFeaturedDatasetsValuesChanged || availableFeaturedDatasetIds == null || availableFeaturedDatasetIds.length < 1) {
-      await this.resetListOfAvailableDatasetIds(featuredDatasetIds, new Date(dateToShowFeaturedDatasetsUntil), organizationFilter)
-      listWasReset = true
-    }
-    if (hasTimeDeltaPassed(this.timeDeltaForFeaturedDatasetsKey) || listWasReset) {
-      resetTimestamp(this.timeDeltaForFeaturedDatasetsKey)
-      const availableDatasetIds = getFromLocalStorage(this.listOfAvailableDatasetIdsKey)
-      if (availableDatasetIds == null || availableDatasetIds.length < 1)
-      {
-        storeInLocalStorage(this.featuredDatasetIdKey, null)
-      } else {
-        const randomIndex = Math.floor(Math.random() * availableDatasetIds.length)
-        // Remove a random id from the list of available and set it as the featured id
-        storeInLocalStorage(this.featuredDatasetIdKey, availableDatasetIds.splice(randomIndex, 1)[0])
-        // Update local storage with the new list
-        storeInLocalStorage(this.listOfAvailableDatasetIdsKey, availableDatasetIds)
-      }
-    }
-    this.featuredDatasetId = getFromLocalStorage(this.featuredDatasetIdKey)
-  },
-  watch: {
-    'featuredDatasetId': {
-      handler: async function (id) {
-        if (!isEmpty(id) && id != null) {
-          const pennsieveDatasetUrl = `${this.$config.public.discover_api_host}/datasets/${id}`
-          try {
-            const { data } = await this.$pennsieveApiClient.value.get(pennsieveDatasetUrl)
-            this.featuredDataset = { 'title': data.name, 'description': data.description, 'banner': data.banner, 'id': data.id }
-          } catch {
-            this.featuredDataset = {}
-          }
-        }
+const learnMore = computed(() => pathOr([], ['fields', 'learnMore'], consortiaItem.value))
+const logoUrl = computed(() => pathOr('', ['fields', 'logo', 'fields', 'file', 'url'], consortiaItem.value))
+
+// Computed properties
+const featuredDatasetLink = computed(() => {
+  const datasetPath = featuredDataset.value?.id ? `/datasets/${featuredDataset.value.id}` : '/';
+  return {
+    isInternal: true,
+    path: datasetPath,
+  };
+});
+
+const featuredDatasetIdKey = computed(() => `${consortiaItem.value.fields.slug}_featuredDatasetId`);
+const featuredDatasetIdsKey = computed(() => `${consortiaItem.value.fields.slug}_featuredDatasetIds`);
+const listOfAvailableDatasetIdsKey = computed(() => `${consortiaItem.value.fields.slug}_listOfAvailableDatasetIds`);
+const organizationFilterKey = computed(() => `${consortiaItem.value.fields.slug}_organizationFilter`);
+const dateToShowFeaturedDatasetsUntilKey = computed(() => `${consortiaItem.value.fields.slug}_dateToShowFeaturedDatasetsUntil`);
+const timeDeltaForFeaturedDatasetsKey = computed(() => `${consortiaItem.value.fields.slug}_timeDeltaForFeaturedDatasets`);
+
+// Methods for handling featured datasets
+const featuredDatasetId = ref(null);
+const featuredDataset = ref({});
+watch(
+  featuredDatasetId,
+  async (id) => {
+    if (id) {
+      const pennsieveDatasetUrl = `${config.public.discover_api_host}/datasets/${id}`;
+      try {
+        const { data } = await $pennsieveApiClient.value.get(pennsieveDatasetUrl);
+        featuredDataset.value = {
+          title: data.name,
+          description: data.description,
+          banner: data.banner,
+          id: data.id,
+        };
+      } catch {
+        featuredDataset.value = {};
       }
     }
   },
-  computed: {
-    title() {
-      return pathOr('', ['fields', 'title'], this.consortiaItem)
-    },
-    whoWeAre() {
-      return pathOr('', ['fields', 'whoWeAre'], this.consortiaItem)
-    },
-    whoWeAreButtonText() {
-      return pathOr('', ['fields', 'whoWeAreButtonText'], this.consortiaItem)
-    },
-    whoWeAreButtonLink() {
-      return pathOr('', ['fields', 'whoWeAreButtonLink'], this.consortiaItem)
-    },
-    learnMore() {
-      return pathOr([], ['fields', 'learnMore'], this.consortiaItem)
-    },
-    ourResearch() {
-      return pathOr('', ['fields', 'ourResearch'], this.consortiaItem)
-    },
-    ourResearchButtonText() {
-      return pathOr('', ['fields', 'ourResearchButtonText'], this.consortiaItem)
-    },
-    ourResearchButtonLink() {
-      return pathOr('', ['fields', 'ourResearchButtonLink'], this.consortiaItem)
-    },
-    overview() {
-      return pathOr('', ['fields', 'overview'], this.consortiaItem)
-    },
-    backgroundColor1() {
-      return pathOr('f5f7fa', ['fields', 'firstColor'], this.consortiaItem)
-    },
-    backgroundColor2() {
-      return pathOr('f5f7fa', ['fields', 'secondColor'], this.consortiaItem)
-    },
-    backgroundColor3() {
-      return pathOr('', ['fields', 'thirdColor'], this.consortiaItem)
-    },
-    buttonAndLinkColor() {
-      return pathOr('', ['fields', 'buttonAndLinkColor'], this.consortiaItem)
-    },
-    consortiaStyle() {
-      let style = isEmpty(this.backgroundColor3) ?
-        { backgroundImage: `linear-gradient(#${this.backgroundColor1}, #${this.backgroundColor2}` } :
-        { backgroundImage: `linear-gradient(#${this.backgroundColor1}, #${this.backgroundColor2}, #${this.backgroundColor3}` }
-      style = { ...style, '--button-and-link-color': `#${this.buttonAndLinkColor}`, '--button-and-link-secondary-color': `#${this.buttonAndLinkColor}16` }
-      return style
-    },
-    logoUrl() {
-      return pathOr('', ['fields', 'logo', 'fields', 'file', 'url'], this.consortiaItem)
-    },
-    featuredDatasetLink() {
-      const datasetPath = this.featuredDataset?.id ? `/datasets/${this.featuredDataset.id}` : '/'
-      return {
-        isInternal: true,
-        path: datasetPath
-      }
-    },
-    featuredDatasetIdKey() {
-      return `${this.consortiaItem.fields.slug}_featuredDatasetId`
-    },
-    featuredDatasetIdsKey() {
-      return `${this.consortiaItem.fields.slug}_featuredDatasetIds`
-    },
-    listOfAvailableDatasetIdsKey() {
-      return `${this.consortiaItem.fields.slug}_listOfAvailableDatasetIds`
-    },
-    organizationFilterKey() {
-      return `${this.consortiaItem.fields.slug}_organizationFilter`
-    },
-    dateToShowFeaturedDatasetsUntilKey() {
-      return `${this.consortiaItem.fields.slug}_dateToShowFeaturedDatasetsUntil`
-    },
-    timeDeltaForFeaturedDatasetsKey() {
-      return `${this.consortiaItem.fields.slug}_timeDeltaForFeaturedDatasets`
+  { immediate: true }
+);
+
+// Styling for consortia
+const consortiaStyle = computed(() => {
+  const bg1 = pathOr('f5f7fa', ['fields', 'firstColor'], consortiaItem.value);
+  const bg2 = pathOr('f5f7fa', ['fields', 'secondColor'], consortiaItem.value);
+  const bg3 = pathOr('', ['fields', 'thirdColor'], consortiaItem.value);
+  const linkColor = pathOr('', ['fields', 'buttonAndLinkColor'], consortiaItem.value);
+  return {
+    backgroundImage: `linear-gradient(#${bg1}, #${bg2}${bg3 ? `, #${bg3}` : ''})`,
+    '--button-and-link-color': `#${linkColor}`,
+    '--button-and-link-secondary-color': `#${linkColor}16`,
+  }
+})
+
+const resetListOfAvailableDatasetIds = async (featuredDatasetIds, dateToShowFeaturedDatasetsUntil, organizations) => {
+  if (featuredDatasetIds?.length > 0) {
+    const currentDate = new Date();
+    // If the reset time has not passed or it is not set then just use the list of featured dataset ids set in Contentful
+    if (!dateToShowFeaturedDatasetsUntil || isNaN(dateToShowFeaturedDatasetsUntil.getTime()) || currentDate < dateToShowFeaturedDatasetsUntil) {
+      storeInLocalStorage(listOfAvailableDatasetIdsKey.value, featuredDatasetIds);
+      return;
     }
-  },
-  methods: {
-    async resetListOfAvailableDatasetIds(featuredDatasetIds, dateToShowFeaturedDatasetsUntil, organizations) {
-      if (featuredDatasetIds?.length > 0) {
-        const currentDate = new Date()
-        // If the reset time has not passed or it is not set then just use the list of featured dataset ids set in Contentful
-        if (isEmpty(dateToShowFeaturedDatasetsUntil) || isNaN(dateToShowFeaturedDatasetsUntil.getTime()) || currentDate < dateToShowFeaturedDatasetsUntil) {
-          storeInLocalStorage(this.listOfAvailableDatasetIdsKey, featuredDatasetIds)
-          return
-        }
-      }
+  }
 
-      const pennsieveDatasetUrl = `${this.$config.public.discover_api_host}/search/datasets?limit=999&organization=${organizations}`
-      try {
-        const { data } = await this.$pennsieveApiClient.value.get(pennsieveDatasetUrl)
-        storeInLocalStorage(this.listOfAvailableDatasetIdsKey, data.datasets.map(dataset => dataset.id))
-      } catch {
-        storeInLocalStorage(this.listOfAvailableDatasetIdsKey, null)
-      }
+  const pennsieveDatasetUrl = `${config.public.discover_api_host}/search/datasets?limit=999&organization=${organizations}`;
+  try {
+    const { data } = await $pennsieveApiClient.value.get(pennsieveDatasetUrl);
+    storeInLocalStorage(listOfAvailableDatasetIdsKey.value, data.datasets.map(dataset => dataset.id));
+  } catch {
+    storeInLocalStorage(listOfAvailableDatasetIdsKey.value, null);
+  }
+};
+
+onMounted(async () => {
+  const featuredDatasetIds = pathOr('', ['fields', 'featuredDatasets'], consortiaItem.value)
+  const organizationFilter = pathOr('', ['fields', 'organizations'], consortiaItem.value)
+  const dateToShowFeaturedDatasetsUntil = pathOr('', ['fields', 'dateToShowFeaturedDatasets'], consortiaItem.value)
+  const timeDeltaForFeaturedDatasets = pathOr('', ['fields', 'timeDelta'], consortiaItem.value)
+
+  // Check if any of the values have been changed
+  const updatedFeaturedDatasetIds = storeInLocalStorage(featuredDatasetIdsKey.value, featuredDatasetIds)
+  const updatedOrganizationFilter = storeInLocalStorage(organizationFilterKey.value, organizationFilter)
+  const updatedDateToShowFeaturedDatasetsUntil = storeInLocalStorage(dateToShowFeaturedDatasetsUntilKey.value, dateToShowFeaturedDatasetsUntil)
+  const updatedTimeDeltaForFeaturedDatasets = storeTimeDelta(timeDeltaForFeaturedDatasetsKey.value, timeDeltaForFeaturedDatasets)
+  const hasAnyFeaturedDatasetsValuesChanged = updatedFeaturedDatasetIds || updatedOrganizationFilter || updatedDateToShowFeaturedDatasetsUntil || updatedTimeDeltaForFeaturedDatasets
+
+  let listWasReset = false
+  let availableFeaturedDatasetIds = getFromLocalStorage(listOfAvailableDatasetIdsKey.value)
+  if (hasAnyFeaturedDatasetsValuesChanged || availableFeaturedDatasetIds == null || availableFeaturedDatasetIds.length < 1) {
+    await resetListOfAvailableDatasetIds(featuredDatasetIds.value, new Date(dateToShowFeaturedDatasetsUntil), organizationFilter)
+    listWasReset = true
+  }
+  if (hasTimeDeltaPassed(timeDeltaForFeaturedDatasetsKey.value) || listWasReset) {
+    resetTimestamp(timeDeltaForFeaturedDatasetsKey.value)
+    const availableDatasetIds = getFromLocalStorage(listOfAvailableDatasetIdsKey.value)
+    if (availableDatasetIds == null || availableDatasetIds.length < 1)
+    {
+      storeInLocalStorage(featuredDatasetIdKey.value, null)
+    } else {
+      const randomIndex = Math.floor(Math.random() * availableDatasetIds.length)
+      // Remove a random id from the list of available and set it as the featured id
+      storeInLocalStorage(featuredDatasetIdKey.value, availableDatasetIds.splice(randomIndex, 1)[0])
+      // Update local storage with the new list
+      storeInLocalStorage(listOfAvailableDatasetIdsKey.value, availableDatasetIds)
     }
   }
-}
+  featuredDatasetId.value = getFromLocalStorage(featuredDatasetIdKey.value)
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/pages/news-and-events/news/[id].vue b/pages/news-and-events/news/[id].vue
index 54968d85..aeb84c21 100644
--- a/pages/news-and-events/news/[id].vue
+++ b/pages/news-and-events/news/[id].vue
@@ -1,18 +1,18 @@
 <template>
   <Head>
-    <Title>{{ page.fields.title }}</Title>
-    <Meta name="og:title" hid="og:title" :content="page.fields.title" />
-    <Meta name="twitter:title" :content="page.fields.title" />
-    <Meta name="description" hid="description" :content="page.fields.summary" />
-    <Meta name="og:description" hid="og:description" :content="page.fields.summary" />
-    <Meta name="twitter:description" :content="page.fields.summary" />
+    <Title>{{ page?.fields?.title }}</Title>
+    <Meta name="og:title" hid="og:title" :content="page?.fields?.title" />
+    <Meta name="twitter:title" :content="page?.fields?.title" />
+    <Meta name="description" hid="description" :content="page?.fields?.summary" />
+    <Meta name="og:description" hid="og:description" :content="page?.fields?.summary" />
+    <Meta name="twitter:description" :content="page?.fields?.summary" />
   </Head>
   <news-events-resources-page
     :page="page"
-    :content="page.fields.copy"
+    :content="page?.fields?.copy"
     :breadcrumb="breadcrumb"
-    :hero-title="page.fields.title"
-    :hero-summary="page.fields.summary"
+    :hero-title="page?.fields?.title"
+    :hero-summary="page?.fields?.summary"
     type="news"
   >
     <template v-if="newsImage">
@@ -23,10 +23,10 @@
     <h3>Published Date</h3>
     <p>{{ publishedDate }}</p>
 
-    <h3 v-if="page.fields.url">External Link</h3>
-    <p v-if="page.fields.url">
-      <a :href="page.fields.url" target="_blank">
-        {{ page.fields.url }}
+    <h3 v-if="page?.fields?.url">External Link</h3>
+    <p v-if="page?.fields?.url">
+      <a :href="page?.fields?.url" target="_blank">
+        {{ page?.fields?.url }}
       </a>
     </p>
   </news-events-resources-page>
@@ -65,15 +65,15 @@ const { data: page, error } = useAsyncData(
 )
 
 const newsImage = computed(() =>
-  pathOr('', ['fields', 'image', 'fields', 'file', 'url'], page.value)
+  pathOr('', ['fields', 'image', 'fields', 'file', 'url'], page?.value)
 )
 
 const newsImageAlt = computed(() =>
-  pathOr('', ['fields', 'image', 'fields', 'title'], page.value)
+  pathOr('', ['fields', 'image', 'fields', 'title'], page?.value)
 )
 
 const publishedDate = computed(() =>
-  page.value.fields.publishedDate
+  page?.value?.fields.publishedDate
     ? formatDate(page.value.fields.publishedDate)
     : ''
 )

From 83e033d72d3a5fb1443be5d8d5a405e0318a2034 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Sun, 24 Nov 2024 15:56:02 -0500
Subject: [PATCH 6/8] converted share data page

---
 pages/index.vue            |  1 -
 pages/share-data/index.vue | 65 +++++++++++++++++---------------------
 2 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 78cd9d8e..dd04e096 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -133,7 +133,6 @@ const { data: featuredDataCategories, error: featuredDataCategoriesError } = use
       }
     })
   })
-  console.log("CATS = ", categories)
   return categories
 })
 
diff --git a/pages/share-data/index.vue b/pages/share-data/index.vue
index 027d3f5d..2f964afb 100644
--- a/pages/share-data/index.vue
+++ b/pages/share-data/index.vue
@@ -8,7 +8,7 @@
     <Meta name="twitter:description" :content="summary" />
   </Head>
   <div class="page-data pb-16">
-    <breadcrumb :breadcrumb="breadcrumb" :title="title" />
+    <Breadcrumb :breadcrumb="breadcrumb" :title="title" />
     <page-hero class="py-24">
       <h1>{{ title }}</h1>
       <p>{{ summary }}</p>
@@ -34,46 +34,39 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { useAsyncData } from '#app'
 import LearnMoreCard from '@/components/LearnMoreCard/LearnMoreCard.vue'
-import MarkedMixin from '@/mixins/marked'
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 import LoginModal from '@/components/LoginModal/LoginModal.vue'
 
-export default {
-  name: 'ShareDataPage',
-  components: {
-    LearnMoreCard,
-    LoginModal
-  },
-  mixins: [MarkedMixin],
+// Props or data
+const breadcrumb = [
+  {
+    to: {
+      name: 'index'
+    },
+    label: 'Home'
+  }
+]
+const showLoginDialog = ref(false)
 
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    const config = useRuntimeConfig()
-    const pageData = await $contentfulClient.getEntry(config.public.ctf_share_data_page_id)
-    return {
-      title: pageData.fields.title,
-      summary: pageData.fields.summary,
-      description: pageData.fields.description,
-      learnMore: pageData.fields.learnMore,
-      callsToAction: pageData.fields.callsToAction,
-      slug: pageData.fields.slug
-    }
-  },
+const { data: pageData, error } = await useAsyncData('pageData', async () => {
+  const { $contentfulClient } = useNuxtApp()
+  const config = useRuntimeConfig()
+  const pageData = await $contentfulClient.getEntry(config.public.ctf_share_data_page_id)
+  return pageData.fields
+})
 
-  data: () => {
-    return {
-      breadcrumb: [
-        {
-          to: {
-            name: 'index'
-          },
-          label: 'Home'
-        }
-      ],
-      showLoginDialog: false
-    }
-  }
+const title = computed(() => pageData.value?.title || '')
+const summary = computed(() => pageData.value?.summary || '')
+const description = computed(() => pageData.value?.description || '')
+const learnMore = computed(() => pageData.value?.learnMore || [])
+const callsToAction = computed(() => pageData.value?.callsToAction || [])
+const slug = computed(() => pageData.value?.slug || '')
+
+if (error.value) {
+  console.error('Error fetching page data:', error.value)
 }
 </script>
 

From 58e3916d65f0f3ba085aeff325a49b253174a7d4 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Mon, 25 Nov 2024 20:28:20 -0500
Subject: [PATCH 7/8] linter fixes

---
 components/FeaturedData/FeaturedData.vue      |  7 ----
 components/Resources/ResourcePage.vue         |  8 +---
 pages/about/consortia/[id].vue                |  6 ---
 pages/about/index.vue                         |  2 +-
 pages/apps/index.vue                          |  3 --
 pages/index.vue                               |  6 +--
 .../community-spotlight/index.vue             |  2 +-
 pages/news-and-events/events/[id].vue         | 42 +++++++++----------
 pages/news-and-events/events/index.vue        | 12 +++---
 pages/news-and-events/index.vue               | 21 +++++-----
 pages/news-and-events/news/index.vue          |  3 +-
 store/index.js                                |  9 ----
 12 files changed, 42 insertions(+), 79 deletions(-)

diff --git a/components/FeaturedData/FeaturedData.vue b/components/FeaturedData/FeaturedData.vue
index b5aed136..5a34159c 100644
--- a/components/FeaturedData/FeaturedData.vue
+++ b/components/FeaturedData/FeaturedData.vue
@@ -17,7 +17,6 @@ import { pathOr, isEmpty } from 'ramda'
 const config = useRuntimeConfig()
 const { $algoliaClient } = useNuxtApp()
 
-// Props
 const props = defineProps({
   featuredData: {
     type: Array,
@@ -29,7 +28,6 @@ const props = defineProps({
   }
 })
 
-// Reactive state and refs
 const selectedCategory = ref(null)
 const facets = ref([])
 const viewMore = ref(false)
@@ -39,7 +37,6 @@ if (props.categories?.length > 0) {
   selectedCategory.value = props.categories[0]
 }
 
-// Watch for changes in featuredData and sync localFeaturedData
 watch(
   () => props.featuredData,
   (newVal) => {
@@ -57,7 +54,6 @@ watch(
 
 const selectedCategoryFeaturedData = ref([])
 
-// Watch for changes in selectedCategory
 watch(selectedCategory, async (newCategory) => {
   const categoryKey = facetPropPathMapping.find(item => item.label == newCategory)?.facetPropPath
 
@@ -77,9 +73,6 @@ watch(selectedCategory, async (newCategory) => {
   { immediate: true }
 )
 
-// Methods
-const imageUrl = (item) => pathOr('', ['fields', 'image', 'fields', 'file', 'url'], item)
-
 const filterOrgans = (contentfulFields, organFacets) => {
   const normStr = str => str.toLowerCase().trim()
   let organs = organFacets.filter(
diff --git a/components/Resources/ResourcePage.vue b/components/Resources/ResourcePage.vue
index ca6e0548..d6661661 100644
--- a/components/Resources/ResourcePage.vue
+++ b/components/Resources/ResourcePage.vue
@@ -128,7 +128,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useNuxtApp } from '#imports'
 import { useAsyncData } from '#app'
 import SearchControlsContentful from '@/components/SearchControlsContentful/SearchControlsContentful.vue'
@@ -152,7 +152,6 @@ const { data : resources } = await useAsyncData(
   }
 )
 
-// Fetch funding facets using useAsyncData
 const { data: resourcesFundingFacets } = await useAsyncData(
   'resources-funding-facets',
   async () => {
@@ -177,16 +176,13 @@ const { data: resourcesFundingFacets } = await useAsyncData(
   }
 )
 
-// Data properties
 const altSearchResults = ref(null)
 const selectedSortOption = ref(sortOptions[0])
-const sortOptionsRef = ref(sortOptions)
 const breadcrumb = ref([
   { label: 'Home', to: { name: 'index' } },
   { label: 'Tools & Resources', to: { name: 'tools' } }
 ])
 
-// Computed properties
 const curSearchPage = computed(() => resources.value.skip / resources.value.limit + 1)
 
 const sortOrder = computed(() => {
@@ -199,7 +195,6 @@ const type = computed(() => route.query.type || undefined)
 const path = computed(() => route.path)
 const isToolComputed = computed(() => title === 'Tools')
 
-// Pagination handlers
 const onPaginationPageChange = async (page) => {
   const { limit } = resources.value
   const offset = (page - 1) * limit
@@ -223,7 +218,6 @@ const altResultsMounted = () => {
   altSearchResults.value?.retrieveAltTotals()
 }
 
-// Watch for route query changes
 watch(() => route.query, async () => {
   resources.value = await fetchResources(resourceType.value, fundingProgram.value, isToolComputed.value, route.query.search, sortOrder.value, type.value, 10, 0)
 })
diff --git a/pages/about/consortia/[id].vue b/pages/about/consortia/[id].vue
index b7667b45..bfd22245 100644
--- a/pages/about/consortia/[id].vue
+++ b/pages/about/consortia/[id].vue
@@ -54,7 +54,6 @@ import { useLocalStorage } from '~/composables/useLocalStorage';
 
 const { storeInLocalStorage, getFromLocalStorage, storeTimeDelta, hasTimeDeltaPassed, resetTimestamp } = useLocalStorage();
 
-// Fetch data using useAsyncData
 const route = useRoute();
 const { $contentfulClient, $pennsieveApiClient } = useNuxtApp();
 const config = useRuntimeConfig();
@@ -77,7 +76,6 @@ const { items } = await $contentfulClient
   })
   highlights.value = items;
 
-// Data and computed properties
 const breadcrumb = [
   { to: { name: 'index' }, label: 'Home' },
   { to: { name: 'about' }, label: 'About' },
@@ -91,11 +89,9 @@ const whoWeAreButtonLink = computed(() => pathOr('', ['fields', 'whoWeAreButtonL
 const ourResearch = computed(() => pathOr('', ['fields', 'ourResearch'], consortiaItem.value))
 const ourResearchButtonText = computed(() => pathOr('', ['fields', 'ourResearchButtonText'], consortiaItem.value))
 const ourResearchButtonLink = computed(() => pathOr('', ['fields', 'ourResearchButtonLink'], consortiaItem.value))
-
 const learnMore = computed(() => pathOr([], ['fields', 'learnMore'], consortiaItem.value))
 const logoUrl = computed(() => pathOr('', ['fields', 'logo', 'fields', 'file', 'url'], consortiaItem.value))
 
-// Computed properties
 const featuredDatasetLink = computed(() => {
   const datasetPath = featuredDataset.value?.id ? `/datasets/${featuredDataset.value.id}` : '/';
   return {
@@ -111,7 +107,6 @@ const organizationFilterKey = computed(() => `${consortiaItem.value.fields.slug}
 const dateToShowFeaturedDatasetsUntilKey = computed(() => `${consortiaItem.value.fields.slug}_dateToShowFeaturedDatasetsUntil`);
 const timeDeltaForFeaturedDatasetsKey = computed(() => `${consortiaItem.value.fields.slug}_timeDeltaForFeaturedDatasets`);
 
-// Methods for handling featured datasets
 const featuredDatasetId = ref(null);
 const featuredDataset = ref({});
 watch(
@@ -173,7 +168,6 @@ onMounted(async () => {
   const dateToShowFeaturedDatasetsUntil = pathOr('', ['fields', 'dateToShowFeaturedDatasets'], consortiaItem.value)
   const timeDeltaForFeaturedDatasets = pathOr('', ['fields', 'timeDelta'], consortiaItem.value)
 
-  // Check if any of the values have been changed
   const updatedFeaturedDatasetIds = storeInLocalStorage(featuredDatasetIdsKey.value, featuredDatasetIds)
   const updatedOrganizationFilter = storeInLocalStorage(organizationFilterKey.value, organizationFilter)
   const updatedDateToShowFeaturedDatasetsUntil = storeInLocalStorage(dateToShowFeaturedDatasetsUntilKey.value, dateToShowFeaturedDatasetsUntil)
diff --git a/pages/about/index.vue b/pages/about/index.vue
index 03914a0a..87cb0086 100644
--- a/pages/about/index.vue
+++ b/pages/about/index.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useRuntimeConfig, useAsyncData } from '#app'
 import Paper from '~/components/Paper/Paper.vue'
 import Gallery from '~/components/Gallery/Gallery.vue'
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index cb4246ae..71403fa8 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -33,7 +33,6 @@ import { pathOr } from 'ramda'
 import { parseMarkdown } from '@/utils/formattingUtils.js'
 import { useAsyncData, useRuntimeConfig } from '#app'
 
-// Breadcrumb structure
 const breadcrumb = [
   {
     to: { name: 'index' },
@@ -41,7 +40,6 @@ const breadcrumb = [
   },
 ]
 
-// Function to construct portal feature entries
 const constructPortalFeatureEntries = (apps) => {
   if (!apps) return []
   return apps.map((app) => {
@@ -77,7 +75,6 @@ const { data: appData } = await useAsyncData('apps-page-data', async () => {
   }
 })
 
-// Reactive properties
 const fields = computed(() => appData.value.fields || {})
 const appEntries = computed(() => appData.value.appEntries || [])
 const title = computed(() => fields.value?.title || '')
diff --git a/pages/index.vue b/pages/index.vue
index dd04e096..e2206688 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -137,8 +137,8 @@ const { data: featuredDataCategories, error: featuredDataCategoriesError } = use
 })
 
 const { data: featuredDatasets, error: featuredDatasetsError } = useAsyncData('featuredDatasets', async () => {
-  const response = await $axios.get(`${config.public.portal_api}/get_featured_dataset`);
-  return response.data?.datasets;
+  const response = await $axios.get(`${config.public.portal_api}/get_featured_dataset`)
+  return response.data?.datasets
 });
 
 const institutionId = computed(() => 
@@ -219,7 +219,7 @@ onBeforeMount(() => {
   if (signInRedirectCookie.value) {
     const signInRedirectUrl = signInRedirectCookie.value;
     signInRedirectCookie.value = null;
-    return navigateTo(signInRedirectUrl);
+    return navigateTo(signInRedirectUrl)
   }
 });
 </script>
diff --git a/pages/news-and-events/community-spotlight/index.vue b/pages/news-and-events/community-spotlight/index.vue
index 050d036d..2aeaac73 100644
--- a/pages/news-and-events/community-spotlight/index.vue
+++ b/pages/news-and-events/community-spotlight/index.vue
@@ -249,7 +249,7 @@ watch(
       10,
       0
     )
-    altSearchResults.value?.retrieveAltTotals();
+    altSearchResults.value?.retrieveAltTotals()
   },
   { immediate: true }
 )
diff --git a/pages/news-and-events/events/[id].vue b/pages/news-and-events/events/[id].vue
index 0363eadd..c583dd9f 100644
--- a/pages/news-and-events/events/[id].vue
+++ b/pages/news-and-events/events/[id].vue
@@ -38,23 +38,22 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { pathOr } from 'ramda';
-import NewsEventsResourcesPage from '@/components/NewsEventsResourcesPage/NewsEventsResourcesPage';
-import { useNuxtApp, useRoute, useRouter } from '#app';
+import { computed } from 'vue'
+import { pathOr } from 'ramda'
+import NewsEventsResourcesPage from '@/components/NewsEventsResourcesPage/NewsEventsResourcesPage'
+import { useNuxtApp, useRoute, useRouter } from '#app'
 import { formatDate } from '@/utils/dateUtils.js'
 
-const route = useRoute();
-const router = useRouter();
-const { $contentfulClient } = useNuxtApp();
-const config = useRuntimeConfig();
+const route = useRoute()
+const router = useRouter()
+const { $contentfulClient } = useNuxtApp()
+const config = useRuntimeConfig()
 
-// Fetch event page data
 const { data: page, error } = useAsyncData(
   'eventPage',
   async () => {
     const id = route.params.id;
-    const isSlug = id.split('-').length > 1;
+    const isSlug = id.split('-').length > 1
 
     const result = isSlug
       ? await $contentfulClient.getEntries({
@@ -63,19 +62,18 @@ const { data: page, error } = useAsyncData(
         })
       : await $contentfulClient.getEntry(id);
 
-    const eventPage = isSlug ? result.items[0] : result;
+    const eventPage = isSlug ? result.items[0] : result
 
     // Redirect if the slug doesn't match
-    const slug = pathOr(null, ['fields', 'slug'], eventPage);
+    const slug = pathOr(null, ['fields', 'slug'], eventPage)
     if (slug && id !== slug) {
       router.replace(`/news-and-events/events/${slug}`);
     }
 
-    return eventPage || { fields: [] };
+    return eventPage || { fields: [] }
   }
-);
+)
 
-// Breadcrumb configuration
 const breadcrumb = [
   {
     label: 'Home',
@@ -89,22 +87,21 @@ const breadcrumb = [
     label: 'Events',
     to: { name: 'news-and-events-events' }
   }
-];
+]
 
-// Computed properties
 const newsImage = computed(() =>
   pathOr('', ['fields', 'image', 'fields', 'file', 'url'], page.value)
-);
+)
 
 const newsImageAlt = computed(() =>
   pathOr('', ['fields', 'image', 'fields', 'title'], page.value)
-);
+)
 
 const eventDetails = computed(() =>
   pathOr(null, ['fields', 'eventDetails'], page.value)
-);
+)
 
-const hasEventDetailsPage = computed(() => eventDetails.value !== null);
+const hasEventDetailsPage = computed(() => eventDetails.value !== null)
 
 const eventDate = computed(() => {
   const startDate = page.value.fields?.startDate
@@ -115,7 +112,6 @@ const eventDate = computed(() => {
     : '';
   return startDate === endDate || !endDate
     ? startDate
-    : `${startDate} - ${endDate}`;
+    : `${startDate} - ${endDate}`
 });
 </script>
-
diff --git a/pages/news-and-events/events/index.vue b/pages/news-and-events/events/index.vue
index b199cf77..b9535f01 100644
--- a/pages/news-and-events/events/index.vue
+++ b/pages/news-and-events/events/index.vue
@@ -193,30 +193,30 @@ const curSearchPage = computed(() => {
 })
 
 const firstPastEventId = computed(() => {
-  if (!events.value?.items) return -1;
+  if (!events.value?.items) return -1
 
   for (let i = 0; i < events.value?.items?.length; i++) {
     const event = events.value?.items[i];
     const upcomingSortOrder = pathOr("", ['fields', 'upcomingSortOrder'], event);
     if (upcomingSortOrder < 0) {
-      return pathOr("", ['sys', 'id'], event);
+      return pathOr("", ['sys', 'id'], event)
     }
   }
-  return -1;
+  return -1
 })
 
 const showPastEventsDivider = computed(() => {
   if (!events.value?.items || selectedSortOption.value?.id !== "upcoming") {
-    return false;
+    return false
   }
 
   const items = events.value?.items;
   if (!items?.length) {
-    return false;
+    return false
   }
 
   const firstEventId = pathOr(-1, ['sys', 'id'], items[0]);
-  return firstPastEventId.value !== firstEventId;
+  return firstPastEventId.value !== firstEventId
 })
 
 // Fetch events data using `useAsyncData` for server-side rendering
diff --git a/pages/news-and-events/index.vue b/pages/news-and-events/index.vue
index e768c20b..61975217 100644
--- a/pages/news-and-events/index.vue
+++ b/pages/news-and-events/index.vue
@@ -120,9 +120,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useAsyncData } from '#app';
-import { fetchData } from './model';
+import { computed } from 'vue'
+import { useAsyncData } from '#app'
+import { fetchData } from './model'
 import { parseMarkdown } from '@/utils/formattingUtils.js'
 
 const breadcrumb = [
@@ -136,16 +136,15 @@ const title = 'News & Events';
 
 // Fetch initial data
 const { data: pageData } = await useAsyncData(() => {
-  const { $contentfulClient } = useNuxtApp();
-  return fetchData($contentfulClient, '', 2);
+  const { $contentfulClient } = useNuxtApp()
+  return fetchData($contentfulClient, '', 2)
 });
 
-const page = computed(() => pageData.value?.page || {});
-const news = computed(() => pageData.value?.news || {});
-const upcomingEvents = computed(() => pageData.value?.upcomingEvents || {});
-const stories = computed(() => pageData.value?.stories || {});
-
-const featuredEvent = computed(() => page.value?.fields?.featuredEvent || {});
+const page = computed(() => pageData.value?.page || {})
+const news = computed(() => pageData.value?.news || {})
+const upcomingEvents = computed(() => pageData.value?.upcomingEvents || {})
+const stories = computed(() => pageData.value?.stories || {})
+const featuredEvent = computed(() => page.value?.fields?.featuredEvent || {})
 
 </script>
 
diff --git a/pages/news-and-events/news/index.vue b/pages/news-and-events/news/index.vue
index 312749ee..e290bb98 100644
--- a/pages/news-and-events/news/index.vue
+++ b/pages/news-and-events/news/index.vue
@@ -186,7 +186,6 @@ const sortOrder = computed(() => {
   return propOr('-fields.publishedDate', 'sortOrder', selectedSortOption.value)
 })
 
-// Fetch news data using `useAsyncData` for server-side rendering
 const { data: news } = useAsyncData('news', () => {
   return fetchNews($contentfulClient, route.query.search, publishedLessThanDate.value,
   publishedGreaterThanOrEqualToDate.value, subjects.value, sortOrder.value, 10, 0)
@@ -209,7 +208,7 @@ watch(
       10,
       0
     );
-    altSearchResults.value?.retrieveAltTotals();
+    altSearchResults.value?.retrieveAltTotals()
   },
   { immediate: true }
 )
diff --git a/store/index.js b/store/index.js
index 2a17c070..cb911c66 100644
--- a/store/index.js
+++ b/store/index.js
@@ -61,16 +61,11 @@ export const useMainStore = defineStore('main', {
   },
   actions: {
     async init() {
-      // Server-side cookie check to ensure this runs only once
       const appInitializedCookie = useCookie('appInitialized')
-
-      // If the cookie exists, prevent re-initialization
       if (appInitializedCookie.value === 'true') {
         console.log('App already initialized')
         return
       }
-
-      // If not, run the initialization actions
       try {
         await Promise.all([
           this.fetchContactUsFormOptions(),
@@ -78,7 +73,6 @@ export const useMainStore = defineStore('main', {
           this.fetchPortalNotification()
         ])
 
-        // Set the cookie to mark the app as initialized
         appInitializedCookie.value = 'true'
       } catch (error) {
         console.error('Error during initialization:', error)
@@ -106,7 +100,6 @@ export const useMainStore = defineStore('main', {
       this.formOptions = value
     },
     async fetchContactUsFormOptions() {
-      // Fetch data server-side using `useAsyncData`
       const { data, error } = await useAsyncData(
         'contact-us-form-options',
         async () => {
@@ -139,7 +132,6 @@ export const useMainStore = defineStore('main', {
     },
 
     async fetchPortalNotification() {
-      // Fetch data server-side using `useAsyncData`
       const { data, error } = await useAsyncData(
         'portal-notification',
         async () => {
@@ -164,7 +156,6 @@ export const useMainStore = defineStore('main', {
     },
 
     async fetchFooterData() {
-      // Fetch data server-side using `useAsyncData`
       const { data, error } = await useAsyncData(
         'footer-data',
         async () => {

From e0afcd93f9bc6457a887269461f0f6b1c968f814 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Tue, 26 Nov 2024 12:37:13 -0500
Subject: [PATCH 8/8] fixed failing test

---
 components/FeaturedData/FeaturedData.vue | 5 ++---
 components/Gallery/Gallery.vue           | 5 +++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/FeaturedData/FeaturedData.vue b/components/FeaturedData/FeaturedData.vue
index 5a34159c..d6aecf33 100644
--- a/components/FeaturedData/FeaturedData.vue
+++ b/components/FeaturedData/FeaturedData.vue
@@ -10,9 +10,9 @@
   </div>
 </template>
 <script setup>
-import { ref, reactive, watch, computed } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { getAlgoliaFacets, facetPropPathMapping } from '../../utils/algolia'
-import { pathOr, isEmpty } from 'ramda'
+import { isEmpty } from 'ramda'
 
 const config = useRuntimeConfig()
 const { $algoliaClient } = useNuxtApp()
@@ -30,7 +30,6 @@ const props = defineProps({
 
 const selectedCategory = ref(null)
 const facets = ref([])
-const viewMore = ref(false)
 const localFeaturedData = reactive([...props.featuredData])
 
 if (props.categories?.length > 0) {
diff --git a/components/Gallery/Gallery.vue b/components/Gallery/Gallery.vue
index 721f3838..679c102f 100644
--- a/components/Gallery/Gallery.vue
+++ b/components/Gallery/Gallery.vue
@@ -98,6 +98,11 @@ export default {
       maxWidth: 0
     }
   },
+  watch: {
+    items() {
+      this.currentIndex = 1
+    }
+  },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onResize).observe(this.$el)
   },