From 7fa86150c8ebab0c0220ab95928651c2c5fb8b96 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Mon, 17 Jun 2024 08:58:39 +0200 Subject: [PATCH 1/4] models/version: Add `has_lib` and `bin_names` attributes --- app/models/version.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/models/version.js b/app/models/version.js index 83c46d3a53f..7a3ad8b4ca0 100644 --- a/app/models/version.js +++ b/app/models/version.js @@ -28,6 +28,11 @@ export default class Version extends Model { */ @attr rust_version; + /** @type {boolean | null} */ + @attr has_lib; + /** @type {string[] | null} */ + @attr bin_names; + @belongsTo('crate', { async: false, inverse: 'versions' }) crate; @belongsTo('user', { async: false, inverse: null }) published_by; From 4d126dec43c820a5fbf9cad6f499cdbb8d871b69 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Mon, 17 Jun 2024 08:53:52 +0200 Subject: [PATCH 2/4] Extract `CrateSidebar::InstallInstructions` component --- app/components/crate-sidebar.hbs | 36 ++----------- app/components/crate-sidebar.js | 12 ----- app/components/crate-sidebar.module.css | 54 ------------------- .../crate-sidebar/install-instructions.hbs | 33 ++++++++++++ .../crate-sidebar/install-instructions.js | 15 ++++++ .../install-instructions.module.css | 53 ++++++++++++++++++ 6 files changed, 106 insertions(+), 97 deletions(-) create mode 100644 app/components/crate-sidebar/install-instructions.hbs create mode 100644 app/components/crate-sidebar/install-instructions.js create mode 100644 app/components/crate-sidebar/install-instructions.module.css diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs index e58acef3b79..3958be14a58 100644 --- a/app/components/crate-sidebar.hbs +++ b/app/components/crate-sidebar.hbs @@ -48,37 +48,11 @@

Install

-

Run the following Cargo command in your project directory:

- {{#if (is-clipboard-supported)}} - - {{this.cargoAddCommand}} - {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} - - {{else}} - - {{this.cargoAddCommand}} - - {{/if}} - -

Or add the following line to your Cargo.toml:

- {{#if (is-clipboard-supported)}} - - {{this.tomlSnippet}} - {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} - - {{else}} - - {{this.tomlSnippet}} - - {{/if}} +
{{/unless}} diff --git a/app/components/crate-sidebar.js b/app/components/crate-sidebar.js index 35163b23b04..5915b375cd4 100644 --- a/app/components/crate-sidebar.js +++ b/app/components/crate-sidebar.js @@ -14,18 +14,6 @@ export default class CrateSidebar extends Component { return homepage && (!repository || simplifyUrl(repository) !== simplifyUrl(homepage)); } - get cargoAddCommand() { - return this.args.requestedVersion - ? `cargo add ${this.args.crate.name}@=${this.args.requestedVersion}` - : `cargo add ${this.args.crate.name}`; - } - - get tomlSnippet() { - let version = this.args.version.num.split('+')[0]; - let exact = this.args.requestedVersion ? '=' : ''; - return `${this.args.crate.name} = "${exact}${version}"`; - } - get playgroundLink() { let playgroundCrates = this.playground.crates; if (!playgroundCrates) return; diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css index 3fc9311e8bc..c95382d5288 100644 --- a/app/components/crate-sidebar.module.css +++ b/app/components/crate-sidebar.module.css @@ -50,60 +50,6 @@ font-variant-numeric: tabular-nums; } -.copy-help { - font-size: 12px; -} - -.copy-button, -.copy-fallback { - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - padding: var(--space-2xs) var(--space-xs); - font-family: var(--font-monospace); - font-size: 14px; - line-height: 1.5em; - color: var(--main-color); - background: transparent; - border-radius: var(--space-3xs); - border: solid var(--space-4xs) var(--gray-border); - - span { - flex: auto; - display: block; - word-break: break-word; - } -} - -.copy-button { - text-align: start; - cursor: pointer; - - &:hover { - background-color: light-dark(white, #141413); - } -} - -.copy-icon { - flex-shrink: 0; - height: 1.1em; - width: auto; - /* for slightly nicer alignment... */ - margin-top: -3px; - margin-left: var(--space-2xs); - opacity: 0; - transition: opacity var(--transition-fast); - - .copy-button:hover & { - opacity: 1; - } -} - -.selectable { - user-select: text; -} - .links { > * + * { margin-top: var(--space-m); diff --git a/app/components/crate-sidebar/install-instructions.hbs b/app/components/crate-sidebar/install-instructions.hbs new file mode 100644 index 00000000000..f5273b81b26 --- /dev/null +++ b/app/components/crate-sidebar/install-instructions.hbs @@ -0,0 +1,33 @@ +

Run the following Cargo command in your project directory:

+ +{{#if (is-clipboard-supported)}} + + {{this.cargoAddCommand}} + {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} + +{{else}} + + {{this.cargoAddCommand}} + +{{/if}} + +

Or add the following line to your Cargo.toml:

+ +{{#if (is-clipboard-supported)}} + + {{this.tomlSnippet}} + {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} + +{{else}} + + {{this.tomlSnippet}} + +{{/if}} \ No newline at end of file diff --git a/app/components/crate-sidebar/install-instructions.js b/app/components/crate-sidebar/install-instructions.js new file mode 100644 index 00000000000..09694d2a1d6 --- /dev/null +++ b/app/components/crate-sidebar/install-instructions.js @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; + +export default class InstallInstructions extends Component { + get cargoAddCommand() { + return this.args.exactVersion + ? `cargo add ${this.args.crate}@=${this.args.version}` + : `cargo add ${this.args.crate}`; + } + + get tomlSnippet() { + let version = this.args.version.split('+')[0]; + let exact = this.args.exactVersion ? '=' : ''; + return `${this.args.crate} = "${exact}${version}"`; + } +} diff --git a/app/components/crate-sidebar/install-instructions.module.css b/app/components/crate-sidebar/install-instructions.module.css new file mode 100644 index 00000000000..9f20ec49c5e --- /dev/null +++ b/app/components/crate-sidebar/install-instructions.module.css @@ -0,0 +1,53 @@ +.copy-help { + font-size: 12px; +} + +.copy-button, +.copy-fallback { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: var(--space-2xs) var(--space-xs); + font-family: var(--font-monospace); + font-size: 14px; + line-height: 1.5em; + color: var(--main-color); + background: transparent; + border-radius: var(--space-3xs); + border: solid var(--space-4xs) var(--gray-border); + + span { + flex: auto; + display: block; + word-break: break-word; + } +} + +.copy-button { + text-align: start; + cursor: pointer; + + &:hover { + background-color: light-dark(white, #141413); + } +} + +.copy-icon { + flex-shrink: 0; + height: 1.1em; + width: auto; + /* for slightly nicer alignment... */ + margin-top: -3px; + margin-left: var(--space-2xs); + opacity: 0; + transition: opacity var(--transition-fast); + + .copy-button:hover & { + opacity: 1; + } +} + +.selectable { + user-select: text; +} From 213ed75097507b9396515ff1a7f4579c6c4f328d Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Mon, 17 Jun 2024 09:34:23 +0200 Subject: [PATCH 3/4] Add basic `sum` helper --- app/helpers/sum.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 app/helpers/sum.js diff --git a/app/helpers/sum.js b/app/helpers/sum.js new file mode 100644 index 00000000000..b6ecabe262a --- /dev/null +++ b/app/helpers/sum.js @@ -0,0 +1,5 @@ +import { helper } from '@ember/component/helper'; + +export default helper(function ([...values]) { + return values.reduce((a, b) => a + b, 0); +}); From ff0405acc6d5e638ac424495d870a4d174e551a5 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Mon, 17 Jun 2024 09:35:13 +0200 Subject: [PATCH 4/4] CrateSidebar: Show "cargo install" snippet for crates with binaries --- app/components/crate-sidebar.hbs | 2 + .../crate-sidebar/install-instructions.hbs | 105 +++++++++++++----- .../crate-sidebar/install-instructions.js | 6 + .../install-instructions.module.css | 6 + 4 files changed, 91 insertions(+), 28 deletions(-) diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs index 3958be14a58..8e0aafb96b2 100644 --- a/app/components/crate-sidebar.hbs +++ b/app/components/crate-sidebar.hbs @@ -52,6 +52,8 @@ @crate={{@crate.name}} @version={{@version.num}} @exactVersion={{@requestedVersion}} + @hasLib={{not (@version.has_lib false)}} + @binNames={{@version.bin_names}} /> {{/unless}} diff --git a/app/components/crate-sidebar/install-instructions.hbs b/app/components/crate-sidebar/install-instructions.hbs index f5273b81b26..f665f3d50db 100644 --- a/app/components/crate-sidebar/install-instructions.hbs +++ b/app/components/crate-sidebar/install-instructions.hbs @@ -1,33 +1,82 @@ -

Run the following Cargo command in your project directory:

+{{#if @binNames}} + {{#if (is-clipboard-supported)}} + + {{this.cargoInstallCommand}} + {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} + + {{else}} + + {{this.cargoInstallCommand}} + + {{/if}} -{{#if (is-clipboard-supported)}} - - {{this.cargoAddCommand}} - {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} - -{{else}} - - {{this.cargoAddCommand}} - +

+ {{#if (eq @binNames.length 1)}} + Running the above command will globally install the + {{get @binNames 0}} + binary. + {{else if (eq @binNames.length 2)}} + Running the above command will globally install the + {{get @binNames 0}} + and + {{get @binNames 1}} + binaries. + {{else}} + Running the above command will globally install these binaries: + {{#each @binNames as |binName index|~}} + {{~#if (eq index 0)~}} + {{binName}} + {{~else if (eq index (sum @binNames.length -1))}} + and {{binName}} + {{~else~}} + , {{binName}} + {{~/if}} + {{~/each}} + {{/if}} +

+ +{{/if}} + +{{#if (and @hasLib @binNames)}} +

Install as library

{{/if}} -

Or add the following line to your Cargo.toml:

+{{#if @hasLib}} +

Run the following Cargo command in your project directory:

+ + {{#if (is-clipboard-supported)}} + + {{this.cargoAddCommand}} + {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} + + {{else}} + + {{this.cargoAddCommand}} + + {{/if}} + +

Or add the following line to your Cargo.toml:

-{{#if (is-clipboard-supported)}} - - {{this.tomlSnippet}} - {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} - -{{else}} - - {{this.tomlSnippet}} - + {{#if (is-clipboard-supported)}} + + {{this.tomlSnippet}} + {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}} + + {{else}} + + {{this.tomlSnippet}} + + {{/if}} {{/if}} \ No newline at end of file diff --git a/app/components/crate-sidebar/install-instructions.js b/app/components/crate-sidebar/install-instructions.js index 09694d2a1d6..e6a8ec185f4 100644 --- a/app/components/crate-sidebar/install-instructions.js +++ b/app/components/crate-sidebar/install-instructions.js @@ -1,6 +1,12 @@ import Component from '@glimmer/component'; export default class InstallInstructions extends Component { + get cargoInstallCommand() { + return this.args.exactVersion + ? `cargo install ${this.args.crate}@${this.args.version}` + : `cargo install ${this.args.crate}`; + } + get cargoAddCommand() { return this.args.exactVersion ? `cargo add ${this.args.crate}@=${this.args.version}` diff --git a/app/components/crate-sidebar/install-instructions.module.css b/app/components/crate-sidebar/install-instructions.module.css index 9f20ec49c5e..0499522eb20 100644 --- a/app/components/crate-sidebar/install-instructions.module.css +++ b/app/components/crate-sidebar/install-instructions.module.css @@ -1,5 +1,6 @@ .copy-help { font-size: 12px; + overflow-wrap: break-word; } .copy-button, @@ -51,3 +52,8 @@ .selectable { user-select: text; } + +.bin-name { + font-family: var(--font-monospace); + font-weight: bold; +}