Implement latest version banner (#3)

src/css/banners.css

@@ -0,0 +1,15 @@
+.banner-container {
+  background-color: var(--warning-background);
+  border: 0 solid var(--warning-color);
+  border-left-width: var(--admonition-border-left-width);
+  border-radius: var(--admonition-border-radius);
+  box-shadow: var(--admonition-border-box-shadow);
+  padding: var(--admonition-padding);
+  margin-left: 1rem;
+}
+
+@media screen and (min-width: 1024px) {
+  .banner-container {
+    width: 80%;
+  }
+}

src/css/site.css

@@ -19,3 +19,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "search.css";
+@import "banners.css";

src/css/vars.css

@@ -71,8 +71,13 @@
   --note-on-color: var(--color-white);
   --tip-color: #41af46;
   --tip-on-color: var(--color-white);
-  --warning-color: #e18114;
+  --warning-color: #e6a700;
+  --warning-background: #fff8e6;
   --warning-on-color: var(--color-white);
+  --admonition-border-left-width: 5px;
+  --admonition-border-radius: 1px;
+  --admonition-box-shadow: 0 1px 2px 0 #0000001a;
+  --admonition-padding: 1rem;
   /* doc */
   --doc-font-color: var(--color-jet-50);
   --doc-font-size: inherit;

src/helpers/latest-page-url.js

@@ -0,0 +1,26 @@
+'use strict'
+
+const VERSIONED_ROOT_RELATIVE_URL_RX = /^(\/[^/]+)\/[^/]+(?=\/)/
+
+module.exports = ({ data: { root } }) => {
+  const { contentCatalog, env, page } = root
+  let { url, version, missing } = page.latest || { url: page.url }
+  if (missing) {
+    const latestAlias = contentCatalog.getById({
+      component: page.component.name,
+      version,
+      module: page.module,
+      family: 'alias',
+      relative: page.relativeSrcPath,
+    })
+    if (!latestAlias) return
+    url = latestAlias.rel.pub.url
+  }
+  if (url.charAt() === '/') {
+    return env.SUPPORTS_CURRENT_URL === 'true' ? url.replace(VERSIONED_ROOT_RELATIVE_URL_RX, '$1/current') : url
+  } else if (env.PRIMARY_SITE_SUPPORTS_CURRENT_URL === 'true') {
+    const primarySiteUrl = page.componentVersion.asciidoc.attributes['primary-site-url']
+    return primarySiteUrl + url.substr(primarySiteUrl.length).replace(VERSIONED_ROOT_RELATIVE_URL_RX, '$1/current')
+  }
+  return url
+}

src/partials/latest-banner.hbs

@@ -0,0 +1,8 @@
+<div class="doc banner-container" id="latest-banner">
+  <div>
+    This is documentation for {{page.component.title}} <b>{{page.version}}</b>.
+  </div>
+  <div>
+    For up-to-date documentation, see the {{#with (latest-page-url)}}<a href="{{relativize this}}">latest version</a>{{/with}} ({{page.component.latest.version}}).
+  </div>
+</div>

src/partials/main.hbs

@@ -1,11 +1,14 @@
 <main class="article">
 {{> toolbar}}
-  <div class="content">
-{{#if (eq page.layout '404')}}
-{{> article-404}}
-{{else}}
-{{> toc}}
-{{> article}}
+{{#if (ne page.version page.component.latest.version)}}
+  {{> latest-banner}}
 {{/if}}
+  <div class="content">
+    {{#if (eq page.layout '404')}}
+    {{> article-404}}
+    {{else}}
+    {{> toc}}
+    {{> article}}
+    {{/if}}
   </div>
 </main>