Merge branch 'main' into fix/org

Author: Adebesin-Cell

README.md

@@ -159,6 +159,7 @@ We welcome contributions – please do feel free to explore the project and
 - [npmx-weekly](https://npmx-weekly.trueberryless.org/) – A weekly newsletter for the npmx ecosystem. Add your own content via suggestions in the weekly PR on [GitHub](https://github.com/trueberryless-org/npmx-weekly/pulls?q=is%3Aopen+is%3Apr+label%3A%22%F0%9F%95%94+weekly+post%22).
 - [npmx-digest](https://npmx-digest.trueberryless.org/) – An automated news aggregation website that summarizes npmx activity from GitHub and Bluesky every 8 hours.
 - [npmx-redirect](https://github.com/iaverages/npmx-redirect) – Browser extension that automatically redirects npmjs.com URLs to npmx.dev.
+- [npmx-badge](https://npmx-badge.vercel.app/) – A playground to help you create custom badges quickly.
 
 If you're building something cool, let us know! 🙏
 

app/components/Package/SelectionView.vue

@@ -3,8 +3,7 @@ defineProps<{
   viewMode?: ViewMode
 }>()
 
-const { selectedPackages, clearSelectedPackages, selectedPackagesParam, closeSelectionView } =
-  usePackageSelection()
+const { selectedPackages, clearSelectedPackages, selectedPackagesParam } = usePackageSelection()
 
 const { data, pending } = useAsyncData(
   async () => {
@@ -25,16 +24,7 @@ const { data, pending } = useAsyncData(
 
 <template>
   <section>
-    <header class="mb-6 flex items-center justify-between">
-      <button
-        type="button"
-        class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="closeSelectionView"
-        :aria-label="$t('nav.back')"
-      >
-        <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-        <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
-      </button>
+    <header class="mb-6 flex items-center justify-end">
       <div class="flex items-center gap-2">
         <ButtonBase variant="secondary" @click="clearSelectedPackages">
           {{ $t('filters.clear_all') }}

app/components/Package/WeeklyDownloadStats.vue

@@ -208,7 +208,6 @@ const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-const isLoop = shallowRef(false)
 const showPulse = shallowRef(true)
 const keyboardShortcuts = useKeyboardShortcuts()
 
@@ -307,7 +306,7 @@ function layEgg() {
   showPulse.value = false
   nextTick(() => {
     showPulse.value = true
-    isLoop.value = !isLoop.value
+    settings.value.enableGraphPulseLooping = !settings.value.enableGraphPulseLooping
     playEggPulse()
   })
 }
@@ -356,7 +355,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         color: colors.value.borderHover,
         pulse: {
           show: showPulse.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
-          loop: isLoop.value,
+          loop: settings.value.enableGraphPulseLooping,
           radius: 1.5,
           color: pulseColor.value!,
           easing: 'ease-in-out',

app/composables/useSettings.ts

@@ -23,6 +23,8 @@ export interface AppSettings {
   preferredBackgroundTheme: BackgroundThemeId | null
   /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
   hidePlatformPackages: boolean
+  /** Enable weekly download graph pulse looping animation */
+  enableGraphPulseLooping: boolean
   /** User-selected locale */
   selectedLocale: LocaleObject['code'] | null
   /** Search provider for package search */
@@ -52,6 +54,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   includeTypesInInstall: true,
   accentColorId: null,
   hidePlatformPackages: true,
+  enableGraphPulseLooping: false,
   selectedLocale: null,
   preferredBackgroundTheme: null,
   searchProvider: import.meta.test ? 'npm' : 'algolia',

app/pages/settings.vue

@@ -142,6 +142,16 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
               :description="$t('settings.hide_platform_packages_description')"
               v-model="settings.hidePlatformPackages"
             />
+
+            <!-- Divider -->
+            <div class="border-t border-border my-4" />
+
+            <!-- Enable weekly download graph pulse looping animation -->
+            <SettingsToggle
+              :label="$t('settings.enable_graph_pulse_loop')"
+              :description="$t('settings.enable_graph_pulse_loop_description')"
+              v-model="settings.enableGraphPulseLooping"
+            />
           </div>
         </section>
 

i18n/locales/en.json

@@ -138,6 +138,8 @@
     "include_types_description": "Add {'@'}types package to install commands for untyped packages",
     "hide_platform_packages": "Hide platform-specific packages in search",
     "hide_platform_packages_description": "Hide native binary packages like {'@'}esbuild/linux-x64 from results",
+    "enable_graph_pulse_loop": "Enable looping of pulse effect on mini graph",
+    "enable_graph_pulse_loop_description": "Activate a continuous pulse animation on the weekly download graph. This animation may be distracting for some users.",
     "theme": "Theme",
     "theme_light": "Light",
     "theme_dark": "Dark",