Merge branch 'main' into jy/fix-incorrect-readme

Author: jonathanyeong

.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/**",

README.md

@@ -18,6 +18,18 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **URL compatible** – Replace `npmjs.com` with `xnpmjs.com` or `npmx.dev` in any URL and it just works.
 - **Simplicity** – No noise, cluttered display, or confusing UI. If in doubt: choose simplicity.
 
+## Shortcuts
+
+> [!IMPORTANT]  
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+
+- [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
+- [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile
+- [repo.npmx.dev](https://repo.npmx.dev) - GitHub Repository
+- [issues.npmx.dev](https://issues.npmx.dev) - GitHub Issues
+- [coc.npmx.dev](https://coc.npmx.dev) - Code of Conduct
+- [contributing.npmx.dev](https://contributing.npmx.dev) - Contributing Guide
+
 ## Features
 
 ### Package browsing

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>
 
@@ -97,19 +90,25 @@ onUnmounted(() => {
         <p class="text-xs text-fg-muted m-0 sm:hidden">not affiliated with npm, Inc.</p>
         <div class="flex items-center gap-4 sm:gap-6">
           <a
-            href="https://github.com/npmx-dev/npmx.dev"
+            href="https://repo.npmx.dev"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
           >
             source
           </a>
-          <span class="text-border">|</span>
           <a
-            href="https://roe.dev"
+            href="https://social.npmx.dev"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
+          >
+            social
+          </a>
+          <a
+            href="https://chat.npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
           >
-            @danielroe
+            chat
           </a>
         </div>
       </div>

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"