Merge branch 'main' into userquin/feat-add-contributors-popup-card

# Conflicts:
#	app/components/Link/Base.vue

Author: userquin

app/components/Compare/PackageSelector.vue

@@ -307,7 +307,7 @@ function handleFocus() {
               v-if="result.description"
               class="text-xs text-fg-muted truncate mt-0.5 w-full block"
             >
-              {{ result.description }}
+              {{ decodeHtmlEntities(result.description) }}
             </span>
           </ButtonBase>
         </div>

app/components/Header/SearchBox.vue

@@ -16,7 +16,7 @@ const showSearchBar = computed(() => {
   return route.name !== 'index'
 })
 
-const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
+const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch('header')
 
 function handleSubmit() {
   flushUpdateUrlQuery()

app/components/Link/Base.vue

@@ -3,48 +3,46 @@ import type { NuxtLinkProps } from '#app'
 import type { IconClass } from '~/types'
 
 const props = withDefaults(
-  defineProps<
-    {
-      /** Disabled links will be displayed as plain text */
-      disabled?: boolean
-      /**
-       * `type` should never be used, because this will always be a link.
-       * */
-      type?: never
-      variant?: 'button-primary' | 'button-secondary' | 'link'
-      size?: 'small' | 'medium'
-      block?: boolean
+  defineProps<{
+    /** Disabled links will be displayed as plain text */
+    disabled?: boolean
+    /**
+     * `type` should never be used, because this will always be a link.
+     * */
+    type?: never
+    variant?: 'button-primary' | 'button-secondary' | 'link'
+    size?: 'small' | 'medium'
+    block?: boolean
 
-      ariaKeyshortcuts?: string
+    ariaKeyshortcuts?: string
 
-      /**
-       * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
-       */
-      target?: never
+    /**
+     * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
+     */
+    target?: never
 
-      /**
-       * Don't use this directly. This will automatically be set for external links passed via `to`.
-       */
-      rel?: never
+    /**
+     * Don't use this directly. This will automatically be set for external links passed via `to`.
+     */
+    rel?: never
 
-      classicon?: IconClass
+    classicon?: IconClass
 
-      to?: NuxtLinkProps['to']
+    to?: NuxtLinkProps['to']
 
-      /** always use `to` instead of `href` */
-      href?: never
+    /** always use `to` instead of `href` */
+    href?: never
 
-      /** should only be used for links where the context makes it very clear they are clickable. Don't just use this, because you don't like underlines. */
-      noUnderline?: boolean
+    /** should only be used for links where the context makes it very clear they are clickable. Don't just use this, because you don't like underlines. */
+    noUnderline?: boolean
 
-      /**
-       * should external link icon be displayed?.
-       *
-       * @default false
-       */
-      noExternalIcon?: boolean
-    } & NuxtLinkProps
-  >(),
+    /**
+     * should external link icon be displayed?.
+     *
+     * @default false
+     */
+    noExternalIcon?: boolean
+  }>(),
   { variant: 'link', size: 'medium', noUnderline: false, noExternalIcon: false },
 )
 

app/components/Package/TableRow.vue

@@ -44,7 +44,7 @@ const allMaintainersText = computed(() => {
 
 <template>
   <tr
-    class="group relative border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
+    class="group relative transform scale-100 border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
     tabindex="0"
     :data-result-index="index"
   >
@@ -69,7 +69,7 @@ const allMaintainersText = computed(() => {
       v-if="isColumnVisible('description')"
       class="py-2 px-3 text-sm text-fg-muted max-w-xs truncate"
     >
-      {{ pkg.description || '-' }}
+      {{ decodeHtmlEntities(pkg.description || '-') }}
     </td>
 
     <!-- Downloads -->

app/components/Package/Versions.vue

@@ -486,7 +486,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
     <div class="space-y-0.5 min-w-0">
       <!-- Semver range filter -->
       <div class="px-1 pb-1">
-        <div class="flex items-center gap-1.5">
+        <div class="flex items-center gap-1.5 py-1">
           <InputBase
             v-model="semverFilter"
             type="text"

app/components/Package/WeeklyDownloadStats.vue

@@ -13,6 +13,7 @@ const props = defineProps<{
 
 const router = useRouter()
 const route = useRoute()
+const { settings } = useSettings()
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
@@ -87,6 +88,12 @@ const { colors } = useCssVariables(
   },
 )
 
+function toggleSparklineAnimation() {
+  settings.value.sidebar.animateSparkline = !settings.value.sidebar.animateSparkline
+}
+
+const hasSparklineAnimation = computed(() => settings.value.sidebar.animateSparkline)
+
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
@@ -224,7 +231,7 @@ const config = computed(() => {
       line: {
         color: colors.value.borderHover,
         pulse: {
-          show: true, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
+          show: hasSparklineAnimation.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
           loop: true, // runs only once if false
           radius: 1.5,
           color: pulseColor.value,
@@ -302,6 +309,16 @@ const config = computed(() => {
               </div>
             </template>
           </ClientOnly>
+
+          <div v-if="hasWeeklyDownloads" class="hidden motion-safe:flex justify-end p-1">
+            <ButtonBase size="small" @click="toggleSparklineAnimation">
+              {{
+                hasSparklineAnimation
+                  ? $t('package.trends.pause_animation')
+                  : $t('package.trends.play_animation')
+              }}
+            </ButtonBase>
+          </div>
         </template>
         <p v-else class="py-2 text-sm font-mono text-fg-subtle">
           {{ $t('package.trends.no_data') }}

app/composables/useGlobalSearch.ts

@@ -4,7 +4,7 @@ import { debounce } from 'perfect-debounce'
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-export function useGlobalSearch() {
+export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { searchProvider } = useSearchProvider()
   const searchProviderValue = computed(() => {
     const p = normalizeSearchParam(route.query.p)
@@ -32,7 +32,7 @@ export function useGlobalSearch() {
   const updateUrlQueryImpl = (value: string, provider: 'npm' | 'algolia') => {
     const isSameQuery = route.query.q === value && route.query.p === provider
     // Don't navigate away from pages that use ?q for local filtering
-    if (pagesWithLocalFilter.has(route.name as string) || isSameQuery) {
+    if ((pagesWithLocalFilter.has(route.name as string) && place === 'content') || isSameQuery) {
       return
     }
 

app/composables/useSettings.ts

@@ -36,6 +36,7 @@ export interface AppSettings {
   }
   sidebar: {
     collapsed: string[]
+    animateSparkline: boolean
   }
 }
 
@@ -52,6 +53,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   },
   sidebar: {
     collapsed: [],
+    animateSparkline: true,
   },
 }
 

app/pages/index.vue

@@ -109,7 +109,7 @@ defineOgImageComponent('Default', {
 
       <nav
         :aria-label="$t('nav.popular_packages')"
-        class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both"
+        class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both max-w-xl mx-auto"
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -13,6 +13,7 @@ definePageMeta({
     '/package/code/:packageName/v/:version/:filePath(.*)?',
     // '/code/@:org?/:packageName/v/:version/:filePath(.*)?',
   ],
+  scrollMargin: 160,
 })
 
 const route = useRoute('code')