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
oengusio · Sep 29, 2021 · a6e9e4c · a6e9e4c
1 parent c1af088
commit a6e9e4c
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">