Merge branch 'main' into jg/lazy-docs

Author: 43081j

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,28 @@
+name: "\U0001F41E Bug report"
+description: Create a report to help us improve npmx
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please carefully read the contribution docs before creating a bug report
+        👉 https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: If applicable, add any other context about the problem here
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        Optional if you have reproduction steps. Please try not to insert an image but copy paste the log text.
+      render: shell-script

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: 📚 npmx documentation
+    url: https://docs.npmx.dev/
+    about: Check the documentation for usage of npmx

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,36 @@
+name: '🚀 Feature request'
+description: Suggest a feature that will improve npmx
+labels: ['pending triage']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for taking the time to fill out this feature request!
+
+          Please carefully read the contribution docs before suggesting a new feature
+          👉 https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Describe the feature
+      description: A clear and concise description of what you think would be a helpful addition to npmx, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
+      placeholder: Feature description
+    validations:
+      required: true
+  - type: checkboxes
+    id: additional-info
+    attributes:
+      label: Additional information
+      description: Additional information that helps us decide how to proceed.
+      options:
+        - label: Would you be willing to help implement this feature?
+  - type: checkboxes
+    id: required-info
+    attributes:
+      label: Final checks
+      description: Before submitting, please make sure you do the following
+      options:
+        - label: Read the [contribution guide](https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md).
+          required: true
+        - label: Check existing [issues](https://github.com/npmx-dev/npmx.dev/issues).
+          required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,28 @@
+### 🔗 Linked issue
+
+<!-- Please ensure there is an open issue and mention its number. For example, "resolves #123" -->
+
+### 🧭 Context
+
+<!-- Brief background and why this change is needed -->
+
+<!-- High-level summary of what changed -->
+
+### 📚 Description
+
+<!-- Describe your changes in detail. Why is this change required? What problem does it solve? -->
+
+<!-- If you used AI tools to help with this contribution, please ensure the PR description and code reflect your own understanding.
+     Write in your own voice rather than copying AI-generated text. -->
+
+<!----------------------------------------------------------------------
+Before creating the pull request, please make sure you do the following:
+
+- Check that there isn't already a PR that solves the problem the same way. If you find a duplicate, please help us reviewing it.
+- Ensure that PR title follows conventional commits (https://www.conventionalcommits.org)
+- Update the corresponding documentation if needed.
+- Include relevant tests that fail without this PR but pass with it.
+- Add any additional context, tradeoffs, follow-ups, or things reviewers should be aware of.
+
+Thank you for contributing to npmx!
+----------------------------------------------------------------------->

app/components/Button/Base.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { IconClass } from '~/types'
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
@@ -8,7 +10,7 @@ const props = withDefaults(
     ariaKeyshortcuts?: string
     block?: boolean
 
-    classicon?: string
+    classicon?: IconClass
   }>(),
   {
     type: 'button',

app/components/Link/Base.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
+import type { IconClass } from '~/types'
 
 const props = withDefaults(
   defineProps<
@@ -26,7 +27,7 @@ const props = withDefaults(
        */
       rel?: never
 
-      classicon?: string
+      classicon?: IconClass
 
       to?: NuxtLinkProps['to']
 

app/components/Package/TrendsChart.vue

@@ -3,7 +3,7 @@ import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
-import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
+import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import type { RepoRef } from '#shared/utils/git-providers'
@@ -201,59 +201,41 @@ function formatXyDataset(
   dataset: EvolutionData,
   seriesName: string,
 ): { dataset: VueUiXyDatasetItem[] | null; dates: number[] } {
+  const lightColor = isDarkMode.value ? lightenOklch(accent.value, 0.618) : undefined
+
+  // Subtle path gradient applied in dark mode only
+  const temperatureColors = lightColor ? [lightColor, accent.value] : undefined
+
+  const datasetItem: VueUiXyDatasetItem = {
+    name: seriesName,
+    type: 'line',
+    series: dataset.map(d => d.value),
+    color: accent.value,
+    temperatureColors,
+    useArea: true,
+  }
+
   if (selectedGranularity === 'weekly' && isWeeklyDataset(dataset)) {
     return {
-      dataset: [
-        {
-          name: seriesName,
-          type: 'line',
-          series: dataset.map(d => d.value),
-          color: accent.value,
-          useArea: true,
-        },
-      ],
+      dataset: [datasetItem],
       dates: dataset.map(d => d.timestampEnd),
     }
   }
   if (selectedGranularity === 'daily' && isDailyDataset(dataset)) {
     return {
-      dataset: [
-        {
-          name: seriesName,
-          type: 'line',
-          series: dataset.map(d => d.value),
-          color: accent.value,
-          useArea: true,
-        },
-      ],
+      dataset: [datasetItem],
       dates: dataset.map(d => d.timestamp),
     }
   }
   if (selectedGranularity === 'monthly' && isMonthlyDataset(dataset)) {
     return {
-      dataset: [
-        {
-          name: seriesName,
-          type: 'line',
-          series: dataset.map(d => d.value),
-          color: accent.value,
-          useArea: true,
-        },
-      ],
+      dataset: [datasetItem],
       dates: dataset.map(d => d.timestamp),
     }
   }
   if (selectedGranularity === 'yearly' && isYearlyDataset(dataset)) {
     return {
-      dataset: [
-        {
-          name: seriesName,
-          type: 'line',
-          series: dataset.map(d => d.value),
-          color: accent.value,
-          useArea: true,
-        },
-      ],
+      dataset: [datasetItem],
       dates: dataset.map(d => d.timestamp),
     }
   }
@@ -1529,7 +1511,7 @@ const chartConfig = computed(() => {
         backdropFilter: false,
         backgroundColor: 'transparent',
         customFormat: ({ datapoint }: { datapoint: Record<string, any> | any[] }) => {
-          if (!datapoint) return ''
+          if (!datapoint || pending.value) return ''
 
           const items = Array.isArray(datapoint) ? datapoint : [datapoint[0]]
           const hasMultipleItems = items.length > 1

app/components/Package/VersionDistribution.vue

@@ -8,7 +8,7 @@ import type {
 } from 'vue-data-ui'
 import { useElementSize } from '@vueuse/core'
 import { useCssVariables } from '~/composables/useColors'
-import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch } from '~/utils/colors'
+import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenHex } from '~/utils/colors'
 import {
   drawSvgPrintLegend,
   drawNpmxLogoAndTaglineWatermark,
@@ -212,7 +212,7 @@ const chartConfig = computed(() => {
         backgroundColor: 'transparent',
         customFormat: (params: TooltipParams) => {
           const { datapoint, absoluteIndex, bars } = params
-          if (!datapoint) return ''
+          if (!datapoint || pending.value) return ''
 
           // Use absoluteIndex to get the correct version from chartDataset
           const index = Number(absoluteIndex)
@@ -496,11 +496,12 @@ const endDate = computed(() => {
               />
             </template>
 
-            <!-- Subtle gradient applied for area charts -->
-            <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
-              <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
-                <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
-                <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+            <!-- Custom bar gradient based on the series color -->
+            <template #bar-gradient="{ series, positiveId }">
+              <linearGradient :id="positiveId" x1="0" x2="0" y1="0" y2="1">
+                <!-- vue-data-ui exposes hex-normalized colors -->
+                <stop offset="0%" :stop-color="lightenHex(series.color, 0.618)" />
+                <stop offset="100%" :stop-color="series.color" stop-opacity="0.618" />
               </linearGradient>
             </template>
 

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,14 +231,14 @@ 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,
           easing: 'ease-in-out',
           trail: {
             show: true,
-            length: 20,
+            length: 30,
             opacity: 0.75,
           },
         },
@@ -302,6 +309,16 @@ const config = computed(() => {
               </div>
             </template>
           </ClientOnly>
+
+          <div v-if="hasWeeklyDownloads" class="hidden motion-safe:flex justify-end">
+            <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/components/Readme.vue

@@ -154,6 +154,7 @@ function handleClick(event: MouseEvent) {
   /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
   content: '__';
   @apply inline i-lucide:link rtl-flip ms-1 opacity-0;
+  font-size: 0.75em;
 }
 
 .readme :deep(a[href^='#']:hover::after) {