Fix/vue-v0.2.49

packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -4,7 +4,7 @@
     class="bg-star-pattern bg-black"
   >
     <section
-      class="HomepageMissionsCarousel ThemeVariantDark max-w-screen-3xl mx-auto overflow-hidden text-white bg-black bg-stars"
+      class="HomepageMissionsCarousel ThemeVariantDark max-w-screen-3xl mx-auto overflow-hidden text-white bg-black bg-stars select-none"
     >
       <div class="lg:BaseGrid lg:py-24 pt-14 container flex flex-col pb-5 mx-auto">
         <div class="xl:px-0 lg:col-end-8 xl:col-end-7 order-1 col-start-2 px-4">
@@ -30,7 +30,7 @@
         </div>
         <div class="lg:order-2 xl:px-0 flex justify-end order-3 col-start-10 col-end-13 px-4">
           <BaseLink
-            :to="{ name: 'missions' }"
+            to="/missions/"
             variant="primary"
           >
             {{ `All Missions` }}

packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue

@@ -1,9 +1,43 @@
+<script lang="ts">
+// HomepageMissionsCarouselItem.vue
+/* Slide for the homepage missions carousel.
+   Links to the topic page if provided,
+   otherwise links to mission target as fallback.
+*/
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import IconCaret from './../Icons/IconCaret.vue'
+
+export default defineComponent({
+  name: 'HomepageMissionsCarouselItem',
+  components: {
+    BaseLink,
+    IconCaret
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    hasTopic(): boolean {
+      if (this.data && this.data.topic && this.data.topic.url) {
+        return true
+      }
+      return false
+    }
+  }
+})
+</script>
+
 <template>
   <BaseLink
     v-if="data"
     variant="none"
     :aria-label="hasTopic ? 'More about ' + data.topic.title : 'View ' + data.name + ' missions'"
-    :to="hasTopic ? data.topic.url : { name: 'missions', query: { mission_target: data.name } }"
+    :to="hasTopic ? data.topic.url : '/missions/?mission_target=' + data.name"
     class="HomepageMissionsCarouselItem group flex h-full pb-1 text-white"
     link-class="flex flex-col w-full"
   >
@@ -50,37 +84,7 @@
     </div>
   </BaseLink>
 </template>
-<script lang="ts">
-/* Slide for the homepage missions carousel.
-   Links to the topic page if provided,
-   otherwise links to mission target as fallback.
-*/
-import { defineComponent } from 'vue'
-import BaseLink from './../BaseLink/BaseLink.vue'
-import IconCaret from './../Icons/IconCaret.vue'
 
-export default defineComponent({
-  name: 'HomepageMissionsCarouselItem',
-  components: {
-    BaseLink,
-    IconCaret
-  },
-  props: {
-    data: {
-      type: Object,
-      required: false
-    }
-  },
-  computed: {
-    hasTopic(): boolean {
-      if (this.data && this.data.topic && this.data.topic.url) {
-        return true
-      }
-      return false
-    }
-  }
-})
-</script>
 <style lang="scss">
 .HomepageMissionsCarouselItem {
   .text-wrapper {

packages/vue/src/templates/PageImageDetail/PageImageDetail.vue

@@ -159,10 +159,7 @@
                 <BaseLink
                   variant="none"
                   link-class="font-primary text-jpl-red hover:text-jpl-red-light w-full py-3 text-lg"
-                  :to="{
-                    name: 'missions',
-                    query: { mission_target: item.target }
-                  }"
+                  to="/missions/?mission_target={{ item.target }}"
                 >
                   {{ item.target }}
                 </BaseLink>

packages/vue/src/templates/www/PageCuratedGallery/PageCuratedGallery.vue

@@ -265,6 +265,14 @@ export default defineComponent({
 
 <style lang="scss">
 .PageCuratedGallery {
+  // sharebuttons fix TODO: make better
+  @screen lg {
+    .ShareButtons {
+      transform: scale(0.75);
+      top: -1.8rem;
+      z-index: 999;
+    }
+  }
   .CuratedGallery-thumbnails,
   .CuratedGallery-carousel {
     @apply block;

packages/vue/src/templates/www/PageHomepage/PageHomepage.vue

@@ -1,3 +1,51 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HomepageCarousel from './../../../components/HomepageCarousel/HomepageCarousel.vue'
+import HomepageFeaturedRobot from './../../../components/HomepageFeaturedRobot/HomepageFeaturedRobot.vue'
+import HomepageTeaserBlock from './../../../components/HomepageTeaserBlock/HomepageTeaserBlock.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockQuote from './../../../components/BlockQuote/BlockQuote.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import SwimlaneCTA from './../../../components/SwimlaneCTA/SwimlaneCTA.vue'
+import HomepageMissionsCarousel from './../../../components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue'
+import HomepageStats from './../../../components/HomepageStats/HomepageStats.vue'
+import HomepageEmbedBlock from './../../../components/HomepageEmbedBlock/HomepageEmbedBlock.vue'
+
+export default defineComponent({
+  name: 'PageHomepage',
+  components: {
+    HomepageCarousel,
+    HomepageFeaturedRobot,
+    HomepageTeaserBlock,
+    BlockLinkCarousel,
+    BlockQuote,
+    LayoutHelper,
+    SwimlaneCTA,
+    HomepageMissionsCarousel,
+    HomepageStats,
+    HomepageEmbedBlock
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
+  computed: {
+    theNews(): any[] | undefined {
+      // check first for featured news
+      if (this.data?.featuredNews?.length) {
+        return this.data.featuredNews
+      } else if (this.data?.latestNews?.length) {
+        return this.data.latestNews
+      }
+      return undefined
+    }
+  }
+})
+</script>
+
 <template>
   <div
     v-if="data"
@@ -59,18 +107,20 @@
     </template>
 
     <!-- mission carousel -->
-    <HomepageMissionsCarousel
-      v-if="data?.missionsCarousel?.targets?.length"
-      :data="data.missionsCarousel"
-      class="lg:my-18 my-10"
-    />
+    <template v-if="data?.missionsCarousel && data?.missionsCarousel[0]?.targets?.length">
+      <HomepageMissionsCarousel
+        :data="data.missionsCarousel[0]"
+        class="lg:my-18 my-10"
+      />
+    </template>
 
     <!-- featured robot -->
-    <HomepageFeaturedRobot
-      v-if="data?.featuredRobots?.length"
-      class="lg:my-24 my-12"
-      :data="data.featuredRobots[0].page"
-    />
+    <template v-if="data?.featuredRobots?.length">
+      <HomepageFeaturedRobot
+        class="lg:my-24 my-12"
+        :data="data.featuredRobots[0].page"
+      />
+    </template>
 
     <!-- engage -->
     <div
@@ -87,50 +137,3 @@
     <SwimlaneCTA />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import HomepageCarousel from './../../../components/HomepageCarousel/HomepageCarousel.vue'
-import HomepageFeaturedRobot from './../../../components/HomepageFeaturedRobot/HomepageFeaturedRobot.vue'
-import HomepageTeaserBlock from './../../../components/HomepageTeaserBlock/HomepageTeaserBlock.vue'
-import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
-import BlockQuote from './../../../components/BlockQuote/BlockQuote.vue'
-import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
-import SwimlaneCTA from './../../../components/SwimlaneCTA/SwimlaneCTA.vue'
-import HomepageMissionsCarousel from './../../../components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue'
-import HomepageStats from './../../../components/HomepageStats/HomepageStats.vue'
-import HomepageEmbedBlock from './../../../components/HomepageEmbedBlock/HomepageEmbedBlock.vue'
-
-export default defineComponent({
-  name: 'PageHomepage',
-  components: {
-    HomepageCarousel,
-    HomepageFeaturedRobot,
-    HomepageTeaserBlock,
-    BlockLinkCarousel,
-    BlockQuote,
-    LayoutHelper,
-    SwimlaneCTA,
-    HomepageMissionsCarousel,
-    HomepageStats,
-    HomepageEmbedBlock
-  },
-  props: {
-    data: {
-      type: Object,
-      required: false,
-      default: undefined
-    }
-  },
-  computed: {
-    theNews(): any[] | undefined {
-      // check first for featured news
-      if (this.data?.featuredNews?.length) {
-        return this.data.featuredNews
-      } else if (this.data?.latestNews?.length) {
-        return this.data.latestNews
-      }
-      return undefined
-    }
-  }
-})
-</script>