moving logic to _category to reduce duplication

pages/_category.vue

@@ -2,12 +2,14 @@
   div
     h1 {{ category.title }}
     .cards(v-if="cardsShown")
-      template(v-for='resource in category.resources')
-        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+      template
+        div(v-for='resource in category.resources' :key='resource.title')
+          Card(:resource='resource' :isActive='activeCard === resource.title' v-on:toggle='onToggle(resource.title)')
     table(v-if="!cardsShown")
       TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
-      template(v-for='resource in category.resources')
-        TableRow(:title='resource.title' :desc='resource.desc' :url='resource.url')
+      template
+        div(v-for='resource in category.resources' :key='resource.title')
+          TableRow(:resource='resource' :isActive='activeCard === resource.title' v-on:toggle='onToggle(resource.title)')
 </template>
 
 <script>
@@ -20,7 +22,9 @@ export default {
   data() {
     return {
       categoryRouteTitle: this.$route.params.category,
-      categories: store
+      categories: store,
+      index: '',
+      activeCard: ''
     };
   },
   computed: {
@@ -28,10 +32,27 @@ export default {
       return this.$store.state.Sidebar.cardsShown;
     },
     category() {
-      return this.categories.find(
+      const category = this.categories.find(
         category =>
           category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase()
       );
+      const pagePath = this.$router.history.current.path
+      const query = this.$route.query.card
+      for (const resource of category.resources) {
+        resource.cleanTitle = resource.title.replace(/ /g, '').toLowerCase()
+        resource.path = `${pagePath}?card=${resource.cleanTitle}`
+        resource.active = (resource.cleanTitle === query) ? 'card--active' : ''
+      }
+      return category
+    },
+  },
+  methods: {
+    onToggle(index) {
+      if (this.activeCard === index) {
+        this.activeCard = null;
+      } else {
+        this.activeCard = index;
+      }
     }
   },
   components: { Card, TableHead, TableRow }