Merge branch 'main' of https://github.com/alex-key/npmx.dev into fix/docs-page-improvements

Author: alex-key

app/components/AppFooter.vue

@@ -35,6 +35,9 @@ const closeModal = () => modalRef.value?.close?.()
             <LinkBase :to="{ name: 'accessibility' }">
               {{ $t('a11y.footer_title') }}
             </LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">
+              {{ $t('translation_status.title') }}
+            </LinkBase>
             <button
               type="button"
               class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"

app/components/AppHeader.vue

@@ -84,6 +84,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-custom:a11y',
       },
+      {
+        name: 'Translation Status',
+        label: $t('translation_status.title'),
+        to: { name: 'translation-status' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:languages',
+      },
     ],
   },
   {
@@ -235,16 +243,18 @@ onKeyStroke(
             {{ env === 'release' ? 'alpha' : env }}
           </span>
         </NuxtLink>
-        <NuxtLink
-          v-if="prNumber"
-          :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
-          :aria-label="`Open GitHub pull request ${prNumber}`"
-        >
-          <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium ms-2">
-            PR #{{ prNumber }}
-          </span>
-        </NuxtLink>
       </div>
+
+      <NuxtLink
+        v-if="showLogo && !isSearchExpanded && prNumber"
+        :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
+        :aria-label="$t('header.pr', { prNumber })"
+      >
+        <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium">
+          PR #{{ prNumber }}
+        </span>
+      </NuxtLink>
+
       <!-- Spacer when logo is hidden on desktop -->
       <span v-else class="hidden sm:block w-1" />
 

app/components/BackButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const router = useRouter()
+const canGoBack = useCanGoBack()
+</script>
+
+<template>
+  <button
+    v-if="canGoBack"
+    type="button"
+    class="inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+    @click="router.back()"
+  >
+    <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+    <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+  </button>
+</template>

app/components/BlueskyComment.vue

@@ -38,16 +38,27 @@ function getHostname(uri: string): string {
     return uri
   }
 }
+
+let segmenter: Intl.Segmenter | null = null
+function firstChar(str: string): string {
+  segmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+  return Array.from(segmenter.segment(str))[0]?.segment ?? ''
+}
 </script>
 
 <template>
-  <div :class="depth === 0 ? 'flex gap-3' : 'flex gap-3 mt-3'">
-    <!-- Avatar -->
+  <!--
+    Depth 0: classic avatar-column layout (all screens)
+    Depth 1+: Medium-style inline avatar on mobile, avatar-column on desktop
+  -->
+  <div :class="depth === 0 ? 'flex gap-3' : 'sm:flex sm:gap-3'">
+    <!-- Column avatar: always shown at depth 0, desktop-only at depth 1+ -->
     <a
       :href="`https://bsky.app/profile/${comment.author.handle}`"
       target="_blank"
       rel="noopener noreferrer"
       class="shrink-0"
+      :class="depth > 0 ? 'hidden sm:block' : ''"
     >
       <img
         v-if="comment.author.avatar"
@@ -65,22 +76,45 @@ function getHostname(uri: string): string {
           depth === 0 ? 'w-10 h-10' : 'w-8 h-8 text-sm',
         ]"
       >
-        {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
+        {{ firstChar(comment.author.displayName || comment.author.handle).toUpperCase() }}
       </div>
     </a>
 
     <div class="flex-1 min-w-0">
       <!-- Author info + timestamp -->
-      <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0">
+      <div class="flex flex-wrap items-center gap-x-2 gap-y-0">
+        <!-- Inline avatar: mobile-only for nested comments -->
+        <a
+          v-if="depth > 0"
+          :href="`https://bsky.app/profile/${comment.author.handle}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="shrink-0 sm:hidden"
+        >
+          <img
+            v-if="comment.author.avatar"
+            :src="comment.author.avatar"
+            :alt="comment.author.displayName || comment.author.handle"
+            class="w-6 h-6 rounded-full"
+            width="24"
+            height="24"
+            loading="lazy"
+          />
+          <div
+            v-else
+            class="w-6 h-6 rounded-full bg-border flex items-center justify-center text-fg-muted text-xs"
+          >
+            {{ firstChar(comment.author.displayName || comment.author.handle).toUpperCase() }}
+          </div>
+        </a>
         <a
           :href="`https://bsky.app/profile/${comment.author.handle}`"
           target="_blank"
           rel="noopener noreferrer"
-          class="font-medium text-fg hover:underline"
+          :class="['font-medium text-fg hover:underline', depth > 0 ? 'text-sm' : '']"
         >
           {{ comment.author.displayName || comment.author.handle }}
         </a>
-        <span class="text-fg-subtle text-sm">@{{ comment.author.handle }}</span>
         <span class="text-fg-subtle text-sm">·</span>
         <a
           :href="getCommentUrl(props.comment)"
@@ -93,7 +127,7 @@ function getHostname(uri: string): string {
       </div>
 
       <!-- Comment text with rich segments -->
-      <p class="text-fg-muted whitespace-pre-wrap">
+      <p class="text-fg-muted whitespace-pre-wrap mt-2 mb-3">
         <template v-for="(segment, i) in processedSegments" :key="i">
           <a
             v-if="segment.url"
@@ -162,7 +196,7 @@ function getHostname(uri: string): string {
       <!-- Like/repost counts -->
       <div
         v-if="comment.likeCount > 0 || comment.repostCount > 0"
-        class="mt-2 flex gap-4 text-sm text-fg-subtle"
+        class="mt-1 flex gap-4 text-sm text-fg-subtle"
       >
         <span v-if="comment.likeCount > 0">
           {{ $t('blog.atproto.like_count', { count: comment.likeCount }, comment.likeCount) }}
@@ -174,7 +208,10 @@ function getHostname(uri: string): string {
 
       <!-- Nested replies -->
       <template v-if="comment.replies.length > 0">
-        <div v-if="depth < MaxDepth" class="mt-2 ps-2 border-is-2 border-border flex flex-col">
+        <div
+          v-if="depth < MaxDepth"
+          class="mt-3 ps-3 border-is-2 border-border flex flex-col gap-3"
+        >
           <BlueskyComment
             v-for="reply in comment.replies"
             :key="reply.uri"

app/components/Button/Base.stories.ts

@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import type { IconClass } from '~/types'
 
+/**
+ * A base button component that supports multiple variants, sizes, and states as well as icons and keyboard shortcuts.
+ */
+defineOptions({
+  name: 'ButtonBase',
+})
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
     /** @default "button" */
     type?: 'button' | 'submit'
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
-    /** @default "medium" */
-    size?: 'small' | 'medium'
+    /** @default "md" */
+    size?: 'sm' | 'md'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -20,7 +27,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
-    size: 'medium',
+    size: 'md',
   },
 )
 
@@ -41,8 +48,8 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-sm px-4 py-2': size === 'md',
+      'text-xs px-2 py-0.5': size === 'sm',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':