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