Merge branch 'main' into main

Author: abhi123vj

app/components/Readme.vue

@@ -89,6 +89,7 @@ function handleClick(event: MouseEvent) {
   min-width: 0;
   /* Contain all children z-index values inside this container */
   isolation: isolate;
+  contain: layout paint;
 }
 
 /* README headings - styled by visual level (data-level), not semantic level */

app/composables/useSelectedPackageManager.ts

@@ -12,6 +12,10 @@ export const useSelectedPackageManager = createSharedComposable(
 
     // Sync to data-pm attribute on the client
     if (import.meta.client) {
+      const queryPM = new URLSearchParams(window.location.search).get('pm')
+      if (queryPM && packageManagers.some(pm => pm.id === queryPM)) {
+        pm.value = queryPM as PackageManagerId
+      }
       // Watch for changes and update the attribute
       watch(
         pm,

app/utils/prehydrate.ts

@@ -39,20 +39,28 @@ export function initPreferencesOnPrehydrate() {
       document.documentElement.dataset.bgTheme = preferredBackgroundTheme
     }
 
-    // Read and apply package manager preference
-    const storedPM = localStorage.getItem('npmx-pm')
-    // Parse the stored value (it's stored as a JSON string by useLocalStorage)
     let pm = 'npm'
-    if (storedPM) {
-      try {
-        const parsed = JSON.parse(storedPM)
-        if (validPMs.has(parsed)) {
-          pm = parsed
-        }
-      } catch {
-        // If parsing fails, check if it's a plain string (legacy format)
-        if (validPMs.has(storedPM)) {
-          pm = storedPM
+
+    // Support package manager preference in query string (for example, ?pm=pnpm)
+    const queryPM = new URLSearchParams(window.location.search).get('pm')
+    if (queryPM && validPMs.has(queryPM)) {
+      pm = queryPM
+      localStorage.setItem('npmx-pm', pm)
+    } else {
+      // Read and apply package manager preference
+      const storedPM = localStorage.getItem('npmx-pm')
+      // Parse the stored value (it's stored as a JSON string by useLocalStorage)
+      if (storedPM) {
+        try {
+          const parsed = JSON.parse(storedPM)
+          if (validPMs.has(parsed)) {
+            pm = parsed
+          }
+        } catch {
+          // If parsing fails, check if it's a plain string (legacy format)
+          if (validPMs.has(storedPM)) {
+            pm = storedPM
+          }
         }
       }
     }

server/utils/readme.ts

@@ -198,9 +198,9 @@ const ALLOWED_ATTR: Record<string, string[]> = {
   'blockquote': ['data-callout'],
   'details': ['open'],
   'code': ['class'],
-  'pre': ['class', 'style'],
+  'pre': ['class'],
   'span': ['class', 'style'],
-  'div': ['class', 'style', 'align'],
+  'div': ['class', 'align'],
   'p': ['align'],
 }
 
@@ -609,8 +609,8 @@ ${html}
   // Resolve image URLs (with GitHub blob → raw conversion)
   renderer.image = ({ href, title, text }: Tokens.Image) => {
     const resolvedHref = resolveImageUrl(href, packageName, repoInfo)
-    const titleAttr = title ? ` title="${title}"` : ''
-    const altAttr = text ? ` alt="${text}"` : ''
+    const titleAttr = title ? ` title="${escapeHtml(title)}"` : ''
+    const altAttr = text ? ` alt="${escapeHtml(text)}"` : ''
     return `<img src="${resolvedHref}"${altAttr}${titleAttr}>`
   }
 
@@ -687,6 +687,13 @@ ${html}
     allowedTags: ALLOWED_TAGS,
     allowedAttributes: ALLOWED_ATTR,
     allowedSchemes: ['http', 'https', 'mailto'],
+    // disallow styles other than the ones shiki emits
+    allowedStyles: {
+      span: {
+        'color': [/^#[0-9a-f]{3,8}$/i],
+        '--shiki-light': [/^#[0-9a-f]{3,8}$/i],
+      },
+    },
     // Transform img src URLs (GitHub blob → raw, relative → GitHub raw)
     transformTags: {
       // Headings are already processed to correct semantic levels by processHeading()