chore: fix translations in footer

Author: alexdln

app/components/AppFooter.vue

@@ -3,6 +3,7 @@ import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
+const { t } = useI18n()
 
 const discord = useDiscordLink()
 const { commandPaletteShortcutLabel } = usePlatformModifierKey()
@@ -11,8 +12,8 @@ const showModal = () => modalRef.value?.showModal?.()
 const closeModal = () => modalRef.value?.close?.()
 
 type FooterLink =
-  | { name: string; href: string; kbd?: never; type?: never }
-  | { name: string; type: 'button'; href?: never; kbd?: never }
+  | { name: string; href: string; type?: never }
+  | { name: string; type: 'button'; onClick: () => void }
 
 const socialLinks = computed(() => [
   {
@@ -37,52 +38,53 @@ const socialLinks = computed(() => [
 
 const footerSections: Array<{ label: string; links: FooterLink[] }> = [
   {
-    label: 'resources',
+    label: t('footer.resources'),
     links: [
       {
-        name: 'footer.blog',
-        href: 'blog',
+        name: t('footer.blog'),
+        href: '/blog',
       },
       {
-        name: 'footer.about',
-        href: 'about',
+        name: t('footer.about'),
+        href: '/about',
       },
       {
-        name: 'a11y.footer_title',
-        href: 'accessibility',
+        name: t('a11y.footer_title'),
+        href: '/accessibility',
       },
       {
-        name: 'privacy_policy.title',
-        href: 'privacy',
+        name: t('privacy_policy.title'),
+        href: '/privacy',
       },
     ],
   },
   {
-    label: 'features',
+    label: t('footer.features'),
     links: [
       {
-        name: 'shortcuts.compare',
-        href: 'compare',
+        name: t('shortcuts.compare'),
+        href: '/compare',
       },
       {
-        name: 'shortcuts.settings',
-        href: 'settings',
+        name: t('shortcuts.settings'),
+        href: '/settings',
       },
       {
-        name: 'footer.keyboard_shortcuts',
+        name: t('footer.keyboard_shortcuts'),
         type: 'button',
+        onClick: showModal,
       },
     ],
   },
   {
-    label: 'other',
+    label: t('footer.other'),
     links: [
       {
-        name: 'pds.title',
-        href: 'pds',
+        name: t('pds.title'),
+        href: '/pds',
       },
       {
-        name: 'footer.docs',
+        name: t('footer.docs'),
         href: NPMX_DOCS_SITE,
       },
     ],
@@ -91,11 +93,11 @@ const footerSections: Array<{ label: string; links: FooterLink[] }> = [
 </script>
 
 <template>
-  <footer class="border-t border-border md:mt-auto md:pt-8 duration-200 transition-all">
+  <footer class="border-t border-border sm:mt-auto sm:pt-8 duration-200 transition-all">
     <div class="container flex flex-col gap-3">
       <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
       <div
-        class="hidden md:flex flex-col lg:flex-row gap-6 lg:gap-0 lg:justify-between py-3 duration-200 transition-all"
+        class="hidden sm:flex flex-col lg:flex-row gap-6 lg:gap-0 lg:justify-between py-3 duration-200 transition-all"
       >
         <div class="flex flex-col gap-6">
           <div class="flex flex-col items-start gap-3">
@@ -129,22 +131,29 @@ const footerSections: Array<{ label: string; links: FooterLink[] }> = [
               <button
                 v-if="link.type === 'button'"
                 type="button"
+                aria-haspopup="dialog"
+                @click="link.onClick"
                 class="cursor-pointer text-start font-mono text-fg-subtle text-sm lowercase hover:text-accent transition-colors duration-200"
-                @click.prevent="showModal"
               >
-                {{ $t(link.name) }}
+                {{ link.name }}
               </button>
 
-              <LinkBase v-else :to="link?.href" variant="footer">
-                {{ $t(link.name) }}
+              <LinkBase
+                v-else
+                :to="link?.href"
+                variant="link"
+                noUnderline
+                class="text-fg-subtle text-sm lowercase"
+              >
+                {{ link.name }}
               </LinkBase>
             </template>
           </div>
         </div>
       </div>
 
       <small
-        class="border-border py-7.75 md:border-t md:py-4 duration-200 transition-all text-xs text-fg-muted text-center md:text-start m-0"
+        class="border-border py-7.75 sm:border-t sm:py-4 duration-200 transition-all text-xs text-fg-muted text-center sm:text-start m-0"
       >
         <span class="lg:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden lg:block">{{ $t('trademark_disclaimer') }}</span>

app/components/Link/Base.vue

@@ -11,7 +11,7 @@ const props = withDefaults(
      * */
     type?: never
     /** Visual style of the link */
-    variant?: 'button-primary' | 'button-secondary' | 'link' | 'footer'
+    variant?: 'button-primary' | 'button-secondary' | 'link'
     /** Size (only applicable for button variants) */
     size?: 'sm' | 'md'
     /** Makes the link take full width */
@@ -62,9 +62,8 @@ const isLinkAnchor = computed(
 )
 
 /** size is only applicable for button like links */
-const isFooterLink = computed(() => props.variant === 'footer')
-const isLink = computed(() => props.variant === 'link' || isFooterLink.value)
-const isButton = computed(() => !isLink.value && !isFooterLink.value)
+const isLink = computed(() => props.variant === 'link')
+const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'sm' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'md' && !isLink.value)
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
@@ -93,7 +92,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
       'flex': block,
       'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
-        !isLinkAnchor && isLink && !noUnderline && !isFooterLink,
+        !isLinkAnchor && isLink && !noUnderline,
       'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,
       'justify-center font-mono border border-border rounded-md transition-all duration-200':
@@ -104,7 +103,6 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
         variant === 'button-secondary',
       'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant === 'button-primary',
-      'text-fg-subtle text-sm cursor-pointer lowercase': isFooterLink,
     }"
     :to="to"
     :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"

i18n/locales/en.json

@@ -20,7 +20,10 @@
     "chat": "chat",
     "builders_chat": "builders",
     "keyboard_shortcuts": "keyboard shortcuts",
-    "brand": "brand"
+    "brand": "brand",
+    "resources": "Resources",
+    "features": "Features",
+    "other": "Other"
   },
   "shortcuts": {
     "section": {

i18n/schema.json

@@ -66,6 +66,15 @@
         },
         "brand": {
           "type": "string"
+        },
+        "resources": {
+          "type": "string"
+        },
+        "features": {
+          "type": "string"
+        },
+        "other": {
+          "type": "string"
         }
       },
       "additionalProperties": false