Show cargo install for crates with binaries

app/components/crate-sidebar.hbs

@@ -48,37 +48,13 @@
     <div data-test-install>
       <h2 local-class="heading">Install</h2>
 
-      <p local-class="copy-help">Run the following Cargo command in your project directory:</p>
-      {{#if (is-clipboard-supported)}}
-        <CopyButton
-          @copyText={{this.cargoAddCommand}}
-          title="Copy command to clipboard"
-          local-class="copy-button"
-        >
-          <span local-class="selectable">{{this.cargoAddCommand}}</span>
-          {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
-        </CopyButton>
-      {{else}}
-        <code local-class="copy-fallback">
-          {{this.cargoAddCommand}}
-        </code>
-      {{/if}}
-
-      <p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
-      {{#if (is-clipboard-supported)}}
-        <CopyButton
-          @copyText={{this.tomlSnippet}}
-          title="Copy Cargo.toml snippet to clipboard"
-          local-class="copy-button"
-        >
-          <span local-class="selectable">{{this.tomlSnippet}}</span>
-          {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
-        </CopyButton>
-      {{else}}
-        <code local-class="copy-fallback">
-          {{this.tomlSnippet}}
-        </code>
-      {{/if}}
+      <CrateSidebar::InstallInstructions
+        @crate={{@crate.name}}
+        @version={{@version.num}}
+        @exactVersion={{@requestedVersion}}
+        @hasLib={{not (@version.has_lib false)}}
+        @binNames={{@version.bin_names}}
+      />
     </div>
   {{/unless}}
 

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;

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);

app/components/crate-sidebar/install-instructions.hbs

@@ -0,0 +1,82 @@
+{{#if @binNames}}
+  {{#if (is-clipboard-supported)}}
+    <CopyButton
+      @copyText={{this.cargoInstallCommand}}
+      title="Copy command to clipboard"
+      local-class="copy-button"
+    >
+      <span local-class="selectable">{{this.cargoInstallCommand}}</span>
+      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+    </CopyButton>
+  {{else}}
+    <code local-class="copy-fallback">
+      {{this.cargoInstallCommand}}
+    </code>
+  {{/if}}
+
+  <p local-class="copy-help">
+    {{#if (eq @binNames.length 1)}}
+      Running the above command will globally install the
+      <span local-class="bin-name">{{get @binNames 0}}</span>
+      binary.
+    {{else if (eq @binNames.length 2)}}
+      Running the above command will globally install the
+      <span local-class="bin-name">{{get @binNames 0}}</span>
+      and
+      <span local-class="bin-name">{{get @binNames 1}}</span>
+      binaries.
+    {{else}}
+      Running the above command will globally install these binaries:
+      {{#each @binNames as |binName index|~}}
+        {{~#if (eq index 0)~}}
+          <span local-class="bin-name">{{binName}}</span>
+        {{~else if (eq index (sum @binNames.length -1))}}
+          and <span local-class="bin-name">{{binName}}</span>
+        {{~else~}}
+          , <span local-class="bin-name">{{binName}}</span>
+        {{~/if}}
+      {{~/each}}
+    {{/if}}
+  </p>
+
+{{/if}}
+
+{{#if (and @hasLib @binNames)}}
+  <h3>Install as library</h3>
+{{/if}}
+
+{{#if @hasLib}}
+  <p local-class="copy-help">Run the following Cargo command in your project directory:</p>
+
+  {{#if (is-clipboard-supported)}}
+    <CopyButton
+      @copyText={{this.cargoAddCommand}}
+      title="Copy command to clipboard"
+      local-class="copy-button"
+    >
+      <span local-class="selectable">{{this.cargoAddCommand}}</span>
+      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+    </CopyButton>
+  {{else}}
+    <code local-class="copy-fallback">
+      {{this.cargoAddCommand}}
+    </code>
+  {{/if}}
+
+  <p local-class="copy-help">Or add the following line to your Cargo.toml:</p>
+
+  {{#if (is-clipboard-supported)}}
+    <CopyButton
+      @copyText={{this.tomlSnippet}}
+      title="Copy Cargo.toml snippet to clipboard"
+      local-class="copy-button"
+    >
+      <span local-class="selectable">{{this.tomlSnippet}}</span>
+      {{svg-jar "copy" aria-hidden="true" local-class="copy-icon"}}
+    </CopyButton>
+  {{else}}
+    <code local-class="copy-fallback">
+      {{this.tomlSnippet}}
+    </code>
+  {{/if}}
+{{/if}}

app/components/crate-sidebar/install-instructions.js

@@ -0,0 +1,21 @@
+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}`
+      : `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}"`;
+  }
+}

app/components/crate-sidebar/install-instructions.module.css

@@ -0,0 +1,59 @@
+.copy-help {
+    font-size: 12px;
+    overflow-wrap: break-word;
+}
+
+.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;
+}
+
+.bin-name {
+    font-family: var(--font-monospace);
+    font-weight: bold;
+}

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);
+});

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;