Merge remote-tracking branch 'origin/main' into fix/proxy-readme-images-privacy

Author: danielroe

app/components/AppFooter.vue

@@ -14,7 +14,6 @@ const showModal = () => modalRef.value?.showModal?.()
       >
         <div>
           <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
-          <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
@@ -105,6 +104,7 @@ const showModal = () => modalRef.value?.showModal?.()
           </Modal>
         </div>
       </div>
+      <BuildEnvironment v-if="!isHome" footer />
       <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>

app/components/AppHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { LinkBase } from '#components'
+import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
@@ -13,6 +14,106 @@ withDefaults(
 
 const { isConnected, npmUser } = useConnector()
 
+const desktopLinks = computed<NavigationConfig>(() => [
+  {
+    name: 'Compare',
+    label: $t('nav.compare'),
+    to: { name: 'compare' },
+    keyshortcut: 'c',
+    type: 'link',
+    external: false,
+    iconClass: 'i-carbon:compare',
+  },
+  {
+    name: 'Settings',
+    label: $t('nav.settings'),
+    to: { name: 'settings' },
+    keyshortcut: ',',
+    type: 'link',
+    external: false,
+    iconClass: 'i-carbon:settings',
+  },
+])
+
+const mobileLinks = computed<NavigationConfigWithGroups>(() => [
+  {
+    name: 'Desktop Links',
+    type: 'group',
+    items: [...desktopLinks.value],
+  },
+  {
+    type: 'separator',
+  },
+  {
+    name: 'About & Policies',
+    type: 'group',
+    items: [
+      {
+        name: 'About',
+        label: $t('footer.about'),
+        to: { name: 'about' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:information',
+      },
+      {
+        name: 'Privacy Policy',
+        label: $t('privacy_policy.title'),
+        to: { name: 'privacy' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:security',
+      },
+    ],
+  },
+  {
+    type: 'separator',
+  },
+  {
+    name: 'External Links',
+    type: 'group',
+    label: $t('nav.links'),
+    items: [
+      {
+        name: 'Docs',
+        label: $t('footer.docs'),
+        href: 'https://docs.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:document',
+      },
+      {
+        name: 'Source',
+        label: $t('footer.source'),
+        href: 'https://repo.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:logo-github',
+      },
+      {
+        name: 'Social',
+        label: $t('footer.social'),
+        href: 'https://social.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-simple-icons:bluesky',
+      },
+      {
+        name: 'Chat',
+        label: $t('footer.chat'),
+        href: 'https://chat.npmx.dev',
+        target: '_blank',
+        type: 'link',
+        external: true,
+        iconClass: 'i-carbon:chat',
+      },
+    ],
+  },
+])
+
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
 
@@ -63,23 +164,18 @@ function handleSearchFocus() {
 }
 
 onKeyStroke(
-  e => isKeyWithoutModifiers(e, ',') && !isEditableElement(e.target),
   e => {
-    e.preventDefault()
-    navigateTo({ name: 'settings' })
-  },
-  { dedupe: true },
-)
+    if (isEditableElement(e.target)) {
+      return
+    }
 
-onKeyStroke(
-  e =>
-    isKeyWithoutModifiers(e, 'c') &&
-    !isEditableElement(e.target) &&
-    // Allow more specific handlers to take precedence
-    !e.defaultPrevented,
-  e => {
-    e.preventDefault()
-    navigateTo({ name: 'compare' })
+    for (const link of desktopLinks.value) {
+      if (link.to && link.keyshortcut && isKeyWithoutModifiers(e, link.keyshortcut)) {
+        e.preventDefault()
+        navigateTo(link.to.name)
+        break
+      }
+    }
   },
   { dedupe: true },
 )
@@ -156,24 +252,16 @@ onKeyStroke(
 
       <!-- End: Desktop nav items + Mobile menu button -->
       <div class="hidden sm:flex flex-shrink-0">
-        <!-- Desktop: Compare link -->
-        <LinkBase
-          class="border-none"
-          variant="button-secondary"
-          :to="{ name: 'compare' }"
-          keyshortcut="c"
-        >
-          {{ $t('nav.compare') }}
-        </LinkBase>
-
-        <!-- Desktop: Settings link -->
+        <!-- Desktop: Explore link -->
         <LinkBase
+          v-for="link in desktopLinks"
+          :key="link.name"
           class="border-none"
           variant="button-secondary"
-          :to="{ name: 'settings' }"
-          keyshortcut=","
+          :to="link.to"
+          :keyshortcut="link.keyshortcut"
         >
-          {{ $t('nav.settings') }}
+          {{ link.label }}
         </LinkBase>
 
         <HeaderAccountMenu />
@@ -191,6 +279,6 @@ onKeyStroke(
     </nav>
 
     <!-- Mobile menu -->
-    <HeaderMobileMenu v-model:open="showMobileMenu" />
+    <HeaderMobileMenu :links="mobileLinks" v-model:open="showMobileMenu" />
   </header>
 </template>

app/components/BuildEnvironment.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-defineProps<{
+import type { BuildInfo } from '#shared/types'
+
+const { footer = false, buildInfo: buildInfoProp } = defineProps<{
   footer?: boolean
+  buildInfo?: BuildInfo
 }>()
 
 const { locale } = useI18n()
-const buildInfo = useAppConfig().buildInfo
+const appConfig = useAppConfig()
+const buildInfo = computed(() => buildInfoProp || appConfig.buildInfo)
 </script>
 
 <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 ? 'mt-4 justify-start' : 'mb-8 justify-center'"
+    :class="footer ? 'my-1 justify-center sm:justify-start' : 'mb-8 justify-center'"
     style="animation-delay: 0.05s"
   >
     <i18n-t keypath="built_at" scope="global">