Merge branch 'fix-deps-version-union-links' of https://github.com/alex-key/npmx.dev into fix-deps-version-union-links

Author: alex-key

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,28 @@
+name: "\U0001F41E Bug report"
+description: Create a report to help us improve npmx
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please carefully read the contribution docs before creating a bug report
+        👉 https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: If applicable, add any other context about the problem here
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        Optional if you have reproduction steps. Please try not to insert an image but copy paste the log text.
+      render: shell-script

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 📚 npmx documentation
+    url: https://docs.npmx.dev/
+    about: Check the documentation for usage of npmx

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,36 @@
+name: '🚀 Feature request'
+description: Suggest a feature that will improve npmx
+labels: ['pending triage']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to fill out this feature request!
+
+          Please carefully read the contribution docs before suggesting a new feature
+          👉 https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Describe the feature
+      description: A clear and concise description of what you think would be a helpful addition to npmx, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
+      placeholder: Feature description
+    validations:
+      required: true
+  - type: checkboxes
+    id: additional-info
+    attributes:
+      label: Additional information
+      description: Additional information that helps us decide how to proceed.
+      options:
+        - label: Would you be willing to help implement this feature?
+  - type: checkboxes
+    id: required-info
+    attributes:
+      label: Final checks
+      description: Before submitting, please make sure you do the following
+      options:
+        - label: Read the [contribution guide](https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md).
+          required: true
+        - label: Check existing [issues](https://github.com/npmx-dev/npmx.dev/issues).
+          required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+### 🔗 Linked issue
+
+<!-- Please ensure there is an open issue and mention its number. For example, "resolves #123" -->
+
+### 🧭 Context
+
+<!-- Brief background and why this change is needed -->
+
+<!-- High-level summary of what changed -->
+
+### 📚 Description
+
+<!-- Describe your changes in detail. Why is this change required? What problem does it solve? -->
+
+<!-- If you used AI tools to help with this contribution, please ensure the PR description and code reflect your own understanding.
+     Write in your own voice rather than copying AI-generated text. -->
+
+<!----------------------------------------------------------------------
+Before creating the pull request, please make sure you do the following:
+
+- Check that there isn't already a PR that solves the problem the same way. If you find a duplicate, please help us reviewing it.
+- Ensure that PR title follows conventional commits (https://www.conventionalcommits.org)
+- Update the corresponding documentation if needed.
+- Include relevant tests that fail without this PR but pass with it.
+- Add any additional context, tradeoffs, follow-ups, or things reviewers should be aware of.
+
+Thank you for contributing to npmx!
+----------------------------------------------------------------------->

app/components/Button/Base.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { IconClass } from '~/types'
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
@@ -8,7 +10,7 @@ const props = withDefaults(
     ariaKeyshortcuts?: string
     block?: boolean
 
-    classicon?: string
+    classicon?: IconClass
   }>(),
   {
     type: 'button',

app/components/CallToAction.vue

@@ -25,6 +25,18 @@ const socialLinks = computed(() => [
     ctaKey: $t('about.get_involved.follow.cta'),
   },
 ])
+
+function handleCardClick(event: MouseEvent) {
+  if ((event.target as HTMLElement).closest(':any-link')) return
+  if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return
+
+  const selection = window.getSelection()
+  if (selection && selection.type === 'Range') return
+
+  const card = event.currentTarget as HTMLElement
+  const link = card.querySelector('a')
+  link?.click()
+}
 </script>
 
 <template>
@@ -37,15 +49,16 @@ const socialLinks = computed(() => [
       <div
         v-for="link in socialLinks"
         :key="link.id"
-        class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
+        @click="handleCardClick"
+        class="cursor-pointer group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
       >
-        <h3 class="z-1 flex gap-2">
+        <h3 class="flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
             {{ link.titleKey }}
           </span>
         </h3>
-        <p class="z-1 text-sm text-fg-muted leading-relaxed">
+        <p class="text-sm text-fg-muted leading-relaxed">
           {{ link.descriptionKey }}
         </p>
         <a
@@ -56,7 +69,6 @@ const socialLinks = computed(() => [
         >
           {{ link.ctaKey }}
           <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>
     </div>

app/components/Code/DirectoryListing.vue

@@ -120,10 +120,7 @@ const bytesFormatter = useBytesFormatter()
               </svg>
               <span class="w-full flex justify-self-stretch items-center gap-2">
                 <span class="flex-1">{{ node.name }}</span>
-                <span
-                  v-if="node.type === 'file' && node.size"
-                  class="text-end text-xs text-fg-subtle"
-                >
+                <span v-if="typeof node.size === 'number'" class="text-end text-xs text-fg-subtle">
                   {{ bytesFormatter.format(node.size) }}
                 </span>
               </span>

app/components/Compare/PackageSelector.vue

@@ -105,14 +105,20 @@ function handleKeydown(e: KeyboardEvent) {
     case 'ArrowDown':
       e.preventDefault()
       if (count === 0) return
-      highlightedIndex.value = Math.min(highlightedIndex.value + 1, count - 1)
+      if (highlightedIndex.value < count - 1) {
+        highlightedIndex.value++
+      } else {
+        highlightedIndex.value = 0
+      }
       break
 
     case 'ArrowUp':
       e.preventDefault()
       if (count === 0) return
       if (highlightedIndex.value > 0) {
         highlightedIndex.value--
+      } else {
+        highlightedIndex.value = count - 1
       }
       break
 

app/components/Link/Base.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
+import type { IconClass } from '~/types'
 
 const props = withDefaults(
   defineProps<
@@ -26,7 +27,7 @@ const props = withDefaults(
        */
       rel?: never
 
-      classicon?: string
+      classicon?: IconClass
 
       to?: NuxtLinkProps['to']
 

app/components/Package/ClaimPackageModal.vue

@@ -3,6 +3,8 @@ import { checkPackageName } from '~/utils/package-name'
 
 const props = defineProps<{
   packageName: string
+  packageScope?: string | null
+  canPublishToScope: boolean
 }>()
 
 const {
@@ -221,9 +223,19 @@ const previewPackageJson = computed(() => {
       </div>
 
       <!-- Availability status -->
-      <div v-if="checkResult.valid">
+      <template v-if="checkResult.valid">
         <div
-          v-if="checkResult.available"
+          v-if="isConnected && !canPublishToScope"
+          class="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"
+        >
+          <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
+          <p class="font-mono text-sm text-fg">
+            {{ $t('claim.modal.missing_permission', { scope: packageScope }) }}
+          </p>
+        </div>
+
+        <div
+          v-else-if="checkResult.available"
           class="flex items-center gap-3 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"
         >
           <span class="i-lucide:check text-green-500 w-5 h-5" aria-hidden="true" />
@@ -237,10 +249,10 @@ const previewPackageJson = computed(() => {
           <span class="i-lucide:x text-red-500 w-5 h-5" aria-hidden="true" />
           <p class="font-mono text-sm text-fg">{{ $t('claim.modal.taken') }}</p>
         </div>
-      </div>
+      </template>
 
       <!-- Similar packages warning -->
-      <div v-if="checkResult.similarPackages?.length && checkResult.available">
+      <template v-if="checkResult.similarPackages?.length && checkResult.available">
         <div
           :class="
             hasDangerousSimilarPackages
@@ -290,7 +302,7 @@ const previewPackageJson = computed(() => {
             </li>
           </ul>
         </div>
-      </div>
+      </template>
 
       <!-- Error message -->
       <div
@@ -336,7 +348,7 @@ const previewPackageJson = computed(() => {
         </div>
 
         <!-- Claim button -->
-        <div v-else class="space-y-3">
+        <div v-else-if="isConnected && canPublishToScope" class="space-y-3">
           <p class="text-sm text-fg-muted">
             {{ $t('claim.modal.publish_hint') }}
           </p>