Merge branch 'main' of github.com:npmx-dev/npmx.dev into feat/pkg-description-link

Author: jycouet

.oxlintrc.json

@@ -10,7 +10,8 @@
     "no-console": "warn",
     "no-await-in-loop": "off",
     "unicorn/no-array-sort": "off",
-    "no-restricted-globals": "error"
+    "no-restricted-globals": "error",
+    "typescript/consistent-type-imports": "error"
   },
   "ignorePatterns": [
     ".output/**",

app/app.vue

@@ -195,6 +195,10 @@ button {
   margin-top: 2rem;
   margin-bottom: 1rem;
   line-height: 1.3;
+
+  a {
+    text-decoration: none;
+  }
 }
 
 /* Visual styling based on original README heading level */

app/components/AppFooter.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const isMounted = ref(false)
-const isVisible = ref(false)
-const isScrollable = ref(true)
-const lastScrollY = ref(0)
-const footerRef = ref<HTMLElement>()
+const isMounted = shallowRef(false)
+const isVisible = shallowRef(false)
+const isScrollable = shallowRef(true)
+const lastScrollY = shallowRef(0)
+const footerRef = useTemplateRef('footerRef')
 
 // Check if CSS scroll-state container queries are supported
 // Once this becomes baseline, we can remove the JS scroll handling entirely
-const supportsScrollStateQueries = ref(false)
+const supportsScrollStateQueries = useSupported(() => {
+  return isMounted.value && CSS.supports('container-type', 'scroll-state')
+})
 
 function checkScrollable() {
   return document.documentElement.scrollHeight > window.innerHeight
@@ -48,26 +50,17 @@ function onResize() {
   updateFooterPadding()
 }
 
-onMounted(() => {
-  // Feature detect CSS scroll-state container queries (Chrome 133+)
-  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
-  supportsScrollStateQueries.value = CSS.supports('container-type', 'scroll-state')
+useEventListener('scroll', onScroll, { passive: true })
+useEventListener('resize', onResize, { passive: true })
 
+onMounted(() => {
   nextTick(() => {
     lastScrollY.value = window.scrollY
     isScrollable.value = checkScrollable()
     updateFooterPadding()
     // Only apply dynamic classes after mount to avoid hydration mismatch
     isMounted.value = true
   })
-
-  window.addEventListener('scroll', onScroll, { passive: true })
-  window.addEventListener('resize', onResize, { passive: true })
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll)
-  window.removeEventListener('resize', onResize)
 })
 </script>
 

app/components/AppTooltip.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
 }>()
 
-const isVisible = ref(false)
+const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {

app/components/ClaimPackageModal.vue

@@ -19,12 +19,12 @@ const {
 } = useConnector()
 
 // Fetch name availability when modal opens
-const checkResult = ref<CheckNameResult | null>(null)
+const checkResult = shallowRef<CheckNameResult | null>(null)
 
-const isChecking = ref(false)
-const isPublishing = ref(false)
-const publishError = ref<string | null>(null)
-const publishSuccess = ref(false)
+const isChecking = shallowRef(false)
+const isPublishing = shallowRef(false)
+const publishError = shallowRef<string | null>(null)
+const publishSuccess = shallowRef(false)
 
 async function checkAvailability() {
   isChecking.value = true
@@ -125,7 +125,7 @@ const previewPackageJson = computed(() => {
   }
 })
 
-const connectorModalOpen = ref(false)
+const connectorModalOpen = shallowRef(false)
 </script>
 
 <template>

app/components/CodeMobileTreeDrawer.vue

@@ -7,7 +7,7 @@ defineProps<{
   baseUrl: string
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 
 // Close drawer on navigation
 const route = useRoute()

app/components/CodeViewer.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
   lineClick: [lineNum: number, event: MouseEvent]
 }>()
 
-const codeRef = ref<HTMLElement>()
+const codeRef = useTemplateRef('codeRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {

app/components/ConnectorModal.vue

@@ -4,9 +4,9 @@ const open = defineModel<boolean>('open', { default: false })
 const { isConnected, isConnecting, npmUser, error, hasOperations, connect, disconnect } =
   useConnector()
 
-const tokenInput = ref('')
-const portInput = ref('31415')
-const copied = ref(false)
+const tokenInput = shallowRef('')
+const portInput = shallowRef('31415')
+const copied = shallowRef(false)
 
 async function handleConnect() {
   const port = Number.parseInt(portInput.value, 10) || 31415

app/components/ConnectorStatus.client.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
-const { isConnected, isConnecting, npmUser, error, activeOperations, hasPendingOperations } =
-  useConnector()
+const {
+  isConnected,
+  isConnecting,
+  npmUser,
+  avatar,
+  error,
+  activeOperations,
+  hasPendingOperations,
+} = useConnector()
 
-const showModal = ref(false)
-const showTooltip = ref(false)
+const showModal = shallowRef(false)
+const showTooltip = shallowRef(false)
 
 const statusText = computed(() => {
   if (isConnecting.value) return 'connecting…'
@@ -41,8 +48,16 @@ const ariaLabel = computed(() => {
       @focus="showTooltip = true"
       @blur="showTooltip = false"
     >
-      <!-- Status dot -->
+      <!-- Avatar (when connected with avatar) -->
+      <img
+        v-if="isConnected && avatar"
+        :src="avatar"
+        :alt="`${npmUser}'s avatar`"
+        class="w-6 h-6 rounded-full"
+      />
+      <!-- Status dot (when not connected or no avatar) -->
       <span
+        v-else
         class="w-2.5 h-2.5 rounded-full transition-colors duration-200"
         :class="statusColor"
         aria-hidden="true"

app/components/LicenseDisplay.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { parseLicenseExpression } from '#shared/utils/spdx'
+
+const props = defineProps<{
+  license: string
+}>()
+
+const tokens = computed(() => parseLicenseExpression(props.license))
+
+const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
+</script>
+
+<template>
+  <span class="inline-flex items-baseline gap-x-1.5 flex-wrap gap-y-0.5">
+    <template v-for="(token, i) in tokens" :key="i">
+      <a
+        v-if="token.type === 'license' && token.url"
+        :href="token.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link-subtle"
+        title="View license text on SPDX"
+      >
+        {{ token.value }}
+      </a>
+      <span v-else-if="token.type === 'license'">{{ token.value }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-[0.65em]">{{ token.value }}</span>
+    </template>
+    <span
+      v-if="hasAnyValidLicense"
+      class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0"
+      aria-hidden="true"
+    />
+  </span>
+</template>