Merge branch 'main' into fix/org

Author: Adebesin-Cell

.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/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 -->

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]

i18n/locales/nl-NL.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../schema.json",
+  "auth": {
+    "modal": {
+      "handle_placeholder": "oranje.npmx.dev"
+    }
+  }
+}