Support prerelease badges and per-command install copy/README formatting

- Add versionPrerelease to BadgeSet and generate NuGet prerelease badge
- Render prerelease badge image and markdown block in Packages UI
- Add CopyTarget `command-{n}` and support copying individual command entries
- Format combined installation commands as README sections (titles + fenced code blocks)
- Add command cards with per-command copy buttons and "Copy All" for combined README
- Update getInstallCommands (NuGet) to include multiple install variants with comment headings
- CSS: ensure search dropdown min-height and add styles for combined-commands, command cards and responsive tweaks

Author: jamesmontemagno

src/components/PackageSearchDropdown.module.css

@@ -7,6 +7,7 @@
   right: 0;
   z-index: 1000;
   margin-top: 0.5rem;
+  min-height: 100px;
   max-height: 600px;
   overflow-y: auto;
   background: var(--bg-white);

src/pages/Packages.module.css

@@ -193,6 +193,85 @@
   margin-top: 1.75rem;
 }
 
+.installationSection h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-color);
+  margin: 0 0 0.5rem 0;
+}
+
+.installationSection .section-description {
+  font-size: 0.95rem;
+  color: var(--text-light);
+  margin: 0 0 1.25rem 0;
+}
+
+.combinedCommands {
+  margin-bottom: 2rem;
+}
+
+.combinedCommands .markdown-card {
+  background: var(--bg-white);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 1.75rem;
+  box-shadow: 0 12px 30px var(--shadow-light);
+}
+
+.combinedCommands h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-color);
+  margin: 0;
+}
+
+.combinedCommands pre {
+  margin: 0;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.commandGrid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.commandCard {
+  background: var(--bg-white);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 8px 20px var(--shadow-light);
+  transition: all 0.2s ease;
+}
+
+.commandCard:hover {
+  box-shadow: 0 12px 28px var(--shadow-color);
+  border-color: var(--primary-color);
+}
+
+.commandCard h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-color);
+  margin: 0;
+}
+
+.commandCard pre {
+  margin: 0;
+  background: var(--bg-light);
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-light);
+}
+
+.commandCard code {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text-color);
+}
+
 .commandBlocks pre {
   margin: 0 0 0.75rem 0;
 }
@@ -225,4 +304,12 @@
     flex-direction: column;
     gap: 0.75rem;
   }
+
+  .commandGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .commandCard {
+    padding: 1.25rem;
+  }
 }

src/pages/Packages.tsx

@@ -4,7 +4,7 @@ import styles from './Packages.module.css'
 import { parsePackageInput, generatePackageBadges, getInstallCommands, type PackageManager } from '../utils/packageBadge'
 import PackageSearchDropdown from '../components/PackageSearchDropdown'
 
-type CopyTarget = 'version' | 'downloads' | 'downloadsMonthly' | 'downloadsRecent' | 'combined' | 'commands'
+type CopyTarget = 'version' | 'versionPrerelease' | 'downloads' | 'downloadsMonthly' | 'downloadsRecent' | 'combined' | 'commands' | `command-${number}`
 type InputMode = 'manual' | 'search'
 type Registry = 'npm' | 'pypi' | 'nuget' | 'rubygems' | 'crates' | 'maven'
 
@@ -215,30 +215,61 @@ function Packages() {
     if (!badgeData) return
 
     let markdown = ''
-    switch (target) {
-      case 'version':
-        markdown = badgeData.version.markdown
-        break
-      case 'downloads':
-        markdown = badgeData.downloads?.markdown ?? ''
-        break
-      case 'downloadsMonthly':
-        markdown = badgeData.downloadsMonthly?.markdown ?? ''
-        break
-      case 'downloadsRecent':
-        markdown = badgeData.downloadsRecent?.markdown ?? ''
-        break
-      case 'combined': {
-        const parts = [badgeData.version.markdown]
-        if (badgeData.downloads) parts.push(badgeData.downloads.markdown)
-        if (badgeData.downloadsMonthly) parts.push(badgeData.downloadsMonthly.markdown)
-        if (badgeData.downloadsRecent) parts.push(badgeData.downloadsRecent.markdown)
-        markdown = parts.join('\n')
-        break
+    
+    // Handle individual command copying
+    if (target.startsWith('command-')) {
+      const commandIndex = parseInt(target.split('-')[1], 10)
+      const cmd = commands[commandIndex] || ''
+      // Remove the comment line (e.g., "# .NET CLI\n") from the command
+      const lines = cmd.split('\n')
+      markdown = lines[0].startsWith('#') 
+        ? lines.slice(1).join('\n').trim()
+        : cmd.trim()
+    } else {
+      switch (target) {
+        case 'version':
+          markdown = badgeData.version.markdown
+          break
+        case 'versionPrerelease':
+          markdown = badgeData.versionPrerelease?.markdown ?? ''
+          break
+        case 'downloads':
+          markdown = badgeData.downloads?.markdown ?? ''
+          break
+        case 'downloadsMonthly':
+          markdown = badgeData.downloadsMonthly?.markdown ?? ''
+          break
+        case 'downloadsRecent':
+          markdown = badgeData.downloadsRecent?.markdown ?? ''
+          break
+        case 'combined': {
+          const parts = [badgeData.version.markdown]
+          if (badgeData.versionPrerelease) parts.push(badgeData.versionPrerelease.markdown)
+          if (badgeData.downloads) parts.push(badgeData.downloads.markdown)
+          if (badgeData.downloadsMonthly) parts.push(badgeData.downloadsMonthly.markdown)
+          if (badgeData.downloadsRecent) parts.push(badgeData.downloadsRecent.markdown)
+          markdown = parts.join('\n')
+          break
+        }
+        case 'commands':
+          markdown = commands.map(cmd => {
+            // Format each command with proper markdown headings and code blocks
+            const lines = cmd.split('\n')
+            const titleLine = lines[0]
+            const title = titleLine.startsWith('#') 
+              ? titleLine.replace(/^#\s*/, '').trim()
+              : null
+            const codeContent = titleLine.startsWith('#') 
+              ? lines.slice(1).join('\n').trim()
+              : cmd.trim()
+            
+            if (title) {
+              return `### ${title}\n\`\`\`bash\n${codeContent}\n\`\`\``
+            }
+            return `\`\`\`bash\n${codeContent}\n\`\`\``
+          }).join('\n\n')
+          break
       }
-      case 'commands':
-        markdown = commands.join('\n\n')
-        break
     }
 
     if (markdown) {
@@ -403,6 +434,11 @@ function Packages() {
               <a href={badgeData.packageUrl} target="_blank" rel="noopener noreferrer">
                 <img src={badgeData.version.imageUrl} alt="Version badge" />
               </a>
+              {badgeData.versionPrerelease && (
+                <a href={badgeData.packageUrl} target="_blank" rel="noopener noreferrer">
+                  <img src={badgeData.versionPrerelease.imageUrl} alt="Prerelease version badge" />
+                </a>
+              )}
               {badgeData.downloads && (
                 <a href={badgeData.packageUrl} target="_blank" rel="noopener noreferrer">
                   <img src={badgeData.downloads.imageUrl} alt="Downloads badge" />
@@ -437,6 +473,18 @@ function Packages() {
               <pre><code>{badgeData.version.markdown}</code></pre>
             </article>
 
+            {badgeData.versionPrerelease && (
+              <article className="markdown-card">
+                <header className="output-header">
+                  <h3>Prerelease Version</h3>
+                  <button type="button" className="copy-btn" onClick={() => handleCopy('versionPrerelease')}>
+                    {copiedTarget === 'versionPrerelease' ? '✅ Copied!' : '📋 Copy'}
+                  </button>
+                </header>
+                <pre><code>{badgeData.versionPrerelease.markdown}</code></pre>
+              </article>
+            )}
+
             {badgeData.downloads && (
               <article className="markdown-card">
                 <header className="output-header">
@@ -484,6 +532,7 @@ function Packages() {
               </header>
               <pre><code>{[
                 badgeData.version.markdown,
+                badgeData.versionPrerelease?.markdown,
                 badgeData.downloads?.markdown,
                 badgeData.downloadsMonthly?.markdown,
                 badgeData.downloadsRecent?.markdown
@@ -493,16 +542,70 @@ function Packages() {
 
           {commands.length > 0 && (
             <div className={`${styles.installationSection} installation-section`}>
-              <header className="output-header">
-                <h3>Installation Commands</h3>
-                <button type="button" className="copy-btn" onClick={() => handleCopy('commands')}>
-                  {copiedTarget === 'commands' ? '✅ Copied!' : '📋 Copy'}
-                </button>
-              </header>
-              <div className="command-blocks">
-                {commands.map((cmd, index) => (
-                  <pre key={index}><code>{cmd}</code></pre>
-                ))}
+              <h2>Installation Commands</h2>
+              <p className="section-description">
+                Choose your preferred installation method:
+              </p>
+              
+              <div className={`${styles.combinedCommands} combined-commands`}>
+                <article className="markdown-card">
+                  <header className="output-header">
+                    <h3>Combined README Format</h3>
+                    <button 
+                      type="button" 
+                      className="copy-btn" 
+                      onClick={() => handleCopy('commands')}
+                    >
+                      {copiedTarget === 'commands' ? '✅ Copied!' : '📋 Copy All'}
+                    </button>
+                  </header>
+                  <pre><code>{commands.map(cmd => {
+                    // Format each command with proper markdown
+                    const lines = cmd.split('\n')
+                    const titleLine = lines[0]
+                    const title = titleLine.startsWith('#') 
+                      ? titleLine.replace(/^#\s*/, '').trim()
+                      : null
+                    const codeContent = titleLine.startsWith('#') 
+                      ? lines.slice(1).join('\n').trim()
+                      : cmd.trim()
+                    
+                    if (title) {
+                      return `### ${title}\n\`\`\`bash\n${codeContent}\n\`\`\``
+                    }
+                    return `\`\`\`bash\n${codeContent}\n\`\`\``
+                  }).join('\n\n')}</code></pre>
+                </article>
+              </div>
+
+              <div className={styles.commandGrid}>
+                {commands.map((cmd, index) => {
+                  // Extract the title from the comment (e.g., "# .NET CLI" -> ".NET CLI")
+                  const lines = cmd.split('\n')
+                  const titleLine = lines[0]
+                  const title = titleLine.startsWith('#') 
+                    ? titleLine.replace(/^#\s*/, '').trim()
+                    : `Option ${index + 1}`
+                  const codeContent = titleLine.startsWith('#') 
+                    ? lines.slice(1).join('\n').trim()
+                    : cmd.trim()
+                  
+                  return (
+                    <article key={index} className={`${styles.commandCard} markdown-card`}>
+                      <header className="output-header">
+                        <h3>{title}</h3>
+                        <button 
+                          type="button" 
+                          className="copy-btn" 
+                          onClick={() => handleCopy(`command-${index}` as CopyTarget)}
+                        >
+                          {copiedTarget === `command-${index}` ? '✅ Copied!' : '📋 Copy'}
+                        </button>
+                      </header>
+                      <pre><code>{codeContent}</code></pre>
+                    </article>
+                  )
+                })}
               </div>
             </div>
           )}

src/utils/packageBadge.ts

@@ -16,6 +16,10 @@ export interface BadgeSet {
     markdown: string;
     imageUrl: string;
   };
+  versionPrerelease?: {
+    markdown: string;
+    imageUrl: string;
+  };
   downloads?: {
     markdown: string;
     imageUrl: string;
@@ -173,13 +177,18 @@ export function generatePackageBadges(
     case 'nuget': {
       if (!packageId) return null;
       const versionUrl = `https://img.shields.io/nuget/v/${packageId}?style=${style}&logo=nuget`;
+      const prereleaseUrl = `https://img.shields.io/nuget/vpre/${packageId}?style=${style}&logo=nuget&label=prerelease`;
       const downloadsUrl = `https://img.shields.io/nuget/dt/${packageId}?style=${style}&logo=nuget&label=downloads`;
 
       return {
         version: {
           markdown: `[![NuGet version](${versionUrl})](https://www.nuget.org/packages/${packageId})`,
           imageUrl: versionUrl
         },
+        versionPrerelease: {
+          markdown: `[![NuGet prerelease](${prereleaseUrl})](https://www.nuget.org/packages/${packageId})`,
+          imageUrl: prereleaseUrl
+        },
         downloads: {
           markdown: `[![NuGet downloads](${downloadsUrl})](https://www.nuget.org/packages/${packageId})`,
           imageUrl: downloadsUrl
@@ -289,8 +298,11 @@ export function getInstallCommands(
 
     case 'nuget':
       return packageId ? [
-        `dotnet add package ${packageId}`,
-        `Install-Package ${packageId}`
+        `# .NET CLI\ndotnet add package ${packageId}`,
+        `# Package Manager\nInstall-Package ${packageId}`,
+        `# PackageReference\n<PackageReference Include="${packageId}" Version="*" />`,
+        `# Paket CLI\npaket add ${packageId}`,
+        `# Script & Interactive\n#r "nuget: ${packageId}, *"`
       ] : [];
 
     case 'pypi':