Extract and reuse CrateHeader component

app/components/crate-header.hbs

@@ -0,0 +1,33 @@
+<PageHeader local-class="header" data-test-heading>
+  <div local-class="header-row">
+    <div local-class="heading">
+      {{svg-jar "crate" local-class="crate-icon"}}
+      <h1 data-test-crate-name>{{@crate.name}}</h1>
+      {{#if @version}}
+        <h2 data-test-crate-version>{{@version.num}}</h2>
+      {{/if}}
+    </div>
+
+    {{#if this.session.currentUser}}
+      <FollowButton @crate={{@crate}}/>
+    {{/if}}
+  </div>
+
+  <ul local-class="quick-links">
+    {{#if @crate.homepage}}
+      <li><a href="{{@crate.homepage}}">Homepage</a></li>
+    {{/if}}
+    {{#if @crate.wiki}}
+      <li><a href="{{@crate.wiki}}">Wiki</a></li>
+    {{/if}}
+    {{#if @crate.mailing_list}}
+      <li><a href="{{@crate.mailing_list}}">Mailing list</a></li>
+    {{/if}}
+    {{#if this.documentationLink}}
+      <li><a href="{{this.documentationLink}}" data-test-docs-link>Documentation</a></li>
+    {{/if}}
+    {{#if @crate.repository}}
+      <li><a href="{{@crate.repository}}">Repository</a></li>
+    {{/if}}
+  </ul>
+</PageHeader>

app/components/crate-header.js

@@ -0,0 +1,10 @@
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class CrateHeader extends Component {
+  @service session;
+
+  get documentationLink() {
+    return this.args.version?.documentationLink ?? this.args.crate.documentation;
+  }
+}

app/components/crate-header.module.css

@@ -0,0 +1,52 @@
+.header {
+    padding-top: 30px;
+    padding-bottom: 30px;
+}
+
+.header-row {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+}
+
+.heading {
+    display: flex;
+    align-items: center;
+
+    h1, h2 {
+        margin: 0;
+        padding: 0;
+    }
+
+    h2 {
+        color: var(--main-color-light);
+        margin-left: 10px;
+    }
+}
+
+.crate-icon {
+    flex-shrink: 0;
+    margin-right: 10px;
+    width: 32px;
+    height: 32px;
+}
+
+.quick-links {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    font-size: 80%;
+    list-style-type: none;
+    margin: 1em 0 0 0;
+    padding: 0;
+
+
+    li {
+        margin-right: 1em;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}

app/styles/crate/version.module.css

@@ -1,56 +1,3 @@
-div.header {
-    padding-top: 30px;
-    padding-bottom: 30px;
-}
-
-.header-row {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 10px;
-}
-
-.heading {
-    display: flex;
-    align-items: center;
-
-    h1, h2 {
-        margin: 0;
-        padding: 0;
-    }
-
-    h2 {
-        color: var(--main-color-light);
-        margin-left: 10px;
-    }
-}
-
-.crate-icon {
-    flex-shrink: 0;
-    margin-right: 10px;
-    width: 32px;
-    height: 32px;
-}
-
-.quick-links {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    font-size: 80%;
-    list-style-type: none;
-    margin: 1em 0 0 0;
-    padding: 0;
-
-
-    li {
-        margin-right: 1em;
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
 .crate-info {
     display: flex;
     flex-direction: column;

app/templates/crate/reverse-dependencies.hbs

@@ -1,3 +1,5 @@
+<CrateHeader @crate={{this.crate}} />
+
 <div local-class="back-link">
   <LinkTo @route="crate" @model={{this.crate.id}}>&#11013; Back to {{ this.crate.name }}</LinkTo>
 </div>

app/templates/crate/version.hbs

@@ -1,39 +1,6 @@
 {{page-title this.crate.name}}
 
-<PageHeader local-class="header" data-test-heading>
-  <div local-class="header-row">
-    <div local-class="heading">
-      {{svg-jar "crate" local-class='crate-icon'}}
-      <h1 data-test-crate-name>{{ this.crate.name }}</h1>
-      <h2 data-test-crate-version>{{ this.currentVersion.num }}</h2>
-      {{#if this.isOwner }}
-        {{!-- <YankButton @version={{this.currentVersion}} @tan={{true}} /> --}}
-      {{/if}}
-    </div>
-
-    {{#if this.session.currentUser}}
-      <FollowButton @crate={{this.crate}}/>
-    {{/if}}
-  </div>
-
-  <ul local-class="quick-links">
-    {{#if this.crate.homepage}}
-      <li><a href="{{this.crate.homepage}}">Homepage</a></li>
-    {{/if}}
-    {{#if this.crate.wiki}}
-      <li><a href="{{this.crate.wiki}}">Wiki</a></li>
-    {{/if}}
-    {{#if this.crate.mailing_list}}
-      <li><a href="{{this.crate.mailing_list}}">Mailing list</a></li>
-    {{/if}}
-    {{#if this.currentVersion.documentationLink}}
-      <li><a href="{{this.currentVersion.documentationLink}}" data-test-docs-link>Documentation</a></li>
-    {{/if}}
-    {{#if this.crate.repository}}
-      <li><a href="{{this.crate.repository}}">Repository</a></li>
-    {{/if}}
-  </ul>
-</PageHeader>
+<CrateHeader @crate={{this.crate}} @version={{this.currentVersion}} />
 
 <div local-class='crate-info'>
   <div local-class="docs">

app/templates/crate/versions.hbs

@@ -1,3 +1,5 @@
+<CrateHeader @crate={{this.model}} />
+
 <LinkTo @route="crate" @model={{this.model}} local-class="back-link">&#11013; Back to Main Page</LinkTo>
 
 <span local-class="page-description" data-test-page-description>