Skip to content

Commit bfc5a57

Browse files
danielroedanielroe
committed
refactor: use object-syntax/named routes
1 parent 79eeee3 commit bfc5a57

23 files changed

+115
-51
lines changed

‎app/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ onKeyDown(
6262
return
6363
}
6464
65-
router.push('/search')
65+
router.push({ name: 'search' })
6666
},
6767
{ dedupe: true },
6868
)

‎app/components/AppFooter.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ const isHome = computed(() => route.name === 'index')
1515
</div>
1616
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
1717
<div class="hidden sm:flex items-center gap-6">
18-
<NuxtLink to="/about" class="link-subtle font-mono text-xs flex items-center">
18+
<NuxtLink :to="{ name: 'about' }" class="link-subtle font-mono text-xs flex items-center">
1919
{{ $t('footer.about') }}
2020
</NuxtLink>
2121
<NuxtLink
22-
to="/privacy"
22+
:to="{ name: 'privacy' }"
2323
class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1 lowercase"
2424
>
2525
{{ $t('privacy_policy.title') }}

‎app/components/AppHeader.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ onKeyStroke(
6565
e => isKeyWithoutModifiers(e, ',') && !isEditableElement(e.target),
6666
e => {
6767
e.preventDefault()
68-
navigateTo('/settings')
68+
navigateTo({ name: 'settings' })
6969
},
7070
{ dedupe: true },
7171
)
@@ -78,7 +78,7 @@ onKeyStroke(
7878
!e.defaultPrevented,
7979
e => {
8080
e.preventDefault()
81-
navigateTo('/compare')
81+
navigateTo({ name: 'compare' })
8282
},
8383
{ dedupe: true },
8484
)
@@ -106,7 +106,7 @@ onKeyStroke(
106106
<!-- Desktop: Logo (navigates home) -->
107107
<div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
108108
<NuxtLink
109-
to="/"
109+
:to="{ name: 'index' }"
110110
:aria-label="$t('header.home')"
111111
dir="ltr"
112112
class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
@@ -152,7 +152,7 @@ onKeyStroke(
152152
<div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
153153
<!-- Desktop: Compare link -->
154154
<NuxtLink
155-
to="/compare"
155+
:to="{ name: 'compare' }"
156156
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
157157
aria-keyshortcuts="c"
158158
>
@@ -167,7 +167,7 @@ onKeyStroke(
167167

168168
<!-- Desktop: Settings link -->
169169
<NuxtLink
170-
to="/settings"
170+
:to="{ name: 'settings' }"
171171
class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
172172
aria-keyshortcuts=","
173173
>

‎app/components/Code/DirectoryListing.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script setup lang="ts">
22
import type { PackageFileTree } from '#shared/types'
3+
import type { RouteLocationRaw } from 'vue-router'
34
import { getFileIcon } from '~/utils/file-icons'
45
import { formatBytes } from '~/utils/formatters'
56
67
const props = defineProps<{
78
tree: PackageFileTree[]
89
currentPath: string
910
baseUrl: string
11+
/** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
12+
basePath: string[]
1013
}>()
1114
1215
// Get the current directory's contents
@@ -36,6 +39,18 @@ const parentPath = computed(() => {
3639
if (parts.length <= 1) return ''
3740
return parts.slice(0, -1).join('/')
3841
})
42+
43+
// Build route object for a path
44+
function getCodeRoute(nodePath?: string): RouteLocationRaw {
45+
if (!nodePath) {
46+
return { name: 'code', params: { path: props.basePath as [string, ...string[]] } }
47+
}
48+
const pathSegments = [...props.basePath, ...nodePath.split('/')]
49+
return {
50+
name: 'code',
51+
params: { path: pathSegments as [string, ...string[]] },
52+
}
53+
}
3954
</script>
4055

4156
<template>
@@ -61,7 +76,7 @@ const parentPath = computed(() => {
6176
>
6277
<td class="py-2 px-4">
6378
<NuxtLink
64-
:to="parentPath ? `${baseUrl}/${parentPath}` : baseUrl"
79+
:to="getCodeRoute(parentPath || undefined)"
6580
class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
6681
>
6782
<span class="i-carbon:folder w-4 h-4 text-yellow-600" />
@@ -79,7 +94,7 @@ const parentPath = computed(() => {
7994
>
8095
<td class="py-2 px-4">
8196
<NuxtLink
82-
:to="`${baseUrl}/${node.path}`"
97+
:to="getCodeRoute(node.path)"
8398
class="flex items-center gap-2 font-mono text-sm hover:text-fg transition-colors"
8499
:class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
85100
>

‎app/components/Code/FileTree.vue‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<script setup lang="ts">
22
import type { PackageFileTree } from '#shared/types'
3+
import type { RouteLocationRaw } from 'vue-router'
34
import { getFileIcon } from '~/utils/file-icons'
45
56
const props = defineProps<{
67
tree: PackageFileTree[]
78
currentPath: string
89
baseUrl: string
10+
/** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
11+
basePath: string[]
912
depth?: number
1013
}>()
1114
@@ -18,6 +21,15 @@ function isNodeActive(node: PackageFileTree): boolean {
1821
return false
1922
}
2023
24+
// Build route object for a file path
25+
function getFileRoute(nodePath: string): RouteLocationRaw {
26+
const pathSegments = [...props.basePath, ...nodePath.split('/')]
27+
return {
28+
name: 'code',
29+
params: { path: pathSegments as [string, ...string[]] },
30+
}
31+
}
32+
2133
const { toggleDir, isExpanded, autoExpandAncestors } = useFileTreeState(props.baseUrl)
2234
2335
// Auto-expand directories in the current path
@@ -63,14 +75,15 @@ watch(
6375
:tree="node.children"
6476
:current-path="currentPath"
6577
:base-url="baseUrl"
78+
:base-path="basePath"
6679
:depth="depth + 1"
6780
/>
6881
</template>
6982

7083
<!-- File -->
7184
<template v-else>
7285
<NuxtLink
73-
:to="`${baseUrl}/${node.path}`"
86+
:to="getFileRoute(node.path)"
7487
class="flex items-center gap-1.5 py-1.5 px-3 font-mono text-sm transition-colors hover:bg-bg-muted"
7588
:class="currentPath === node.path ? 'bg-bg-muted text-fg' : 'text-fg-muted'"
7689
:style="{ paddingLeft: `${depth * 12 + 32}px` }"

‎app/components/Code/MobileTreeDrawer.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ defineProps<{
55
tree: PackageFileTree[]
66
currentPath: string
77
baseUrl: string
8+
/** Base path segments for the code route (e.g., ['nuxt', 'v', '4.2.0']) */
9+
basePath: string[]
810
}>()
911
1012
const isOpen = shallowRef(false)
@@ -73,7 +75,12 @@ watch(isOpen, open => (isLocked.value = open))
7375
<span class="i-carbon:close w-5 h-5" />
7476
</button>
7577
</div>
76-
<CodeFileTree :tree="tree" :current-path="currentPath" :base-url="baseUrl" />
78+
<CodeFileTree
79+
:tree="tree"
80+
:current-path="currentPath"
81+
:base-url="baseUrl"
82+
:base-path="basePath"
83+
/>
7784
</aside>
7885
</Transition>
7986
</template>

‎app/components/Compare/ComparisonGrid.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
4545
>
4646
<span class="inline-flex items-center gap-1.5 truncate">
4747
<NuxtLink
48-
:to="`/package/${col.header}`"
48+
:to="{ name: 'package', params: { package: [col.header] } }"
4949
class="link-subtle font-mono text-sm font-medium text-fg truncate"
5050
:title="col.header"
5151
>

‎app/components/Compare/PackageSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ function handleBlur() {
106106
</template>
107107
<NuxtLink
108108
v-else
109-
:to="`/package/${pkg}`"
109+
:to="{ name: 'package', params: { package: [pkg] } }"
110110
class="font-mono text-sm text-fg hover:text-accent transition-colors"
111111
>
112112
{{ pkg }}

‎app/components/Header/MobileMenu.client.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ onUnmounted(deactivate)
104104
<!-- Main navigation -->
105105
<div class="px-2 py-2">
106106
<NuxtLink
107-
to="/about"
107+
:to="{ name: 'about' }"
108108
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
109109
@click="closeMenu"
110110
>
@@ -113,7 +113,7 @@ onUnmounted(deactivate)
113113
</NuxtLink>
114114

115115
<NuxtLink
116-
to="/privacy"
116+
:to="{ name: 'privacy' }"
117117
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
118118
@click="closeMenu"
119119
>
@@ -122,7 +122,7 @@ onUnmounted(deactivate)
122122
</NuxtLink>
123123

124124
<NuxtLink
125-
to="/compare"
125+
:to="{ name: 'compare' }"
126126
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
127127
@click="closeMenu"
128128
>
@@ -131,7 +131,7 @@ onUnmounted(deactivate)
131131
</NuxtLink>
132132

133133
<NuxtLink
134-
to="/settings"
134+
:to="{ name: 'settings' }"
135135
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
136136
@click="closeMenu"
137137
>
@@ -142,7 +142,7 @@ onUnmounted(deactivate)
142142
<!-- Connected user links -->
143143
<template v-if="isConnected && npmUser">
144144
<NuxtLink
145-
:to="`/~${npmUser}`"
145+
:to="{ name: '~username', params: { username: npmUser } }"
146146
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
147147
@click="closeMenu"
148148
>
@@ -151,7 +151,7 @@ onUnmounted(deactivate)
151151
</NuxtLink>
152152

153153
<NuxtLink
154-
:to="`/~${npmUser}/orgs`"
154+
:to="{ name: '~username-orgs', params: { username: npmUser } }"
155155
class="flex items-center gap-3 px-3 py-3 rounded-md font-mono text-sm text-fg hover:bg-bg-subtle transition-colors duration-200"
156156
@click="closeMenu"
157157
>

‎app/components/Header/OrgsDropdown.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
5858
@keydown="handleKeydown"
5959
>
6060
<NuxtLink
61-
:to="`/~${username}/orgs`"
61+
:to="{ name: '~username-orgs', params: { username } }"
6262
class="link-subtle font-mono text-sm inline-flex items-center gap-1"
6363
>
6464
{{ $t('header.orgs') }}
@@ -94,7 +94,7 @@ function handleKeydown(event: KeyboardEvent) {
9494
<ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
9595
<li v-for="org in orgs" :key="org">
9696
<NuxtLink
97-
:to="`/@${org}`"
97+
:to="{ name: 'org', params: { org } }"
9898
class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
9999
>
100100
@{{ org }}
@@ -108,7 +108,7 @@ function handleKeydown(event: KeyboardEvent) {
108108

109109
<div class="px-3 py-2 border-t border-border">
110110
<NuxtLink
111-
:to="`/~${username}/orgs`"
111+
:to="{ name: '~username-orgs', params: { username } }"
112112
class="link-subtle font-mono text-xs inline-flex items-center gap-1"
113113
>
114114
{{ $t('header.orgs_dropdown.view_all') }}

0 commit comments

Comments
 (0)