Merge branch 'main' into sb-recharging-page

Author: ghostdevv

.github/workflows/welcome-close.yml

@@ -16,7 +16,7 @@ jobs:
     name: 🎉 Welcome new contributor
     steps:
       - name: 🎉 Welcome new contributor
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
             const pr = context.payload.pull_request;

app/assets/main.css

@@ -287,6 +287,11 @@ html.light .shiki {
   }
 }
 
+/* Settings-based configuration for code ligatures. On by default. */
+:root[data-code-ligatures='false'] code {
+  font-variant-ligatures: none;
+}
+
 /* Inline code in package descriptions */
 p > span > code,
 .line-clamp-2 code {

app/components/Compare/FacetScatterChart.vue

@@ -16,8 +16,12 @@ const props = defineProps<{
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
+const { width } = useElementSize(rootEl)
 const { copy, copied } = useClipboard()
 
+const mobileBreakpointWidth = 640
+const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
+
 const { colors } = useCssVariables(
   [
     '--bg',
@@ -277,6 +281,13 @@ const highlightedAxis = shallowRef<AxisHighlight>(null)
 function toggleAxisHighlight(state: AxisHighlight) {
   highlightedAxis.value = state
 }
+
+const readyTeleport = shallowRef(false)
+
+onMounted(async () => {
+  await nextTick()
+  readyTeleport.value = true
+})
 </script>
 
 <template>
@@ -296,9 +307,7 @@ function toggleAxisHighlight(state: AxisHighlight) {
     </div>
 
     <div class="flex flex-col sm:flex-row gap-4 items-start">
-      <div
-        class="w-full sm:w-fit order-1 sm:order-2 flex flex-row sm:flex-col gap-2 sm:self-end sm:mb-17"
-      >
+      <div class="w-full sm:w-fit order-1 sm:order-2 flex flex-row sm:flex-col gap-2">
         <SelectField
           class="w-full"
           id="select-facet-scatter-x"
@@ -327,6 +336,22 @@ function toggleAxisHighlight(state: AxisHighlight) {
           @focusin="toggleAxisHighlight('y')"
           @focusout="toggleAxisHighlight(null)"
         />
+
+        <h3
+          id="scatter-chart-legend-packages"
+          :class="[
+            'mb-1 font-mono text-fg-subtle tracking-wide uppercase mt-4 text-2xs',
+            isMobile ? 'sr-only' : 'block',
+          ]"
+        >
+          {{ $t('compare.packages.section_packages') }}
+        </h3>
+
+        <div
+          id="compare-scatter-legend"
+          :role="isMobile ? undefined : 'group'"
+          :aria-labelledby="isMobile ? undefined : 'scatter-chart-legend-packages'"
+        ></div>
       </div>
 
       <ClientOnly>
@@ -346,32 +371,46 @@ function toggleAxisHighlight(state: AxisHighlight) {
             <!-- Custom legend -->
             <template #legend="{ legend }">
               <div
-                class="flex flex-row flex-wrap gap-x-6 justify-center gap-y-2 px-6 sm:px-10 text-xs"
+                id="compare-scatter-legend-inner"
+                :role="isMobile ? 'group' : undefined"
+                :aria-labelledby="isMobile ? 'scatter-chart-legend-packages' : undefined"
+              ></div>
+              <Teleport
+                v-if="readyTeleport"
+                :to="isMobile ? '#compare-scatter-legend-inner' : '#compare-scatter-legend'"
               >
-                <button
-                  v-for="datapoint in legend"
-                  :key="datapoint.name"
-                  :aria-pressed="datapoint.isSegregated"
-                  :aria-label="datapoint.name"
-                  type="button"
-                  class="flex gap-1 place-items-center"
-                  @click="datapoint.segregate()"
+                <ul
+                  :class="
+                    isMobile
+                      ? 'flex flex-row flex-wrap gap-x-6 justify-center gap-y-2 px-6 sm:px-10 text-xs'
+                      : 'text-sm leading-6'
+                  "
                 >
-                  <div class="h-3 w-3">
-                    <svg viewBox="0 0 2 2" class="w-full">
-                      <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
-                    </svg>
-                  </div>
-                  <span
-                    class="text-fg"
-                    :style="{
-                      textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                    }"
-                  >
-                    {{ datapoint.name }}
-                  </span>
-                </button>
-              </div>
+                  <li v-for="datapoint in legend" :key="datapoint.name">
+                    <button
+                      :aria-pressed="datapoint.isSegregated"
+                      :aria-label="datapoint.name"
+                      type="button"
+                      class="flex gap-1.5 place-items-center"
+                      @click="datapoint.segregate()"
+                    >
+                      <div class="h-3 w-3" aria-hidden="true">
+                        <svg viewBox="0 0 2 2" class="w-full">
+                          <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                        </svg>
+                      </div>
+                      <span
+                        class="text-fg"
+                        :style="{
+                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
+                        }"
+                      >
+                        {{ datapoint.name }}
+                      </span>
+                    </button>
+                  </li>
+                </ul>
+              </Teleport>
             </template>
 
             <!-- Custom svg content -->

app/composables/useSettings.ts

@@ -39,6 +39,8 @@ export interface AppSettings {
     autoOpenURL: boolean
   }
   codeContainerFull: boolean
+  /** Enable/disable ligatures in code */
+  codeLigatures: boolean
   sidebar: {
     collapsed: string[]
   }
@@ -65,6 +67,7 @@ const DEFAULT_SETTINGS: AppSettings = {
     autoOpenURL: false,
   },
   codeContainerFull: false,
+  codeLigatures: true,
   sidebar: {
     collapsed: [],
   },
@@ -253,3 +256,33 @@ export function useCodeContainer() {
     toggleCodeContainer,
   }
 }
+
+export const useCodeLigatures = createSharedComposable(function useCodeLigatures() {
+  const { settings } = useSettings()
+
+  const codeLigatures = computed(() => settings.value.codeLigatures)
+
+  if (import.meta.client) {
+    // Sync the data attribute on root to the setting
+    watch(
+      codeLigatures,
+      value => {
+        if (value) {
+          delete document.documentElement.dataset.codeLigatures
+        } else {
+          document.documentElement.dataset.codeLigatures = 'false'
+        }
+      },
+      { immediate: true },
+    )
+  }
+
+  function toggleCodeLigatures() {
+    settings.value.codeLigatures = !settings.value.codeLigatures
+  }
+
+  return {
+    codeLigatures,
+    toggleCodeLigatures,
+  }
+})

app/pages/compare.vue

@@ -75,11 +75,14 @@ function addNoDep() {
 // Get loading state for each column
 const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoading(i)))
 
-// FIXME(serhalp): canCompare only checks package count, not whether data has loaded.
-// Copy-markdown and view-switching commands appear as soon as one package loads, even if
-// other packages are still loading. The UI copy button has the same issue.
+// Makes sense to compare if there's 2 or more packages
 const canCompare = computed(() => packages.value.length >= 2)
 
+// Allow copying only after all data is loaded
+const canCopyTable = computed(
+  () => packagesData.value.length >= 1 && packagesData.value.every(data => data !== null),
+)
+
 const comparisonView = usePermalink<'table' | 'charts'>('view', 'table')
 const hasChartableFacets = computed(() => selectedFacets.value.some(facet => facet.chartable))
 
@@ -173,7 +176,7 @@ useCommandPaletteContextCommands(
       },
     ]
 
-    if (canCompare.value && packagesData.value && packagesData.value.some(p => p !== null)) {
+    if (canCompare.value && canCopyTable.value) {
       commands.push({
         id: 'compare-copy-markdown',
         group: 'actions',
@@ -335,7 +338,7 @@ useSeoMeta({
       <!-- Comparison grid -->
       <section v-if="canCompare" class="mt-10" aria-labelledby="comparison-heading">
         <CopyToClipboardButton
-          v-if="packagesData && packagesData.some(p => p !== null)"
+          v-if="canCopyTable"
           :copied="copied"
           :copy-text="$t('compare.packages.copy_as_markdown')"
           class="mb-4"

app/pages/settings.vue

@@ -5,6 +5,7 @@ const { locale: currentLocale, locales, setLocale: setNuxti18nLocale } = useI18n
 const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
+const { toggleCodeLigatures } = useCodeLigatures()
 
 // Escape to go back (but not when focused on form elements or modal is open)
 onKeyStroke(
@@ -143,6 +144,16 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
               :description="$t('settings.enable_graph_pulse_loop_description')"
               v-model="settings.enableGraphPulseLooping"
             />
+
+            <!-- Divider -->
+            <div class="border-t border-border my-4" />
+
+            <!-- Code ligatures toggle -->
+            <SettingsToggle
+              :label="$t('settings.enable_code_ligatures')"
+              :modelValue="settings.codeLigatures"
+              @update:modelValue="() => toggleCodeLigatures()"
+            />
           </div>
         </section>
 

app/utils/prehydrate.ts

@@ -66,5 +66,10 @@ export function initPreferencesOnPrehydrate() {
     if (settings.keyboardShortcuts === false) {
       document.documentElement.dataset.kbdShortcuts = 'false'
     }
+
+    // Code font ligatures (default: true)
+    if (settings.codeLigatures === false) {
+      document.documentElement.dataset.codeLigatures = 'false'
+    }
   })
 }

config/i18n.ts

@@ -81,6 +81,10 @@ export const countryLocaleVariants: Record<string, (LocaleObjectData & { country
       { country: true, code: 'pt-PT', name: 'Português (Portugal)' },
       { code: 'pt-BR', name: 'Português (Brasil)' },
     ],*/
+  nl: [
+    { country: true, code: 'nl-NL', name: 'Nederlands' },
+    // { country: true, code: 'nl-BE', name: 'Vlaams' },
+  ],
 }
 
 function createPluralRule(locale: string, mapping: Record<string, number>) {
@@ -218,11 +222,11 @@ const locales: (LocaleObjectData | (Omit<LocaleObjectData, 'code'> & { code: str
     file: 'ne-NP.json',
     name: 'नेपाली',
   },
-  /*{
-      code: 'nl-NL',
-      file: 'nl-NL.json',
-      name: 'Nederlands',
-    },*/
+  {
+    code: 'nl',
+    file: 'nl.json',
+    name: 'Nederlands',
+  },
   {
     code: 'es',
     file: 'es.json',

docs/content/2.guide/6.badges.md

@@ -28,6 +28,7 @@ npmx.dev offers many different SVG badges with stats about any package via its A
 - **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
 - **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
 - **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **likes**: Shows the total count of package likes. :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
 
 ## Examples
 

docs/shared/utils/badges.ts

@@ -16,6 +16,7 @@ export const BADGE_TYPES = Object.freeze([
   'maintainers',
   'deprecated',
   'name',
+  'likes',
 ] as const)
 
 export type BadgeType = (typeof BADGE_TYPES)[number]