Change post date

2019-02-12 09:09:06 +00:00 · 2019-02-12 09:09:06 +00:00 · be623c42af
commit be623c42af
parent 03d107af61
1 changed files with 1 additions and 0 deletions
--- a/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
+++ b/source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
@ -0,0 +1,132 @@
+---
+title: Rebuilding Acquia’s Dashboard with Vue.js and Tailwind CSS
+date: 2019-02-12
+excerpt: How I rebuilt Acquia’s dashboard using Vue.js and Tailwind CSS.
+tags:
+    - drupal
+    - tailwind-css
+    - tweet
+    - vuejs
+draft: true
+---
+After [rebuilding Drupal’s Bartik theme](/blog/rebuilding-bartik-with-vuejs-tailwind-css), I’ve now used [Vue.js][vue] and [Tailwind CSS][tailwind] to rebuild another Drupal related UI - this time it’s [Acquia’s](https://www.acquia.com) web hosting dashboard. Again, you can [view the site on Netlify][netlify] and [the code on GitHub][github].
+
+## Why?
+
+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.
+
+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
+
+<figure>
+  <img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-grey-light p-2">
+  <figcaption>The rebuilt Applications page.</figcaption>
+</figure>
+
+## An environment page
+
+<figure>
+  <img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-grey-light p-2">
+  <figcaption>The rebuilt page for an environment within an application.</figcaption>
+</figure>
+
+[github]: https://github.com/opdavies/rebuilding-acquia
+[netlify]: https://rebuilding-acquia.netlify.com
+[tailwind]: https://tailwindcss.com
+[vue]: https://vuejs.org