Merge branch 'main' into main

Author: graphieros

.github/workflows/autofix.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version: lts/*
-          cache: "pnpm"
+          cache: 'pnpm'
 
       - name: 📦 Install dependencies
         run: pnpm install

.oxfmtrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "quoteProps": "consistent",
+  "experimentalSortPackageJson": false
+}

.oxlintrc.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["unicorn", "typescript", "oxc", "vue", "vitest"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-await-in-loop": "off",
+    "unicorn/no-array-sort": "off"
+  },
+  "ignorePatterns": [
+    ".output/**",
+    ".data/**",
+    ".nuxt/**",
+    ".nitro/**",
+    ".cache/**",
+    "dist/**",
+    "node_modules/**",
+    "coverage/**",
+    "playwright-report/**",
+    "test-results/**"
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["oxc.oxc-vscode", "Vue.volar"]
+}

README.md

@@ -27,20 +27,20 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Provenance indicators** - verified build indicators for packages with npm provenance
 - **Admin features** - org/team management, package access controls via local connector (coming soon)
 
-### URL Compatibility
+### URL compatibility
 
 npmx.dev supports npm permalink patterns:
 
-| Pattern | Example |
-|---------|---------|
-| `/package/<name>` | [`/package/nuxt`](https://npmx.dev/package/nuxt) |
-| `/package/@scope/name` | [`/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit) |
+| Pattern                       | Example                                                        |
+| ----------------------------- | -------------------------------------------------------------- |
+| `/package/<name>`             | [`/package/nuxt`](https://npmx.dev/package/nuxt)               |
+| `/package/@scope/name`        | [`/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit)     |
 | `/package/<name>/v/<version>` | [`/package/vue/v/3.4.0`](https://npmx.dev/package/vue/v/3.4.0) |
-| `/search?q=<query>` | [`/search?q=vue`](https://npmx.dev/search?q=vue) |
-| `/~<username>` | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
-| `/org/<name>` | [`/org/nuxt`](https://npmx.dev/org/nuxt) |
+| `/search?q=<query>`           | [`/search?q=vue`](https://npmx.dev/search?q=vue)               |
+| `/~<username>`                | [`/~sindresorhus`](https://npmx.dev/~sindresorhus)             |
+| `/org/<name>`                 | [`/org/nuxt`](https://npmx.dev/org/nuxt)                       |
 
-## Tech Stack
+## Tech stack
 
 - [Nuxt 4](https://nuxt.com/)
 - [Nitro](https://nuxt.com/docs/guide/concepts/server-engine)
@@ -50,6 +50,8 @@ npmx.dev supports npm permalink patterns:
 
 ## Try it out locally
 
+I'd welcome contributions &ndash; please do feel free to poke around and improve things. Here's how you can get going locally.
+
 ### Setup
 
 ```bash
@@ -83,7 +85,7 @@ pnpm test:browser
 pnpm test:types
 ```
 
-### Local Connector (CLI)
+### Local connector (CLI)
 
 The `cli/` workspace contains a local connector that enables authenticated npm operations from the web UI. It runs on your machine and uses your existing npm credentials.
 
@@ -98,6 +100,14 @@ node cli/dist/cli.mjs
 
 The connector will check your npm authentication, generate a connection token, and listen for requests from npmx.dev.
 
+## Related projects
+
+- [JSR](https://jsr.io/) - The open-source package registry for modern JavaScript and TypeScript
+- [npm-userscript](https://github.com/bluwy/npm-userscript) - Browser userscript with various improvements and fixes for npmjs.com
+- [npm-alt](https://npm.willow.sh/) - An alternative npm package browser
+
+If you're building something cool, let me know! 🙏
+
 ## License
 
 Made with ❤️

app/app.vue

@@ -5,7 +5,7 @@ const router = useRouter()
 const isHomepage = computed(() => route.path === '/')
 
 useHead({
-  titleTemplate: (titleChunk) => {
+  titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
   },
 })
@@ -14,11 +14,7 @@ useHead({
 function handleGlobalKeydown(e: KeyboardEvent) {
   // Ignore if user is typing in an input, textarea, or contenteditable
   const target = e.target as HTMLElement
-  if (
-    target.tagName === 'INPUT'
-    || target.tagName === 'TEXTAREA'
-    || target.isContentEditable
-  ) {
+  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
     return
   }
 
@@ -32,8 +28,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {
 
     if (searchInput) {
       searchInput.focus()
-    }
-    else {
+    } else {
       // Navigate to search page
       router.push('/search')
     }
@@ -51,17 +46,11 @@ onUnmounted(() => {
 
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
-    <a
-      href="#main-content"
-      class="skip-link font-mono"
-    >Skip to main content</a>
+    <a href="#main-content" class="skip-link font-mono">Skip to main content</a>
 
     <AppHeader :show-logo="!isHomepage" />
 
-    <div
-      id="main-content"
-      class="flex-1"
-    >
+    <div id="main-content" class="flex-1">
       <NuxtPage />
     </div>
 
@@ -71,7 +60,9 @@ onUnmounted(() => {
 
 <style>
 /* Base reset and defaults */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -94,7 +85,9 @@ a {
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: #404040;
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
 }
 
 a:hover {
@@ -190,12 +183,26 @@ button {
 }
 
 /* Visual styling based on original README heading level */
-.readme-content [data-level="1"] { font-size: 1.5rem; }
-.readme-content [data-level="2"] { font-size: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid #262626; }
-.readme-content [data-level="3"] { font-size: 1.125rem; }
-.readme-content [data-level="4"] { font-size: 1rem; }
-.readme-content [data-level="5"] { font-size: 0.925rem; }
-.readme-content [data-level="6"] { font-size: 0.875rem; }
+.readme-content [data-level='1'] {
+  font-size: 1.5rem;
+}
+.readme-content [data-level='2'] {
+  font-size: 1.25rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #262626;
+}
+.readme-content [data-level='3'] {
+  font-size: 1.125rem;
+}
+.readme-content [data-level='4'] {
+  font-size: 1rem;
+}
+.readme-content [data-level='5'] {
+  font-size: 0.925rem;
+}
+.readme-content [data-level='6'] {
+  font-size: 0.875rem;
+}
 
 .readme-content p {
   margin-bottom: 1rem;
@@ -310,52 +317,52 @@ button {
 }
 
 /* Note - blue */
-.readme-content blockquote[data-callout="note"] {
+.readme-content blockquote[data-callout='note'] {
   border-left-color: #3b82f6;
   background: rgba(59, 130, 246, 0.05);
 }
-.readme-content blockquote[data-callout="note"]::before {
-  content: "Note";
+.readme-content blockquote[data-callout='note']::before {
+  content: 'Note';
   color: #3b82f6;
 }
 
 /* Tip - green */
-.readme-content blockquote[data-callout="tip"] {
+.readme-content blockquote[data-callout='tip'] {
   border-left-color: #22c55e;
   background: rgba(34, 197, 94, 0.05);
 }
-.readme-content blockquote[data-callout="tip"]::before {
-  content: "Tip";
+.readme-content blockquote[data-callout='tip']::before {
+  content: 'Tip';
   color: #22c55e;
 }
 
 /* Important - purple */
-.readme-content blockquote[data-callout="important"] {
+.readme-content blockquote[data-callout='important'] {
   border-left-color: #a855f7;
   background: rgba(168, 85, 247, 0.05);
 }
-.readme-content blockquote[data-callout="important"]::before {
-  content: "Important";
+.readme-content blockquote[data-callout='important']::before {
+  content: 'Important';
   color: #a855f7;
 }
 
 /* Warning - yellow/orange */
-.readme-content blockquote[data-callout="warning"] {
+.readme-content blockquote[data-callout='warning'] {
   border-left-color: #eab308;
   background: rgba(234, 179, 8, 0.05);
 }
-.readme-content blockquote[data-callout="warning"]::before {
-  content: "Warning";
+.readme-content blockquote[data-callout='warning']::before {
+  content: 'Warning';
   color: #eab308;
 }
 
 /* Caution - red */
-.readme-content blockquote[data-callout="caution"] {
+.readme-content blockquote[data-callout='caution'] {
   border-left-color: #ef4444;
   background: rgba(239, 68, 68, 0.05);
 }
-.readme-content blockquote[data-callout="caution"]::before {
-  content: "Caution";
+.readme-content blockquote[data-callout='caution']::before {
+  content: 'Caution';
   color: #ef4444;
 }
 
@@ -424,15 +431,15 @@ p > span > code,
 }
 
 /* Safari search input fixes */
-input[type="search"] {
+input[type='search'] {
   -webkit-appearance: none;
   appearance: none;
 }
 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
   -webkit-appearance: none;
   appearance: none;
 }

app/components/AppFooter.vue

@@ -2,9 +2,7 @@
   <footer class="border-t border-border mt-auto">
     <div class="container py-8 flex flex-col gap-4 text-fg-subtle text-sm">
       <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
-        <p class="font-mono m-0">
-          a better browser for the npm registry
-        </p>
+        <p class="font-mono m-0">a better browser for the npm registry</p>
         <div class="flex items-center gap-6">
           <a
             href="https://github.com/danielroe/npmx.dev"
@@ -14,11 +12,7 @@
             source
           </a>
           <span class="text-border">|</span>
-          <a
-            href="https://roe.dev"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs"
-          >
+          <a href="https://roe.dev" rel="noopener noreferrer" class="link-subtle font-mono text-xs">
             @danielroe
           </a>
         </div>