Merge branch 'main' into tobbe-feat-gh-contrib-graph

Author: Tobbe

.gitignore

@@ -45,3 +45,4 @@ file-tree-sprite.svg
 
 # output
 .vercel
+.nvmrc

.node-version

@@ -0,0 +1 @@
+24

CONTRIBUTING.md

@@ -416,7 +416,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 - All user-facing strings should use translation keys via `$t()` in templates and script
 - Translation files live in [`i18n/locales/`](i18n/locales) (e.g., `en-US.json`)
 - We use the `no_prefix` strategy (no `/en-US/` or `/fr-FR/` in URLs)
-- Locale preference is stored in cookies and respected on subsequent visits
+- Locale preference is stored in `localStorage` and respected on subsequent visits
 
 ### i18n commands
 

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 showMobileMenu = shallowRef(true)
+const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -194,31 +196,34 @@ onKeyStroke(
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="relative container min-h-14 flex items-center gap-2 z-1"
-      :class="isOnHomePage ? 'justify-end' : 'justify-between'"
+      class="relative container min-h-14 flex items-center gap-2 z-1 justify-end"
     >
-      <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
-      <button
+      <!-- Mobile: Logo (navigates home) -->
+      <NuxtLink
         v-if="!isSearchExpanded && !isOnHomePage"
-        type="button"
-        class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 rounded"
-        :aria-label="$t('nav.tap_to_search')"
-        @click="expandMobileSearch"
+        to="/"
+        :aria-label="$t('header.home')"
+        class="sm:hidden flex-shrink-0 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring"
       >
         <AppLogo class="w-8 h-8 rounded-lg" />
-        <span class="i-carbon:search w-4 h-4 text-fg-subtle" aria-hidden="true" />
-      </button>
+      </NuxtLink>
 
       <!-- Desktop: Logo (navigates home) -->
       <div v-if="showLogo" class="hidden sm:flex flex-shrink-0 items-center">
         <NuxtLink
           :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 -->
@@ -275,14 +280,25 @@ onKeyStroke(
         <HeaderAccountMenu />
       </div>
 
+      <!-- Mobile: Search button (expands search) -->
+      <ButtonBase
+        type="button"
+        class="sm:hidden ms-auto"
+        :aria-label="$t('nav.tap_to_search')"
+        :aria-expanded="showMobileMenu"
+        @click="expandMobileSearch"
+        v-if="!isSearchExpanded && !isOnHomePage"
+        classicon="i-lucide:search"
+      />
+
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
         class="sm:hidden"
         :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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { BLUESKY_API, BSKY_POST_AT_URI_REGEX } from '#shared/utils/constants'
+
+const props = defineProps<{
+  /** AT URI of the post, e.g. at://did:plc:.../app.bsky.feed.post/... */
+  uri: string
+}>()
+
+interface PostAuthor {
+  did: string
+  handle: string
+  displayName?: string
+  avatar?: string
+}
+
+interface EmbedImage {
+  thumb: string
+  fullsize: string
+  alt: string
+  aspectRatio?: { width: number; height: number }
+}
+
+interface BlueskyPost {
+  uri: string
+  author: PostAuthor
+  record: { text: string; createdAt: string }
+  embed?: { $type: string; images?: EmbedImage[] }
+  likeCount?: number
+  replyCount?: number
+  repostCount?: number
+}
+
+const postUrl = computed(() => {
+  const match = props.uri.match(BSKY_POST_AT_URI_REGEX)
+  if (!match) return null
+  const [, did, rkey] = match
+  return `https://bsky.app/profile/${did}/post/${rkey}`
+})
+
+const { data: post, status } = useAsyncData(
+  `bsky-post-${props.uri}`,
+  async (): Promise<BlueskyPost | null> => {
+    const response = await $fetch<{ posts: BlueskyPost[] }>(
+      `${BLUESKY_API}/xrpc/app.bsky.feed.getPosts`,
+      { query: { uris: props.uri } },
+    )
+    return response.posts[0] ?? null
+  },
+  { lazy: true, server: false },
+)
+</script>
+
+<template>
+  <div
+    v-if="status === 'pending'"
+    class="rounded-lg border border-border bg-bg-subtle p-6 text-center text-fg-subtle text-sm"
+  >
+    <span class="i-svg-spinners:90-ring-with-bg h-5 w-5 inline-block" />
+  </div>
+
+  <a
+    v-else-if="post"
+    :href="postUrl ?? '#'"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200"
+  >
+    <!-- Author row -->
+    <div class="flex items-center gap-3 mb-3">
+      <img
+        v-if="post.author.avatar"
+        :src="`${post.author.avatar}?size=48`"
+        :alt="post.author.displayName || post.author.handle"
+        width="40"
+        height="40"
+        class="w-10 h-10 rounded-full"
+        loading="lazy"
+      />
+      <div class="min-w-0">
+        <div class="font-medium text-fg truncate">
+          {{ post.author.displayName || post.author.handle }}
+        </div>
+        <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
+      </div>
+      <span
+        class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle ms-auto shrink-0"
+        aria-hidden="true"
+      />
+    </div>
+
+    <!-- Post text -->
+    <p class="text-fg-muted whitespace-pre-wrap leading-relaxed mb-3">{{ post.record.text }}</p>
+
+    <!-- Embedded images -->
+    <template v-if="post.embed?.images?.length">
+      <img
+        v-for="(img, i) in post.embed.images"
+        :key="i"
+        :src="img.fullsize"
+        :alt="img.alt"
+        class="w-full mb-3 rounded-lg object-cover"
+        :style="
+          img.aspectRatio
+            ? { aspectRatio: `${img.aspectRatio.width}/${img.aspectRatio.height}` }
+            : undefined
+        "
+        loading="lazy"
+      />
+    </template>
+
+    <!-- Timestamp + engagement -->
+    <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-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-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-lucide:message-circle w-3.5 h-3.5" aria-hidden="true" />
+        {{ post.replyCount }}
+      </span>
+    </div>
+  </a>
+</template>

app/components/CallToAction.vue

@@ -3,15 +3,15 @@ const socialLinks = computed(() => [
   {
     id: 'github',
     href: 'https://repo.npmx.dev',
-    icon: 'i-carbon:logo-github',
+    icon: 'i-simple-icons:github',
     titleKey: $t('about.get_involved.contribute.title'),
     descriptionKey: $t('about.get_involved.contribute.description'),
     ctaKey: $t('about.get_involved.contribute.cta'),
   },
   {
     id: 'discord',
     href: 'https://chat.npmx.dev',
-    icon: 'i-carbon:chat',
+    icon: 'i-lucide:message-circle',
     titleKey: $t('about.get_involved.community.title'),
     descriptionKey: $t('about.get_involved.community.description'),
     ctaKey: $t('about.get_involved.community.cta'),
@@ -55,7 +55,7 @@ const socialLinks = computed(() => [
           class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
         >
           {{ link.ctaKey }}
-          <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
           <span class="absolute z-0 inset-0" aria-hidden="true" />
         </a>
       </div>

app/components/Code/FileTree.vue

@@ -59,7 +59,7 @@ watch(
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
-          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
+          :classicon="isExpanded(node.path) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'"
         >
           <svg
             class="size-[1em] me-1 shrink-0"