Merge branch 'main' into patch-1

Author: okineadev

app/assets/main.css

@@ -157,6 +157,16 @@ button {
   top: 0;
 }
 
+/* Shiki theme colors */
+html.light .shiki,
+html.light .shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+  font-style: var(--shiki-light-font-style) !important;
+  font-weight: var(--shiki-light-font-weight) !important;
+  text-decoration: var(--shiki-light-text-decoration) !important;
+}
+
 /* README prose styling */
 .readme-content {
   color: var(--fg-muted);
@@ -238,7 +248,7 @@ button {
 .readme-content pre,
 .readme-content .shiki {
   background: oklch(0.145 0 0) !important;
-  border: 1px solid oklch(0.2686 0 0);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;

app/components/AppFooter.vue

@@ -89,6 +89,14 @@ onMounted(() => {
         <!-- On mobile, show disclaimer here instead of tagline -->
         <p class="text-xs text-fg-muted m-0 sm:hidden">{{ $t('non_affiliation_disclaimer') }}</p>
         <div class="flex items-center gap-4 sm:gap-6">
+          <a
+            href="https://docs.npmx.dev"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link-subtle font-mono text-xs min-h-11 min-w- flex items-center"
+          >
+            {{ $t('footer.docs') }}
+          </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"

app/components/PackageDownloadAnalytics.vue

@@ -191,6 +191,16 @@ function safeMax(a: string, b: string): string {
   return a.localeCompare(b) >= 0 ? a : b
 }
 
+function extractDates(dateLabel: string) {
+  if (typeof dateLabel !== 'string') return []
+
+  const parts = dateLabel.trim().split(/\s+/).filter(Boolean)
+
+  if (parts.length < 2) return []
+
+  return [parts[0], parts[parts.length - 1]]
+}
+
 /**
  * Two-phase state:
  * - selectedGranularity: immediate UI
@@ -448,17 +458,26 @@ const config = computed(() => ({
       },
       callbacks: {
         img: ({ imageUri }: { imageUri: string }) => {
-          loadFile(imageUri, `${packageName}-${selectedGranularity.value}.png`)
+          loadFile(
+            imageUri,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.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`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.csv`,
+          )
           URL.revokeObjectURL(url)
         },
         svg: ({ blob }: { blob: Blob }) => {
           const url = URL.createObjectURL(blob)
-          loadFile(url, `${packageName}-${selectedGranularity.value}.svg`)
+          loadFile(
+            url,
+            `${packageName}-${selectedGranularity.value}_${startDate.value}_${endDate.value}.svg`,
+          )
           URL.revokeObjectURL(url)
         },
       },
@@ -512,6 +531,13 @@ const config = computed(() => ({
     },
     zoom: {
       maxWidth: 500,
+      customFormat:
+        displayedGranularity.value !== 'weekly'
+          ? undefined
+          : ({ absoluteIndex, side }: { absoluteIndex: number; side: 'left' | 'right' }) => {
+              const parts = extractDates(chartData.value.dates[absoluteIndex] ?? '')
+              return side === 'left' ? parts[0] : parts.at(-1)
+            },
       highlightColor: isDarkMode.value ? '#2A2A2A' : '#E1E5E8',
       minimap: {
         show: true,

app/pages/[...package].vue

@@ -300,7 +300,7 @@ defineOgImageComponent('Package', {
 
     <article
       v-else-if="status === 'success' && pkg"
-      class="package-page motion-safe:animate-fade-in"
+      class="package-page motion-safe:animate-fade-in overflow-x-hidden"
     >
       <!-- Package header -->
       <header class="area-header pb-8 border-b border-border">
@@ -725,11 +725,11 @@ defineOgImageComponent('Package', {
               <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
               <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
             </div>
-            <div class="space-y-1 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
+            <div class="space-y-1 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 overflow-x-auto">
               <!-- Main package install -->
-              <div class="flex items-center gap-2">
-                <span class="text-fg-subtle font-mono text-sm select-none">$</span>
-                <code class="font-mono text-sm"
+              <div class="flex items-center gap-2 min-w-0">
+                <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+                <code class="font-mono text-sm min-w-0"
                   ><ClientOnly
                     ><span
                       v-for="(part, i) in installCommandParts"
@@ -744,9 +744,9 @@ defineOgImageComponent('Package', {
                 >
               </div>
               <!-- @types package install (when enabled) -->
-              <div v-if="showTypesInInstall" class="flex items-center gap-2">
-                <span class="text-fg-subtle font-mono text-sm select-none">$</span>
-                <code class="font-mono text-sm"
+              <div v-if="showTypesInInstall" class="flex items-center gap-2 min-w-0">
+                <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+                <code class="font-mono text-sm min-w-0"
                   ><span
                     v-for="(part, i) in typesInstallCommandParts"
                     :key="i"
@@ -997,4 +997,36 @@ defineOgImageComponent('Package', {
 .area-sidebar {
   grid-area: sidebar;
 }
+
+/* Improve package name wrapping for narrow screens */
+.area-header h1 {
+  overflow-wrap: anywhere;
+}
+
+/* Ensure description text wraps properly */
+.area-header p {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Allow install command text to break on narrow screens */
+.area-install code {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+/* Ensure all text content wraps on narrow screens */
+.package-page {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+
+/* Ensure all children respect max-width */
+.package-page > * {
+  max-width: 100%;
+  min-width: 0;
+}
 </style>

i18n/locales/en.json

@@ -9,6 +9,7 @@
   "non_affiliation_disclaimer": "not affiliated with npm, Inc.",
   "trademark_disclaimer": "npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.",
   "footer": {
+    "docs": "docs",
     "source": "source",
     "social": "social",
     "chat": "chat"

package.json

@@ -53,7 +53,7 @@
     "validate-npm-package-name": "^7.0.2",
     "virtua": "^0.48.3",
     "vue": "3.5.27",
-    "vue-data-ui": "^3.13.4"
+    "vue-data-ui": "^3.13.5"
   },
   "devDependencies": {
     "@iconify-json/carbon": "1.2.18",

pnpm-lock.yaml

@@ -265,7 +265,8 @@ export async function highlightCode(
     try {
       let html = shiki.codeToHtml(code, {
         lang: language,
-        theme: 'github-dark',
+        themes: { light: 'github-light', dark: 'github-dark' },
+        defaultColor: 'dark',
       })
 
       // Shiki doesn't encode > in text content (e.g., arrow functions)

server/utils/code-highlight.ts

@@ -6,7 +6,7 @@ let highlighter: HighlighterCore | null = null
 export async function getShikiHighlighter(): Promise<HighlighterCore> {
   if (!highlighter) {
     highlighter = await createHighlighterCore({
-      themes: [import('@shikijs/themes/github-dark')],
+      themes: [import('@shikijs/themes/github-dark'), import('@shikijs/themes/github-light')],
       langs: [
         // Core web languages
         import('@shikijs/langs/javascript'),
@@ -66,7 +66,8 @@ export function highlightCodeSync(shiki: HighlighterCore, code: string, language
     try {
       let html = shiki.codeToHtml(code, {
         lang: language,
-        theme: 'github-dark',
+        themes: { light: 'github-light', dark: 'github-dark' },
+        defaultColor: 'dark',
       })
       // Remove inline style from <pre> tag so CSS can control appearance
       html = html.replace(/<pre([^>]*)\s+style="[^"]*"/, '<pre$1')

server/utils/shiki.ts

@@ -242,8 +242,8 @@ describe('renderMarkdown', () => {
     const input = '```ts\nconst a = 1\n```\n\nSome text\n\n```js\nconst b = 2\n```'
     const result = await renderMarkdown(input, emptyLookup)
     expect(result).toContain('Some text')
-    // Both code blocks should be highlighted
-    expect((result.match(/shiki/g) || []).length).toBe(2)
+    // Both code blocks should be highlighted, search for `shiki` class
+    expect((result.match(/["\s]shiki["\s]/g) || []).length).toBe(2)
   })
 
   it('should not confuse inline code with fenced code blocks', async () => {