Merge remote-tracking branch 'origin/main' into feat/skills-modal-tabs

# Conflicts:
#	shared/types/index.ts

Author: danielroe

.gitattributes

@@ -1 +1 @@
-* text eol=lf
+* text=auto eol=lf

.github/workflows/ci.yml

@@ -11,6 +11,11 @@ on:
     branches:
       - main
 
+# cancel in-progress runs on new commits to same PR (gitub.event.number)
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 

CONTRIBUTING.md

@@ -105,6 +105,12 @@ The connector will check your npm authentication, generate a connection token, a
 
 ## Code style
 
+When committing changes, try to keep an eye out for unintended formatting updates. These can make a pull request look noisier than it really is and slow down the review process. Sometimes IDEs automatically reformat files on save, which can unintentionally introduce extra changes.
+
+To help with this, the project uses `oxfmt` to handle formatting via a pre-commit hook. The hook will automatically reformat files when needed. If something can’t be fixed automatically, it will let you know what needs to be updated before you can commit.
+
+If you want to get ahead of any formatting issues, you can also run `pnpm lint:fix` before committing to fix formatting across the whole project.
+
 ### Typescript
 
 - We care about good types – never cast things to `any` 💪
@@ -301,6 +307,14 @@ For example to check if all Japanese translation keys are up-to-date, run:
 pnpm i18n:check ja-JP
 ```
 
+To automatically add missing keys with English placeholders, use `--fix`:
+
+```bash
+pnpm i18n:check:fix fr-FR
+```
+
+This will add missing keys with `"EN TEXT TO REPLACE: {english text}"` as placeholder values, making it easier to see what needs translation.
+
 #### Country variants (advanced)
 
 Most languages only need a single locale file. Country variants are only needed when you want to support regional differences (e.g., `es-ES` for Spain vs `es-419` for Latin America).
@@ -361,13 +375,17 @@ We recommend the [i18n-ally](https://marketplace.visualstudio.com/items?itemName
 
 The extension is included in our workspace recommendations, so VSCode should prompt you to install it.
 
-### Formatting with locale
+### Formatting numbers and dates
 
-When formatting numbers or dates that should respect the user's locale, pass the locale:
+Use vue-i18n's built-in formatters for locale-aware formatting:
 
-```typescript
-const { locale } = useI18n()
-const formatted = formatNumber(12345, locale.value) // "12,345" in en-US
+```vue
+<template>
+  <p>{{ $n(12345) }}</p>
+  <!-- "12,345" in en-US, "12 345" in fr-FR -->
+  <p>{{ $d(new Date()) }}</p>
+  <!-- locale-aware date -->
+</template>
 ```
 
 ## Testing

app/app.vue

@@ -10,6 +10,7 @@ const { locale, locales } = useI18n()
 initPreferencesOnPrehydrate()
 
 const isHomepage = computed(() => route.name === 'index')
+const showKbdHints = shallowRef(false)
 
 const localeMap = locales.value.reduce(
   (acc, l) => {
@@ -21,8 +22,9 @@ const localeMap = locales.value.reduce(
 
 useHead({
   htmlAttrs: {
-    lang: () => locale.value,
-    dir: () => localeMap[locale.value] ?? 'ltr',
+    'lang': () => locale.value,
+    'dir': () => localeMap[locale.value] ?? 'ltr',
+    'data-kbd-hints': () => showKbdHints.value,
   },
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
@@ -33,16 +35,16 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-// Global keyboard shortcut: "/" focuses search or navigates to search page
+// Global keyboard shortcut:
+// "/" focuses search or navigates to search page
+// "?" highlights all keyboard shortcut elements
 function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement
 
   const isEditableTarget =
     target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
 
-  if (isEditableTarget) {
-    return
-  }
+  if (isEditableTarget) return
 
   if (e.key === '/') {
     e.preventDefault()
@@ -59,15 +61,26 @@ function handleGlobalKeydown(e: KeyboardEvent) {
 
     router.push('/search')
   }
+
+  if (e.key === '?') {
+    e.preventDefault()
+    showKbdHints.value = true
+  }
+}
+
+function handleGlobalKeyup() {
+  showKbdHints.value = false
 }
 
 if (import.meta.client) {
   useEventListener(document, 'keydown', handleGlobalKeydown)
+  useEventListener(document, 'keyup', handleGlobalKeyup)
 }
 </script>
 
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
+    <NuxtPwaAssets />
     <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
 
     <AppHeader :show-logo="!isHomepage" />
@@ -81,3 +94,25 @@ if (import.meta.client) {
     <ScrollToTop />
   </div>
 </template>
+
+<style>
+/* Keyboard shortcut highlight on "?" key press */
+kbd {
+  position: relative;
+}
+
+kbd::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 4px 2px var(--accent);
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+  pointer-events: none;
+}
+
+html[data-kbd-hints='true'] kbd::before {
+  opacity: 1;
+}
+</style>

app/assets/main.css

@@ -463,6 +463,7 @@ html.light .shiki span {
   border-collapse: collapse;
   margin: 1.5rem 0;
   font-size: 0.875rem;
+  word-break: keep-all;
 }
 
 .readme-content th,
@@ -541,12 +542,6 @@ input[type='search']::-webkit-search-results-decoration {
   appearance: none;
 }
 
-/* View transition for logo (hero -> header) */
-.hero-logo,
-.header-logo {
-  view-transition-name: site-logo;
-}
-
 /* Disable the default fade transition on page navigation */
 ::view-transition-old(root),
 ::view-transition-new(root) {
@@ -555,9 +550,7 @@ input[type='search']::-webkit-search-results-decoration {
 
 /* Customize the view transition animations for specific elements */
 ::view-transition-old(search-box),
-::view-transition-new(search-box),
-::view-transition-old(site-logo),
-::view-transition-new(site-logo) {
+::view-transition-new(search-box) {
   animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
 }

app/components/AnnounceTooltip.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** is tooltip visible */
+  isVisible: boolean
+}>()
+</script>
+
+<template>
+  <BaseTooltip :text :isVisible :position :tooltip-attr="{ 'aria-live': 'polite' }"
+    ><slot
+  /></BaseTooltip>
+</template>

app/components/AppFooter.vue

@@ -1,22 +1,28 @@
+<script setup lang="ts">
+const route = useRoute()
+const isHome = computed(() => route.name === 'index')
+</script>
+
 <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 sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
       >
-        <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
-        <div class="flex items-center gap-3 sm:gap-6">
-          <NuxtLink
-            to="/about"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
-          >
+        <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">
+          <NuxtLink to="/about" class="link-subtle font-mono text-xs min-h-11 flex items-center">
             {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -25,7 +31,7 @@
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -34,7 +40,7 @@
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
@@ -43,7 +49,7 @@
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-11 flex items-center gap-1"
           >
             {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />