specifying what qualifies as an external link for EDU theme (#652)

nasa-jpl · Oct 7, 2024 · d1fbddc · d1fbddc
1 parent 848bde5
commit d1fbddc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/packages/vue/src/components/BaseLink/BaseLink.vue b/packages/vue/src/components/BaseLink/BaseLink.vue
@@ -1,7 +1,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
+import { isEduExternalLink } from './../../utils/isEduExternalLink'
 
 interface Variants {
   [key: string]: string
@@ -111,6 +114,7 @@ export default defineComponent({
   },
   emits: ['linkClicked', 'specificLinkClicked'],
   computed: {
+    ...mapStores(useThemeStore),
     computedVariants(): Variants {
       if (this.usePrimaryColor) {
         return primaryColorVariants
@@ -127,10 +131,27 @@ export default defineComponent({
       }
       return classes
     },
+    isEduExternal(): boolean | string {
+      if (this.href) {
+        return isEduExternalLink(this.href)
+      }
+      return ''
+    },
+    isExternal(): boolean {
+      if (this.href) {
+        if (this.themeStore.isEdu && isEduExternalLink(this.href)) {
+          return true
+        } else if (!this.themeStore.isEdu) {
+          return true
+        }
+        return false
+      }
+      return false
+    },
     theTarget(): string | undefined {
       if (this.target) {
         return this.target
-      } else if (this.href && this.externalTargetBlank) {
+      } else if (this.isExternal && this.externalTargetBlank) {
         return '_blank'
       }
       return undefined

diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -105,7 +105,13 @@
                 </span>
                 <span class="sr-only">.</span>
               </p>
-              <template v-if="theItem.externalLink && themeStore.isEdu">
+              <template
+                v-if="
+                  theItem.externalLink &&
+                  themeStore.isEdu &&
+                  isEduExternalLink(theItem.externalLink)
+                "
+              >
                 <IconExternal
                   class="text-primary ml-2"
                   :class="{ 'text-sm mt-1px': small, '-mt-1px': medium, '-mt-.5': large }"
@@ -188,6 +194,7 @@ import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import { mixinFormatEventDates } from './../../utils/mixins'
+import { isEduExternalLink } from './../../utils/isEduExternalLink'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import IconExternal from './../Icons/IconExternal.vue'
@@ -389,6 +396,11 @@ export default defineComponent({
           )
         : undefined
     }
+  },
+  methods: {
+    isEduExternalLink(url: string): boolean {
+      return isEduExternalLink(url)
+    }
   }
 })
 </script>

diff --git a/packages/vue/src/utils/isEduExternalLink.ts b/packages/vue/src/utils/isEduExternalLink.ts
@@ -0,0 +1,12 @@
+export const isEduExternalLink = (url: string): boolean => {
+  if (
+    url &&
+    (url.startsWith('/edu/') ||
+      url.startsWith('/edubeta/') ||
+      url.startsWith('https://www.jpl.nasa.gov/edu/') ||
+      url.startsWith('https://jpl.nasa.gov/edu/'))
+  ) {
+    return false
+  }
+  return true
+}