Skip to content

feat: reorganize footer links into labeled columns #2211

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

Open
thealxlabs wants to merge 5 commits into
base: main
Choose a base branch
from
+70 −33
Open

feat: reorganize footer links into labeled columns #2211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d02c3e
feat: reorganize footer links into product/legal/community columns (#…
thealxlabs Mar 22, 2026
0aa31b1
fix: use tracking-wide on column labels (CI fix)
thealxlabs Mar 22, 2026
8dc2b3a
test: add AppFooter column label regression tests
thealxlabs Mar 22, 2026
86a7ac3
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 22, 2026
0dba940
fix: add missing footer column i18n keys and regenerate schema
thealxlabs Mar 22, 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
64 changes: 32 additions & 32 deletions app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,19 @@ const closeModal = () => modalRef.value?.close?.()
</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>
<LinkBase :to="{ name: 'translation-status' }">
{{ $t('translation_status.title') }}
</LinkBase>
<!-- Desktop: Show all links in columns. Mobile: Links are in MobileMenu -->
<div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
<!-- Column 1: Product -->
<div class="flex flex-col gap-1">
<span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
$t('footer.product')
}}</span>
<LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
<LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
<LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</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"
class="text-start cursor-pointer inline-flex gap-x-1 items-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"
>
Expand Down Expand Up @@ -126,19 +118,27 @@ const closeModal = () => modalRef.value?.close?.()
</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>

<!-- Column 2: Legal & Info -->
<div class="flex flex-col gap-1">
<span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
$t('footer.legal')
}}</span>
<LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
<LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
<LinkBase :to="{ name: 'translation-status' }">{{
$t('translation_status.title')
}}</LinkBase>
</div>

<!-- Column 3: Community -->
<div class="flex flex-col gap-1">
<span class="text-fg-subtle uppercase tracking-wide text-2xs mb-1">{{
$t('footer.community')
}}</span>
<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>
</div>
Expand Down
5 changes: 4 additions & 1 deletion i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
"social": "social",
"chat": "chat",
"builders_chat": "builders",
"keyboard_shortcuts": "keyboard shortcuts"
"keyboard_shortcuts": "keyboard shortcuts",
"product": "Product",
"legal": "Legal",
"community": "Community"
},
"shortcuts": {
"section": {
Expand Down
9 changes: 9 additions & 0 deletions i18n/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,15 @@
},
"keyboard_shortcuts": {
"type": "string"
},
"product": {
"type": "string"
},
"legal": {
"type": "string"
},
"community": {
"type": "string"
}
},
"additionalProperties": false
Expand Down
25 changes: 25 additions & 0 deletions test/nuxt/components/AppFooter.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,31 @@ import AppFooter from '~/components/AppFooter.vue'

/* check nuxt module at modules/build-env.ts */
describe('AppFooter', () => {
it('renders three labeled columns: Product, Legal, Community', async () => {
const component = await mountSuspended(AppFooter, {
route: '/',
})

// All three column label spans should be present
const columnLabels = component.findAll('span.tracking-wide')
expect(columnLabels.length).toBeGreaterThanOrEqual(3)

const labelTexts = columnLabels.map(span => span.text().toLowerCase())
expect(labelTexts.some(t => t.includes('product'))).toBe(true)
expect(labelTexts.some(t => t.includes('legal'))).toBe(true)
expect(labelTexts.some(t => t.includes('community'))).toBe(true)
})

it('footer contains links expected in the Product column', async () => {
const component = await mountSuspended(AppFooter, {
route: '/about',
})

// The Product column should link to /about and /blog
const aboutLink = component.find('a[href="/about"]')
expect(aboutLink.exists()).toBe(true)
})
Comment on lines +27 to +30
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Test intent and assertions are out of sync.

Line [27] states /about and /blog should be present, but only /about is asserted. Please assert /blog too (or narrow the test description/comment).

Suggested test completion 
     // The Product column should link to /about and /blog
     const aboutLink = component.find('a[href="/about"]')
     expect(aboutLink.exists()).toBe(true)
+    const blogLink = component.find('a[href="/blog"]')
+    expect(blogLink.exists()).toBe(true)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// The Product column should link to /about and /blog
const aboutLink = component.find('a[href="/about"]')
expect(aboutLink.exists()).toBe(true)
})
// The Product column should link to /about and /blog
const aboutLink = component.find('a[href="/about"]')
expect(aboutLink.exists()).toBe(true)
const blogLink = component.find('a[href="/blog"]')
expect(blogLink.exists()).toBe(true)
})


it('BuildEnvironment is properly displayed at settings', async () => {
const buildInfo = useAppConfig().buildInfo
const component = await mountSuspended(AppFooter, {
Expand Down
Loading