added version information in welcome component

lib/system-status.js

@@ -3,7 +3,7 @@ import os from 'os'
 import fs from 'fs'
 import path from 'path'
 import { spawn } from 'child_process'
-import { config } from 'pear'
+import { config, versions } from 'pear'
 
 const BIN = path.join(config.pearDir, 'bin')
 const isWin = process.platform === 'win32'
@@ -27,6 +27,13 @@ customElements.define('pear-welcome', class extends HTMLElement {
           font-family: 'overpass-mono';
           border-radius: 1px;
         }
+        #version {
+          position: fixed;
+          top: 90vh;
+          font-size: 75%;
+          color: #efeaea;
+          opacity: 0.5;
+        }
       </style>
       <blockquote>
         <p> Pear is in the system PATH and ready to go .</p>
@@ -40,11 +47,22 @@ customElements.define('pear-welcome', class extends HTMLElement {
       <video width="420" height="390" autoplay muted>
         <source src="./assets/usage.mp4" type="video/mp4">
       </video>
+      <section id="version">
+        <p id="pear-version"></p>
+        <p id="pear-pulse-version"></p>
+      </section>
     `
     this.root = this.attachShadow({ mode: 'open' })
 
     this.root.appendChild(this.template.content.cloneNode(true))
   }
+
+  connectedCallback () {
+    versions().then(({ app, platform }) => {
+      this.root.querySelector('#pear-version').innerText = 'Pear version: ' + platform.key + '_' + platform.length
+      this.root.querySelector('#pear-pulse-version').innerText = 'App version: ' + app.key + '_' + app.length
+    })
+  }
 })
 
 customElements.define('system-status', class extends HTMLElement {