@explorer-1/vue 0.2.47 → 0.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.47",
+  "version": "0.2.49",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
-    "vue": "^3.4.21",
+    "vue": "^3.5.3",
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "a11y-dialog": "^8.0.4",
+    "a11y-dialog": "^8.1.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -1,104 +1,108 @@
 <template>
-  <section
+  <div
     v-if="data"
-    class="HomepageMissionsCarousel ThemeVariantDark bg-stars max-w-screen-3xl mx-auto overflow-hidden text-white bg-black"
+    class="bg-star-pattern bg-black"
   >
-    <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">
-        <p
-          v-if="data.label"
-          class="text-subtitle text-primary edu:text-white mb-3"
-        >
-          {{ data.label }}
-        </p>
-        <BaseHeading
-          v-if="data.heading"
-          level="h2"
-          class="mb-3"
-        >
-          {{ data.heading }}
-        </BaseHeading>
-        <p
-          v-if="data.summary"
-          class="text-body-md"
-        >
-          {{ data.summary }}
-        </p>
-      </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' }"
-          variant="primary"
-        >
-          All Missions
-        </BaseLink>
-      </div>
-      <!-- Slider main container -->
-      <div class="lg:order-3 order-2 col-start-2 col-end-12">
-        <div
-          ref="HomepageMissionsCarousel"
-          class="swiper lg:mt-0 lg:mb-0 mb-14 mt-3"
-        >
-          <!-- Additional required wrapper -->
-          <nav
-            :aria-label="data.heading || 'Missions'"
-            class="swiper-wrapper"
+    <section
+      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">
+          <p
+            v-if="data.label"
+            class="text-subtitle text-primary edu:text-white mb-3"
           >
-            <!-- slide -->
-            <HomepageMissionsCarouselItem
-              v-for="(item, index) in data.targets"
-              :key="index"
-              :data="item"
-              class="swiper-slide"
-            />
-          </nav>
-          <!-- swiper navigation -->
-          <div class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full">
-            <div class="top-1/2 absolute left-0 z-30">
-              <BaseButton
-                class="swiper-prev xl:text-base -ml-16"
-                :aria-label="data.heading + ' - Previous slide'"
-              >
-                <template #icon>
-                  <span
-                    class="arrow-wrapper"
-                    aria-hidden="true"
-                  >
-                    <span class="arrow">
-                      <IconPrev />
-                    </span>
-                    <span class="arrow-fixed">
-                      <IconPrev />
-                    </span>
-                  </span>
-                </template>
-              </BaseButton>
-            </div>
-            <div class="top-1/2 absolute right-0 z-30">
-              <BaseButton
-                class="swiper-next xl:text-base -mr-16"
-                :aria-label="data.heading + ' - Next slide'"
-              >
-                <template #icon>
-                  <span
-                    class="arrow-wrapper"
-                    aria-hidden="true"
-                  >
-                    <span class="arrow">
-                      <IconNext />
+            {{ data.label }}
+          </p>
+          <BaseHeading
+            v-if="data.heading"
+            level="h2"
+            class="mb-3"
+          >
+            {{ data.heading }}
+          </BaseHeading>
+          <p
+            v-if="data.summary"
+            class="text-body-md"
+          >
+            {{ data.summary }}
+          </p>
+        </div>
+        <div class="lg:order-2 xl:px-0 flex justify-end order-3 col-start-10 col-end-13 px-4">
+          <BaseLink
+            to="/missions/"
+            variant="primary"
+          >
+            {{ `All Missions` }}
+          </BaseLink>
+        </div>
+        <!-- Slider main container -->
+        <div class="lg:order-3 order-2 col-start-2 col-end-12">
+          <div
+            ref="HomepageMissionsCarousel"
+            class="swiper lg:mt-0 lg:mb-0 mb-14 mt-3"
+          >
+            <!-- Additional required wrapper -->
+            <nav
+              :aria-label="data.heading || 'Missions'"
+              class="swiper-wrapper"
+            >
+              <!-- slide -->
+              <HomepageMissionsCarouselItem
+                v-for="(item, index) in data.targets"
+                :key="index"
+                :data="item"
+                class="swiper-slide"
+              />
+            </nav>
+            <!-- swiper navigation -->
+            <div class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full">
+              <div class="top-1/2 absolute left-0 z-30">
+                <BaseButton
+                  class="swiper-prev xl:text-base -ml-16"
+                  :aria-label="data.heading + ' - Previous slide'"
+                >
+                  <template #icon>
+                    <span
+                      class="arrow-wrapper"
+                      aria-hidden="true"
+                    >
+                      <span class="arrow">
+                        <IconPrev />
+                      </span>
+                      <span class="arrow-fixed">
+                        <IconPrev />
+                      </span>
                     </span>
-                    <span class="arrow-fixed">
-                      <IconNext />
+                  </template>
+                </BaseButton>
+              </div>
+              <div class="top-1/2 absolute right-0 z-30">
+                <BaseButton
+                  class="swiper-next xl:text-base -mr-16"
+                  :aria-label="data.heading + ' - Next slide'"
+                >
+                  <template #icon>
+                    <span
+                      class="arrow-wrapper"
+                      aria-hidden="true"
+                    >
+                      <span class="arrow">
+                        <IconNext />
+                      </span>
+                      <span class="arrow-fixed">
+                        <IconNext />
+                      </span>
                     </span>
-                  </span>
-                </template>
-              </BaseButton>
+                  </template>
+                </BaseButton>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'

package/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 {

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="justify-items-center flex w-full">
+  <div class="justify-items-center flex w-full relative overflow-hidden">
     <BaseLink
       v-if="targetLink"
       class="w-full"
@@ -42,7 +42,9 @@
               </template>
             </div>
             <div class="lg:p-1 text-contrast relative z-20 pt-2 pl-0">
-              <p class="text-secondary lg:text-7xl mb-0 text-4xl font-medium">is a place for</p>
+              <p class="text-secondary text-white lg:text-7xl mb-0 text-4xl font-medium">
+                is a place for
+              </p>
             </div>
           </div>
 
@@ -66,7 +68,7 @@
         :class="'SwimlaneCTA lg:hidden block' + computedClass"
       >
         <div
-          class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25"
+          class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25 font-primary"
         >
           <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
             <div class="relative z-20 p-2 pl-0">
@@ -92,7 +94,9 @@
               </template>
             </div>
             <div class="lg:p-1 relative z-20 pt-2 pl-0">
-              <p class="text-secondary text-contrast lg:text-7xl mb-0 text-4xl font-medium">
+              <p
+                class="text-secondary text-white text-contrast lg:text-7xl mb-0 text-4xl font-medium"
+              >
                 is a place for
               </p>
             </div>

package/src/components/TextInput/TextInput.vue

@@ -10,7 +10,7 @@ interface TextInputProps {
   maxlength?: string
   pattern?: string
   title?: string
-  autofocus?: boolean
+  autoFocus?: boolean
   labelClass?: string
   inputClass?: string
 }

package/src/components/TimelineDialog/TimelineDialog.stories.js

@@ -39,7 +39,7 @@ export const BaseStory = {
     setup() {
       return { args }
     },
-    template: `<div>
+    template: `<div style="min-height: 80vh">
     <button type="button" :data-a11y-dialog-show="args.data.id">Open the dialog</button>
     <TimelineDialog :data="args.data" :dialog-box-class="args.dialogBoxClass"></TimelineDialog>
   </div>`

package/src/components/YearTicker/YearTicker.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="mounted"
     class="YearTicker"
     :style="`--duration:${duration}ms`"
   >
@@ -8,17 +9,19 @@
       v-for="(digit, index) in Array.from(targetYear)"
       :key="index"
       :name="animation"
-      :duration="duration"
+      mode="out-in"
+      tag="span"
     >
       <!-- Key by digit so there can be two digits rendered at the same time. -->
       <span
-        :key="digit"
+        :key="digit + index"
         class="Digit"
         >{{ digit }}</span
       >
     </transition-group>
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue'
 
@@ -34,17 +37,22 @@ export default defineComponent({
     return {
       year: this.targetYear,
       animation: 'digits-increment',
-      duration: 100
+      duration: 100,
+      mounted: false // Track if the component is mounted
     }
   },
   watch: {
-    targetYear(newYear) {
-      this.animation = this.year > newYear ? 'digits-increment' : 'digits-decrement'
+    targetYear(newYear, oldYear) {
+      this.animation = newYear > oldYear ? 'digits-increment' : 'digits-decrement'
       this.year = newYear
     }
+  },
+  mounted() {
+    this.mounted = true // Set mounted to true after mounting
   }
 })
 </script>
+
 <style lang="scss">
 .YearTicker {
   @apply sticky transform text-gray-light-mid translate-x-0.5 md:translate-x-0 ml-7 md:ml-8 lg:ml-30 pt-10 md:pt-5;
@@ -78,7 +86,7 @@ export default defineComponent({
 
   .header-sticky-showing & {
     // For the mobile viewport, offset by the height of the top header and NavSecondary combined.
-    top: calc(theme('spacing.18') + theme('spacing.16') + var(--top-offset));
+    top: calc(theme('spacing.18') + theme('spacing.16') + var (--top-offset));
   }
 
   &::after {
@@ -103,7 +111,6 @@ export default defineComponent({
   }
 
   .Digit {
-    // Force all digits in the same cell so they superpose.
     grid-area: 1 / 1 / 1 / 1;
     transition: transform var(--duration);
     transform: translateY(0);
@@ -112,6 +119,7 @@ export default defineComponent({
       transition-duration: 0.1ms;
     }
   }
+
   // transitions
   .digits-decrement-enter-active {
     transform: translateY(100%);

package/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>

package/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;

package/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>

package/src/templates/www/PageTimeline/PageTimeline.vue

@@ -1,114 +1,29 @@
-<template>
-  <div
-    v-if="data"
-    class="-nav-offset"
-  >
-    <HeroLarge
-      :title="data.heroTitle"
-      :summary="data.heroSummary"
-      :image="data.heroImage"
-      has-overlay
-    />
-    <!--
-    /**
-     * This page contains a lot of overlapping elements. Layers from highest to lowest:
-     * - TimelineDialog
-     * - Dropdown menus within NavSecondary
-     * - BackToTop, Main navigation, NavSecondary
-     * - (YearTicker on mobile viewport)
-     * - Milestone cards (BlockMilestone / BlockCircleImageCard)
-     * - VerticalLine
-     * - Milestone background images
-     * - (YearTicker on desktop viewport)
-     */ -->
-    <NavSecondary>
-      <!-- Use a fixed height to simplify sticky positioning. -->
-      <div class="w-full flex gap-4 align-content h-16">
-        <!-- Use a SearchSelectMenu for consistency with the "sort by" dropdown. -->
-        <SearchSelectMenu
-          v-model="jumpTo"
-          v-model:select-value="jumpTo"
-          class="flex"
-          :options="getJumpDecades()"
-          title="Jump to"
-          group-key="jumpTo"
-        />
-        <SearchSelectMenu
-          v-model="sortBy"
-          v-model:select-value="sortBy"
-          class="flex"
-          :options="sortByOptions"
-          title="Sort by"
-          group-key="sortBy"
-        />
-      </div>
-    </NavSecondary>
-    <YearTicker :target-year="currentYear as string" />
-    <h2 class="sr-only">Milestones</h2>
-    <ParallaxContainer
-      class="MilestoneList BaseGrid"
-      :style="{ '--rows': milestones.length }"
-    >
-      <div
-        v-for="(milestone, index) in milestones"
-        :id="`milestone-${milestone.date}`"
-        :key="`${milestone.id}-fg`"
-        class="MilestoneListItem"
-        :style="{ '--row': index + 1 }"
-        :data-milestone-year="milestone.date.split('-')[0]"
-      >
-        <ParallaxElement
-          v-if="milestone.backgroundImage"
-          class="MilestoneImageWrapper"
-          :factor="index % 2 === 0 ? 0.18 : 0.22"
-          :offset="index * 80"
-        >
-          <img
-            class="MilestoneImage"
-            :src="milestone.backgroundImage.src.url"
-            :width="milestone.backgroundImage.src.width"
-            :height="milestone.backgroundImage.src.height"
-            :srcset="`${milestone.backgroundImage.screenMd.url} ${milestone.backgroundImage.screenMd.width}w ${milestone.backgroundImage.src.url} ${milestone.backgroundImage.src.width}w`"
-            :style="{
-              // Shift images left or right based on column, and then by a variable amount to create a staggered effect.
-              '--x-translate': `${(index % 2 === 0 ? 180 : -130) + 10 * (index % 3)}%`
-            }"
-            alt=""
-          />
-        </ParallaxElement>
-        <BlockMilestone
-          :data="milestone"
-          :handle-click="showMilestone"
-        />
-      </div>
-      <div class="VerticalLine"></div>
-    </ParallaxContainer>
-    <BackToTop
-      class="fixed right-10 bottom-10"
-      :threshold="900"
-      @click="handleBackToTop()"
-    />
-
-    <TimelineDialog
-      v-if="activeMilestone"
-      :data="activeMilestone"
-      dialog-box-class="sm:max-w-xl md:max-w-3xl"
-      @hide="() => (activeMilestone = null)"
-    ></TimelineDialog>
-  </div>
-</template>
 <script lang="ts">
+// PageTimeline.vue - Timeline component for displaying milestones.
 import { defineComponent, type PropType } from 'vue'
 import BackToTop from './../../../components/BackToTop/BackToTop.vue'
 import BlockMilestone, { Milestone } from './BlockMilestone.vue'
 import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+// Use a SearchSelectMenu for consistency with the "sort by" dropdown.
 import SearchSelectMenu from './../../../components/SearchSelectMenu/SearchSelectMenu.vue'
 import TimelineDialog from './../../../components/TimelineDialog/TimelineDialog.vue'
 import YearTicker from './../../../components/YearTicker/YearTicker.vue'
 import ParallaxContainer from './../../../components/ParallaxContainer/ParallaxContainer.vue'
 import ParallaxElement from './../../../components/ParallaxElement/ParallaxElement.vue'
 
+/**
+ * This page contains a lot of overlapping elements. Layers from highest to lowest:
+ * - TimelineDialog
+ * - Dropdown menus within NavSecondary
+ * - BackToTop, Main navigation, NavSecondary
+ * - (YearTicker on mobile viewport)
+ * - Milestone cards (BlockMilestone / BlockCircleImageCard)
+ * - VerticalLine
+ * - Milestone background images
+ * - (YearTicker on desktop viewport)
+ */
+
 type SortBy = '' | 'latestDate' | 'oldestDate'
 
 type Decades = {
@@ -243,7 +158,8 @@ export default defineComponent({
     },
     getJumpDecades() {
       const decades: Decades = {
-        Top: ''
+        // uppercase string to avoid conflict with the lowercase 's' in the decade
+        TOP: ''
       }
 
       this.milestones.forEach((milestone) => {
@@ -301,16 +217,112 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <div
+    v-if="data"
+    class="-nav-offset"
+  >
+    <HeroLarge
+      :title="data.heroTitle"
+      :summary="data.heroSummary"
+      :image="data.heroImage"
+      has-overlay
+    />
+
+    <NavSecondary>
+      <!-- Use a fixed height to simplify sticky positioning. -->
+      <div class="w-full flex gap-4 align-content h-16">
+        <SearchSelectMenu
+          v-model="jumpTo"
+          v-model:select-value="jumpTo"
+          class="flex"
+          :options="getJumpDecades()"
+          title="JUMP TO"
+          group-key="jumpTo"
+        />
+        <SearchSelectMenu
+          v-model="sortBy"
+          v-model:select-value="sortBy"
+          class="flex"
+          :options="sortByOptions"
+          title="SORT BY"
+          group-key="sortBy"
+        />
+      </div>
+    </NavSecondary>
+    <YearTicker :target-year="currentYear as string" />
+    <h2 class="sr-only">Milestones</h2>
+    <ParallaxContainer
+      class="MilestoneList BaseGrid"
+      :style="{ '--rows': milestones.length }"
+    >
+      <div
+        v-for="(milestone, index) in milestones"
+        :id="`milestone-${milestone.date}`"
+        :key="`${milestone.id}-fg`"
+        class="MilestoneListItem"
+        :style="{ '--row': index + 1 }"
+        :data-milestone-year="milestone.date.split('-')[0]"
+      >
+        <ParallaxElement
+          v-if="milestone.backgroundImage"
+          class="MilestoneImageWrapper"
+          :factor="0.18"
+          :offset="index * 80"
+        >
+          <img
+            class="MilestoneImage"
+            :src="milestone.backgroundImage.src.url"
+            :width="milestone.backgroundImage.src.width"
+            :height="milestone.backgroundImage.src.height"
+            :srcset="`${milestone.backgroundImage.screenMd.url} ${milestone.backgroundImage.screenMd.width}w ${milestone.backgroundImage.src.url} ${milestone.backgroundImage.src.width}w`"
+            :style="{
+              // Shift images left or right based on column, and then by a variable amount to create a staggered effect.
+              '--x-translate': `${(index % 2 === 0 ? 180 : -130) + 10 * (index % 3)}%`
+            }"
+            alt=""
+          />
+        </ParallaxElement>
+        <BlockMilestone
+          :data="milestone"
+          :handle-click="showMilestone"
+        />
+      </div>
+      <div class="VerticalLine"></div>
+    </ParallaxContainer>
+    <BackToTop
+      class="fixed right-10 bottom-10"
+      :threshold="900"
+      @click="handleBackToTop()"
+    />
+
+    <TimelineDialog
+      v-if="activeMilestone"
+      :data="activeMilestone"
+      dialog-box-class="sm:max-w-xl md:max-w-3xl"
+      @hide="() => (activeMilestone = null)"
+    ></TimelineDialog>
+  </div>
+</template>
+
 <style lang="scss">
 $line-width: 2px;
 $column-gap-width: 1.5rem;
 
+// makes the years able to have a lowercase 's' in the decade
+select {
+  &#select_jumpTo {
+    text-transform: none;
+  }
+}
+
 .NavSecondary {
   @apply block;
 }
 
 .MilestoneList {
-  @apply gap-y-0;
+  @apply gap-y-0 max-w-screen-4xl mx-auto;
 
   // Offset the list up so the vertical line starts from the secondary nav.
   @screen md {
@@ -347,6 +359,10 @@ $column-gap-width: 1.5rem;
   transform: translateX($line-width);
   grid-row: var(--row);
 
+  &:nth-of-type(1) {
+    @apply md:pt-20;
+  }
+
   &:nth-of-type(even) {
     @apply md:justify-start md:col-start-7;
 
@@ -369,7 +385,7 @@ $column-gap-width: 1.5rem;
 }
 
 .VerticalLine {
-  @apply border-l border-r border-jpl-red top-5 md:top-0 bottom-0 col-start-3 md:col-start-7;
+  @apply border-l border-r border-jpl-red top-5 md:top-2 bottom-0 col-start-3 md:col-start-7 mb-12;
 
   // Use CSS grid positioning rather than position absolute within relative,
   // so we don’t create a new stacking context within the ParallaxContainer.
@@ -384,5 +400,11 @@ $column-gap-width: 1.5rem;
     border-image-slice: 1;
     transform: translateX(-1 * $column-gap-width);
   }
+
+  &::before {
+    @apply absolute -top-px -left-2px w-1 h-30 bg-gradient-to-b from-white to-transparent;
+
+    content: '';
+  }
 }
 </style>