fix: replace a tag with NuxtLink (#906)

.eslintrc

@@ -8,5 +8,11 @@
         "jsonc/sort-keys": "error"
       }
     }
-  ]
+  ],
+  "rules": {
+    "vue/no-restricted-syntax":["error", {
+      "selector": "VElement[name='a']",
+      "message": "Use NuxtLink instead."
+    }]
+  }
 }

components/account/AccountBigCard.vue

@@ -28,9 +28,9 @@ defineOptions({
           <div w-17 h-17 rounded-full border-4 border-bg-base z-2 mt--2 ms--1>
             <AccountAvatar :account="account" />
           </div>
-          <a block sm:hidden href="javascript:;" @click.stop>
+          <NuxtLink block sm:hidden href="javascript:;" @click.stop>
             <AccountFollowButton :account="account" />
-          </a>
+          </NuxtLink>
         </div>
         <div sm:mt-2>
           <AccountDisplayName :account="account" font-bold text-lg line-clamp-1 ws-pre-wrap break-all />
@@ -46,9 +46,9 @@ defineOptions({
       <!-- Follow info -->
       <div flex justify-between items-center>
         <AccountPostsFollowers text-sm :account="account" />
-        <a sm:block hidden href="javascript:;" @click.stop>
+        <NuxtLink sm:block hidden href="javascript:;" @click.stop>
           <AccountFollowButton :account="account" />
-        </a>
+        </NuxtLink>
       </div>
     </div>
   </component>

components/help/HelpPreview.vue

@@ -23,17 +23,17 @@ const emit = defineEmits<{
     </p>
     <p>
       {{ $t('help.desc_para4') }}
-      <a font-bold text-primary href="/m.webtoo.ls/@elk" target="_blank">
+      <NuxtLink font-bold text-primary href="/m.webtoo.ls/@elk" target="_blank">
         {{ $t('help.desc_para5') }}
-      </a>
+      </NuxtLink>
       {{ $t('help.desc_para6') }}
     </p>
     {{ $t('help.desc_para3') }}
     <p flex="~ gap-2 wrap" mxa>
       <template v-for="team of teams" :key="team.github">
-        <a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
+        <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
           <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
-        </a>
+        </NuxtLink>
       </template>
     </p>
     <p italic flex justify-center w-full>

components/nav/NavFooter.vue

@@ -55,11 +55,17 @@ function toggleDark() {
         {{ $t('settings.about.label') }}
       </NuxtLink>
       &middot;
-      <a href="/m.webtoo.ls/@elk" target="_blank">Mastodon</a>
+      <NuxtLink href="/m.webtoo.ls/@elk" target="_blank">
+        Mastodon
+      </NuxtLink>
       &middot;
-      <a href="https://chat.elk.zone" target="_blank">Discord</a>
+      <NuxtLink href="https://chat.elk.zone" target="_blank" external>
+        Discord
+      </NuxtLink>
       &middot;
-      <a href="https://github.com/elk-zone" target="_blank">GitHub</a>
+      <NuxtLink href="https://github.com/elk-zone" target="_blank" external>
+        GitHub
+      </NuxtLink>
     </div>
   </footer>
 </template>

components/status/StatusCard.vue

@@ -168,11 +168,11 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
             <AccountBotIndicator v-if="status.account.bot" me-2 />
             <div flex>
               <CommonTooltip :content="createdAt">
-                <a :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
+                <NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
                   <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
                     {{ timeago }}
                   </time>
-                </a>
+                </NuxtLink>
               </CommonTooltip>
               <StatusEditIndicator :status="status" inline />
             </div>

components/status/StatusPreviewCard.vue

@@ -46,6 +46,7 @@ const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
       'rounded-lg border border-base': !root,
     }"
     target="_blank"
+    external
   >
     <div
       v-if="card.image"

components/status/StatusPreviewGitHub.vue

@@ -99,13 +99,13 @@ const meta = $computed(() => {
     <div p4 sm:px-8 flex flex-col justify-between min-h-50 md:min-h-60 h-full>
       <div flex justify-between items-center gap-2 sm:gap-6 h-full mb-2 min-h-35 md:min-h-45>
         <div flex flex-col gap-2>
-          <a flex gap-1 text-xl sm:text-3xl flex-wrap leading-none :href="meta.titleUrl" target="_blank">
+          <NuxtLink flex gap-1 text-xl sm:text-3xl flex-wrap leading-none :href="meta.titleUrl" target="_blank" external>
             <template v-if="meta.repo">
               <span>{{ meta.user }}</span><span text-secondary-light>/</span><span text-primary font-bold>{{ meta.repo }}</span>
             </template>
             <span v-else>{{ meta.user }}</span>
-          </a>
+          </NuxtLink>
-          <a sm:text-lg :href="card.url" target="_blank">
+          <NuxtLink sm:text-lg :href="card.url" target="_blank" external>
             <span v-if="meta.type === 'issue'" text-secondary-light me-2>
               #{{ meta.number }}
             </span>
@@ -113,12 +113,12 @@ const meta = $computed(() => {
               PR #{{ meta.number }}
             </span>
             <span text-secondary leading-tight>{{ meta.details }}</span>
-          </a>
+          </NuxtLink>
         </div>
         <div>
-          <a :href="meta.titleUrl" target="_blank">
+          <NuxtLink :href="meta.titleUrl" target="_blank" external>
             <img w-30 aspect-square width="20" height="20" rounded-2 :src="meta.avatar">
-          </a>
+          </NuxtLink>
         </div>
       </div>
       <div flex justify-between>

components/timeline/TimelinePaginator.vue

@@ -41,14 +41,14 @@ const showOriginSite = $computed(() =>
     <template v-if="context === 'account' && showOriginSite" #done>
       <div p5 text-secondary text-center flex flex-col items-center gap1>
         <span italic>{{ $t('timeline.view_older_posts') }}</span>
-        <a
+        <NuxtLink
-          :href="account!.url" target="_blank"
+          :href="account!.url" target="_blank" external
           flex="~ gap-1" items-center text-primary
           hover="underline text-primary-active"
         >
           <div i-ri:external-link-fill />
           {{ $t('menu.open_in_original_site') }}
-        </a>
+        </NuxtLink>
       </div>
     </template>
   </CommonPaginator>

components/user/UserSignIn.vue

@@ -175,7 +175,7 @@ onClickOutside($$(input), () => {
       <div i-ri:lightbulb-line me-1 />
       <span>
         <i18n-t keypath="user.tip_no_account">
-          <a href="https://joinmastodon.org/servers" target="_blank" hover="underline text-primary">{{ $t('user.tip_register_account') }}</a>
+          <NuxtLink href="https://joinmastodon.org/servers" target="_blank" external hover="underline text-primary">{{ $t('user.tip_register_account') }}</NuxtLink>
         </i18n-t>
       </span>
     </div>