forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
chore: consistent back button across pages (#936)
+30
-14
+15
-11
app/pages/about.vue
+15
-11
app/pages/about.vue
···
1
1
<script setup lang="ts">
2
+
const router = useRouter()
3
+
2
4
interface GitHubContributor {
3
5
login: string
4
6
id: number
···
39
41
<main class="container flex-1 py-12 sm:py-16">
40
42
<article class="max-w-2xl mx-auto">
41
43
<header class="mb-12">
42
-
<h1 class="font-mono text-3xl sm:text-4xl font-medium mb-4">{{ $t('about.heading') }}</h1>
44
+
<div class="flex items-baseline justify-between gap-4 mb-4">
45
+
<h1 class="font-mono text-3xl sm:text-4xl font-medium">
46
+
{{ $t('about.heading') }}
47
+
</h1>
48
+
<button
49
+
type="button"
50
+
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
51
+
@click="router.back()"
52
+
>
53
+
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
54
+
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
55
+
</button>
56
+
</div>
43
57
<p class="text-fg-muted text-lg">
44
58
{{ $t('tagline') }}
45
59
</p>
···
215
229
216
230
<CallToAction />
217
231
</section>
218
-
219
-
<footer class="mt-16 pt-8 border-t border-border">
220
-
<NuxtLink
221
-
to="/"
222
-
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-accent/70"
223
-
>
224
-
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
225
-
{{ $t('about.back_home') }}
226
-
</NuxtLink>
227
-
</footer>
228
232
</article>
229
233
</main>
230
234
</template>
+15
-3
app/pages/compare.vue
+15
-3
app/pages/compare.vue
···
1
1
<script setup lang="ts">
2
2
import { useRouteQuery } from '@vueuse/router'
3
3
4
+
const router = useRouter()
5
+
4
6
definePageMeta({
5
7
name: 'compare',
6
8
})
···
61
63
<main class="container flex-1 py-12 sm:py-16 w-full">
62
64
<div class="max-w-2xl mx-auto">
63
65
<header class="mb-12">
64
-
<h1 class="font-mono text-3xl sm:text-4xl font-medium mb-4">
65
-
{{ $t('compare.packages.title') }}
66
-
</h1>
66
+
<div class="flex items-baseline justify-between gap-4 mb-4">
67
+
<h1 class="font-mono text-3xl sm:text-4xl font-medium">
68
+
{{ $t('compare.packages.title') }}
69
+
</h1>
70
+
<button
71
+
type="button"
72
+
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
73
+
@click="router.back()"
74
+
>
75
+
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
76
+
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
77
+
</button>
78
+
</div>
67
79
<p class="text-fg-muted text-lg">
68
80
{{ $t('compare.packages.tagline') }}
69
81
</p>