moving logic to _category to reduce duplication

components/Card.vue

@@ -1,58 +1,48 @@
 <template lang="pug">
-  .card(:class="active")
+  .card(:class="{ cardActive: isActive }")
-    p.card--title {{title}}
+    p.card--title {{resource.title}}
-    p.card--description {{desc}}
+    p.card--description {{resource.desc}}
     .card--links
       a.card--reference(@click='createCopyUrl') Copy
       br
-      a.card--target(:href="url" :target='title' rel='noreferrer') Open
+      a.card--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
 </template>
 
 <script>
 export default {
-  props: ['title', 'desc', 'url'],
+  props: ['resource', 'isActive'],
   data(){
-    return {
+    return {}
-      active:''
-    }
   },
   methods: {
      async createCopyUrl() {
       try {
-        let currentPath = this.$router.history.current.path
+        const { path } = this.resource
-        let reference =  this.createReferenceTag(this.$props.title)
+        await this.$copyText(`https://webgems.io${path}`)
-
+        this.$emit('toggle', 'test')
-        await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
+        this.$router.push(path)
-        this.$router.push(`${currentPath}?card=${reference}`)
       } catch (e) {
         console.error(e);
       }
     },
-    createReferenceTag(tag){
-      return tag.replace(/ /g, '').toLowerCase()
-    },
-    checkReference(){
-      const query = this.$route.query.card
-      const title = this.createReferenceTag(this.$props.title)
-
-      this.active = title === query
-        ? 'card--active'
-        : ''
-    },
   },
-  mounted() {
+  mounted() {},
-    this.checkReference();
+  watch: {},
-  },
+  // category() {
-  watch: {
+  //     return this.categories.find(
-    '$route': function() {
+  //       category =>
-      this.checkReference();
+  //         category.title.toLowerCase() === this.categoryRouteTitle.toLowerCase()
-    }
+  //     );
-  }
+  //   }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.cardActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+
 .card {
   background: #2D3748;
   border-radius: .3rem;
@@ -62,10 +52,6 @@ export default {
   flex-direction: column;
   position: relative;
 
-  &--active {
-    box-shadow:inset 0px 0px 0px 3px #08e5ff;
-  }
-
   &--reference {
     cursor: pointer;
   }

components/TableRow.vue

@@ -1,60 +1,43 @@
 <template lang="pug">
-  tr.tableRow(:class="active")
+  tr.tableRow(:class="{ rowActive: isActive }")
-    td.tableRow--title {{title}}
+    td.tableRow--title {{resource.title}}
-    td.tableRow--description {{desc}}
+    td.tableRow--description {{resource.desc}}
     td.tableRow--links
       tr
         td
           a.tableRow--reference(@click='createCopyUrl') Copy
         td
-          a.tableRow--target(:href="url" :target='title' rel='noreferrer') Open
+          a.tableRow--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
 </template>
 
 <script>
 export default {
-  props: ["title", "desc", "url"],
+  props: ['resource', 'isActive'],
   data() {
-    return {
+    return {};
-      active: ""
-    };
   },
   methods: {
-    async createCopyUrl() {
+     async createCopyUrl() {
       try {
-        let currentPath = this.$router.history.current.path;
+        const { path } = this.resource
-        let reference = this.createReferenceTag(this.$props.title);
+        await this.$copyText(`https://webgems.io${path}`)
-
+        this.$emit('toggle', 'test')
-        await this.$copyText(
+        this.$router.push(path)
-          `https://webgems.io${currentPath}?card=${reference}`
-        );
-        this.$router.push(`${currentPath}?card=${reference}`);
       } catch (e) {
         console.error(e);
       }
     },
-    createReferenceTag(tag) {
-      return tag.replace(/ /g, "").toLowerCase();
-    },
-    checkReference() {
-      const query = this.$route.query.card;
-      const title = this.createReferenceTag(this.$props.title);
-
-      this.active = title === query ? "card--active" : "";
-    }
   },
-  mounted() {
+  mounted() {},
-    this.checkReference();
+  watch: {},
-  },
-  watch: {
-    $route: function() {
-      this.checkReference();
-    }
-  }
 };
 </script>
 
 
 <style lang="scss" scoped>
+.rowActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
 .tableRow {
   background: #2d3748;
   padding: 0.25rem;

pages/_category.vue

@@ -2,12 +2,14 @@
   div
     h1 {{ category.title }}
     .cards(v-if="cardsShown")
-      template(v-for='resource in category.resources')
+      template
-        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+        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')
+      template
-        TableRow(:title='resource.title' :desc='resource.desc' :url='resource.url')
+        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 }