@explorer-1/vue 0.2.81 → 0.2.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.81",
+  "version": "0.2.83",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/BaseLink/BaseLink.vue

@@ -163,12 +163,19 @@ export default defineComponent({
       return undefined
     },
     computedTo() {
-      let toValue = this.to
+      let toValue = this.to ? this.addTrailingSlash(this.to as string) : undefined
       // filter out unnecessary `/home/` prefix from wagtail default site urlPaths
       if (toValue && typeof toValue === 'string' && toValue.startsWith('/home/')) {
         toValue = toValue.replace('/home/', '/')
       }
       return toValue
+    },
+    computedHref() {
+      let hrefValue =
+        this.href && (this.href.includes('jpl.nasa.gov') || this.href.includes('localhost'))
+          ? this.addTrailingSlash(this.href as string)
+          : this.href
+      return hrefValue
     }
   },
   methods: {
@@ -176,6 +183,46 @@ export default defineComponent({
       this.$root?.$emit('linkClicked')
       this.$emit('specificLinkClicked')
       eventBus.emit('linkClicked')
+    },
+    addTrailingSlash(path: string) {
+      let filteredPath = path
+      const isFilePath = () => {
+        const afterLastSlash = path.split('/').pop()
+        if (afterLastSlash && afterLastSlash.includes('.')) {
+          return true
+        }
+        return false
+      }
+      const isQueryPath = path.includes('?')
+      const isAnchorPath = path.includes('#')
+      if (
+        !isQueryPath &&
+        !isAnchorPath &&
+        !isFilePath() &&
+        path !== '/' &&
+        !path.endsWith('/') &&
+        !path.startsWith('/preview')
+      ) {
+        // add a trailing slash if there isn't one
+        filteredPath += '/'
+      } else if (isQueryPath) {
+        if (!path.includes('/?')) {
+          // also add a trailing slash to paths with query params
+          const urlParts = filteredPath.split('?')
+          const pathWithSlash = `${urlParts[0]}/`
+          const queryParams = urlParts[1]
+          filteredPath = pathWithSlash + '?' + queryParams
+        }
+      } else if (isAnchorPath) {
+        if (!path.includes('/#')) {
+          // also add a trailing slash to paths with anchors
+          const urlParts = filteredPath.split('#')
+          const pathWithSlash = `${urlParts[0]}/`
+          const anchor = urlParts[1]
+          filteredPath = pathWithSlash + '#' + anchor
+        }
+      }
+      return filteredPath
     }
   }
 })
@@ -220,8 +267,8 @@ export default defineComponent({
       </template>
     </nuxt-link>
     <a
-      v-else-if="href"
-      :href="href"
+      v-else-if="computedHref"
+      :href="computedHref"
       class="group"
       :class="computedClass"
       :target="theTarget"

package/src/utils/mixins.ts

@@ -293,20 +293,33 @@ export const mixinFormatSplitEventDates = (
   endDatetime?: string,
   compact?: boolean
 ): EventDateObject => {
-  const startDateDayjs = dayjs(startDatetime)
+  const endDateDayjs = endDatetime ? dayjs(endDatetime) : undefined
 
-  const monthFormat = compact ? 'MM' : 'MMM'
-  let day = startDateDayjs.format('D')
-  const month = startDateDayjs.format(monthFormat).replace('.', '')
-  const year = startDateDayjs.format('YYYY')
-  const monthAndYear = startDateDayjs.format(`${monthFormat} YYYY`)
+  const startDateDayjs = () => {
+    // use the end date if the event has started but hasn't ended
+    let date = startDatetime
+    const startDate = startDatetime ? dayjs(startDatetime) : undefined
+    if (startDatetime && endDatetime && endDateDayjs && startDate) {
+      let now = dayjs(new Date())
+      if (endDateDayjs > now && startDate < now) {
+        date = endDatetime
+      } else {
+        date = startDatetime
+      }
+    }
+    return dayjs(date)
+  }
 
-  if (endDatetime) {
-    const endDateDayjs = dayjs(endDatetime)
+  const monthFormat = compact ? 'MM' : 'MMM'
+  let day = startDateDayjs().format('D')
+  const month = startDateDayjs().format(monthFormat).replace('.', '')
+  const year = startDateDayjs().format('YYYY')
+  const monthAndYear = startDateDayjs().format(`${monthFormat} YYYY`)
 
+  if (endDateDayjs) {
     if (
-      startDateDayjs.format('MM') === endDateDayjs.format('MM') &&
-      startDateDayjs.format('ll') !== endDateDayjs.format('ll')
+      startDateDayjs().format('MM') === endDateDayjs.format('MM') &&
+      startDateDayjs().format('ll') !== endDateDayjs.format('ll')
     ) {
       // If event spans multiple days within the same month, show both days
       day = `${day}-${endDateDayjs.format('D')}`