feat: add install command as second row on each plugin card

scripts/build-jsonld.ts

@@ -20,6 +20,7 @@ type Plugin = {
   versionSource: string
   hasPackages: boolean
   addCommand: string
+  installCommand: string
 }
 
 const DEFAULT_OSES = ['Linux', 'macOS', 'Windows']
@@ -131,6 +132,7 @@ const toPlugin = (baseUrl: string) => (file: string, raw: Raw): Plugin => {
     versionSource: detectVersionSource(resolveBlock),
     hasPackages: isObject(raw.packages),
     addCommand: `proto plugin add ${id} "${fileUrl}"`,
+    installCommand: `proto install --pin -c local ${id} latest`,
   }
 }
 
@@ -152,6 +154,7 @@ const toPluginEntry = (repoUrl: string, schemaUrl: string) => (plugin: Plugin) =
     versionSource: plugin.versionSource,
     hasPackages: plugin.hasPackages,
     addCommand: plugin.addCommand,
+    installCommand: plugin.installCommand,
   })
 
 const toCatalog = (

web/index.html

@@ -196,6 +196,12 @@
       display: none;
     }
 
+    .cmd-rows {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
     .cmd-row {
       display: flex;
       align-items: center;
@@ -427,21 +433,33 @@ <h1>
         return host
       }
 
-      const makeCopyButton = plugin => {
+      const makeCopyButton = (cmd, label) => {
         const btn = makeEl('button', 'copy-btn')
         btn.type = 'button'
-        btn.dataset.cmd = plugin.addCommand ?? ''
-        btn.setAttribute('aria-label', `Copy command for ${plugin.identifier ?? ''}`)
+        btn.dataset.cmd = cmd
+        btn.setAttribute('aria-label', label)
         setIcon(btn, iconCopyTpl)
         return btn
       }
 
-      const makeCmdRow = plugin => {
+      const makeCmdRow = (cmd, ariaLabel) => {
         const row = makeEl('div', 'cmd-row')
-        row.append(makeEl('code', '', plugin.addCommand ?? ''), makeCopyButton(plugin))
+        row.append(makeEl('code', '', cmd), makeCopyButton(cmd, ariaLabel))
         return row
       }
 
+      const makeAddRow = plugin =>
+        makeCmdRow(
+          plugin.addCommand ?? '',
+          `Copy add command for ${plugin.identifier ?? ''}`,
+        )
+
+      const makeInstallRow = plugin =>
+        makeCmdRow(
+          plugin.installCommand ?? '',
+          `Copy install command for ${plugin.identifier ?? ''}`,
+        )
+
       const makePluginFileLink = plugin => {
         const link = makeEl('a', 'plugin-file-link', pluginFileName(plugin))
         link.href = pluginFileUrl(plugin)
@@ -460,10 +478,12 @@ <h1>
 
       const buildCard = plugin => {
         const card = makeEl('article', 'card')
+        const cmdRows = makeEl('div', 'cmd-rows')
+        cmdRows.append(makeAddRow(plugin), makeInstallRow(plugin))
         card.append(
           makeHead(plugin),
           makeEl('p', 'card-desc', plugin.description ?? ''),
-          makeCmdRow(plugin),
+          cmdRows,
           makePluginFileLink(plugin),
         )
         return card