diff --git a/scripts/build-jsonld.ts b/scripts/build-jsonld.ts old mode 100755 new mode 100644 index a2b74d0..accd295 --- a/scripts/build-jsonld.ts +++ b/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 = ( diff --git a/web/index.html b/web/index.html index 380d587..4ee097a 100644 --- a/web/index.html +++ b/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 @@

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 @@

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