From 59b804e01eb9a1186f2acda8d686fbe84e441e81 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 14 Jan 2019 18:03:43 +0000
Subject: [PATCH] Update post

---
 ...cquia-dashboard-with-vuejs-tailwind-css.md | 106 ++++++++++++++++--
 1 file changed, 97 insertions(+), 9 deletions(-)

diff --git a/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md b/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
index 06bd0738..9d4644b5 100644
--- a/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
+++ b/source/_posts/2019-01-10-rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
@@ -12,9 +12,104 @@ After [rebuilding Drupal’s Bartik theme](/blog/rebuilding-bartik-with-vuejs-ta
 
 ## Why?
 
-The same as the Bartik rebuild, this was a good opportunity for me to learn more about different technologies
+The same as the Bartik rebuild, this was a good opportunity for me to gain more experience with new technologies - Vue in particular - and to provide another demonstration of how Tailwind CSS can be used.
 
-vue router
+Like the Bartik clone, this was originally going to be another single page rebuild, however after completing the first page I decided to expand it to include three pages which also gave me the opportunity to use [Vue Router](https://router.vuejs.org) - something that I had not used previously - and to organise a multi-page Vue application.
+
+## Configuring Vue Router
+
+`src/router/index.js`:
+
+```js
+import Vue from 'vue'
+import Router from 'vue-router'
+import Applications from '@/views/Applications'
+import Environment from '@/views/Environment'
+import Environments from '@/views/Environments'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'applications',
+      component: Applications,
+    },
+    {
+      path: '/:id/environments',
+      name: 'environments',
+      component: Environments,
+      props: true,
+    },
+    {
+      path: '/:id/environments/:environmentName',
+      name: 'environment',
+      component: Environment,
+      props: true,
+    }
+  ]
+})
+```
+
+## Passing in data
+
+`src/data.json`
+
+```json
+{
+  "applications": {
+    "1": {
+      "id": 1,
+      "name": "Rebuilding Acquia",
+      "machineName": "rebuildingacquia",
+      "type": "Drupal",
+      "level": "Enterprise",
+      "environments": {
+        "dev": {
+          "name": "Dev",
+          "url": "dev.rebuilding-acquia.com",
+          "label": "develop"
+        },
+        "stage": {
+          "name": "Stage",
+          "url": "stg.rebuilding-acquia.com",
+          "label": "master"
+        },
+        "prod": {
+          "name": "Prod",
+          "url": "rebuilding-acquia.com",
+          "label": "tags/2018-12-21"
+        }
+      },
+      "tasks": [
+        {
+          "text": "Commit: fdac923 Merge branch 'update-password-policy' refs/heads/master",
+          "user": "system",
+          "times": {
+            "display": "Dec 19, 2018 3:48:29 PM UTC +0000",
+            "started": "Dec 19, 2018 3:48:29 PM UTC +0000",
+            "completed": "Dec 19, 2018 3:48:29 PM UTC +0000"
+          },
+          "loading": false,
+          "success": true
+        }
+      ]
+    }
+  }
+}
+```
+
+## The Environments page
+
+This was the first page that I rebuilt - the Environments page for an application that shows the information of the different configured environments.
+
+Vue Router is configured to show the 
+
+<figure>
+  <img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-grey-light p-2">
+  <figcaption>The rebuilt Environments page for an application.</figcaption>
+</figure>
 
 ## The applications page
 
@@ -23,13 +118,6 @@ vue router
   <figcaption>The rebuilt Applications page.</figcaption>
 </figure>
 
-## The environments page
-
-<figure>
-  <img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-grey-light p-2">
-  <figcaption>The rebuilt Environments page for an application.</figcaption>
-</figure>
-
 ## An environment page
 
 <figure>