Merge branch 'main' into feat/201

Author: serhalp

.env.example

@@ -0,0 +1,2 @@
+#secure password, can use openssl rand --hex 32
+NUXT_SESSION_PASSWORD=""

.gitattributes

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

.github/workflows/autofix.yml

@@ -34,6 +34,9 @@ jobs:
       - name: 📦 Install browsers
         run: pnpm playwright install
 
+      - name: 🌐 Compare translations
+        run: pnpm i18n:check
+
       - name: 🌍 Update lunaria data
         run: pnpm build:lunaria
 

.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
 

CODE_OF_CONDUCT.md

@@ -34,9 +34,7 @@ This Code of Conduct applies within all project spaces, and it also applies when
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [daniel@roe.dev](mailto:daniel@roe.dev). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project stewards (`@danielroe` and `@patak.dev`) by DM in our [community chat](https://chat.npmx.dev). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The stewards are obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 ## Attribution
 

CONTRIBUTING.md

@@ -284,6 +284,31 @@ To add a new locale:
 
 Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
 
+### Update translation
+
+We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
+If you see any outdated translations in your language, feel free to update the keys to match then English version.
+
+In order to make sure you have everything up-to-date, you can run:
+
+```bash
+pnpm i18n:check <country-code>
+```
+
+For example to check if all Japanese translation keys are up-to-date, run:
+
+```bash
+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).
@@ -344,13 +369,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

GOVERNANCE.md

@@ -0,0 +1,48 @@
+# Governance
+
+This document outlines the governance model for npmx. This includes descriptions of different roles, nomination processes, code review processes, and Code of Conduct enforcement.
+
+**All community members must follow the [Code of Conduct (CoC)](CODE_OF_CONDUCT.md).**
+
+## Get Involved
+
+**Anything that supports the npmx community is a valuable contribution!**
+
+All types of contribution are meaningful. This can include code changes, type fixes, Discord activity, and even posting about npmx to your personal blog. No contribution is too small!
+
+Anyone can become an npmx contributor. Engineering ability is not required. Our goal is to recognize all contributors to the project regardless of skill, experience or background.
+
+## Roles
+
+Each contributor role comes with a set of privileges and responsibilities, and they are granted for as long as the individual wishes to engage with the project. Contributors can voluntarily leave the project at any time.
+
+### Contributor
+
+Have you done something (big or small) to contribute to the health, success, or growth of npmx? Congratulations, you're officially recognized as a **Contributor** to the project! Examples of recognized contributions are helping on the repo, chat, and social. But also blogging, podcasting, and livestreaming about npmx.
+
+This role does not require any extra responsibilities nor time commitment. We hope you stick around and keep participating in our community!
+
+### Maintainer
+
+The **Maintainer** role is available to contributors who want to join the team and take part in the long-term maintenance and growth of npmx. This role is critical to the long-term health of npmx. Maintainers act as the first line of defense when it comes to new issues, pull requests and chat activity.
+
+Maintainers are not required to write code! Some Maintainers spend most of their time inside of our chat, maintaining a healthy community there. Others work on technical documentation, support, or design. There is no strict minimum number of contributions needed to reach this level, as long as you can show sustained involvement over time.
+
+### Core
+
+The **Core** role is available to community members who have a larger-than-usual impact on the npmx project and community. They are seen as leaders in the project and are listened to by the wider npmx community, often before they have even reached this level. A Core member is recognized for contributing a significant amount of time and energy to the project through issues, pull requests, bug fixes, implementing advanced features, or actively posting on our chat.
+
+Not every contributor will reach this level, and that's okay! Maintainers still have significant responsibility and privileges within our community.
+
+### Project Steward
+
+**Stewards** control and maintain sensitive project asset and assist in shaping the direction and vision of the project. We aim to act with consensus within the core team, but stewards can resolve disagreements when needed. Stewards act in the project's best interest and should be an example for the rest of the community. New Stewards are added based on a unanimous vote by the existing Stewards.
+
+The npmx project Stewards are currently:
+
+- **Daniel Roe** ([website](https://roe.dev), [social](https://bsky.app/profile/danielroe.dev), [github](https://github.com/danielroe), [@danielroe](https://chat.npmx.dev))
+- **Matias Capeletto** ([website](https://patak.dev), [social](https://bsky.app/profile/patak.dev), [github](https://github.com/patak-dev), [@patak.dev](https://chat.npmx.dev))
+
+---
+
+Inspired by [Astro](https://github.com/withastro/.github/blob/main/GOVERNANCE.md), [ESLint](https://eslint.org/docs/6.0.0/maintainer-guide/governance), [Rome](https://github.com/rome/tools/blob/203b8efaf3ff087e82b97c484dedc5b5c5f15bcd/GOVERNANCE.md) and [Blitz](https://blitzjs.com/docs/maintainers).

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>