feat(website): add versions

Author: christianalfoni

package-lock.json

@@ -27,6 +27,7 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@types/node": "10.5.1",
+    "axios": "^0.18.0",
     "color": "3.0.0",
     "color-hash": "1.0.3",
     "electron": "2.0.8",

package.json

@@ -1,6 +1,7 @@
 const path = require('path')
 const express = require('express')
 const https = require('https')
+const axios = require('axios')
 const app = express()
 const fs = require('fs')
 const api = require('./api')
@@ -96,10 +97,27 @@ function getSearchData() {
     )
 }
 
+function getVersion(name) {
+  return axios.get('http://registry.npmjs.org/' + name).then((response) => ({
+    name,
+    version: response.data['dist-tags'].latest,
+  }))
+}
+
+function getVersions() {
+  return Promise.all([
+    getVersion('overmind'),
+    getVersion('overmind-angular'),
+    getVersion('overmind-vue'),
+    getVersion('overmind-react'),
+  ])
+}
+
 const guides = getGuides()
 const videos = getVideos()
 const demos = getDemos()
 const apis = getApis()
+const versions = getVersions()
 
 const searchData = getSearchData()
 
@@ -143,6 +161,17 @@ app.use(googleCrawlMiddleware)
 app.use(express.static(path.join(__dirname, '..', 'dist')))
 app.use('/images', express.static(path.join(__dirname, '..', 'images')))
 app.get('/workshop/posts', api.posts)
+app.get('/backend/versions', (_, res) => {
+  versions.then((fetchedVersions) => {
+    res.send(
+      fetchedVersions.reduce(
+        (aggr, version) =>
+          Object.assign(aggr, { [version.name]: version.version }),
+        {}
+      )
+    )
+  })
+})
 app.get('/backend/guides', (_, res) =>
   res.send(IS_PRODUCTION ? guides : getGuides())
 )

packages/overmind-website/backend/index.js

@@ -34,6 +34,7 @@
 		"demo"
 	],
 	"dependencies": {
+    "axios": "^0.18.0",
 		"@types/node": "^10.5.1",
 		"emotion": "^9.2.12",
 		"express": "^4.16.3",

packages/overmind-website/package.json

@@ -16,6 +16,12 @@ const TopBar: SFC = () => {
 
   return (
     <div ref={mainRef} className={styles.wrapper}>
+      <div className={styles.version}>
+        v{state.versions['overmind']}{' '}
+        <a href="https://github.com/cerebral/overmind/releases" target="_new">
+          release notes
+        </a>
+      </div>
       <a
         href="/"
         className={css(

packages/overmind-website/src/components/TopBar/index.tsx

@@ -1,5 +1,16 @@
 import { css } from 'emotion'
 
+export const version = css`
+  width: 150px;
+  color: var(--color-black-1);
+  a {
+    text-decoration: none;
+    color: var(--color-primary);
+    font-weight: bold;
+    font-size: 12px;
+  }
+`
+
 export const wrapper = css`
   position: fixed;
   z-index: 2;

packages/overmind-website/src/components/TopBar/styles.ts

@@ -33,27 +33,31 @@ const ViewSelector: SFC = () => {
       <div className={styles.viewOption}>
         <img src={VueImage} width={25} />
         Vue
+        <small>{state.versions['overmind-vue']}</small>
         <img className={styles.image} src={JsImage} width="20" height="20" />
       </div>
     ),
     react: (
       <div className={styles.viewOption}>
         <img src={ReactImage} width={25} />
         React
+        <small>{state.versions['overmind-react']}</small>
         <img className={styles.image} src={JsImage} width="20" height="20" />
       </div>
     ),
     react_ts: (
       <div className={styles.viewOption}>
         <img src={ReactImage} width={25} />
         React
+        <small>{state.versions['overmind-react']}</small>
         <img className={styles.image} src={TsImage} width="20" height="20" />
       </div>
     ),
     angular_ts: (
       <div className={styles.viewOption}>
         <img src={AngularImage} width={25} />
         Angular
+        <small>{state.versions['overmind-angular']}</small>
         <img className={styles.image} src={TsImage} width="20" height="20" />
       </div>
     ),

packages/overmind-website/src/components/ViewSelector/index.tsx

@@ -11,8 +11,10 @@ export const viewOption = css`
   display: flex;
   align-items: center;
   width: 100%;
-  img:last-child {
+  small {
     margin-left: auto;
+    margin-right: 0.5rem;
+    color: #cacaca;
   }
 `
 

packages/overmind-website/src/components/ViewSelector/styles.ts

@@ -1,6 +1,6 @@
 import { OnInitialize } from 'overmind'
 
-const onInitialize: OnInitialize = ({ effects, state }, app) => {
+const onInitialize: OnInitialize = async ({ effects, state }, app) => {
   state.showViewHelp = !effects.storage.get('theme')
 
   effects.router.route('/', app.actions.openHome)
@@ -12,6 +12,8 @@ const onInitialize: OnInitialize = ({ effects, state }, app) => {
   effects.router.redirect('/api', '/api/action')
 
   effects.router.start()
+
+  state.versions = await effects.request('/backend/versions')
 }
 
 export default onInitialize

packages/overmind-website/src/overmind/onInitialize.ts

@@ -28,6 +28,9 @@ type State = {
   isLoadingApis: boolean
   isLoadingVideos: boolean
   showViewHelp: boolean
+  versions: {
+    [name: string]: string
+  }
 }
 
 const state: State = {
@@ -50,6 +53,7 @@ const state: State = {
   isLoadingApis: false,
   isLoadingVideos: false,
   showViewHelp: false,
+  versions: {},
 }
 
 export default state