chore: move link to own folder

Author: essenmitsosse

app/components/Button/Link.vue app/components/Link/Base.vueapp/components/Button/Link.vue renamed to app/components/Link/Base.vue

@@ -7,9 +7,9 @@ defineProps<{
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
-        <ButtonLink variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <LinkBase variant="tag" :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
           {{ keyword }}
-        </ButtonLink>
+        </LinkBase>
       </li>
     </ul>
   </CollapsibleSection>

app/components/Package/Keywords.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ButtonLink, TagStatic } from '#components'
+import { LinkBase, TagStatic } from '#components'
 
 const props = defineProps<{
   packageName: string
@@ -56,10 +56,10 @@ const typesHref = computed(() => {
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary">
       <TooltipApp :text="typesTooltip">
-        <ButtonLink v-if="typesHref" variant="tag" :to="typesHref">
+        <LinkBase v-if="typesHref" variant="tag" :to="typesHref">
           <span class="w-3 h-3 i-carbon-checkmark" aria-hidden="true" />
           {{ $t('package.metrics.types_label') }}
-        </ButtonLink>
+        </LinkBase>
         <TagStatic v-else :variant="hasTypes ? 'default' : 'disabled'" :tabindex="0">
           <span
             class="w-3 h-3"

app/components/Package/MetricsBadges.vue

@@ -234,7 +234,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
+      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Empty state -->

app/pages/@[org].vue

@@ -359,7 +359,7 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <ButtonLink :to="packageRoute()">{{ $t('code.go_to_package') }}</ButtonLink>
+      <LinkBase :to="packageRoute()">{{ $t('code.go_to_package') }}</LinkBase>
     </div>
 
     <!-- Loading state -->
@@ -371,7 +371,7 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <ButtonLink :to="packageRoute(version)">{{ $t('code.back_to_package') }}</ButtonLink>
+      <LinkBase :to="packageRoute(version)">{{ $t('code.back_to_package') }}</LinkBase>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -472,15 +472,15 @@ defineOgImageComponent('Default', {
           <p class="text-fg-subtle text-sm mb-4">
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
-          <ButtonLink
+          <LinkBase
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
             class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </ButtonLink>
+          </LinkBase>
         </div>
 
         <!-- Loading file content -->
@@ -526,15 +526,15 @@ defineOgImageComponent('Default', {
           <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
-          <ButtonLink
+          <LinkBase
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
             class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </ButtonLink>
+          </LinkBase>
         </div>
 
         <!-- Directory listing (when no file selected or viewing a directory) -->

app/pages/package-code/[...path].vue

@@ -1151,7 +1151,7 @@ defineOgImageComponent('Package', {
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
+      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
   </main>
 </template>

app/pages/package/[...package].vue

@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
+      <LinkBase to="/">{{ $t('common.go_back_home') }}</LinkBase>
     </div>
 
     <!-- Package list -->

app/pages/~[username]/index.vue

@@ -156,9 +156,9 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <ButtonLink :to="`/~${npmUser}/orgs`" class="mt-4">{{
+        <LinkBase :to="`/~${npmUser}/orgs`" class="mt-4">{{
           $t('user.orgs_page.view_your_orgs')
-        }}</ButtonLink>
+        }}</LinkBase>
       </div>
 
       <!-- Loading state -->

app/pages/~[username]/orgs.vue

@@ -64,7 +64,7 @@ import {
   BaseCard,
   BuildEnvironment,
   ButtonBase,
-  ButtonLink,
+  LinkBase,
   CallToAction,
   CodeDirectoryListing,
   CodeFileTree,
@@ -331,9 +331,9 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('ButtonLink', () => {
+  describe('LinkBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(ButtonLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com' },
         slots: { default: 'Button link content' },
       })
@@ -342,7 +342,7 @@ describe('component accessibility audits', () => {
     })
 
     it("should have no accessibility violations when it's the current link", async () => {
-      const component = await mountSuspended(ButtonLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com', current: true },
         slots: { default: 'Button link content' },
       })
@@ -351,7 +351,7 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when disabled (plain text)', async () => {
-      const component = await mountSuspended(ButtonLink, {
+      const component = await mountSuspended(LinkBase, {
         props: { href: 'http://example.com', disabled: true },
         slots: { default: 'Button link content' },
       })