chore: use oxlint + oxfmt

Author: danielroe

.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

@@ -31,14 +31,14 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 
 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
 

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>

app/components/AppHeader.vue

@@ -1,32 +1,29 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  showLogo?: boolean
-  showConnector?: boolean
-}>(), {
-  showLogo: true,
-  showConnector: true,
-})
+withDefaults(
+  defineProps<{
+    showLogo?: boolean
+    showConnector?: boolean
+  }>(),
+  {
+    showLogo: true,
+    showConnector: true,
+  },
+)
 </script>
 
 <template>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
-    <nav
-      aria-label="Main navigation"
-      class="container h-14 flex items-center justify-between"
-    >
+    <nav aria-label="Main navigation" class="container h-14 flex items-center justify-between">
       <NuxtLink
         v-if="showLogo"
         to="/"
         aria-label="npmx home"
         class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
       >
-        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em;">.</span>/</span>npmx
+        <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
       </NuxtLink>
       <!-- Spacer when logo is hidden -->
-      <span
-        v-else
-        class="w-1"
-      />
+      <span v-else class="w-1" />
 
       <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
         <li class="flex">
@@ -35,19 +32,16 @@ withDefaults(defineProps<{
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
           >
             search
-            <kbd class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded">/</kbd>
+            <kbd
+              class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+              >/</kbd
+            >
           </NuxtLink>
         </li>
-        <li
-          v-if="showConnector"
-          class="flex"
-        >
+        <li v-if="showConnector" class="flex">
           <ConnectorStatus />
         </li>
-        <li
-          v-else
-          class="flex"
-        >
+        <li v-else class="flex">
           <a
             href="https://github.com/danielroe/npmx.dev"
             rel="noopener noreferrer"

app/components/CodeDirectoryListing.vue

@@ -47,18 +47,12 @@ function formatBytes(bytes: number): string {
 <template>
   <div class="directory-listing">
     <!-- Empty state -->
-    <div
-      v-if="currentContents.length === 0"
-      class="py-20 text-center text-fg-muted"
-    >
+    <div v-if="currentContents.length === 0" class="py-20 text-center text-fg-muted">
       <p>No files in this directory</p>
     </div>
 
     <!-- File list -->
-    <table
-      v-else
-      class="w-full"
-    >
+    <table v-else class="w-full">
       <thead class="sr-only">
         <tr>
           <th>Name</th>
@@ -99,11 +93,7 @@ function formatBytes(bytes: number): string {
                 v-if="node.type === 'directory'"
                 class="i-carbon-folder w-4 h-4 text-yellow-600"
               />
-              <span
-                v-else
-                class="w-4 h-4"
-                :class="getFileIcon(node.name)"
-              />
+              <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
               <span>{{ node.name }}</span>
             </NuxtLink>
           </td>