more cleanup

components/ArticleFooter.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { ref } from 'vue'
-
 const props = defineProps({
   article: {
     type: Object,

components/ArticleRecirculation.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
 import { useUpdateCommentCounts } from '~~/composables/comments'
 import type { ArticlePage } from '~~/composables/types/Page'
 

components/ArticleTags.vue

@@ -1,7 +1,7 @@
 <script setup>
 import VTag from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VTag.vue'
 
-const props = defineProps({
+defineProps({
   tags: {
     type: Array,
     default: null,
@@ -15,13 +15,13 @@ const emit = defineEmits(['tag-click'])
 </script>
 
 <template>
-  <div v-if="props.tags" class="tags flex align-items-start mb-4 md:mb-6">
-    <p v-if="props.label" class="type-caption mr-3">
-      {{ props.label }}
+  <div v-if="tags" class="tags flex align-items-start mb-4 md:mb-6">
+    <p v-if="label" class="type-caption mr-3">
+      {{ label }}
     </p>
     <div class="flex gap-1 align-items-center flex-wrap">
       <VTag
-        v-for="tag in props.tags"
+        v-for="tag in tags"
         :key="tag.name"
         class="tag-small"
         :name="tag.name"

components/AudioPlayer.vue

@@ -2,7 +2,6 @@
 // had to install howler.js locally and add this import to stop it from breaking the build
 // eslint-disable-next-line unused-imports/no-unused-imports
 import { Howl, Howler } from 'howler'
-import { computed, ref, watch } from 'vue'
 import VPersistentPlayer from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VPersistentPlayer.vue'
 import {
   audioPlayerHeight,

components/AuthorProfile.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from 'vue'
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
 import VSimpleResponsiveImage from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VSimpleResponsiveImage.vue'
 import VShareTools from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VShareTools.vue'

components/Byline.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
 import VSimpleResponsiveImage from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VSimpleResponsiveImage.vue'
 import VShareTools from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VShareTools.vue'
@@ -23,9 +21,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{
-  (e: 'link-click', value: any): void
-}>()
+const emit = defineEmits<(e: 'link-click', value: any) => void>()
 
 const { $analytics } = useNuxtApp()
 
@@ -67,9 +63,9 @@ const commentCount = computed(() => {
         <VFlexibleLink :to="sponsor?.link" class="author-name">
           {{ sponsor?.name }}
         </VFlexibleLink>
-        <date-published :article="props.article" />
+        <date-published :article="article" />
         <VFlexibleLink
-          v-if="!isDisableComments && props.showComments && commentCount"
+          v-if="!isDisableComments && showComments && commentCount"
           to="#comments"
           class="type-textlink2"
         >
@@ -112,9 +108,9 @@ const commentCount = computed(() => {
           @name-click="$event => emit('link-click', $event?.url)"
           @organization-click="$event => emit('link-click', $event?.url)"
         />
-        <date-published :article="props.article" />
+        <date-published :article="article" />
         <VFlexibleLink
-          v-if="!isDisableComments && props.showComments && commentCount"
+          v-if="!isDisableComments && showComments && commentCount"
           to="#comments"
           class="type-textlink2"
         >

components/CenterFeature.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import type { ArticlePage } from '~~/composables/types/Page'
 
 const props = defineProps<{

components/ContentWall.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-const emit = defineEmits<{
-  (e: 'signUp'): void
-  (e: 'dismissed'): void
-}>()
+const emit = defineEmits<(e: 'signUp' | 'dismissed') => void>()
 const showContent = ref(false)
 function signUp() {
   emit('signUp')

components/DatePublished.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from 'vue'
 import { formatDateForByline, fuzzyDateTime } from '~/utilities/date'
 
 const props = defineProps({
@@ -50,10 +49,10 @@ const modifiedDate = ref(
 
 <template>
   <div class="date-published">
-    <p :class="props.typeClass">
+    <p :class="typeClass">
       {{ date }}
     </p>
-    <p v-if="modifiedDate" :class="props.typeClass">
+    <p v-if="modifiedDate" :class="typeClass">
       {{ modifiedDate }}
     </p>
   </div>

components/EmailCollectorForm.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-
 const props = defineProps({
   showNoThanks: {
     type: Boolean,
@@ -103,7 +101,7 @@ function submitForm() {
     <div class="email-collector-form">
       <!-- when the submissionStatus is 'success' it will hide the form and show Thank you message -->
       <span
-        v-if="props.submissionStatus !== 'success'"
+        v-if="submissionStatus !== 'success'"
         class="flex flex-column lg:flex-row"
         style="gap: 1rem"
       >
@@ -113,33 +111,33 @@ function submitForm() {
               ref="submitButtonRef"
               class="submit-icon"
               :class="[
-                { altDesignIcon: props.altDesign && props.submitButtonIcon },
+                { altDesignIcon: altDesign && submitButtonIcon },
               ]"
-              :data-style-mode="props.dark ? 'dark' : 'default'"
+              :data-style-mode="dark ? 'dark' : 'default'"
             >
               <Button
-                :disabled="props.isSubmitting || !checked"
+                :disabled="isSubmitting || !checked"
                 class="submit-btn p-button-rounded"
-                :class="[{ 'p-button-outlined': props.outlined }]"
+                :class="[{ 'p-button-outlined': outlined }]"
                 :icon="submitButtonIcon ? `pi ${submitButtonIcon}` : null"
                 icon-pos="right"
-                :label="submitButtonIcon ? null : props.submitButtonText"
-                :aria-label="props.submitButtonText"
+                :label="submitButtonIcon ? null : submitButtonText"
+                :aria-label="submitButtonText"
                 @click="submitForm"
               >
-                <i v-if="props.isSubmitting" class="pi pi-spin pi-spinner" />
+                <i v-if="isSubmitting" class="pi pi-spin pi-spinner" />
               </Button>
             </i>
             <span class="field">
               <label :class="emailErrorText ? 'p-error' : ''" for="email">Email address</label>
               <InputText
                 v-model="email"
-                :disabled="props.isSubmitting"
+                :disabled="isSubmitting"
                 class="w-full p-inputtext-lg"
                 :class="[
                   { 'p-invalid': emailErrorText },
-                  { 'alt-design': props.altDesign },
-                  { dark: props.dark },
+                  { 'alt-design': altDesign },
+                  { dark },
                 ]"
                 :style="`padding-right: ${submitButtonWidth}px`"
                 type="email"
@@ -165,26 +163,26 @@ function submitForm() {
               role="checkbox"
               aria-label="Toggle agreement to the terms"
               :aria-checked="checked"
-              :disabled="props.isSubmitting"
+              :disabled="isSubmitting"
               :binary="true"
               @click="!checked"
             />
             <label for="binary"><slot /></label>
           </div>
         </div>
-        <div v-if="props.showNoThanks" class="flex justify-content-start">
+        <div v-if="showNoThanks" class="flex justify-content-start">
           <div>
             <Button
               class="no-thanks-btn p-button-link"
               label="No thanks"
-              :style="props.isSubmitting ? 'visibility: hidden' : ''"
+              :style="isSubmitting ? 'visibility: hidden' : ''"
               @click="emit('noThanksClick')"
             />
           </div>
         </div>
       </span>
       <p v-else class="type-paragraph3">
-        {{ props.thanksMessage }}
+        {{ thanksMessage }}
       </p>
     </div>
   </div>

components/GothamistCard.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import VCard from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VCard.vue'
 import type { ArticlePage, GalleryPage } from '~~/composables/types/Page'
 import type Image from '~~/composables/types/Image'
@@ -10,9 +9,11 @@ interface CardData {
   link: string
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
 const props = withDefaults(defineProps<{
   article?: ArticlePage | GalleryPage | CardData
-  class: string
   width?: number
   height?: number
   ratio?: number[]
@@ -75,7 +76,6 @@ const trackClick = function (targetUrl: string) {
   <VCard
     v-if="article"
     class="gothamist-card"
-    :class="props.class"
     :image="hideImage ? null : useImageUrl(article.listingImage)"
     :title="article.listingTitle"
     :title-link="link"
@@ -86,7 +86,7 @@ const trackClick = function (targetUrl: string) {
     :width="width"
     :height="height"
     :sizes="sizes"
-    :quality="80"
+    :quality="quality"
     :tags="tags"
     :loading="loading"
     v-bind="{ ...$props, ...$attrs }"

components/GothamistMainHeader.vue

@@ -13,7 +13,7 @@ const currentSteamStation = useCurrentSteamStation()
 const { $analytics } = useNuxtApp()
 const sidebarIsOpen = useSidebarIsOpen()
 const sidebarOpenedFrom = useSidebarOpenedFrom()
-const strapline = await useStrapline()
+const strapline = useStrapline()
 function openSidebar(e) {
   sidebarIsOpen.value = true
   sidebarOpenedFrom.value = e.target

components/GothamistWalledArticle.vue

@@ -5,11 +5,7 @@ import useTrackSeen from '~/composables/useTrackSeen'
 defineProps<{
   article: ArticlePage
 }>()
-const emit = defineEmits<{
-  (e: 'wallDismissed'): void
-  (e: 'wallSeen'): void
-  (e: 'allBlocksMounted'): void
-}>()
+const emit = defineEmits<(e: 'wallDismissed' | 'wallSeen' | 'allBlocksMounted') => void>()
 function handleSeen() {
   emit('wallSeen')
 }

components/ListenAllLiveButton.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { onBeforeMount, ref } from 'vue'
 import {
   useAllCurrentEpisodes,
   useIsEpisodePlaying,
@@ -38,11 +37,9 @@ function toggleMenu(event) {
 }
 
 // lifecycle hooks
-onBeforeMount(async () => {
+onBeforeMount(() => {
   getAllLiveStreams().then(() => {
-    // console.log('allCurrentEpisodes.value', allCurrentEpisodes.value)
     allCurrentEpisodes.value.data.forEach((stream) => {
-      // console.log('stream', stream)
       // conditional to check what shows are currently running
       // if (stream.relationships['current-show'].data !== null) {
       streamItems.value.push({
@@ -51,7 +48,6 @@ onBeforeMount(async () => {
         slug: stream.attributes.slug,
         image: stream.attributes['image-logo'],
         command: async () => {
-          // console.log('command - ', stream.attributes.slug)
           slug.value = stream.attributes.slug
           await getLiveStream(stream.attributes.slug)
           gotStream = true
@@ -92,7 +88,7 @@ async function togglePlay() {
             alt="show-logo"
             :src="`/live-stream-logos-white/${slug}.svg`"
           >
-          <span>{{ props.label }}</span>
+          <span>{{ label }}</span>
         </div>
       </Button>
       <Button

components/ListenLiveButton.vue

@@ -6,7 +6,7 @@ import {
   useTogglePlayTrigger,
 } from '~/composables/states'
 
-const props = defineProps({
+defineProps({
   label: {
     type: String,
     default: 'Listen Live',
@@ -54,15 +54,11 @@ function togglePlay() {
         <img v-else alt="pause icon" src="/pause.svg" class="mr-2">
         <img
           alt="WNYC"
-          :src="`/live-stream-logos-white/${props.slug}.svg`"
+          :src="`/live-stream-logos-white/${slug}.svg`"
           class="mr-2"
         >
-        {{ props.label }}
+        {{ label }}
       </div>
     </Button>
   </div>
 </template>
-
-<style lang="scss">
-
-</style>

components/MenuList.vue

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
 import type NavigationLink from '~/composables/types/NavigationLink'
 
-const props = defineProps({
+defineProps({
   navLinks: {
     type: Object as PropType<NavigationLink[]>,
     required: true,
@@ -22,7 +22,7 @@ const emit = defineEmits(['menu-list-click'])
     <hr v-if="isHeader" class="line black mb-4">
     <div class="menu-list">
       <VFlexibleLink
-        v-for="(item, index) in props.navLinks"
+        v-for="(item, index) in navLinks"
         :key="`primaryFooterLinks-${item.value.title}-${index}`"
         :to="item.value.url"
         @click="emit('menu-list-click', item.value.title)"

components/NewsletterContentWall.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 
-const emit = defineEmits<{
-  (e: 'signUp'): void
-  (e: 'wallCleared'): void
-}>()
+const emit = defineEmits<(e: 'signUp' | 'wallCleared') => void>()
 const status = ref('')
 function decline() {
   status.value = 'declined'

components/NewsletterHome.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
 
 const props = defineProps({
@@ -47,9 +46,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits<{
-  (e: 'submit', value: any): void
-}>()
+const emit = defineEmits<(e: 'submit', value: any) => void>()
 
 const config = useRuntimeConfig()
 

components/PullQuote.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
 defineProps<{
   quote: string
   author?: string