Skip to content

fix: reorganize footer elements and BuildEnvironment behavior #1906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
j0u1 wants to merge 15 commits into
base: main
Choose a base branch
from
Draft

fix: reorganize footer elements and BuildEnvironment behavior #1906

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
419b704
refactor: reorganize footer layout and always show BuildEnvironment
j0u1 Mar 3, 2026
80e56ae
style: add BuildEnvironment animation for non-footer places
j0u1 Mar 3, 2026
608fd3f
style: remove duplicate Tailwind classes in footer container
j0u1 Mar 3, 2026
7ad97a9
fix: footer build block animation and home visibility tests
j0u1 Mar 3, 2026
aa08f94
fix: footer duplicate classes and build visibility logic
j0u1 Mar 3, 2026
83ae2f3
style: cleanup footer spacing and gaps
j0u1 Mar 3, 2026
d0a6c96
style: improve footer layout flexibility and add localized labels
j0u1 Mar 3, 2026
2cb892f
style: remove redundant animation from footer container
j0u1 Mar 3, 2026
59a3ae8
style: swap tagline and disclaimer positions in footer
j0u1 Mar 3, 2026
b6b0b18
style: remove links title and fix footer layout balance
j0u1 Mar 4, 2026
c8ed119
Merge branch 'main' into refactor/footer-structure
j0u1 Mar 4, 2026
dfaed08
refactor: unify footer navigation styles and config
j0u1 Apr 9, 2026
0650c99
Merge branch 'main' into refactor/footer-structure
j0u1 Apr 10, 2026
2f8f8a7
refactor(ui): revert to p tag in footer with correct closing tag
j0u1 Apr 10, 2026
7ce7293
Merge branch 'main' into refactor/footer-structure
j0u1 Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 121 additions & 123 deletions app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<script setup lang="ts">
import { NPMX_DOCS_SITE } from '#shared/utils/constants'

const route = useRoute()
const isHome = computed(() => route.name === 'index')

const discord = useDiscordLink()
const modalRef = useTemplateRef('modalRef')
const showModal = () => modalRef.value?.showModal?.()
Expand All @@ -12,129 +9,130 @@ const closeModal = () => modalRef.value?.close?.()

<template>
<footer class="border-t border-border mt-auto">
<div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
<div class="flex flex-col lg:flex-row lg:items-baseline justify-between gap-2 sm:gap-4">
<div>
<p class="font-mono text-balance m-0 hidden sm:block mb-3">
{{ $t('tagline') }}
</p>
<BuildEnvironment v-if="!isHome" footer />
</div>
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
<div class="flex items-center gap-5">
<LinkBase :to="{ name: 'about' }">
{{ $t('footer.about') }}
</LinkBase>
<LinkBase :to="{ name: 'blog' }">
{{ $t('footer.blog') }}
</LinkBase>
<LinkBase :to="{ name: 'privacy' }">
{{ $t('privacy_policy.title') }}
</LinkBase>
<LinkBase :to="{ name: 'accessibility' }">
{{ $t('a11y.footer_title') }}
</LinkBase>
<button
type="button"
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"
@click.prevent="showModal"
aria-haspopup="dialog"
>
{{ $t('footer.keyboard_shortcuts') }}
</button>
<div
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"
>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<div class="flex flex-col gap-3 motion-safe:animate-fade-in motion-safe:animate-fill-both">
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<p class="font-mono text-balance hidden sm:block">
{{ $t('tagline') }}
</p>
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
<span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
<span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
</p>
<BuildEnvironment footer />
</div>
<!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
<div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
<p class="hidden lg:flex text-fg-muted uppercase h-5 items-center">Links</p>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<div class="flex items-center gap-5">
<LinkBase :to="{ name: 'about' }">
{{ $t('footer.about') }}
</LinkBase>
<LinkBase :to="{ name: 'blog' }">
{{ $t('footer.blog') }}
</LinkBase>
<LinkBase :to="{ name: 'privacy' }">
{{ $t('privacy_policy.title') }}
</LinkBase>
<LinkBase :to="{ name: 'accessibility' }">
{{ $t('a11y.footer_title') }}
</LinkBase>
<button
type="button"
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"
@click.prevent="showModal"
aria-haspopup="dialog"
>
{{ $t('footer.keyboard_shortcuts') }}
</button>

<Modal
ref="modalRef"
:modalTitle="$t('footer.keyboard_shortcuts')"
class="w-auto max-w-lg"
>
<p class="mb-2 font-mono text-fg-subtle">
{{ $t('shortcuts.section.global') }}
</p>
<ul class="mb-6 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">/</kbd>
<span>{{ $t('shortcuts.focus_search') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">?</kbd>
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">,</kbd>
<span>{{ $t('shortcuts.settings') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">c</kbd>
<span>{{ $t('shortcuts.compare') }}</span>
</li>
</ul>
<p class="mb-2 font-mono text-fg-subtle">
{{ $t('shortcuts.section.search') }}
</p>
<ul class="mb-6 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
<span>{{ $t('shortcuts.navigate_results') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">Enter</kbd>
<span>{{ $t('shortcuts.go_to_result') }}</span>
</li>
</ul>
<p class="mb-2 font-mono text-fg-subtle">
{{ $t('shortcuts.section.package') }}
</p>
<ul class="mb-8 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">.</kbd>
<span>{{ $t('shortcuts.open_code_view') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">d</kbd>
<span>{{ $t('shortcuts.open_docs') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">c</kbd>
<span>{{ $t('shortcuts.compare_from_package') }}</span>
</li>
</ul>
<p class="text-fg-muted leading-relaxed">
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
<template #settings>
<NuxtLink
:to="{ name: 'settings' }"
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
@click="closeModal"
>
{{ $t('settings.title') }}
</NuxtLink>
</template>
</i18n-t>
</p>
</Modal>
</div>
<div class="flex items-center gap-5">
<LinkBase :to="NPMX_DOCS_SITE">
{{ $t('footer.docs') }}
</LinkBase>
<LinkBase to="https://repo.npmx.dev">
{{ $t('footer.source') }}
</LinkBase>
<LinkBase to="https://social.npmx.dev">
{{ $t('footer.social') }}
</LinkBase>
<LinkBase :to="discord.url">
{{ discord.label }}
</LinkBase>
</div>
<Modal
ref="modalRef"
:modalTitle="$t('footer.keyboard_shortcuts')"
class="w-auto max-w-lg"
>
<p class="mb-2 font-mono text-fg-subtle">
{{ $t('shortcuts.section.global') }}
</p>
<ul class="mb-6 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">/</kbd>
<span>{{ $t('shortcuts.focus_search') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">?</kbd>
<span>{{ $t('shortcuts.show_kbd_hints') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">,</kbd>
<span>{{ $t('shortcuts.settings') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">c</kbd>
<span>{{ $t('shortcuts.compare') }}</span>
</li>
</ul>
<p class="mb-2 font-mono text-fg-subtle">
{{ $t('shortcuts.section.search') }}
</p>
<ul class="mb-6 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd>
<span>{{ $t('shortcuts.navigate_results') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">Enter</kbd>
<span>{{ $t('shortcuts.go_to_result') }}</span>
</li>
</ul>
<p class="mb-2 font-mono text-fg-subtle">
{{ $t('shortcuts.section.package') }}
</p>
<ul class="mb-8 flex flex-col gap-2">
<li class="flex gap-2 items-center">
<kbd class="kbd">.</kbd>
<span>{{ $t('shortcuts.open_code_view') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">d</kbd>
<span>{{ $t('shortcuts.open_docs') }}</span>
</li>
<li class="flex gap-2 items-center">
<kbd class="kbd">c</kbd>
<span>{{ $t('shortcuts.compare_from_package') }}</span>
</li>
</ul>
<p class="text-fg-muted leading-relaxed">
<i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
<template #settings>
<NuxtLink
:to="{ name: 'settings' }"
class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
@click="closeModal"
>
{{ $t('settings.title') }}
</NuxtLink>
</template>
</i18n-t>
</p>
</Modal>
</div>
<div class="flex items-center gap-5">
<LinkBase :to="NPMX_DOCS_SITE">
{{ $t('footer.docs') }}
</LinkBase>
<LinkBase to="https://repo.npmx.dev">
{{ $t('footer.source') }}
</LinkBase>
<LinkBase to="https://social.npmx.dev">
{{ $t('footer.social') }}
</LinkBase>
<LinkBase :to="discord.url">
{{ discord.label }}
</LinkBase>
</div>
</div>
<p class="text-xs text-fg-muted text-center sm:text-start m-0">
<span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
<span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
</p>
</div>
</footer>
</template>
Expand Down
8 changes: 6 additions & 2 deletions app/components/BuildEnvironment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,12 @@ const buildTime = computed(() => new Date(buildInfo.value.time))

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