diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index cac14f711c..1cbf9719b8 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -36,7 +36,7 @@ jobs: run: vp install -g pnpm - name: đŸ§Ē Run Chromatic Visual and Accessibility Tests - uses: chromaui/action@f191a0224b10e1a38b2091cefb7b7a2337009116 # v16.0.0 + uses: chromaui/action@8a2b82547aef5a3efc8ec3c7905f4ab09a76ed0b # v16.1.0 env: CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }} CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }} diff --git a/app/components/About/GovernanceList.vue b/app/components/About/GovernanceList.vue new file mode 100644 index 0000000000..aa89b6559a --- /dev/null +++ b/app/components/About/GovernanceList.vue @@ -0,0 +1,61 @@ + + + diff --git a/app/components/About/LogoList.vue b/app/components/About/LogoList.vue index 8e9bd819fb..03945b705c 100644 --- a/app/components/About/LogoList.vue +++ b/app/components/About/LogoList.vue @@ -35,7 +35,7 @@ const props = defineProps<{ :href="item.url" target="_blank" rel="noopener noreferrer" - class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border transition-colors py-1 px-3" + class="relative flex items-center justify-center h-16 rounded-md bg-bg-muted hover:bg-bg-subtle border border-border hover:border-border-hover transition-colors py-1 px-3" :style="{ paddingBlock: item.normalisingIndent }" :aria-label="item.name" > @@ -65,7 +65,7 @@ const props = defineProps<{ :href="groupItem.url" target="_blank" rel="noopener noreferrer" - class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border transition-colors p-1.5" + class="relative flex items-center justify-center h-full aspect-square rounded-md hover:bg-bg-subtle border border-transparent hover:border-border-hover transition-colors p-1.5" :style="{ paddingBlock: groupItem.normalisingIndent }" :aria-label="groupItem.name" > diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue index 325839c49c..191d7d37df 100644 --- a/app/components/Compare/ComparisonGrid.vue +++ b/app/components/Compare/ComparisonGrid.vue @@ -49,13 +49,13 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
- + {{ col.name }} - + @{{ col.version }} diff --git a/app/components/Landing/IntroHeader.vue b/app/components/Landing/IntroHeader.vue index ce2f7919a5..00a450c2c5 100644 --- a/app/components/Landing/IntroHeader.vue +++ b/app/components/Landing/IntroHeader.vue @@ -55,26 +55,17 @@ onPrehydrate(el => { } const currentActiveNoodles = activeNoodles.filter(noodle => { - const todayDate = new Date() - const todayDateRaw = new Intl.DateTimeFormat('en-US', { - timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone, + if (!noodle.date) return false + + const today = new Intl.DateTimeFormat('en-CA', { + timeZone: noodle.timezone !== 'auto' ? noodle.timezone : undefined, + year: 'numeric', month: '2-digit', day: '2-digit', - year: 'numeric', - }).format(todayDate) - - const noodleDateFrom = new Date(noodle.date!) - if (!noodle.dateTo) { - const noodleDateFromRaw = new Intl.DateTimeFormat('en-US', { - timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone, - month: '2-digit', - day: '2-digit', - year: 'numeric', - }).format(noodleDateFrom) - return todayDateRaw === noodleDateFromRaw - } - const noodleDateTo = new Date(noodle.dateTo!) - return todayDate >= noodleDateFrom && todayDate <= noodleDateTo + }).format(new Date()) + + if (!noodle.dateTo) return today === noodle.date + return today >= noodle.date && today <= noodle.dateTo }) if (!currentActiveNoodles.length) return diff --git a/app/components/Noodle/Pride1/Logo.vue b/app/components/Noodle/Pride1/Logo.vue new file mode 100644 index 0000000000..88b4eb5296 --- /dev/null +++ b/app/components/Noodle/Pride1/Logo.vue @@ -0,0 +1,13 @@ + diff --git a/app/components/Noodle/index.ts b/app/components/Noodle/index.ts index e057d9af39..dcee3df540 100644 --- a/app/components/Noodle/index.ts +++ b/app/components/Noodle/index.ts @@ -1,15 +1,15 @@ import NoodleKawaiiLogo from './Kawaii/Logo.vue' -import NoodleNodejsLogo from './Nodejs/Logo.vue' +import NoodlePride1Logo from './Pride1/Logo.vue' export type Noodle = { // Unique identifier for the noodle key: string // Timezone for the noodle (default is auto, i.e. user's timezone) timezone?: string - // Date for the noodle - date?: string - // `Date to` for the noodle - dateTo?: string + // Date for the noodle (YYYY-MM-DD) + date?: `${number}-${number}-${number}` + // `Date to` for the noodle (YYYY-MM-DD) + dateTo?: `${number}-${number}-${number}` // Logo for the noodle - could be any component. Relative parent - intro section logo: Component // Show npmx tagline or not (default is true) @@ -28,9 +28,10 @@ export const PERMANENT_NOODLES: Noodle[] = [ // Active noodles - shown based on date and timezone export const ACTIVE_NOODLES: Noodle[] = [ { - key: 'nodejs', - logo: NoodleNodejsLogo, - date: '2026-05-27', + key: 'pride-1', + logo: NoodlePride1Logo, + date: '2026-06-01', + dateTo: '2026-06-30', timezone: 'auto', }, ] diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue index f7b06fb26a..6550a4ceef 100644 --- a/app/components/Package/Card.vue +++ b/app/components/Package/Card.vue @@ -74,84 +74,52 @@ const numberFormatter = useNumberFormatter() /> -
-
-

- -

-
-
-
-
{{ $t('package.card.publisher') }}
-
{{ result.package.publisher.username }}
-
-
-
{{ $t('package.card.published') }}
-
- -
-
-
-
{{ $t('package.card.license') }}
-
{{ result.package.license }}
-
-
-
- -
-
-
{{ $t('package.card.weekly_downloads') }}
-
-
-
-
-
- -
-
- +

+ +

+
+ +
+
+
{{ $t('package.card.version') }}
+
v{{ result.package.version }} - -
- -
+
+
+
+
{{ $t('package.card.published') }}
+
+ +
-
+
+
{{ $t('package.card.license') }}
+
{{ result.package.license }}
+
+
+
{{ $t('package.card.weekly_downloads') }}
+
+
-
+
    (() => { return { theme: isDarkMode.value ? 'dark' : '', + downsample: { + threshold: 5000, + }, line: { useGradient: false, radius: 2, @@ -711,7 +714,7 @@ const indexSelection = computed(() => { class="pointer-events-none" > { class="svg-element-transition" /> { class="pointer-events-none" > { class="svg-element-transition" /> (() => { return { theme: isDarkMode.value ? 'dark' : ('' as VueDataUiTheme), + downsample: { + threshold: 5000, + }, a11y: { translations: { keyboardNavigation: $t( diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue index edc1fad9bb..9e76ff93b4 100644 --- a/app/components/Package/Versions.vue +++ b/app/components/Package/Versions.vue @@ -1,6 +1,7 @@ @@ -179,60 +174,26 @@ const roleLabels = computed( {{ $t('about.contributors.description') }}

    - + +
    +

    + {{ $t('about.team.core') }} +

    + + +
    + +
    -

    - {{ $t('about.team.governance') }} +

    + {{ $t('about.team.maintainers') }}

    -
      -
    • - -
      -
      - - @{{ person.login }} - -
      -
      - {{ roleLabels[person.role] ?? person.role }} -
      - - {{ $t('about.team.sponsor') }} - -
      -
    • -
    +
    @@ -263,12 +224,12 @@ const roleLabels = computed(
-