From 2a77bb8a2c44ebc8ef23b9a29ce399692c385a09 Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Mon, 27 Apr 2020 23:39:38 +0100
Subject: [PATCH 1/7] Extract routes to minimise category route duplication

---
 src/router.js | 149 +++++++++++++++++++++++++++-----------------------
 1 file changed, 80 insertions(+), 69 deletions(-)

diff --git a/src/router.js b/src/router.js
index 271de2b..88e9ab5 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,80 +3,91 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-const router = new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  scrollBehavior: () => ({ y: 0 }),
-  routes: [
-    {
-      path: '/',
-      name: 'Home',
-      component: () =>
-        import(/* webpackChunkName: "Home" */ './views/home/Index'),
-    },
-    {
-      path: '/about',
-      name: 'About',
-      component: () =>
-        import(/* webpackChunkName: "About" */ './views/about/Index'),
-    },
-    {
-      path: '/storybook-alike',
-      name: 'StorybookAlike',
-      component: () =>
-        import(/* webpackChunkName: "StorybookAlike" */ './views/storybookalike/Index'),
-    },
-    {
-      path: '/tags',
-      name: 'TagIndex',
-      component: () =>
-        import(/* webpackChunkName: "TagIndex" */ './views/tags/Index'),
-    },
-    {
-      path: '/tags/:tagSlug',
-      name: 'TagShow',
-      component: () =>
-        import(/* webpackChunkName: "TagShow" */ './views/tags/Show'),
-    },
-    {
-      path: '/actions',
-      name: 'ActionIndex',
-      component: () =>
-        import(/* webpackChunkName: "ActionIndex" */ './views/actions/Index'),
-    },
-    {
-      path: '/actions/:actionSlug',
-      name: 'ActionShow',
-      component: () =>
-        import(/* webpackChunkName: "ActionShow" */ './views/actions/Show'),
-    },
-    {
-      path: '/categories',
-      name: 'CategoryIndex',
-      component: () =>
-        import(/* webpackChunkName: "CategoryIndex" */ './views/categories/Index'),
-    },
-    {
-      path: '/categories/:categorySlug',
-      name: 'CategoryShow',
-      component: () =>
-        import(/* webpackChunkName: "CategoryShow" */ './views/categories/Show'),
-    },
+// Base routes.
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () =>
+      import(/* webpackChunkName: "Home" */ './views/home/Index'),
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: () =>
+      import(/* webpackChunkName: "About" */ './views/about/Index'),
+  },
+  {
+    path: '/storybook-alike',
+    name: 'StorybookAlike',
+    component: () =>
+      import(/* webpackChunkName: "StorybookAlike" */ './views/storybookalike/Index'),
+  },
+  {
+    path: '/tags',
+    name: 'TagIndex',
+    component: () =>
+      import(/* webpackChunkName: "TagIndex" */ './views/tags/Index'),
+  },
+  {
+    path: '/tags/:tagSlug',
+    name: 'TagShow',
+    component: () =>
+      import(/* webpackChunkName: "TagShow" */ './views/tags/Show'),
+  },
+  {
+    path: '/categories',
+    name: 'CategoryIndex',
+    component: () =>
+      import(/* webpackChunkName: "CategoryIndex" */ './views/categories/Index'),
+  },
+  {
+    path: '/search',
+    name: 'SearchIndex',
+    component: () =>
+      import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
+  },
+  {
+    path: '/search/:searchTerm',
+    name: 'SearchQuery',
+    component: () =>
+      import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
+  },
+];
+
+
+// Array of information for all categories in the API.
+let categories = [
     {
-      path: '/search',
-      name: 'SearchIndex',
-      component: () =>
-        import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
+        id: '207559a4-fe66-4c3d-bc6c-4f721f9562a4',
+        slug: 'carbon-reduction'
     },
     {
-      path: '/search/:searchTerm',
-      name: 'SearchQuery',
-      component: () =>
-        import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
-    },
-  ],
+        id: 'f92ca585-ad4d-43bc-9430-43c2fad14aa1',
+        slug: 'clothing'
+    }
+];
+
+// Create router objects for each category.
+categories = categories.map(function(category) {
+    return {
+        path: '/' + category.slug,
+        name: 'SingleCategoryIndex',
+        component: () => import(/* webpackChunkName: "SingleCategoryIndex" */ './views/category/Index'),
+        props: { category: category }
+    };
+});
+
+
+const router = new Router({
+  //mode: 'history',
+  base: process.env.BASE_URL,
+  scrollBehavior: () => ({ y: 0 }),
+  // Merge base routes and category routes.
+  routes: routes.concat(categories)
 })
 
+
 // Bootstrap Analytics
 // Set in .env
 // https://github.com/MatteoGabriele/vue-analytics

From c1e55d1f447fa0896c38f03bb4007c486d827860 Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Mon, 27 Apr 2020 23:40:02 +0100
Subject: [PATCH 2/7] Load category, featured actions, and regular actions from
 API

---
 src/views/category/Index.vue | 89 ++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/views/category/Index.vue

diff --git a/src/views/category/Index.vue b/src/views/category/Index.vue
new file mode 100644
index 0000000..1d6e1cf
--- /dev/null
+++ b/src/views/category/Index.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="text-gray-800 antialiased">
+
+        <navigation/>
+
+        <div class="category-intro" v-hidden v-if="cat">
+            <div class="wrapper">
+                <div class="left">
+                    <h1 v-html="cat.title"></h1>
+                    <div class="written" v-html="cat.content"></div>
+                </div>
+                <div class="right">
+                    <img :src="cat.image.permalink" alt="">
+                </div>
+            </div>
+        </div>
+
+        <div class="featured-actions" v-hidden v-show="featured">
+            <div class="featured-action" v-for="action in featured" :key="action.id">
+                a
+            </div>
+        </div>
+
+        <div class="category-actions" v-hidden v-show="actions">
+            <div class="category-action" v-for="action in actions" :key="action.id">
+                b
+            </div>
+        </div>
+
+        <page-footer/>
+
+    </div>
+</template>
+
+<script>
+
+import api from './../../services/api.js';
+
+export default {
+    name: 'SingleCategoryIndex',
+
+    props: {
+        category: {
+            type: Object,
+            required: true
+        }
+    },
+
+    components: {
+        Navigation: () => import('./../../components/Navigation'),
+        //Action: () => import('./../../components/listing/Action'),
+        PageFooter: () => import('./../../components/Footer')
+    },
+
+    data() {
+        return {
+            cat: null,
+            featured: null,
+            actions: null
+        };
+    },
+
+    mounted() {
+        var self = this;
+
+        // Load category information.
+        api.showCategoryWithSlug(this.category.slug)
+        .then(function(response) {
+            self.cat = response;
+        });
+
+
+        // Load all actions for this category.
+        api.getActionsWithCategory(this.category.id)
+        .then(function(response) {
+            // Split actions into featured/regular.
+            self.featured = response.data.filter(function(action) {
+                return action.featured;
+            });
+            self.actions = response.data.filter(function(action) {
+              return !action.featured;
+            });
+        });
+    },
+
+    methods: {
+    }
+}
+</script>

From d04919c6d4070b94a99dcc14e37543aabe672fce Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Fri, 1 May 2020 21:59:21 +0100
Subject: [PATCH 3/7] Styling Tailwind doesn't support

---
 src/assets/main.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/assets/main.css b/src/assets/main.css
index db8e33a..c5bd8f5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -10,4 +10,27 @@ a {
   @apply text-pink-500;
 }
 
+.written > h1 {
+    @apply text-2xl mb-4;
+}
+.written > p:not(:last-child) {
+    @apply mb-4;
+}
+
+.image-left-side:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, rgba(42, 67, 101, 0.85), rgba(42, 67, 101, 0.25));
+    border-radius: 0.375rem;
+}
+@media screen and (min-width: 768px) {
+    .image-left-side:after {
+        background: linear-gradient(45deg, rgba(42, 67, 101, 0.85), rgba(42, 67, 101, 0));
+    }
+}
+
 @tailwind utilities;

From a1581c13279fdd36fb85e1bcc9fe23ee50de12eb Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Fri, 1 May 2020 21:59:30 +0100
Subject: [PATCH 4/7] Swap back to history mode

---
 src/router.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router.js b/src/router.js
index 88e9ab5..246c2e9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -80,7 +80,7 @@ categories = categories.map(function(category) {
 
 
 const router = new Router({
-  //mode: 'history',
+  mode: 'history',
   base: process.env.BASE_URL,
   scrollBehavior: () => ({ y: 0 }),
   // Merge base routes and category routes.

From 6e1e47251ed6774236a4bd7014012e6339624294 Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Fri, 1 May 2020 22:00:37 +0100
Subject: [PATCH 5/7] Restructure banner and finalise action styling

---
 src/views/category/Index.vue | 91 ++++++++++++++++++++++++++++++------
 1 file changed, 78 insertions(+), 13 deletions(-)

diff --git a/src/views/category/Index.vue b/src/views/category/Index.vue
index 1d6e1cf..a958db6 100644
--- a/src/views/category/Index.vue
+++ b/src/views/category/Index.vue
@@ -3,27 +3,92 @@
 
         <navigation/>
 
-        <div class="category-intro" v-hidden v-if="cat">
-            <div class="wrapper">
-                <div class="left">
-                    <h1 v-html="cat.title"></h1>
-                    <div class="written" v-html="cat.content"></div>
-                </div>
-                <div class="right">
-                    <img :src="cat.image.permalink" alt="">
+        <section class="flex items-center relative pt-32 pb-20" v-hidden v-if="cat">
+
+            <div class="absolute top-0 left-0 w-1/2 h-full bg-blue-900"></div>
+            <div class="absolute top-0 right-0 w-1/2 h-full bg-gray-100"></div>
+
+            <div class="relative w-full max-w-screen-lg px-5 mx-auto">
+
+                <div class="relative">
+
+                    <div class="relative z-10 w-full py-20 md:w-3/4 lg:w-3/5">
+                        <h1
+                            class="leading-tight text-white text-4xl font-bold mb-4 md:text-5xl lg:text-6xl"
+                            v-text="cat.title"
+                        ></h1>
+                        <p class="text-white text-lg font-light mb-6" v-html="cat.intro"></p>
+                    </div>
+
+                    <div
+                        class="image-left-side absolute top-0 right-0 w-3/4 h-full bg-cover bg-center rounded-md shadow-lg"
+                        :style="{backgroundImage: 'url(\'' + cat.image.permalink + '\')'}"
+                        role="img"
+                        aria-label=""
+                    ></div>
+
                 </div>
+
+            </div>
+
+        </section>
+
+        <div class="bg-white py-20" v-hidden v-if="cat">
+            <div class="container relative w-full max-w-screen-md px-5 mx-auto">
+                <div class="written" v-html="cat.content"></div>
             </div>
         </div>
 
-        <div class="featured-actions" v-hidden v-show="featured">
+        <!-- <div class="featured-actions" v-hidden v-show="featured">
             <div class="featured-action" v-for="action in featured" :key="action.id">
-                a
+            </div>
+        </div> -->
+
+        <div class="bg-gray-100 py-20" v-hidden v-show="actions">
+            <div class="container relative w-full max-w-screen-md px-5 mx-auto">
+                <div class="mb-6" v-for="action in actions" :key="action.id">
+                    <a
+                        :href="action.action_url"
+                        class="text-gray-800"
+                    >
+                        <h3
+                            v-text="action.title"
+                            class="text-xl mb-2 hover:text-pink-600"
+                        ></h3>
+                        <p
+                            v-html="action.description"
+                            class="mb-4"
+                        ></p>
+                    </a>
+                    <div class="sm:flex items-center justify-between flex-row-reverse pb-4 border-b-2 border-gray-200">
+                        <a
+                            :href="action.action_url"
+                            class="inline-block text-pink-600 px-4 py-2 mb-4 sm:mb-0 border-2 border-pink-600 rounded-full hover:bg-pink-600 hover:text-white"
+                        >Take Action</a>
+
+                        <div class="flex items-center">
+                            <p class="mr-3">Share</p>
+                            <a
+                                :href="'https://www.facebook.com/sharer/sharer.php?t=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'')) + '&u=' + action.action_url"
+                                class="block text-pink-600 mr-4 hover:text-pink-800"
+                            ><i class="fab fa-facebook-f"></i></a>
+                            <a
+                                :href="'https://twitter.com/intent/tweet?text=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'') + ' via @_ProtectEarth') + '&url=' + action.action_url"
+                                class="block text-pink-600 mr-4 hover:text-pink-800"
+                            ><i class="fab fa-twitter"></i></a>
+                            <a
+                                :href="'mailto:?subject=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'')) + '&body=' + action.action_url"
+                                class="block text-pink-600 mr-6 hover:text-pink-800"
+                            ><i class="fas fa-envelope"></i></a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
-        <div class="category-actions" v-hidden v-show="actions">
-            <div class="category-action" v-for="action in actions" :key="action.id">
-                b
+        <div class="bg-white py-20" v-hidden v-if="cat">
+            <div class="container relative w-full max-w-screen-md px-5 mx-auto">
+                <div class="written text-center">Green "Want to help? Great!" section here</div>
             </div>
         </div>
 

From 402d8b8d7926bb41d8692d50dd0a1e40a845acb2 Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Fri, 1 May 2020 22:11:53 +0100
Subject: [PATCH 6/7] Check if an image exists first

---
 src/views/category/Index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/category/Index.vue b/src/views/category/Index.vue
index a958db6..ba52a9f 100644
--- a/src/views/category/Index.vue
+++ b/src/views/category/Index.vue
@@ -21,8 +21,8 @@
                     </div>
 
                     <div
-                        class="image-left-side absolute top-0 right-0 w-3/4 h-full bg-cover bg-center rounded-md shadow-lg"
-                        :style="{backgroundImage: 'url(\'' + cat.image.permalink + '\')'}"
+                        class="image-left-side absolute top-0 right-0 w-3/4 h-full bg-cover bg-center background-gray-300 rounded-md shadow-lg"
+                        :style="{backgroundImage: 'url(\'' + (cat.image ? cat.image.permalink : '') + '\')'}"
                         role="img"
                         aria-label=""
                     ></div>

From 96149d1564d826384f1339f6bf21520a748e81fd Mon Sep 17 00:00:00 2001
From: imkieransmith <kieran@imkieransmith.com>
Date: Fri, 1 May 2020 22:12:00 +0100
Subject: [PATCH 7/7] Add remaining categories

---
 src/router.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/src/router.js b/src/router.js
index 246c2e9..e339778 100644
--- a/src/router.js
+++ b/src/router.js
@@ -65,6 +65,74 @@ let categories = [
     {
         id: 'f92ca585-ad4d-43bc-9430-43c2fad14aa1',
         slug: 'clothing'
+    },
+    {
+        id: 'a68b7a57-c0a5-4b27-81d2-93a19f2787a1',
+        slug: 'consumer-products'
+    },
+    {
+        id: 'e71796f8-4b3d-4f40-a1a8-527fb0fdf854',
+        slug: 'cooking'
+    },
+    {
+        id: '49f0ae64-b03a-4d50-bbdc-edd765ef4500',
+        slug: 'documentaries'
+    },
+    {
+        id: '1e06ea25-373d-440c-9abd-408710b475d0',
+        slug: 'food'
+    },
+    {
+        id: '681bffaf-a44c-4449-ae96-bf780506c862',
+        slug: 'footprint-calculators'
+    },
+    {
+        id: '6ad9cfc5-eac0-455e-9ad0-f537896373ba',
+        slug: 'home-improvements'
+    },
+    {
+        id: '7adab10c-985b-42e2-ab8c-eee35b5a8817',
+        slug: 'hygiene'
+    },
+    {
+        id: '1fcc2840-32ba-44fb-9b99-efe4d1397ff4',
+        slug: 'jobs'
+    },
+    {
+        id: '411e32f8-59bc-4fbb-ac7f-3d2a908b039e',
+        slug: 'land-management'
+    },
+    {
+        id: '0ec6e5b5-0a80-4c8d-b45f-b78c99492d8d',
+        slug: 'news'
+    },
+    {
+        id: '3d78ba9a-4f85-464b-a330-1cfb5c137328',
+        slug: 'politics'
+    },
+    {
+        id: '63a7cfb3-7cd5-4282-af9d-e5ed41572d1b',
+        slug: 'reforestation'
+    },
+    {
+        id: 'f9b2c5ee-8da3-446b-b865-0d716debed30',
+        slug: 'renewable-energy'
+    },
+    {
+        id: '0a32cb28-6330-4881-8671-824476ed5859',
+        slug: 'transportation'
+    },
+    {
+        id: '97826809-ed97-424c-9c46-cedba824add8',
+        slug: 'travel'
+    },
+    {
+        id: 'ee42a632-ac6a-4f89-802a-8111cf674d4c',
+        slug: 'volunteering'
+    },
+    {
+        id: 'a1a4ac88-627d-4bc7-a5b5-d3dcdc10cc43',
+        slug: 'waste'
     }
 ];