Merge branch 'main' into refactor/footer-structure

Author: j0u1

app/components/CopyToClipboardButton.vue

@@ -37,7 +37,7 @@ function handleClick() {
       class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
       :class="[
         $style.copyButton,
-        copied ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
+        copied ? ['text-accent', $style.copiedBg] : 'text-fg-muted bg-bg border-border',
       ]"
       :aria-label="copied ? buttonAriaLabelCopied : buttonAriaLabelCopy"
       v-bind="buttonAttrs"
@@ -80,6 +80,10 @@ function handleClick() {
     translate 0.15s;
 }
 
+.copiedBg {
+  background-color: color-mix(in srgb, var(--accent) 10%, var(--bg));
+}
+
 @media (hover: none) {
   .copyButton {
     display: none;

app/components/Package/LikeCard.vue

@@ -17,7 +17,7 @@ const { user } = useAtproto()
 
 const authModal = useModal('auth-modal')
 
-const { data: likesData } = useFetch(() => `/api/social/likes/${name.value}`, {
+const { data: likesData, status: likesStatus } = useFetch(() => `/api/social/likes/${name.value}`, {
   default: () => ({ totalLikes: 0, userHasLiked: false }),
   server: false,
 })
@@ -76,6 +76,7 @@ const likeAction = async () => {
       <div class="flex items-center gap-4 justify-between shrink-0">
         <ClientOnly>
           <TooltipApp
+            v-if="likesStatus !== 'pending'"
             :text="likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')"
             position="bottom"
           >

app/components/ReadmeTocDropdown.vue

@@ -139,6 +139,27 @@ function handleKeydown(event: KeyboardEvent) {
       break
   }
 }
+
+const itemScrollIntoView = (index: number) => {
+  const item = props.toc[index]
+  if (!item) return
+  const el = document.getElementById(`${listboxId}-${item.id}`)
+  if (el) {
+    el.scrollIntoView({ block: 'center' })
+  }
+}
+
+watch(
+  isOpen,
+  open => {
+    if (open && highlightedIndex.value >= 0) {
+      itemScrollIntoView(highlightedIndex.value)
+    }
+  },
+  {
+    flush: 'post',
+  },
+)
 </script>
 
 <template>

app/pages/blog/alpha-release.md

@@ -238,6 +238,12 @@ headline="Read more from the community"
     title: 'Finding an accessibility-first culture in npmx',
     authorHandle: 'abbeyperini.dev',
     description: 'Abbey Perini talks about how accessibility is a deep part of the npmx culture.'
+  },
+  {
+    url: 'https://jonathanyeong.com/writing/npmx-and-the-open-source-mindset/',
+    title: 'npmx and the open source mindset',
+    authorHandle: 'jonathanyeong.com',
+    description: 'How npmx taught me to embrace the open source mindset.'
   }
 ]"
 />

app/pages/package/[[org]]/[name].vue

@@ -33,18 +33,27 @@ const router = useRouter()
 
 const header = useTemplateRef('header')
 const isHeaderPinned = shallowRef(false)
+const readmeHeader = useTemplateRef('readmeHeader')
+const isReadmeHeaderPinned = shallowRef(false)
 const navExtraOffset = shallowRef(0)
 const isMobile = useMediaQuery('(max-width: 639.9px)')
 
-function checkHeaderPosition() {
-  const el = header.value
-  if (!el) return
+const headerBounds = useElementBounding(header)
+const readmeStickyTop = computed(() => `${56 + headerBounds.height.value}px`)
+
+function isStickyPinned(el: HTMLElement | null): boolean {
+  if (!el) return false
 
   const style = getComputedStyle(el)
   const top = parseFloat(style.top) || 0
   const rect = el.getBoundingClientRect()
 
-  isHeaderPinned.value = Math.abs(rect.top - top) < 1
+  return Math.abs(rect.top - top) < 1
+}
+
+function checkHeaderPosition() {
+  isHeaderPinned.value = isStickyPinned(header.value)
+  isReadmeHeaderPinned.value = isStickyPinned(readmeHeader.value)
 }
 
 useEventListener('scroll', checkHeaderPosition, { passive: true })
@@ -1394,7 +1403,12 @@ const showSkeleton = shallowRef(false)
 
       <!-- README -->
       <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
-        <div class="flex flex-wrap items-center justify-between mb-3 px-1">
+        <div
+          ref="readmeHeader"
+          class="flex sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
+          :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
+          :style="{ top: readmeStickyTop }"
+        >
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
             <LinkBase to="#readme">
               {{ $t('package.readme.title') }}

app/pages/package/[[org]]/[name]/index.vue

@@ -2,7 +2,7 @@
 // stub page to help with paths
 definePageMeta({
   name: 'package',
-  scrollMargin: 150,
+  scrollMargin: 200,
 })
 </script>
 

app/pages/profile/[identity]/index.vue

@@ -23,7 +23,7 @@ if (!profile.value || profileError.value?.statusCode === 404) {
   })
 }
 
-const { user } = useAtproto()
+const { user, pending: userPending } = useAtproto()
 const isEditing = ref(false)
 const displayNameInput = ref()
 const descriptionInput = ref()
@@ -84,6 +84,7 @@ const showInviteSection = computed(() => {
     profile.value.recordExists === false &&
     status.value === 'success' &&
     !likes.value?.records?.length &&
+    !userPending.value &&
     user.value?.handle !== profile.value.handle
   )
 })

i18n/locales/fr-FR.json

@@ -18,6 +18,7 @@
     "social": "réseaux sociaux",
     "chat": "espace de discussion",
     "blog": "blog",
+    "builders_chat": "builders",
     "keyboard_shortcuts": "raccourcis clavier"
   },
   "shortcuts": {
@@ -64,7 +65,13 @@
       "org": "organisation",
       "view_user_packages": "Voir les paquets de cet utilisateur",
       "view_org_packages": "Voir les paquets de cette organisation"
-    }
+    },
+    "instant_search": "Recherche instantanée",
+    "instant_search_on": "activée",
+    "instant_search_off": "désactivée",
+    "instant_search_turn_on": "activer",
+    "instant_search_turn_off": "désactiver",
+    "instant_search_advisory": "{label} {state} — {action}"
   },
   "nav": {
     "main_navigation": "Barre de navigation",
@@ -958,6 +965,11 @@
         "description": "Discutez, posez des questions et partagez des idées.",
         "cta": "Joindre le Discord"
       },
+      "builders": {
+        "title": "Aidez à construire npmx",
+        "description": "Rejoignez les builders qui façonnent l'avenir de npmx.",
+        "cta": "Rejoindre le Discord Builders"
+      },
       "follow": {
         "title": "Rester à jour",
         "description": "Découvrez les dernières nouveautés de npmx.",

i18n/locales/zh-CN.json

@@ -18,6 +18,7 @@
     "source": "源码",
     "social": "社交媒体",
     "chat": "聊天",
+    "builders_chat": "构建者",
     "keyboard_shortcuts": "键盘快捷键"
   },
   "shortcuts": {
@@ -64,7 +65,13 @@
       "org": "组织",
       "view_user_packages": "查看该用户的包",
       "view_org_packages": "查看该组织的包"
-    }
+    },
+    "instant_search": "即时搜索",
+    "instant_search_on": "已开启",
+    "instant_search_off": "已关闭",
+    "instant_search_turn_on": "开启",
+    "instant_search_turn_off": "关闭",
+    "instant_search_advisory": "{label} {state} — {action}"
   },
   "nav": {
     "main_navigation": "主页",
@@ -85,6 +92,8 @@
     "author": {
       "view_profile": "在 Bluesky 上查看 {name} 的资料"
     },
+    "draft_badge": "草稿",
+    "draft_banner": "这是一篇未发布的草稿。内容可能不完整或包含不准确的信息。",
     "atproto": {
       "view_on_bluesky": "在 Bluesky 上查看",
       "reply_on_bluesky": "在 Bluesky 上回复",
@@ -120,6 +129,8 @@
       "algolia": "Algolia",
       "algolia_description": "使用 Algolia 来实现更快的搜索，适用于组织页和用户页。"
     },
+    "instant_search": "即时搜索",
+    "instant_search_description": "导航到搜索页面并在输入时更新结果。",
     "relative_dates": "相对时间",
     "include_types": "在安装时包含 {'@'}types",
     "include_types_description": "为未提供类型定义的包自动添加 {'@'}types 包到安装命令",
@@ -954,6 +965,11 @@
         "description": "聊天、提出问题并分享想法。",
         "cta": "加入 Discord"
       },
+      "builders": {
+        "title": "参与构建 npmx",
+        "description": "加入构建者团队，共同塑造 npmx 的未来。",
+        "cta": "加入构建者 Discord"
+      },
       "follow": {
         "title": "保持更新",
         "description": "了解 npmx 的最新动态。",
@@ -1163,6 +1179,34 @@
     "close_files_panel": "关闭文件面板",
     "filter_files_label": "按更改类型筛选文件"
   },
+  "pds": {
+    "title": "npmx.social",
+    "meta_description": "npmx 社区的官方 AT Protocol 个人数据服务器 (PDS)。",
+    "join": {
+      "title": "加入社区",
+      "description": "无论你是第一次在 Atmosphere 上创建账户，还是迁移现有账户，这里都是你的归属。你可以迁移当前账户，而不会丢失你的账户、帖子或关注者。",
+      "migrate": "使用 PDS MOOver 迁移"
+    },
+    "server": {
+      "title": "服务器详情",
+      "location_label": "位置：",
+      "location_value": "德国，纽伦堡",
+      "infrastructure_label": "基础设施：",
+      "infrastructure_value": "托管于 Hetzner",
+      "privacy_label": "隐私：",
+      "privacy_value": "受欧盟严格的数据保护法律约束",
+      "learn_more": "了解 npmx 如何使用 Atmosphere"
+    },
+    "community": {
+      "title": "谁在这里",
+      "description": "在 {count} 个已将 npmx.social 视为家的账户中，这里有一些：",
+      "loading": "正在加载 PDS 社区...",
+      "error": "加载 PDS 社区失败。",
+      "empty": "没有社区成员可显示。",
+      "view_profile": "查看 {handle} 的资料",
+      "new_accounts": "...以及 {count} 个新加入 Atmosphere 的账户"
+    }
+  },
   "privacy_policy": {
     "title": "隐私政策",
     "last_updated": "上次更新：{date}",

test/nuxt/components/PackageLikeCard.spec.ts

@@ -44,4 +44,11 @@ describe('PackageLikeCard', () => {
 
     expect(wrapper.find('span.truncate').text()).toBe('@scope/pkg')
   })
+
+  it('hides the like button entirely while like data is pending', async () => {
+    wrapper = await mountLikeCard('https://npmx.dev/package/vue')
+
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(false)
+  })
 })