moving logic to _category to reduce duplication

components/Card.vue

@@ -1,58 +1,48 @@
 <template lang="pug">
-  .card(:class="active")
-    p.card--title {{title}}
-    p.card--description {{desc}}
+  .card(:class="{ cardActive: isActive }")
+    p.card--title {{resource.title}}
+    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 {
-      active:''
-    }
+    return {}
   },
   methods: {
      async createCopyUrl() {
       try {
-        let currentPath = this.$router.history.current.path
-        let reference =  this.createReferenceTag(this.$props.title)
-
-        await this.$copyText(`https://webgems.io${currentPath}?card=${reference}`)
-        this.$router.push(`${currentPath}?card=${reference}`)
+        const { path } = this.resource
+        await this.$copyText(`https://webgems.io${path}`)
+        this.$emit('toggle', 'test')
+        this.$router.push(path)
       } 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() {
-    this.checkReference();
-  },
-  watch: {
-    '$route': function() {
-      this.checkReference();
-    }
-  }
+  mounted() {},
+  watch: {},
+  // category() {
+  //     return this.categories.find(
+  //       category =>
+  //         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")
-    td.tableRow--title {{title}}
-    td.tableRow--description {{desc}}
+  tr.tableRow(:class="{ rowActive: isActive }")
+    td.tableRow--title {{resource.title}}
+    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 {
-      active: ""
-    };
+    return {};
   },
   methods: {
-    async createCopyUrl() {
+     async createCopyUrl() {
       try {
-        let currentPath = this.$router.history.current.path;
-        let reference = this.createReferenceTag(this.$props.title);
-
-        await this.$copyText(
-          `https://webgems.io${currentPath}?card=${reference}`
-        );
-        this.$router.push(`${currentPath}?card=${reference}`);
+        const { path } = this.resource
+        await this.$copyText(`https://webgems.io${path}`)
+        this.$emit('toggle', 'test')
+        this.$router.push(path)
       } 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() {
-    this.checkReference();
-  },
-  watch: {
-    $route: function() {
-      this.checkReference();
-    }
-  }
+  mounted() {},
+  watch: {},
 };
 </script>
 
 
 <style lang="scss" scoped>
+.rowActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
 .tableRow {
   background: #2d3748;
   padding: 0.25rem;