Misc bug fixes (#273)

- Show 404 instead of 500 error for invalid urls
- fix sidebar styles not loading on error pages
- fix style issue on tag pages where the main title is hyphenated
- fix a vue warning about passing in attributes that would clog up the console when displaying a pullquote
- prevent exceptions from being sent to sentry when a request to the comment count api fails
- prevent exceptions from being set to sentry when there are timing issues with the tweet embed script

components/GothamistMainHeader.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import Navigation from '~~/composables/types/Navigation'
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
-import {
-  useCurrentHeaderAdHeight,
-  useCurrentSteamStation,
-} from '~/composables/states'
 
 defineProps<{
   isMinimized: boolean

components/PullQuote.vue

@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <blockquote class="streamfield-pull-quote pt-4 pb-3">
+  <blockquote class="streamfield-pull-quote pt-4 pb-3" v-bind="{ ...$attrs }">
     <div class="h3">
       {{ quote }}
     </div>

components/Streamfield/StreamfieldEmbedTweet.vue

@@ -30,7 +30,7 @@ function findTweetElement(tweetId) {
 // replace a tweet blockquote with the expanded embed
 function replaceTweet(tweetId) {
     return new Promise((resolve) => {
-        if (window.twttr) {
+        if (window.twttr?.widgets?.createTweet) {
             const originalTweetElement = findTweetElement(tweetId)
             if (!originalTweetElement) {
                resolve('error finding tweet element')

components/Streamfield/StreamfieldPullQuote.vue

@@ -7,7 +7,7 @@ defineProps<{
 
 <template>
   <PullQuote
-    class="streamfield-pull-quote mb-7"
+    class="streamfield-pull-quote"
     :quote="block.value.pullQuote"
     :author="block.value.attribution"
   />

composables/comments.ts

@@ -20,7 +20,7 @@ const fetchCommentCounts = async function(commentIds:string[]):Promise<Record<st
                 "posts_ids": idList            
             }
         }
-        requests.push($fetch(path, {baseURL, ...options}))
+        requests.push($fetch(path, {baseURL, ...options}).catch(() => ({ messages_count: [] })))
     }
     const responses = await Promise.all(requests)
     responses.forEach(response => {

composables/data/index.ts

@@ -12,4 +12,5 @@ export { findProductBanners } from './productBanners'
 export { normalizeFindProductBannersResponse } from './productBanners'
 export { findBreakingNews } from './breakingNews'
 export { normalizeFindBreakingNewsResponse } from './breakingNews'
-export { normalizeInformationPage } from './pages'
+export { normalizeInformationPage } from './pages'
+export { updateLiveStream } from './liveStream'

error.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
-import { ref, onMounted } from 'vue'
-import { useRuntimeConfig } from '#app'
-import { useSidebarIsOpen } from '~~/composables/states.js'
 
 const config = useRuntimeConfig()
 const route = useRoute()
@@ -88,6 +85,10 @@ const trackSidebarClick = (label) => {
   closeSidebar()
 }
 
+onBeforeMount(() => {
+  const currentSteamStation = useCurrentSteamStation()
+  updateLiveStream(currentSteamStation.value)
+})
 onMounted(() => {
   $analytics.sendPageView({ page_type: 'error_page' })
   document.addEventListener('scroll', (e) => {
@@ -253,4 +254,68 @@ useHead({
     }
   }
 }
+
+.leaderboard-ad-wrapper {
+  background: #111111;
+  @include media('<md') {
+    min-height: 50px;
+    padding: 0;
+    position: sticky;
+    top: 0;
+    z-index: 5000;
+  }
+  @include media('>=md') {
+    min-height: 92px;
+    padding: 1px 0;
+  }
+}
+
+.gothamist-sidebar {
+  background-color: var(--black-500);
+  width: 100vw !important;
+  @include media('>sm') {
+    width: 480px !important;
+  }
+  .p-sidebar-close {
+    color: white !important;
+    &:hover {
+      color: initial !important;
+    }
+  }
+}
+
+.gothamist-sidebar .p-sidebar-header {
+  justify-content: space-between;
+  padding: 1rem 0 0 0;
+}
+
+.gothamist-sidebar .p-sidebar-header {
+  align-items: flex-start;
+}
+
+.gothamist-sidebar-header-logo {
+  width: 120px;
+  height: auto;
+  * {
+    fill: white;
+  }
+}
+
+.gothamist-sidebar .p-sidebar-content {
+  padding: 0;
+}
+
+.gothamist-sidebar-header-tagline {
+  max-width: 160px;
+  font-family: var(--font-family-header);
+  font-size: 12px;
+  line-height: var(--font-size-5);
+  color: white;
+  align-self: flex-end;
+  padding-right: 1rem;
+  @include media('<375px') {
+    font-size: 10px;
+    line-height: var(--font-size-4);
+  }
+}
 </style>

layouts/default.vue

@@ -1,19 +1,10 @@
 <script setup lang="ts">
-import { updateLiveStream } from '~~/composables/data/liveStream'
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
-import { useRuntimeConfig } from '#app'
 import { useElementSize } from '@vueuse/core'
-import {
-  useCurrentHeaderAdHeight,
-  useIsArticlePage,
-  useCurrentSteamStation,
-  useMarketingBannerData,
-} from '~/composables/states'
 const leaderboardAdWrapperRef = ref(null)
 const leaderboardAdToWatch = useElementSize(leaderboardAdWrapperRef)
 const currentHeaderAdHeight = useCurrentHeaderAdHeight()
 const isArticlePage = useIsArticlePage()
-const currentSteamStation = useCurrentSteamStation()
 const marketingBannerData = useMarketingBannerData()
 
 const config = useRuntimeConfig()
@@ -91,9 +82,10 @@ const trackSidebarClick = (label) => {
   })
   closeSidebar()
 }
-// load the life stream
-onBeforeMount(() => {
-  updateLiveStream(currentSteamStation.value)
+// load the live stream
+onBeforeMount(async () => {
+  const currentSteamStation = useCurrentSteamStation()
+  await updateLiveStream(currentSteamStation.value)
 })
 onMounted(() => {
   if (typeof $htlbid !== "undefined") {

pages/[sectionSlug]/[articleSlug].vue

@@ -26,7 +26,14 @@ const article = isPreview
   ? previewData.value.data as ArticlePage
   : ((await findPage(
       `${route.params.sectionSlug}/${route.params.articleSlug}`
-    ).then(({ data }) => normalizeFindPageResponse(data))) as ArticlePage)
+    ).then(({ data }) => normalizeFindPageResponse(data)
+    ).catch(() => {
+        throw createError({
+        statusCode: 404,
+        statusMessage: 'Page Not Found',
+        fatal: true,
+      })
+    })) as ArticlePage)
 
 let gallery
 if (article.leadGallery) {

pages/[sectionSlug]/index.vue

@@ -6,7 +6,13 @@ const previewData = usePreviewData()
 const route = useRoute()
 const page = await findPage(route?.params?.sectionSlug as string).then(
   ({ data }) => normalizeFindPageResponse(data)
-)
+).catch(() => {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true,
+  })
+})
 const isPreview = route.query.preview ? true : false
 const { $analytics } = useNuxtApp()
 
@@ -30,7 +36,11 @@ onMounted(() => {
       })
       break
     default:
-      break
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Page Not Found',
+      fatal: true,
+    })
   }
 })
 </script>

pages/[sectionSlug]/photos/[gallerySlug].vue

@@ -14,7 +14,14 @@ const gallery = isPreview
   ? previewData.value.data
   : ((await findPage(
       `${route.params.sectionSlug}/photos/${route.params.gallerySlug}`
-    ).then(({ data }) => normalizeFindPageResponse(data))) as GalleryPage)
+    ).then(({ data }) => normalizeFindPageResponse(data)
+    ).catch(() => {
+        throw createError({
+        statusCode: 404,
+        statusMessage: 'Page Not Found',
+        fatal: true,
+      })
+    })) as GalleryPage)
 
 if (gallery.slides.length <= 0 && gallery.articleLink) {
   navigateTo(gallery.articleLink, { replace: true, redirectCode: 301 })

pages/staff/[staffSlug].vue

@@ -25,6 +25,13 @@ const initialArticles = await findArticlePages({
 
 const articleTotal = ref(initialArticles.count)
 const articles = ref(initialArticles.articles)
+if (!articleTotal.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true,
+  })
+}
 
 const loadMoreArticles = async () => {
   const newArticles = await useLoadMoreArticles({

pages/tags/[tagSlug].vue

@@ -30,12 +30,19 @@ const articlesPromise = findArticlePages({
   count: data.value && Number(data.value.meta.totalCount)
 }))
 
-const [curatedTagPage, {articles: initialArticles, count: initalCount}] = await Promise.all([
+const [curatedTagPage, {articles: initialArticles, count: initialCount}] = await Promise.all([
   curatedTagPagePromise,
   articlesPromise,
 ])
-const articleTotal = ref(initalCount)
+const articleTotal = ref(initialCount)
 const articles = ref(initialArticles)
+if (!initialCount) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page Not Found',
+    fatal: true,
+  })
+}
 
 const loadMoreArticles = async () => {
   const newArticles = await useLoadMoreArticles({
@@ -52,7 +59,7 @@ const loadMoreArticles = async () => {
 }
 
 const tagName =
-  articles[0]?.tags.find((tag) => tag.slug === tagSlug)?.name || tagSlug
+  articles[0]?.tags.find((tag) => tag.slug === tagSlug)?.name || tagSlug?.replace(/-/g, ' ')
 
 useChartbeat()