Merge branch 'main' into feat/org-packages-fancy

Author: serhalp

.github/workflows/autofix.yml

@@ -30,6 +30,9 @@ jobs:
       - name: 📦 Install browsers
         run: pnpm playwright install
 
+      - name: 🌍 Update lunaria data
+        run: pnpm build:lunaria
+
       - name: 🔠 Fix lint errors
         run: pnpm lint:fix
 

.github/workflows/ci.yml

@@ -98,3 +98,20 @@ jobs:
         run: ./scripts/lighthouse-a11y.sh
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+  knip:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      - name: 🔍 Check for unused code
+        run: pnpm knip:production

README.md

@@ -159,3 +159,13 @@ If you're building something cool, let us know! 🙏
 Made with ❤️
 
 Published under [MIT License](./LICENSE).
+
+## Star History
+
+<a href="https://www.star-history.com/#npmx-dev/npmx.dev&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=npmx-dev/npmx.dev&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=npmx-dev/npmx.dev&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=npmx-dev/npmx.dev&type=date&legend=top-left" />
+ </picture>
+</a>

app/app.vue

@@ -50,7 +50,7 @@ if (import.meta.client) {
 
 <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">{{ $t('common.skip_link') }}</a>
 
     <AppHeader :show-logo="!isHomepage" />
 

app/components/AccentColorPicker.vue

@@ -5,7 +5,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" aria-label="Accent colors" class="flex items-center gap-4">
+  <div role="listbox" :aria-label="$t('settings.accent_colors')" class="flex items-center gap-4">
     <button
       v-for="color in accentColors"
       :key="color.id"
@@ -19,7 +19,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
     />
     <button
       type="button"
-      aria-label="Clear accent color"
+      :aria-label="$t('settings.clear_accent')"
       class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
       @click="setAccentColor(null)"
     >

app/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="border-t border-border mt-auto" aria-label="Site footer">
+  <footer class="border-t border-border mt-auto" :aria-label="$t('footer.site_footer')">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
       <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
         <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -22,13 +24,17 @@ const showSearchBar = computed(() => {
   return route.name !== 'search' && route.name !== 'index'
 })
 
-async function handleSearchInput() {
+const debouncedNavigate = debounce(async () => {
   const query = searchQuery.value.trim()
   await router.push({
     name: 'search',
     query: query ? { q: query } : undefined,
   })
   searchQuery.value = ''
+}, 100)
+
+async function handleSearchInput() {
+  debouncedNavigate()
 }
 
 onKeyStroke(',', e => {
@@ -45,10 +51,10 @@ onKeyStroke(',', e => {
 
 <template>
   <header
-    aria-label="Site header"
+    :aria-label="$t('header.site_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">
+    <nav :aria-label="$t('nav.main_navigation')" class="container h-14 flex items-center">
       <!-- Left: Logo -->
       <div class="flex-shrink-0">
         <NuxtLink
@@ -94,7 +100,6 @@ onKeyStroke(',', e => {
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
                   class="w-full bg-bg-subtle border border-border rounded-md pl-7 pr-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                  autocomplete="off"
                   @input="handleSearchInput"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"

app/components/ChartModal.vue

@@ -29,7 +29,7 @@ function handleKeydown(event: KeyboardEvent) {
         <button
           type="button"
           class="absolute inset-0 bg-black/60 cursor-default"
-          aria-label="Close modal"
+          :aria-label="$t('common.close_modal')"
           @click="open = false"
         />
 
@@ -47,7 +47,7 @@ function handleKeydown(event: KeyboardEvent) {
               <button
                 type="button"
                 class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
-                aria-label="Close"
+                :aria-label="$t('common.close')"
                 @click="open = false"
               >
                 <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />

app/components/CodeMobileTreeDrawer.vue

@@ -18,19 +18,9 @@ watch(
   },
 )
 
+const isLocked = useScrollLock(document)
 // Prevent body scroll when drawer is open
-watch(isOpen, open => {
-  if (open) {
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = ''
-  }
-})
-
-// Cleanup on unmount
-onUnmounted(() => {
-  document.body.style.overflow = ''
-})
+watch(isOpen, open => (isLocked.value = open))
 </script>
 
 <template>

app/components/ConnectorModal.vue

@@ -159,7 +159,7 @@ watch(open, isOpen => {
                     name="connector-token"
                     :placeholder="$t('connector.modal.token_placeholder')"
                     v-bind="noCorrect"
-                    class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                    class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                   />
                 </div>
 
@@ -183,7 +183,7 @@ watch(open, isOpen => {
                       name="connector-port"
                       inputmode="numeric"
                       autocomplete="off"
-                      class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                      class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                     />
                   </div>
                 </details>