Merge branch 'main' into feat/changelog-1

Author: WilcoSp

.github/workflows/autofix.yml

@@ -24,7 +24,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true

.github/workflows/ci.yml

@@ -31,7 +31,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -53,7 +53,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -75,7 +75,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -103,7 +103,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -142,7 +142,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -172,7 +172,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -200,7 +200,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true
@@ -225,7 +225,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true

.github/workflows/lunaria.yml

@@ -32,7 +32,7 @@ jobs:
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # 4e1c8eafbd745f64b1ef30a7d7ed7965034c486c
         name: 🟧 Install pnpm
         with:
           cache: true

.github/workflows/welcome.yml

@@ -16,7 +16,7 @@ jobs:
     name: 🎉 Welcome new contributor
     steps:
       - name: 🎉 Welcome new contributor
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           script: |
             const pr = context.payload.pull_request;

CONTRIBUTING.md

@@ -41,6 +41,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Naming conventions](#naming-conventions)
   - [Vue components](#vue-components)
   - [Internal linking](#internal-linking)
+  - [Cursor and navigation](#cursor-and-navigation)
 - [RTL Support](#rtl-support)
 - [Localization (i18n)](#localization-i18n)
   - [Approach](#approach)
@@ -392,6 +393,18 @@ For package links, use the auto-imported `packageRoute()` utility from `app/util
 | `~username`       | `/~:username`                     | `username`                |
 | `~username-orgs`  | `/~:username/orgs`                | `username`                |
 
+### Cursor and navigation
+
+**npmx** uses `cursor: pointer` only for links to match users’ everyday experience. For all other interactive elements, including buttons, use the default cursor (_or another appropriate cursor to indicate state_).
+
+> [!NOTE]
+> A link is any element that leads to another content (_go to another page, authorize_)
+> A button is any element that operates an action (_show tooltip, open menu, "like" package, open dropdown_)
+> If you're unsure which element to use - feel free to ask question in the issue or on discord
+
+> [!IMPORTANT]
+> Always Prefer implementing navigation as real links whenever possible. This ensures they can be opened in a new tab, shared or reloaded, and so the same content is available at a stable URL
+
 ## RTL Support
 
 We support `right-to-left` languages, we need to make sure that the UI is working correctly in both directions.

README.md

@@ -155,7 +155,8 @@ We welcome contributions – please do feel free to explore the project and
 - [npm-userscript](https://github.com/bluwy/npm-userscript) – Browser userscript with various improvements and fixes for npmjs.com
 - [npm-alt](https://npm.willow.sh/) – An alternative npm package browser
 - [npkg.lorypelli.dev](https://npkg.lorypelli.dev/) – An alternative frontend to npm made with as little client-side JavaScript as possible
-- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – VSCode extension for npmx
+- [vscode-npmx](https://github.com/npmx-dev/vscode-npmx) – Official VSCode extension for npmx
+- [vscode-open-in-npmx](https://github.com/sybers/vscode-open-in-npmx) – VSCode shortcut to open packages on npmx
 - [nxjt](https://nxjt.netlify.app) – npmx Jump To: Quickly navigate to npmx common webpages.
 - [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
 - [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.

app/app.vue

@@ -121,7 +121,7 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
+    <LinkBase to="#main-content" external variant="button-primary" class="skip-link">{{
       $t('common.skip_link')
     }}</LinkBase>
 

app/components/AppFooter.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { NPMX_DOCS_SITE } from '#shared/utils/constants'
+
 const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
@@ -13,7 +15,9 @@ const showModal = () => modalRef.value?.showModal?.()
         class="flex flex-col sm:flex-row sm:flex-wrap items-center sm:items-baseline justify-between gap-2 sm:gap-4"
       >
         <div>
-          <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
+          <p class="font-mono text-balance m-0 hidden sm:block">
+            {{ $t('tagline') }}
+          </p>
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
@@ -92,7 +96,7 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
-          <LinkBase to="https://docs.npmx.dev">
+          <LinkBase :to="NPMX_DOCS_SITE">
             {{ $t('footer.docs') }}
           </LinkBase>
           <LinkBase to="https://repo.npmx.dev">

app/components/AppHeader.vue

@@ -2,6 +2,7 @@
 import { LinkBase } from '#components'
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
+import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 withDefaults(
   defineProps<{
@@ -22,7 +23,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: 'c',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:compare',
+    iconClass: 'i-lucide:git-compare',
   },
   {
     name: 'Settings',
@@ -31,7 +32,7 @@ const desktopLinks = computed<NavigationConfig>(() => [
     keyshortcut: ',',
     type: 'link',
     external: false,
-    iconClass: 'i-carbon:settings',
+    iconClass: 'i-lucide:settings',
   },
 ])
 
@@ -54,23 +55,23 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         to: { name: 'about' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:information',
+        iconClass: 'i-lucide:info',
       },
       {
         name: 'Privacy Policy',
         label: $t('privacy_policy.title'),
         to: { name: 'privacy' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:security',
+        iconClass: 'i-lucide:shield-check',
       },
       {
         name: 'Accessibility',
         label: $t('a11y.title'),
         to: { name: 'accessibility' },
         type: 'link',
         external: false,
-        iconClass: 'i-carbon:accessibility-alt',
+        iconClass: 'i-custom:a11y',
       },
     ],
   },
@@ -85,11 +86,11 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
       {
         name: 'Docs',
         label: $t('footer.docs'),
-        href: 'https://docs.npmx.dev',
+        href: NPMX_DOCS_SITE,
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:document',
+        iconClass: 'i-lucide:file-text',
       },
       {
         name: 'Source',
@@ -98,7 +99,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:logo-github',
+        iconClass: 'i-simple-icons:github',
       },
       {
         name: 'Social',
@@ -116,14 +117,15 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-carbon:chat',
+        iconClass: 'i-lucide:message-circle',
       },
     ],
   },
 ])
 
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
+const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -212,10 +214,16 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
-          <AppLogo class="w-8 h-8 rounded-lg" />
-          <span>npmx</span>
+          <AppLogo class="w-7 h-7 rounded-lg" />
+          <span class="pb-0.5">npmx</span>
+          <span
+            aria-hidden="true"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -inset-ie-1"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->
@@ -280,7 +288,7 @@ onKeyStroke(
         :aria-expanded="showMobileMenu"
         @click="expandMobileSearch"
         v-if="!isSearchExpanded && !isOnHomePage"
-        classicon="i-carbon:search"
+        classicon="i-lucide:search"
       />
 
       <!-- Mobile: Menu button (always visible, click to open menu) -->
@@ -290,7 +298,7 @@ onKeyStroke(
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"
-        classicon="i-carbon:menu"
+        classicon="i-lucide:menu"
       />
     </nav>
 

app/components/BlueskyPostEmbed.client.vue

@@ -83,7 +83,7 @@ const { data: post, status } = useAsyncData(
         <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
       </div>
       <span
-        class="i-carbon:logo-bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
+        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
         aria-hidden="true"
       />
     </div>
@@ -112,15 +112,15 @@ const { data: post, status } = useAsyncData(
     <div class="flex items-center gap-4 text-sm text-fg-subtle">
       <DateTime :datetime="post.record.createdAt" date-style="medium" />
       <span v-if="post.likeCount" class="flex items-center gap-1">
-        <span class="i-carbon:favorite w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:heart w-3.5 h-3.5" aria-hidden="true" />
         {{ post.likeCount }}
       </span>
       <span v-if="post.repostCount" class="flex items-center gap-1">
-        <span class="i-carbon:repeat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:repeat w-3.5 h-3.5" aria-hidden="true" />
         {{ post.repostCount }}
       </span>
       <span v-if="post.replyCount" class="flex items-center gap-1">
-        <span class="i-carbon:chat w-3.5 h-3.5" aria-hidden="true" />
+        <span class="i-lucide:message-circle w-3.5 h-3.5" aria-hidden="true" />
         {{ post.replyCount }}
       </span>
     </div>