From b753af631d213b73ffb9e58982f3e77a8073f1d4 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Thu, 26 Sep 2024 12:38:43 -0700
Subject: [PATCH 01/11] feat: blog article page sidebar, data parsing

---
 cypress/e2e/blogArticlePage.cy.js |   8 ++
 gql/queries/FTVAArticleDetail.gql |   3 +-
 pages/blog/[slug].vue             | 208 ++++++++++--------------------
 pages/events/[slug].vue           |   9 +-
 4 files changed, 82 insertions(+), 146 deletions(-)
 create mode 100644 cypress/e2e/blogArticlePage.cy.js

diff --git a/cypress/e2e/blogArticlePage.cy.js b/cypress/e2e/blogArticlePage.cy.js
new file mode 100644
index 0000000..2d01fca
--- /dev/null
+++ b/cypress/e2e/blogArticlePage.cy.js
@@ -0,0 +1,8 @@
+describe('Blog Article Page', () => {
+  it('Visits a Blog Article Page', () => {
+    cy.visit('/blog/test-tom-reeds-for-members-only-black-perspectives-on-local-l-a-tv')
+    cy.getByData('breadcrumb').should('be.visible')
+    cy.getByData('recent-posts').should('be.visible')
+    cy.percySnapshot('blogarticlepage', { widths: [768, 992, 1200] })
+  })
+})
diff --git a/gql/queries/FTVAArticleDetail.gql b/gql/queries/FTVAArticleDetail.gql
index 73c644d..d5081f0 100644
--- a/gql/queries/FTVAArticleDetail.gql
+++ b/gql/queries/FTVAArticleDetail.gql
@@ -40,7 +40,8 @@ query FTVAArticleDetail($slug: [String!]) {
     ...AllFtvaFpb
   }
   # SectionTeaserCard (Recent posts)
-  ftvaRecentPosts: entries( section: "ftvaArticle", limit: 3, orderBy: "postDate ASC") {
+  # page only displays 3 but we query 4 in case the list includes the current article
+  ftvaRecentPosts: entries( section: "ftvaArticle", limit: 4, orderBy: "postDate ASC") {
     id
     title
     to: slug
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 503be36..217a74e 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -2,7 +2,9 @@
 // COMPONENT RE-IMPORTS
 // TODO: remove when we have implemented component library as a module
 // https://nuxt.com/docs/guide/directory-structure/components#library-authors
-import { BlockTag, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, FlexibleBlocks, NavBreadcrumb, ResponsiveImage, RichText, SectionTeaserCard, SectionWrapper } from 'ucla-library-website-components'
+import {
+  BlockTag, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, FlexibleBlocks, NavBreadcrumb, ResponsiveImage, RichText, SectionTeaserCard, SectionWrapper, TwoColLayoutWStickySideBar
+} from 'ucla-library-website-components'
 
 // HELPERS
 import _get from 'lodash/get'
@@ -37,7 +39,7 @@ const page = ref(_get(data.value, 'ftvaArticle', {}))
 const ftvaRecentPosts = ref(_get(data.value, 'ftvaRecentPosts', {}))
 
 watch(data, (newVal, oldVal) => {
-  console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
+  // console.log('In watch preview enabled, newVal, oldVal', newVal, oldVal)
   page.value = _get(newVal, 'ftvaArticle', {})
   ftvaRecentPosts.value = _get(newVal, 'ftvaRecentPosts', {})
 })
@@ -55,21 +57,26 @@ const parsedCarouselData = computed(() => {
     return {
       item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
       credit: rawItem?.creditText,
-      captionTitle: 'dfdsfs', // TODO do we need these? test without
-      captionText: 'dfsdfsd',
+      // captionTitle: 'dfdsfs', // TODO do we need these? test without
+      // captionText: 'dfsdfsd',
     }
   })
 })
 
 // Combine the categories into a String
 const parsedArticleCategories = computed(() => {
-  const categoryList = page.value.articleCategories
-  const categories = []
-
-  for (const category of categoryList) {
-    categories.push(category.title)
+  if (page.value.articleCategories) {
+    return page.value.articleCategories.map(category => category.title).join(', ')
   }
-  return categories.join(', ')
+  return ''
+})
+
+// Recent Posts: Filter out the current post and then return the first 3 max
+const parsedRecentPosts = computed(() => {
+  // fail gracefully if no recent posts
+  if (!ftvaRecentPosts.value)
+    return []
+  return ftvaRecentPosts.value.filter(item => !item.to.includes(route.params.slug)).slice(0, 3)
 })
 </script>
 
@@ -117,66 +124,40 @@ const parsedArticleCategories = computed(() => {
       </div>
     </div>
 
-    <div
-      data-test="second-column"
-      class="two-column"
-    >
-      <div class="primary-column top">
-        <SectionWrapper>
-          <CardMeta
-            data-test="text-block"
-            :title="page?.title"
-            :category="parsedArticleCategories"
-          />
-
-          <!-- About the Author -->
-          <RichText
-            v-if="page?.aboutTheAuthor"
-            data-test="aboutTheAuthor"
-            class="acknowledgements"
-            :rich-text-content="page?.aboutTheAuthor"
-          />
-        </SectionWrapper>
-      </div>
-    </div>
-
-    <SectionWrapper>
-      <DividerWayFinder />
-    </SectionWrapper>
-
-    <FlexibleBlocks
-      class="flexible-content"
-      :blocks="page.blocks"
-    />
+    <TwoColLayoutWStickySideBar>
+      <template #primaryTop>
+        <!-- TODO           :dateCreated="postDate"-->
+        <CardMeta
+          data-test="text-block"
+          :category="parsedArticleCategories"
+          :title="page?.title"
+          :byline-one="page?.contributors[0].contributor"
+          :text="page?.aboutTheAuthor"
+          section-handle="ftvaArticle"
+        />
+        <DividerWayFinder class="remove-top-margin" />
+        <FlexibleBlocks
+          class="flexible-content"
+          :blocks="page.blocks"
+        />
+      </template>
+    </TwoColLayoutWStickySideBar>
 
-    <SectionWrapper section-title="Read our  most recent posts">
-      <h2>ftvaRecentPosts</h2>
-      <pre>{{ ftvaRecentPosts }}</pre>
+    <SectionWrapper
+      v-if="parsedRecentPosts && parsedRecentPosts.length > 0"
+      section-title="Read our most recent posts"
+      theme="paleblue"
+    >
+      <SectionTeaserCard
+        v-if="parsedRecentPosts && parsedRecentPosts.length > 0"
+        data-test="recent-posts"
+        :items="parsedRecentPosts"
+      />
     </SectionWrapper>
-    <!-- <SectionWrapper
-        v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
-        section-title="Upcoming events in this series"
-        theme="paleblue"
-      >
-        <template #top-right>
-          <nuxt-link to="/series">
-            View All Series <span style="font-size:1.5em;"> &#8250;</span>
-          </nuxt-link>
-        </template>
-
-        <SectionTeaserCard
-          v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
-          data-test="event-series"
-          :items="parsedFtvaEventSeries"
-        />
-      </SectionWrapper> -->
   </main>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 // PAGE STYLES
 .page-article-detail {
   position: relative;
@@ -202,106 +183,55 @@ const parsedArticleCategories = computed(() => {
     }
   }
 
-  .two-column {
-    position: relative;
-    width: 100%;
-    max-width: var(--max-width);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+  // makes all EventSeries same height
+  :deep(.card) {
+    min-height: 350px;
+  }
 
+  :deep(.two-column) {
+
+    // specs say 832px for column @ 1440px screen
+    // 78% is close but not exact while being responsive
     .primary-column {
-      margin-bottom: 0px;
-      width: 67%;
+      width: 78%; // override default 67% for article pages only
 
       .section-wrapper {
         padding-left: 0px;
+        margin-top: var(--space-2xl);
       }
 
-      &.bottom {
-        margin-top: -30px;
+      .remove-top-margin {
+        margin-top: 0px;
       }
-    }
-
-    .ftva.button-dropdown {
-      margin-top: 30px;
-    }
-
-    .ftva.block-info {
-      margin-top: 48px;
-    }
 
-    // SECTION SCREENING DETAILS
-    // TODO when component is patched, remove styles?
-    :deep(figure.responsive-video:not(:has(.video-embed))) {
-      display: none;
-    }
-
-    .sidebar-column {
-      min-width: 314px;
-      width: 30%;
-      position: absolute;
-      height: 100%;
-      top: 0;
-      right: 0;
-      padding-top: var(--space-2xl);
-      padding-bottom: 20px;
-
-      .sidebar-content-wrapper {
-        position: sticky;
-        top: 85px;
-        will-change: top;
-      }
     }
   }
 
-  /* makes all EventSeries same height */
-  :deep(.card) {
-    min-height: 350px;
+  .flexible-content {
+    .rich-text {
+      max-width: none;
+    }
   }
 
   @media (max-width: 1200px) {
 
-    .one-column,
-    .two-column {
+    .one-column {
       padding-left: var(--unit-gutter);
       padding-right: var(--unit-gutter);
     }
 
-    .sidebar-column {
-      padding-right: var(--unit-gutter);
-    }
-
-    .two-column>.primary-column {
-      width: 62%;
-    }
-  }
-
-  @media #{$small} {
-    .two-column {
-      display: grid;
-      grid-template-columns: 1fr;
+    :deep(.two-column) {
+      padding-left: var(--unit-gutter);
 
+      // increase column percentage to 100 at 1200px
+      // only for article pages, since there is no sidebar content
       .primary-column {
-        width: auto;
-        grid-column: 1;
+        width: 100%;
 
         .section-wrapper {
-          padding-left: var(--unit-gutter);
+          padding-right: 0px;
         }
 
-        &.bottom {
-          margin-top: auto;
-        }
-      }
-
-      .sidebar-column {
-        width: auto;
-        position: relative;
-        grid-column: 1;
-        margin: auto var(--unit-gutter);
-        padding-top: 0px;
-        height: auto; // let content determine height on mobile
       }
     }
   }
diff --git a/pages/events/[slug].vue b/pages/events/[slug].vue
index de433a9..f2bd516 100644
--- a/pages/events/[slug].vue
+++ b/pages/events/[slug].vue
@@ -53,8 +53,8 @@ const parsedCarouselData = computed(() => {
     return {
       item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
       credit: rawItem?.creditText,
-      captionTitle: 'dfdsfs', // TODO do we need these? test without
-      captionText: 'dfsdfsd',
+      // captionTitle: 'dfdsfs', // TODO do we need these? test without
+      // captionText: 'dfsdfsd',
     }
   })
 })
@@ -240,10 +240,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
   </main>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 // PAGE STYLES
 .page-event-detail {
   position: relative;

From 64f9a976d1194685823d59ff8639a91be526ac02 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Thu, 26 Sep 2024 16:35:23 -0700
Subject: [PATCH 02/11] feat: sharebutton on page

---
 pages/blog/[slug].vue | 40 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 217a74e..3f5685a 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -3,7 +3,7 @@
 // TODO: remove when we have implemented component library as a module
 // https://nuxt.com/docs/guide/directory-structure/components#library-authors
 import {
-  BlockTag, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, FlexibleBlocks, NavBreadcrumb, ResponsiveImage, RichText, SectionTeaserCard, SectionWrapper, TwoColLayoutWStickySideBar
+  BlockTag, ButtonDropdown, CardMeta, DividerWayFinder, FlexibleMediaGalleryNewLightbox, FlexibleBlocks, NavBreadcrumb, ResponsiveImage, RichText, SectionTeaserCard, SectionWrapper, TwoColLayoutWStickySideBar
 } from 'ucla-library-website-components'
 
 // HELPERS
@@ -16,6 +16,34 @@ const { $graphql } = useNuxtApp()
 
 const route = useRoute()
 
+// TODO should this data be changed to reflect current page URL? Moved somewhere else?
+const socialList = {
+  buttonTitle: 'Share',
+  hasIcon: true,
+  dropdownList: [
+    {
+      dropdownItemTitle: 'Copy Link',
+      dropdownItemUrl: '',
+      iconName: 'svg-icon-ftva-social-link',
+    },
+    {
+      dropdownItemTitle: 'Email',
+      dropdownItemUrl: '',
+      iconName: 'svg-icon-ftva-social-email',
+    },
+    {
+      dropdownItemTitle: 'Facebook',
+      dropdownItemUrl: 'https://www.facebook.com/sharer/sharer.php?u=',
+      iconName: 'svg-icon-ftva-social-facebook',
+    },
+    {
+      dropdownItemTitle: 'X',
+      dropdownItemUrl: 'https://twitter.com/share?url=',
+      iconName: 'svg-icon-ftva-social-x',
+    },
+  ],
+}
+
 // DATA
 const { data, error } = await useAsyncData(`blog-${route.params.slug}`, async () => {
   const data = await $graphql.default.request(FTVAArticleDetail, { slug: route.params.slug })
@@ -134,7 +162,15 @@ const parsedRecentPosts = computed(() => {
           :byline-one="page?.contributors[0].contributor"
           :text="page?.aboutTheAuthor"
           section-handle="ftvaArticle"
-        />
+        >
+          <template #sharebutton>
+            <ButtonDropdown
+              button-title="Share"
+              :has-icon="true"
+              :dropdown-list="socialList.dropdownList"
+            />
+          </template>
+        </CardMeta>
         <DividerWayFinder class="remove-top-margin" />
         <FlexibleBlocks
           class="flexible-content"

From 56d9718c6315592cfbd5fca0690f7f62d853437d Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Fri, 27 Sep 2024 10:42:27 -0700
Subject: [PATCH 03/11] feat: add postDate to new cardmeta

---
 package.json          |  4 ++--
 pages/blog/[slug].vue |  2 +-
 pnpm-lock.yaml        | 12 +++++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5329fa3..69e5e83 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "3.22.1"
+		"ucla-library-website-components": "3.23.0"
 	}
-}
+}
\ No newline at end of file
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 3f5685a..7778417 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -154,12 +154,12 @@ const parsedRecentPosts = computed(() => {
 
     <TwoColLayoutWStickySideBar>
       <template #primaryTop>
-        <!-- TODO           :dateCreated="postDate"-->
         <CardMeta
           data-test="text-block"
           :category="parsedArticleCategories"
           :title="page?.title"
           :byline-one="page?.contributors[0].contributor"
+          :dateCreated="page?.postDate"
           :text="page?.aboutTheAuthor"
           section-handle="ftvaArticle"
         >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 136f573..1e5d4ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,8 +68,8 @@ devDependencies:
     specifier: ^5.22.0
     version: 5.22.0
   ucla-library-website-components:
-    specifier: 3.22.1
-    version: 3.22.1(typescript@5.4.5)(vue@3.4.31)
+    specifier: 3.23.0
+    version: 3.23.0(typescript@5.4.5)(vue@3.4.31)
 
 packages:
 
@@ -1149,9 +1149,6 @@ packages:
     resolution: {integrity: sha512-7nhBTRkTG0mD+7r7JvNalJz++YwszZk0oP1HIY6fCgz6wNKxT6LuiXCqdPrZmNPe/WbPIKuqxGZN5s+i6NZqow==}
     peerDependencies:
       vue: '>= 3.2.0 < 4.0.0'
-    peerDependenciesMeta:
-      vue-router:
-        optional: true
     dependencies:
       '@gtm-support/core': 2.3.1
       vue: 3.4.31(typescript@5.4.5)
@@ -9991,8 +9988,13 @@ packages:
     resolution: {integrity: sha512-HudkrR/TMd5FTV1VGqOrYLg4bsDgb8kgml6rtDF3NgS9vf0hfQyVipxjbEHlfvuPHtQ7RZcn6ftdJHi92JqfSw==}
     dev: true
 
+<<<<<<< Updated upstream
   /ucla-library-website-components@3.22.1(typescript@5.4.5)(vue@3.4.31):
     resolution: {integrity: sha512-urlbfKBTtgMhBQkq5pfob3YvF84RMGii3fGM3kak7AqtGKn39m8RNGGyla6ZPAadH2xVONokV7EOZD4kEfklqw==}
+=======
+  /ucla-library-website-components@3.23.0(typescript@5.4.5)(vue@3.4.31):
+    resolution: {integrity: sha512-8Z2k4WnKygap1KWGjfIQzNlpfAWK/apF15I+0NHgy4CSNyYQzFBIV8Cz+HuWNUyYWpkE482ZTV9V+AhPyIaFBw==}
+>>>>>>> Stashed changes
     peerDependencies:
       vue: ^3.4.29
     dependencies:

From 8faf08b301ded3c71568b05d37a1cd07640e5eb7 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Fri, 27 Sep 2024 10:48:09 -0700
Subject: [PATCH 04/11] fix: lockfile

---
 pnpm-lock.yaml | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e5d4ef..d292815 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9988,13 +9988,8 @@ packages:
     resolution: {integrity: sha512-HudkrR/TMd5FTV1VGqOrYLg4bsDgb8kgml6rtDF3NgS9vf0hfQyVipxjbEHlfvuPHtQ7RZcn6ftdJHi92JqfSw==}
     dev: true
 
-<<<<<<< Updated upstream
-  /ucla-library-website-components@3.22.1(typescript@5.4.5)(vue@3.4.31):
-    resolution: {integrity: sha512-urlbfKBTtgMhBQkq5pfob3YvF84RMGii3fGM3kak7AqtGKn39m8RNGGyla6ZPAadH2xVONokV7EOZD4kEfklqw==}
-=======
   /ucla-library-website-components@3.23.0(typescript@5.4.5)(vue@3.4.31):
     resolution: {integrity: sha512-8Z2k4WnKygap1KWGjfIQzNlpfAWK/apF15I+0NHgy4CSNyYQzFBIV8Cz+HuWNUyYWpkE482ZTV9V+AhPyIaFBw==}
->>>>>>> Stashed changes
     peerDependencies:
       vue: ^3.4.29
     dependencies:

From d6581464d3000596d2c91448511245254649f1b3 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Fri, 27 Sep 2024 16:04:58 -0700
Subject: [PATCH 05/11] fix: css styles

---
 pages/blog/[slug].vue | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 7778417..02a54a0 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -159,7 +159,7 @@ const parsedRecentPosts = computed(() => {
           :category="parsedArticleCategories"
           :title="page?.title"
           :byline-one="page?.contributors[0].contributor"
-          :dateCreated="page?.postDate"
+          :date-created="page?.postDate"
           :text="page?.aboutTheAuthor"
           section-handle="ftvaArticle"
         >
@@ -177,6 +177,7 @@ const parsedRecentPosts = computed(() => {
           :blocks="page.blocks"
         />
       </template>
+      <template #sidebarTop />
     </TwoColLayoutWStickySideBar>
 
     <SectionWrapper
@@ -231,43 +232,52 @@ const parsedRecentPosts = computed(() => {
     .primary-column {
       width: 78%; // override default 67% for article pages only
 
-      .section-wrapper {
+      .primary-section-wrapper {
         padding-left: 0px;
         margin-top: var(--space-2xl);
       }
 
+      .section-wrapper {
+        margin-top: var(--space-2xl);
+      }
+
       .remove-top-margin {
         margin-top: 0px;
+        padding-top: var(--space-l);
       }
 
     }
   }
 
-  .flexible-content {
-    .rich-text {
-      max-width: none;
-    }
-  }
-
   @media (max-width: 1200px) {
 
-    .one-column {
+    .one-column,
+    .two-column {
       padding-left: var(--unit-gutter);
       padding-right: var(--unit-gutter);
     }
 
     :deep(.two-column) {
-      padding-left: var(--unit-gutter);
+      display: flex;
 
       // increase column percentage to 100 at 1200px
       // only for article pages, since there is no sidebar content
       .primary-column {
         width: 100%;
 
-        .section-wrapper {
+        .primary-section-wrapper {
           padding-right: 0px;
         }
+      }
+    }
+  }
+
+  @media #{$small} {
+    .two-column {
+      display: flex;
 
+      .remove-top-margin {
+        margin-top: var(--space-2xl); //re add space as padding for mobile
       }
     }
   }

From 3a7161cff3b866015de287c70bb58e1928d29187 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Fri, 27 Sep 2024 16:19:22 -0700
Subject: [PATCH 06/11] fix: image data for sectionTeaserCard

---
 pages/blog/[slug].vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 02a54a0..246aaf0 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -104,7 +104,16 @@ const parsedRecentPosts = computed(() => {
   // fail gracefully if no recent posts
   if (!ftvaRecentPosts.value)
     return []
-  return ftvaRecentPosts.value.filter(item => !item.to.includes(route.params.slug)).slice(0, 3)
+
+  // Transform data
+  const recentPostsWImage = ftvaRecentPosts.value.map((item, index) => {
+    console.log('item', item.imageCarousel[0].image[0])
+    return {
+      ...item,
+      image: item.imageCarousel && item.imageCarousel.length > 0 ? item.imageCarousel[0].image[0] : null,
+    }
+  })
+  return recentPostsWImage.filter(item => !item.to.includes(route.params.slug)).slice(0, 3)
 })
 </script>
 

From 07b1368b7ee4bffecd48235ba56d8b30413feada Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 1 Oct 2024 10:23:03 -0700
Subject: [PATCH 07/11] feat: view all series link

---
 pages/blog/[slug].vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 246aaf0..ed1ad94 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -102,12 +102,11 @@ const parsedArticleCategories = computed(() => {
 // Recent Posts: Filter out the current post and then return the first 3 max
 const parsedRecentPosts = computed(() => {
   // fail gracefully if no recent posts
-  if (!ftvaRecentPosts.value)
+  if (!ftvaRecentPosts.value || !route.params.slug)
     return []
 
   // Transform data
   const recentPostsWImage = ftvaRecentPosts.value.map((item, index) => {
-    console.log('item', item.imageCarousel[0].image[0])
     return {
       ...item,
       image: item.imageCarousel && item.imageCarousel.length > 0 ? item.imageCarousel[0].image[0] : null,
@@ -194,6 +193,11 @@ const parsedRecentPosts = computed(() => {
       section-title="Read our most recent posts"
       theme="paleblue"
     >
+      <template #top-right>
+        <nuxt-link to="/series">
+          View All Series <span style="font-size:1.5em;"> &#8250;</span>
+        </nuxt-link>
+      </template>
       <SectionTeaserCard
         v-if="parsedRecentPosts && parsedRecentPosts.length > 0"
         data-test="recent-posts"

From 7cae51ac5563d0d9850628e2e9db847ae3cc6876 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 1 Oct 2024 14:50:36 -0700
Subject: [PATCH 08/11] fix: cases where data is missing

---
 pages/blog/[slug].vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index ed1ad94..83313c8 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -99,6 +99,14 @@ const parsedArticleCategories = computed(() => {
   return ''
 })
 
+// Get the Contributor data if it exists, otherwise return nothing
+const parsedByline = computed(() => {
+  if ((page.value.contributors && page.value.contributors[0]) && page.value.contributors[0].contributor) {
+    return page.value.contributors[0].contributor
+  }
+  return ''
+})
+
 // Recent Posts: Filter out the current post and then return the first 3 max
 const parsedRecentPosts = computed(() => {
   // fail gracefully if no recent posts
@@ -166,7 +174,7 @@ const parsedRecentPosts = computed(() => {
           data-test="text-block"
           :category="parsedArticleCategories"
           :title="page?.title"
-          :byline-one="page?.contributors[0].contributor"
+          :byline-one="parsedByline"
           :date-created="page?.postDate"
           :text="page?.aboutTheAuthor"
           section-handle="ftvaArticle"
@@ -262,6 +270,11 @@ const parsedRecentPosts = computed(() => {
     }
   }
 
+  // if there is no author content, hide the 'about the author' heading
+  :deep(.heading-about-author:not(:has(+.rich-text))) {
+    display: none;
+  }
+
   @media (max-width: 1200px) {
 
     .one-column,

From a1271c0844aac2ab351aaeb26ed316de267909e5 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 1 Oct 2024 16:31:33 -0700
Subject: [PATCH 09/11] chore: cleanup data and comments

---
 pages/blog/[slug].vue | 31 +------------------------------
 utils/socialList.js   | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 30 deletions(-)
 create mode 100644 utils/socialList.js

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 83313c8..e044abc 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -11,39 +11,12 @@ import _get from 'lodash/get'
 
 // GQL
 import FTVAArticleDetail from '../gql/queries/FTVAArticleDetail.gql'
+import socialList from '~/utils/socialList'
 
 const { $graphql } = useNuxtApp()
 
 const route = useRoute()
 
-// TODO should this data be changed to reflect current page URL? Moved somewhere else?
-const socialList = {
-  buttonTitle: 'Share',
-  hasIcon: true,
-  dropdownList: [
-    {
-      dropdownItemTitle: 'Copy Link',
-      dropdownItemUrl: '',
-      iconName: 'svg-icon-ftva-social-link',
-    },
-    {
-      dropdownItemTitle: 'Email',
-      dropdownItemUrl: '',
-      iconName: 'svg-icon-ftva-social-email',
-    },
-    {
-      dropdownItemTitle: 'Facebook',
-      dropdownItemUrl: 'https://www.facebook.com/sharer/sharer.php?u=',
-      iconName: 'svg-icon-ftva-social-facebook',
-    },
-    {
-      dropdownItemTitle: 'X',
-      dropdownItemUrl: 'https://twitter.com/share?url=',
-      iconName: 'svg-icon-ftva-social-x',
-    },
-  ],
-}
-
 // DATA
 const { data, error } = await useAsyncData(`blog-${route.params.slug}`, async () => {
   const data = await $graphql.default.request(FTVAArticleDetail, { slug: route.params.slug })
@@ -85,8 +58,6 @@ const parsedCarouselData = computed(() => {
     return {
       item: [{ ...rawItem.image[0], kind: 'image' }], // Carousels on this page are always images, no videos
       credit: rawItem?.creditText,
-      // captionTitle: 'dfdsfs', // TODO do we need these? test without
-      // captionText: 'dfsdfsd',
     }
   })
 })
diff --git a/utils/socialList.js b/utils/socialList.js
new file mode 100644
index 0000000..566b290
--- /dev/null
+++ b/utils/socialList.js
@@ -0,0 +1,28 @@
+export const socialList = {
+  buttonTitle: 'Share',
+  hasIcon: true,
+  dropdownList: [
+    {
+      dropdownItemTitle: 'Copy Link',
+      dropdownItemUrl: '',
+      iconName: 'svg-icon-ftva-social-link',
+    },
+    {
+      dropdownItemTitle: 'Email',
+      dropdownItemUrl: '',
+      iconName: 'svg-icon-ftva-social-email',
+    },
+    {
+      dropdownItemTitle: 'Facebook',
+      dropdownItemUrl: 'https://www.facebook.com/sharer/sharer.php?u=',
+      iconName: 'svg-icon-ftva-social-facebook',
+    },
+    {
+      dropdownItemTitle: 'X',
+      dropdownItemUrl: 'https://twitter.com/share?url=',
+      iconName: 'svg-icon-ftva-social-x',
+    },
+  ],
+}
+
+export default socialList

From f6597c8648a5753e00eedaf9b26c49fb0f0a9f51 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Wed, 2 Oct 2024 09:22:15 -0700
Subject: [PATCH 10/11] chore: update package to enable dates

---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 69e5e83..6b5a0a7 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,6 @@
 		"nuxt-graphql-request": "^7.0.5",
 		"sass": "^1.66.1",
 		"ucla-library-design-tokens": "^5.22.0",
-		"ucla-library-website-components": "3.23.0"
+		"ucla-library-website-components": "3.26.0"
 	}
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d292815..59bca68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,8 +68,8 @@ devDependencies:
     specifier: ^5.22.0
     version: 5.22.0
   ucla-library-website-components:
-    specifier: 3.23.0
-    version: 3.23.0(typescript@5.4.5)(vue@3.4.31)
+    specifier: 3.26.0
+    version: 3.26.0(typescript@5.4.5)(vue@3.4.31)
 
 packages:
 
@@ -9988,8 +9988,8 @@ packages:
     resolution: {integrity: sha512-HudkrR/TMd5FTV1VGqOrYLg4bsDgb8kgml6rtDF3NgS9vf0hfQyVipxjbEHlfvuPHtQ7RZcn6ftdJHi92JqfSw==}
     dev: true
 
-  /ucla-library-website-components@3.23.0(typescript@5.4.5)(vue@3.4.31):
-    resolution: {integrity: sha512-8Z2k4WnKygap1KWGjfIQzNlpfAWK/apF15I+0NHgy4CSNyYQzFBIV8Cz+HuWNUyYWpkE482ZTV9V+AhPyIaFBw==}
+  /ucla-library-website-components@3.26.0(typescript@5.4.5)(vue@3.4.31):
+    resolution: {integrity: sha512-g56cx6ntsl4dROSjrEGCa+mA++mXRIX3dUrVsCy0AL9EauXk9bUZGWnK0fKg3qXo7+UFICZztqcN5wDsapEB3w==}
     peerDependencies:
       vue: ^3.4.29
     dependencies:

From ec2b06bb27de95a9127f9511f84b148bb6c390bb Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Wed, 2 Oct 2024 09:49:36 -0700
Subject: [PATCH 11/11] fix: remove max width

---
 pages/blog/[slug].vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index e044abc..15e5563 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -246,6 +246,14 @@ const parsedRecentPosts = computed(() => {
     display: none;
   }
 
+  // remove max-width from rich-text inside flexible-blocks for ftva
+  :deep(.flexible-block) {
+    .rich-text {
+      max-width: none;
+      padding-right: 0px;
+    }
+  }
+
   @media (max-width: 1200px) {
 
     .one-column,