Merge remote-tracking branch 'origin/main' into vt/commands

Author: danielroe

README.md

@@ -21,7 +21,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 ## Shortcuts
 
 > [!IMPORTANT]  
-> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npm.dev). If you know others who would be interested, please invite them too!
+> We're keeping the website, repository, and our discord community low-profile until the browser is polished enough. We'll do a formal announcement at that point. Please avoid sharing the website or the invite link to discord on social media directly. The repo is public, so people who care about the project can easily find it and join us. Anyone who wants to help is more than welcome to [join the community](https://chat.npmx.dev). If you know others who would be interested, please invite them too!
 
 - [chat.npmx.dev](https://chat.npmx.dev) - Discord Server
 - [social.npmx.dev](https://social.npmx.dev) - Bluesky Profile

app/components/ChartModal.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
 
+function close() {
+  open.value = false
+}
+
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape') {
-    open.value = false
+    close()
   }
 }
 </script>
@@ -53,6 +57,8 @@ function handleKeydown(event: KeyboardEvent) {
               <slot />
             </div>
           </div>
+
+          <slot name="after" v-bind="{ close }" />
         </div>
       </div>
     </Transition>

app/components/ClaimPackageModal.vue

@@ -370,7 +370,7 @@ const connectorModalOpen = shallowRef(false)
                     >
                       {{ $t('claim.modal.preview_json') }}
                     </summary>
-                    <pre class="p-3 text-xs font-mono text-fg-muted bg-[#0d0d0d] overflow-x-auto">{{
+                    <pre class="p-3 text-xs font-mono text-fg-muted bg-bg-muted overflow-x-auto">{{
                       JSON.stringify(previewPackageJson, null, 2)
                     }}</pre>
                   </details>

app/components/ConnectorModal.vue

@@ -121,10 +121,10 @@ watch(open, isOpen => {
               </p>
 
               <div
-                class="flex items-center p-3 bg-[#0d0d0d] border border-border rounded-lg font-mono text-sm"
+                class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
               >
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg ml-2">{{ executeNpmxConnectorCommand }}</span>
+                <span class="text-fg-subtle ml-2">{{ executeNpmxConnectorCommand }}</span>
                 <button
                   type="button"
                   :aria-label="

app/components/DateTime.vue

@@ -29,6 +29,8 @@ const props = withDefaults(
   },
 )
 
+const { locale } = useI18n()
+
 const relativeDates = useRelativeDates()
 
 // Compute the title - always show full date for accessibility
@@ -41,7 +43,13 @@ const titleValue = computed(() => {
 
 <template>
   <ClientOnly>
-    <NuxtTime v-if="relativeDates" :datetime="datetime" :title="titleValue" relative />
+    <NuxtTime
+      v-if="relativeDates"
+      :datetime="datetime"
+      :title="titleValue"
+      relative
+      :locale="locale"
+    />
     <NuxtTime
       v-else
       :datetime="datetime"
@@ -50,6 +58,7 @@ const titleValue = computed(() => {
       :year="year"
       :month="month"
       :day="day"
+      :locale="locale"
     />
     <template #fallback>
       <NuxtTime
@@ -59,6 +68,7 @@ const titleValue = computed(() => {
         :year="year"
         :month="month"
         :day="day"
+        :locale="locale"
       />
     </template>
   </ClientOnly>

app/components/OperationsQueue.vue

@@ -198,7 +198,7 @@ onUnmounted(() => {
           <!-- Result output for completed/failed -->
           <div
             v-else-if="op.result && (op.status === 'completed' || op.status === 'failed')"
-            class="mt-2 p-2 bg-[#0d0d0d] border border-border rounded text-xs font-mono"
+            class="mt-2 p-2 bg-bg-muted border border-border rounded text-xs font-mono"
           >
             <pre v-if="op.result.stdout" class="text-fg-muted whitespace-pre-wrap">{{
               op.result.stdout

app/components/PackageDownloadAnalytics.vue

@@ -2,7 +2,7 @@
 import { ref, computed, shallowRef, watch } from 'vue'
 import type { VueUiXyDatasetItem } from 'vue-data-ui'
 import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useElementSize } from '@vueuse/core'
 
 const {
   weeklyDownloads,
@@ -18,8 +18,10 @@ const {
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 const colorMode = useColorMode()
-
 const resolvedMode = ref<'light' | 'dark'>('light')
+const rootEl = shallowRef<HTMLElement | null>(null)
+
+const { width } = useElementSize(rootEl)
 
 onMounted(() => {
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
@@ -50,6 +52,16 @@ const accent = computed(() => {
   return id ? (oklchToHex(accentColorValueById.value[id]!) ?? '#8A8A8A') : '#8A8A8A'
 })
 
+const mobileBreakpointWidth = 640
+
+const isMobile = computed(() => {
+  return width.value > 0 && width.value < mobileBreakpointWidth
+})
+
+onMounted(() => {
+  rootEl.value = document.documentElement
+})
+
 type ChartTimeGranularity = 'daily' | 'weekly' | 'monthly' | 'yearly'
 type EvolutionData =
   | DailyDownloadPoint[]
@@ -414,9 +426,18 @@ const chartData = computed<{ dataset: VueUiXyDatasetItem[] | null; dates: string
 
 const formatter = ({ value }: { value: number }) => formatCompactNumber(value, { decimals: 1 })
 
+const loadFile = (link: string, filename: string) => {
+  const a = document.createElement('a')
+  a.href = link
+  a.download = filename
+  a.click()
+  a.remove()
+}
+
 const config = computed(() => ({
   theme: isDarkMode.value ? 'dark' : 'default',
   chart: {
+    height: isMobile.value ? 850 : 600,
     userOptions: {
       buttons: {
         pdf: false,
@@ -425,6 +446,22 @@ const config = computed(() => ({
         table: false,
         tooltip: false,
       },
+      callbacks: {
+        img: ({ imageUri }: { imageUri: string }) => {
+          loadFile(imageUri, `${packageName}-${selectedGranularity.value}.png`)
+        },
+        csv: (csvStr: string) => {
+          const blob = new Blob([csvStr.replace('data:text/csv;charset=utf-8,', '')])
+          const url = URL.createObjectURL(blob)
+          loadFile(url, `${packageName}-${selectedGranularity.value}.csv`)
+          URL.revokeObjectURL(url)
+        },
+        svg: ({ blob }: { blob: Blob }) => {
+          const url = URL.createObjectURL(blob)
+          loadFile(url, `${packageName}-${selectedGranularity.value}.svg`)
+          URL.revokeObjectURL(url)
+        },
+      },
     },
     backgroundColor: isDarkMode.value ? '#0A0A0A' : '#FFFFFF',
     grid: {
@@ -474,6 +511,7 @@ const config = computed(() => ({
       },
     },
     zoom: {
+      maxWidth: 500,
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,
@@ -699,9 +737,4 @@ const config = computed(() => ({
   background: var(--bg-elevated) !important;
   box-shadow: none !important;
 }
-
-.vue-data-ui-zoom {
-  max-width: 500px;
-  margin: 0 auto;
-}
 </style>

app/components/PackageWeeklyDownloadStats.vue

@@ -202,6 +202,19 @@ const config = computed(() => {
       :packageName="packageName"
       :createdIso="createdIso"
     />
+
+    <template #after="{ close }">
+      <div class="sm:hidden flex justify-center">
+        <button
+          type="button"
+          @click="close"
+          class="w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+          :aria-label="$t('common.close')"
+        >
+          <span class="w-5 h-5 i-carbon-close" />
+        </button>
+      </div>
+    </template>
   </ChartModal>
 </template>