From a6e9e4cf47dc6a1a883810bb68d8a3481a8ea67a Mon Sep 17 00:00:00 2001
From: BobChao87 <bobchao87@gmail.com>
Date: Wed, 29 Sep 2021 00:59:45 -0700
Subject: [PATCH] Replace NuxtLink with ElementLink

This allows us to have active classes on hash mapped routes for the page
and the anchor links. This will also allow us to place more complex
logic onto our linkings where relevant.

Related to Issue #32
---
 components/element/Link.vue              |  7 +++++--
 components/header/Cookies.vue            |  4 ++--
 components/header/Nav.vue                | 12 ++++++------
 components/homepage/Marathons.vue        |  6 +++---
 components/marathon/schedule/Current.vue |  4 ++--
 components/marathon/schedule/Run.vue     |  8 ++++----
 components/marathon/sidebar/Admin.vue    | 16 ++++++++--------
 components/marathon/sidebar/Overview.vue | 12 ++++++------
 components/marathon/sidebar/Tracker.vue  | 12 ++++++------
 components/widget/v1/Redirect.vue        |  4 ++--
 layouts/error.vue                        |  4 ++--
 11 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/components/element/Link.vue b/components/element/Link.vue
index bf685473..f04a9d9d 100644
--- a/components/element/Link.vue
+++ b/components/element/Link.vue
@@ -30,11 +30,14 @@ export default Vue.extend({
   computed: {
     isActive(): IsActive {
       return {
-        'is-active': this.$route.path === this.path,
+        'is-active': (this.isHash ? this.$route.hash : this.$route.path) === this.path,
       };
     },
     path(): string {
-      return this.localePath(this.to);
+      return this.isHash ? this.to : this.localePath(this.to);
+    },
+    isHash(): boolean {
+      return this.to.startsWith('#');
     },
   },
 });
diff --git a/components/header/Cookies.vue b/components/header/Cookies.vue
index 16124736..57b9e1c9 100644
--- a/components/header/Cookies.vue
+++ b/components/header/Cookies.vue
@@ -11,9 +11,9 @@
       <button class="button is-warning" @click="setCookies(false)">
         {{ $t('action.decline') }}
       </button>
-      <NuxtLink :to="localePath('/about')" class="button is-info">
+      <ElementLink to="/about" class="button is-info">
         {{ $t('navbar.about') }}
-      </NuxtLink>
+      </ElementLink>
     </div>
   </div>
 </template>
diff --git a/components/header/Nav.vue b/components/header/Nav.vue
index 8d21e5ce..d89c6e4d 100644
--- a/components/header/Nav.vue
+++ b/components/header/Nav.vue
@@ -1,12 +1,12 @@
 <template>
   <nav class="navbar">
     <div class="navbar-brand">
-      <NuxtLink :to="localePath('/')" class="navbar-item icon-text">
+      <ElementLink to="/" class="navbar-item icon-text">
         <img src="~assets/oengus.svg" class="icon" alt="Oengus logo">
         <span>
           Oengus
         </span>
-      </NuxtLink>
+      </ElementLink>
       <button class="button navbar-burger" :class="isActiveClass" @click="toggleNavbarActive">
         <span />
         <span />
@@ -41,12 +41,12 @@
         <div class="navbar-item">
           <WidgetV1Redirect />
         </div>
-        <NuxtLink :to="localePath('/about')" class="navbar-item">
+        <ElementLink to="/about" class="navbar-item">
           {{ $t('navbar.about') }}
-        </NuxtLink>
-        <NuxtLink :to="localePath('/patrons')" class="navbar-item">
+        </ElementLink>
+        <ElementLink to="/patrons" class="navbar-item">
           {{ $t('navbar.patrons') }}
-        </NuxtLink>
+        </ElementLink>
         <WidgetLanguagePicker />
         <WidgetSignInPicker type="navbar" is-right />
       </div>
diff --git a/components/homepage/Marathons.vue b/components/homepage/Marathons.vue
index 20a8cbfe..7e6feee5 100644
--- a/components/homepage/Marathons.vue
+++ b/components/homepage/Marathons.vue
@@ -5,7 +5,7 @@
         {{ $t('calendar.title') }}
       </span>
       <span>
-        (<NuxtLink :to="localePath('/calendar')">{{ $t('homepage.marathons.calendar') }}</NuxtLink>)
+        (<ElementLink to="/calendar">{{ $t('homepage.marathons.calendar') }}</ElementLink>)
       </span>
     </h3>
 
@@ -18,9 +18,9 @@
           <div :key="marathonsList.key + 'prespacer'" class="spacer" />
           <template v-for="(marathon, index) in homepageMarathons[marathonsList.key]">
             <span :key="marathonsList.key + 'name' + index" class="notification" :class="getRowParity(index)">
-              <NuxtLink :to="localePath(`/marathon/${marathon.id}`)">
+              <ElementLink :to="`/marathon/${marathon.id}`">
                 {{ marathon.name }}
-              </NuxtLink>
+              </ElementLink>
             </span>
             <span :key="marathonsList.key + 'location' + index" class="notification location" :class="getRowParity(index)">
               <span v-if="marathon.onsite && marathon.country" class="icon flag-icon" :class="`flag-icon-${marathon.country.toLowerCase()}`" />
diff --git a/components/marathon/schedule/Current.vue b/components/marathon/schedule/Current.vue
index 95f5f6fc..3758ca0f 100644
--- a/components/marathon/schedule/Current.vue
+++ b/components/marathon/schedule/Current.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="ticker" class="message" :class="messageClass">
     <div class="message-header">
-      <NuxtLink :to="linkedRun">
+      <ElementLink :to="linkedRun">
         {{ $t(messageHeaderTitle, messageHeaderArgs) }}
-      </NuxtLink>
+      </ElementLink>
     </div>
 
     <div class="message-body">
diff --git a/components/marathon/schedule/Run.vue b/components/marathon/schedule/Run.vue
index 1c8f4abb..f877bc17 100644
--- a/components/marathon/schedule/Run.vue
+++ b/components/marathon/schedule/Run.vue
@@ -5,9 +5,9 @@
         {{ run.setupBlock ? run.setupBlockText : run.gameName }}
       </h4>
       <p v-for="runner in run.runners" :key="runner.id">
-        <NuxtLink :to="localePath(`/user/${runner.username}`)">
+        <ElementLink :to="`/user/${runner.username}`">
           {{ runner.username }}
-        </NuxtLink>
+        </ElementLink>
       </p>
     </div>
 
@@ -54,9 +54,9 @@
     </template>
 
     <span class="is-label">{{ $t('marathon.schedule.table.link') }}</span>
-    <NuxtLink :to="'#run-' + run.id" rel="nofollow">
+    <ElementLink :to="`#run-${run.id}`" rel="nofollow">
       {{ `#run-${run.id}` }}
-    </NuxtLink>
+    </ElementLink>
   </div>
 </template>
 
diff --git a/components/marathon/sidebar/Admin.vue b/components/marathon/sidebar/Admin.vue
index 707e428f..57d8d3f3 100644
--- a/components/marathon/sidebar/Admin.vue
+++ b/components/marathon/sidebar/Admin.vue
@@ -5,36 +5,36 @@
     </p>
     <ul class="menu-list">
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/settings`)">
+        <ElementLink :to="`/marathon/${marathonId}/settings`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'cogs' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.settings') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/selection`)">
+        <ElementLink :to="`/marathon/${marathonId}/selection`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'check-square' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.selectRuns') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/schedule/manage`)">
+        <ElementLink :to="`/marathon/${marathonId}/schedule/manage`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'calendar-check' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.manageSchedule') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/incentives/manage`)">
+        <ElementLink :to="`/marathon/${marathonId}/incentives/manage`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'dot-circle' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.manageIncentives') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
     </ul>
   </div>
diff --git a/components/marathon/sidebar/Overview.vue b/components/marathon/sidebar/Overview.vue
index f3f956fe..8478b8c8 100644
--- a/components/marathon/sidebar/Overview.vue
+++ b/components/marathon/sidebar/Overview.vue
@@ -5,12 +5,12 @@
     </p>
     <ul class="menu-list">
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}`)">
+        <ElementLink :to="`/marathon/${marathonId}`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'home' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.home') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
         <ElementLink :to="`/marathon/${marathonId}/schedule`">
@@ -21,20 +21,20 @@
         </ElementLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/submissions`)">
+        <ElementLink :to="`/marathon/${marathonId}/submissions`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'book' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.viewSubmissions') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li v-if="shouldShowRedirectLinks">
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/submit`)">
+        <ElementLink :to="`/marathon/${marathonId}/submit`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'paper-plane' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.submitRuns') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
     </ul>
   </div>
diff --git a/components/marathon/sidebar/Tracker.vue b/components/marathon/sidebar/Tracker.vue
index 4a8f4fd6..a6fb3e2a 100644
--- a/components/marathon/sidebar/Tracker.vue
+++ b/components/marathon/sidebar/Tracker.vue
@@ -5,28 +5,28 @@
     </p>
     <ul class="menu-list">
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/donate`)">
+        <ElementLink :to="`/marathon/${marathonId}/donate`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'donate' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.donate') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/donations`)">
+        <ElementLink :to="`/marathon/${marathonId}/donations`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'money-bill' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.donations') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
       <li>
-        <NuxtLink :to="localePath(`/marathon/${marathonId}/incentives`)">
+        <ElementLink :to="`/marathon/${marathonId}/incentives`">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'bullseye' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.incentives') }}
           </span>
-        </NuxtLink>
+        </ElementLink>
       </li>
     </ul>
   </div>
diff --git a/components/widget/v1/Redirect.vue b/components/widget/v1/Redirect.vue
index ff9f50e2..7a7c49ca 100644
--- a/components/widget/v1/Redirect.vue
+++ b/components/widget/v1/Redirect.vue
@@ -1,7 +1,7 @@
 <template>
-  <NuxtLink v-if="shouldShowRedirectLink" :to="localePath(`${$route.path}/v1`)" class="button is-warning">
+  <ElementLink v-if="shouldShowRedirectLink" :to="`${$route.path}/v1`" class="button is-warning">
     {{ $t('footer.v1Link') }}
-  </NuxtLink>
+  </ElementLink>
 </template>
 
 <script lang="ts">
diff --git a/layouts/error.vue b/layouts/error.vue
index 6d74fb46..49c1d21e 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -13,10 +13,10 @@
           <FontAwesomeIcon :icon="[ 'fas', 'home' ]" />
           <span>Oengus</span>
         </a>
-        <NuxtLink v-else class="error-link" :to="localePath('/')">
+        <ElementLink v-else class="error-link" to="/">
           <FontAwesomeIcon :icon="[ 'fas', 'home' ]" />
           <span>Oengus</span>
-        </NuxtLink>
+        </ElementLink>
       </p>
 
       <div class="logo">