Skip to content

Commit 419b704

Browse files
j0u1j0u1
committed
refactor: reorganize footer layout and always show BuildEnvironment
1 parent 7532935 commit 419b704

2 files changed

Lines changed: 123 additions & 125 deletions

File tree

‎app/components/AppFooter.vue‎

Lines changed: 121 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<script setup lang="ts">
22
import { NPMX_DOCS_SITE } from '#shared/utils/constants'
33
4-
const route = useRoute()
5-
const isHome = computed(() => route.name === 'index')
6-
74
const discord = useDiscordLink()
85
const modalRef = useTemplateRef('modalRef')
96
const showModal = () => modalRef.value?.showModal?.()
@@ -12,129 +9,130 @@ const closeModal = () => modalRef.value?.close?.()
129

1310
<template>
1411
<footer class="border-t border-border mt-auto">
15-
<div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
16-
<div class="flex flex-col lg:flex-row lg:items-baseline justify-between gap-2 sm:gap-4">
17-
<div>
18-
<p class="font-mono text-balance m-0 hidden sm:block mb-3">
19-
{{ $t('tagline') }}
20-
</p>
21-
<BuildEnvironment v-if="!isHome" footer />
22-
</div>
23-
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
24-
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
25-
<div class="flex items-center gap-5">
26-
<LinkBase :to="{ name: 'about' }">
27-
{{ $t('footer.about') }}
28-
</LinkBase>
29-
<LinkBase :to="{ name: 'blog' }">
30-
{{ $t('footer.blog') }}
31-
</LinkBase>
32-
<LinkBase :to="{ name: 'privacy' }">
33-
{{ $t('privacy_policy.title') }}
34-
</LinkBase>
35-
<LinkBase :to="{ name: 'accessibility' }">
36-
{{ $t('a11y.footer_title') }}
37-
</LinkBase>
38-
<button
39-
type="button"
40-
class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
41-
@click.prevent="showModal"
42-
aria-haspopup="dialog"
43-
>
44-
{{ $t('footer.keyboard_shortcuts') }}
45-
</button>
12+
<div
13+
class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm flex flex-col lg:flex-row justify-between gap-2 sm:gap-4"
14+
>
15+
<div class="flex flex-col gap-3 motion-safe:animate-fade-in motion-safe:animate-fill-both">
16+
<p class="font-mono text-balance hidden sm:block">
17+
{{ $t('tagline') }}
18+
</p>
19+
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
20+
<span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
21+
<span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
22+
</p>
23+
<BuildEnvironment footer />
24+
</div>
25+
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
26+
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
27+
<p class="hidden lg:flex text-fg-muted uppercase h-5 items-center">Links</p>
28+
<div class="flex items-center gap-5">
29+
<LinkBase :to="{ name: 'about' }">
30+
{{ $t('footer.about') }}
31+
</LinkBase>
32+
<LinkBase :to="{ name: 'blog' }">
33+
{{ $t('footer.blog') }}
34+
</LinkBase>
35+
<LinkBase :to="{ name: 'privacy' }">
36+
{{ $t('privacy_policy.title') }}
37+
</LinkBase>
38+
<LinkBase :to="{ name: 'accessibility' }">
39+
{{ $t('a11y.footer_title') }}
40+
</LinkBase>
41+
<button
42+
type="button"
43+
class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
44+
@click.prevent="showModal"
45+
aria-haspopup="dialog"
46+
>
47+
{{ $t('footer.keyboard_shortcuts') }}
48+
</button>
4649

47-
<Modal
48-
ref="modalRef"
49-
:modalTitle="$t('footer.keyboard_shortcuts')"
50-
class="w-auto max-w-lg"
51-
>
52-
<p class="mb-2 font-mono text-fg-subtle">
53-
{{ $t('shortcuts.section.global') }}
54-
</p>
55-
<ul class="mb-6 flex flex-col gap-2">
56-
<li class="flex gap-2 items-center">
57-
<kbd class="kbd">/</kbd>
58-
<span>{{ $t('shortcuts.focus_search') }}</span>
59-
</li>
60-
<li class="flex gap-2 items-center">
61-
<kbd class="kbd">?</kbd>
62-
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
63-
</li>
64-
<li class="flex gap-2 items-center">
65-
<kbd class="kbd">,</kbd>
66-
<span>{{ $t('shortcuts.settings') }}</span>
67-
</li>
68-
<li class="flex gap-2 items-center">
69-
<kbd class="kbd">c</kbd>
70-
<span>{{ $t('shortcuts.compare') }}</span>
71-
</li>
72-
</ul>
73-
<p class="mb-2 font-mono text-fg-subtle">
74-
{{ $t('shortcuts.section.search') }}
75-
</p>
76-
<ul class="mb-6 flex flex-col gap-2">
77-
<li class="flex gap-2 items-center">
78-
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
79-
<span>{{ $t('shortcuts.navigate_results') }}</span>
80-
</li>
81-
<li class="flex gap-2 items-center">
82-
<kbd class="kbd">Enter</kbd>
83-
<span>{{ $t('shortcuts.go_to_result') }}</span>
84-
</li>
85-
</ul>
86-
<p class="mb-2 font-mono text-fg-subtle">
87-
{{ $t('shortcuts.section.package') }}
88-
</p>
89-
<ul class="mb-8 flex flex-col gap-2">
90-
<li class="flex gap-2 items-center">
91-
<kbd class="kbd">.</kbd>
92-
<span>{{ $t('shortcuts.open_code_view') }}</span>
93-
</li>
94-
<li class="flex gap-2 items-center">
95-
<kbd class="kbd">d</kbd>
96-
<span>{{ $t('shortcuts.open_docs') }}</span>
97-
</li>
98-
<li class="flex gap-2 items-center">
99-
<kbd class="kbd">c</kbd>
100-
<span>{{ $t('shortcuts.compare_from_package') }}</span>
101-
</li>
102-
</ul>
103-
<p class="text-fg-muted leading-relaxed">
104-
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
105-
<template #settings>
106-
<NuxtLink
107-
:to="{ name: 'settings' }"
108-
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
109-
@click="closeModal"
110-
>
111-
{{ $t('settings.title') }}
112-
</NuxtLink>
113-
</template>
114-
</i18n-t>
115-
</p>
116-
</Modal>
117-
</div>
118-
<div class="flex items-center gap-5">
119-
<LinkBase :to="NPMX_DOCS_SITE">
120-
{{ $t('footer.docs') }}
121-
</LinkBase>
122-
<LinkBase to="https://repo.npmx.dev">
123-
{{ $t('footer.source') }}
124-
</LinkBase>
125-
<LinkBase to="https://social.npmx.dev">
126-
{{ $t('footer.social') }}
127-
</LinkBase>
128-
<LinkBase :to="discord.url">
129-
{{ discord.label }}
130-
</LinkBase>
131-
</div>
50+
<Modal
51+
ref="modalRef"
52+
:modalTitle="$t('footer.keyboard_shortcuts')"
53+
class="w-auto max-w-lg"
54+
>
55+
<p class="mb-2 font-mono text-fg-subtle">
56+
{{ $t('shortcuts.section.global') }}
57+
</p>
58+
<ul class="mb-6 flex flex-col gap-2">
59+
<li class="flex gap-2 items-center">
60+
<kbd class="kbd">/</kbd>
61+
<span>{{ $t('shortcuts.focus_search') }}</span>
62+
</li>
63+
<li class="flex gap-2 items-center">
64+
<kbd class="kbd">?</kbd>
65+
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
66+
</li>
67+
<li class="flex gap-2 items-center">
68+
<kbd class="kbd">,</kbd>
69+
<span>{{ $t('shortcuts.settings') }}</span>
70+
</li>
71+
<li class="flex gap-2 items-center">
72+
<kbd class="kbd">c</kbd>
73+
<span>{{ $t('shortcuts.compare') }}</span>
74+
</li>
75+
</ul>
76+
<p class="mb-2 font-mono text-fg-subtle">
77+
{{ $t('shortcuts.section.search') }}
78+
</p>
79+
<ul class="mb-6 flex flex-col gap-2">
80+
<li class="flex gap-2 items-center">
81+
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
82+
<span>{{ $t('shortcuts.navigate_results') }}</span>
83+
</li>
84+
<li class="flex gap-2 items-center">
85+
<kbd class="kbd">Enter</kbd>
86+
<span>{{ $t('shortcuts.go_to_result') }}</span>
87+
</li>
88+
</ul>
89+
<p class="mb-2 font-mono text-fg-subtle">
90+
{{ $t('shortcuts.section.package') }}
91+
</p>
92+
<ul class="mb-8 flex flex-col gap-2">
93+
<li class="flex gap-2 items-center">
94+
<kbd class="kbd">.</kbd>
95+
<span>{{ $t('shortcuts.open_code_view') }}</span>
96+
</li>
97+
<li class="flex gap-2 items-center">
98+
<kbd class="kbd">d</kbd>
99+
<span>{{ $t('shortcuts.open_docs') }}</span>
100+
</li>
101+
<li class="flex gap-2 items-center">
102+
<kbd class="kbd">c</kbd>
103+
<span>{{ $t('shortcuts.compare_from_package') }}</span>
104+
</li>
105+
</ul>
106+
<p class="text-fg-muted leading-relaxed">
107+
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
108+
<template #settings>
109+
<NuxtLink
110+
:to="{ name: 'settings' }"
111+
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
112+
@click="closeModal"
113+
>
114+
{{ $t('settings.title') }}
115+
</NuxtLink>
116+
</template>
117+
</i18n-t>
118+
</p>
119+
</Modal>
120+
</div>
121+
<div class="flex items-center gap-5">
122+
<LinkBase :to="NPMX_DOCS_SITE">
123+
{{ $t('footer.docs') }}
124+
</LinkBase>
125+
<LinkBase to="https://repo.npmx.dev">
126+
{{ $t('footer.source') }}
127+
</LinkBase>
128+
<LinkBase to="https://social.npmx.dev">
129+
{{ $t('footer.social') }}
130+
</LinkBase>
131+
<LinkBase :to="discord.url">
132+
{{ discord.label }}
133+
</LinkBase>
132134
</div>
133135
</div>
134-
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
135-
<span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
136-
<span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
137-
</p>
138136
</div>
139137
</footer>
140138
</template>

‎app/components/BuildEnvironment.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const buildTime = computed(() => new Date(buildInfo.value.time))
1313

1414
<template>
1515
<div
16-
class="font-mono text-xs text-fg-muted flex items-center gap-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
17-
:class="footer ? 'my-1 justify-center sm:justify-start' : 'mb-8 justify-center'"
16+
class="font-mono text-xs text-fg-muted flex items-center gap-2"
17+
:class="footer ? 'hidden sm:flex sm:justify-start' : 'mb-8 justify-center'"
1818
style="animation-delay: 0.05s"
1919
>
2020
<i18n-t keypath="built_at" scope="global">

0 commit comments

Comments
 (0)