Merge branch 'main' into fix/add-clear-icon-in-search-field-for-mobile-view

Author: ghostdevv

.gitignore

@@ -40,6 +40,7 @@ test-results/
 # generated files
 shared/types/lexicons
 file-tree-sprite.svg
+public/blog/avatar
 
 **/__screenshots__/**
 

app/components/AuthorList.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import type { Author } from '#shared/schemas/blog'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
 
-const props = defineProps<{
-  authors: Author[]
+defineProps<{
+  authors: ResolvedAuthor[]
   variant?: 'compact' | 'expanded'
 }>()
-
-const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
 </script>
 
 <template>
   <!-- Expanded variant: vertical list with larger avatars -->
   <div v-if="variant === 'expanded'" class="flex flex-wrap items-center gap-4">
-    <div v-for="author in resolvedAuthors" :key="author.name" class="flex items-center gap-2">
+    <div v-for="author in authors" :key="author.name" class="flex items-center gap-2">
       <AuthorAvatar :author="author" size="md" disable-link />
       <div class="flex flex-col">
         <span class="text-sm font-medium text-fg">{{ author.name }}</span>
@@ -34,7 +32,7 @@ const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
   <div v-else class="flex items-center gap-2 min-w-0">
     <div class="flex items-center">
       <AuthorAvatar
-        v-for="(author, index) in resolvedAuthors"
+        v-for="(author, index) in authors"
         :key="author.name"
         :author="author"
         size="md"
@@ -43,7 +41,7 @@ const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
       />
     </div>
     <span class="text-xs text-fg-muted font-mono truncate">
-      {{ resolvedAuthors.map(a => a.name).join(', ') }}
+      {{ authors.map(a => a.name).join(', ') }}
     </span>
   </div>
 </template>

app/components/BlogPostListCard.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Author } from '#shared/schemas/blog'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
 
 defineProps<{
   /** Authors of the blog post */
-  authors: Author[]
+  authors: ResolvedAuthor[]
   /** Blog Title */
   title: string
   /** Tags such as OpenSource, Architecture, Community, etc. */

app/components/Code/Viewer.vue

@@ -115,7 +115,7 @@ watch(
     <!-- Code content -->
     <div class="code-content flex-1 overflow-x-auto min-w-0">
       <!-- eslint-disable vue/no-v-html -- HTML is generated server-side by Shiki -->
-      <div ref="codeRef" class="code-lines w-fit" v-html="html" />
+      <div ref="codeRef" class="code-lines min-w-full w-fit" v-html="html" />
       <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
@@ -157,7 +157,7 @@ watch(
 
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
-  background: rgb(234 179 8 / 0.2); /* yellow-500/20 */
+  @apply bg-yellow-500/20;
   margin: 0 -1rem;
   padding: 0 1rem;
 }

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/Header/ConnectorModal.vue

@@ -27,22 +27,22 @@ function handleDisconnect() {
   disconnect()
 }
 
-// function copyCommand() {
-//   let command = executeNpmxConnectorCommand.value
-//   if (portInput.value !== '31415') {
-//     command += ` --port ${portInput.value}`
-//   }
-//   copy(command)
-// }
-
-// const selectedPM = useSelectedPackageManager()
-
-// const executeNpmxConnectorCommand = computed(() => {
-//   return getExecuteCommand({
-//     packageName: 'npmx-connector',
-//     packageManager: selectedPM.value,
-//   })
-// })
+function copyCommand() {
+  let command = executeNpmxConnectorCommand.value
+  if (portInput.value !== '31415') {
+    command += ` --port ${portInput.value}`
+  }
+  copy(command)
+}
+
+const selectedPM = useSelectedPackageManager()
+
+const executeNpmxConnectorCommand = computed(() => {
+  return getExecuteCommand({
+    packageName: 'npmx-connector',
+    packageManager: selectedPM.value,
+  })
+})
 </script>
 
 <template>
@@ -87,26 +87,6 @@ function handleDisconnect() {
 
     <!-- Disconnected state -->
     <form v-else class="space-y-4" @submit.prevent="handleConnect">
-      <!-- Contributor-only notice -->
-      <div class="p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-        <div>
-          <span class="inline-block text-xs font-bold uppercase tracking-wider text-fg rounded">
-            {{ $t('connector.modal.contributor_badge') }}
-          </span>
-          <p class="text-sm text-fg-muted">
-            <i18n-t keypath="connector.modal.contributor_notice" scope="global">
-              <template #link>
-                <LinkBase
-                  to="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
-                >
-                  {{ $t('connector.modal.contributor_link') }}
-                </LinkBase>
-              </template>
-            </i18n-t>
-          </p>
-        </div>
-      </div>
-
       <p class="text-sm text-fg-muted">
         {{ $t('connector.modal.run_hint') }}
       </p>
@@ -116,43 +96,20 @@ function handleDisconnect() {
         dir="ltr"
       >
         <span class="text-fg-subtle">$</span>
-        <span class="text-fg-subtle ms-2">npx npmx-connector</span>
-        <ButtonBase
-          :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          @click="copy('npx npmx-connector')"
-          class="ms-auto"
-          :classicon="copied ? 'i-lucide:check text-green-500' : 'i-lucide:copy'"
-        />
+        <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
+        <div class="ms-auto flex items-center gap-2">
+          <!-- Disable teleport in a modal dialog -->
+          <PackageManagerSelect :teleport="false" />
+
+          <ButtonBase
+            :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
+            @click="copyCommand"
+            class="ms-auto"
+            :classicon="copied ? 'i-lucide:check text-green-500' : 'i-lucide:copy'"
+          />
+        </div>
       </div>
 
-      <!-- TODO: Uncomment when npmx-connector is published to npm
-                    <div
-                      class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
-                    >
-                      <span class="text-fg-subtle">$</span>
-                      <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
-                      <div class="ms-auto flex items-center gap-2">
-                        <PackageManagerSelect />
-
-                        <button
-                          type="button"
-                          :aria-label="
-                            copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
-                          "
-                          class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
-                          @click="copyCommand"
-                        >
-                          <span v-if="!copied" class="i-lucide:copy block w-5 h-5" aria-hidden="true" />
-                          <span
-                            v-else
-                            class="i-lucide:check block w-5 h-5 text-green-500"
-                            aria-hidden="true"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                    -->
-
       <p class="text-sm text-fg-muted">{{ $t('connector.modal.paste_token') }}</p>
 
       <div class="space-y-3">

app/components/OgImage/BlogPost.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Author } from '#shared/schemas/blog'
+import type { ResolvedAuthor } from '#shared/schemas/blog'
 
 const props = withDefaults(
   defineProps<{
     title: string
-    authors?: Author[]
+    authors?: ResolvedAuthor[]
     date?: string
     primaryColor?: string
   }>(),
@@ -15,8 +15,6 @@ const props = withDefaults(
   },
 )
 
-const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
-
 const formattedDate = computed(() => {
   if (!props.date) return ''
   try {
@@ -41,17 +39,17 @@ const getInitials = (name: string) =>
     .slice(0, 2)
 
 const visibleAuthors = computed(() => {
-  if (resolvedAuthors.value.length <= 3) return resolvedAuthors.value
-  return resolvedAuthors.value.slice(0, MAX_VISIBLE_AUTHORS)
+  if (props.authors.length <= 3) return props.authors
+  return props.authors.slice(0, MAX_VISIBLE_AUTHORS)
 })
 
 const extraCount = computed(() => {
-  if (resolvedAuthors.value.length <= 3) return 0
-  return resolvedAuthors.value.length - MAX_VISIBLE_AUTHORS
+  if (props.authors.length <= 3) return 0
+  return props.authors.length - MAX_VISIBLE_AUTHORS
 })
 
 const formattedAuthorNames = computed(() => {
-  const allNames = resolvedAuthors.value.map(a => a.name)
+  const allNames = props.authors.map(a => a.name)
   if (allNames.length === 0) return ''
   if (allNames.length === 1) return allNames[0]
   if (allNames.length === 2) return `${allNames[0]} and ${allNames[1]}`
@@ -96,7 +94,7 @@ const formattedAuthorNames = computed(() => {
 
       <!-- Authors -->
       <div
-        v-if="resolvedAuthors.length"
+        v-if="authors.length"
         class="flex items-center gap-4 self-start justify-start flex-nowrap"
         style="font-family: 'Geist', sans-serif"
       >

app/components/Package/Dependencies.vue

@@ -218,8 +218,8 @@ const numberFormatter = useNumberFormatter()
           :key="peer.name"
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
-          <div class="flex items-center gap-1 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block truncate" dir="ltr">
+          <div class="flex items-center gap-2 min-w-0 flex-1">
+            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%] break-words" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -228,7 +228,7 @@ const numberFormatter = useNumberFormatter()
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="block truncate max-w-[40%]"
+            class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
           >
@@ -278,9 +278,9 @@ const numberFormatter = useNumberFormatter()
             optionalDepsExpanded ? undefined : 10,
           )"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase

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/Package/ManagerSelect.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { onClickOutside, useEventListener } from '@vueuse/core'
 
+withDefaults(
+  defineProps<{
+    teleport?: boolean
+  }>(),
+  {
+    teleport: true,
+  },
+)
+
 const selectedPM = useSelectedPackageManager()
 
 const listRef = useTemplateRef('listRef')
@@ -121,7 +130,7 @@ function handleKeydown(event: KeyboardEvent) {
   </button>
 
   <!-- Dropdown menu (teleported to body to avoid clipping) -->
-  <Teleport to="body">
+  <Teleport to="body" :disabled="!teleport">
     <Transition
       :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
       :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"