Break resources in multiple json files & add to vuex module store

CONTRIBUTORS.md

@@ -3,4 +3,6 @@ These are lovely people who have helped this project:
 
 - [lostdesign](https://github.com/lostdesign) : Active Contributor and currently also the main contributor.
   * twitter: @lostdesign
-- [Kevin](https://github.com/S3B4S) :dog:
+- [Kevin](https://github.com/S3B4S) :dog:
+- [jacobparis](https://github.com/jacobparis) : Team Devcord
+  * twitter: @jacobmparis

components/Card.vue

@@ -1,58 +1,25 @@
 <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
+      a.card--reference(@click='createCopyUrl(resource)') 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'],
-  data(){
-    return {
-      active:''
-    }
-  },
-  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}`)
-      } 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();
-    }
-  }
+  props: ['resource', 'isActive', 'createCopyUrl'],
 }
 </script>
 
 
 <style lang="scss" scoped>
+.cardActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+
 .card {
   background: #2D3748;
   border-radius: .3rem;
@@ -62,10 +29,6 @@ export default {
   flex-direction: column;
   position: relative;
 
-  &--active {
-    box-shadow:inset 0px 0px 0px 3px #08e5ff;
-  }
-
   &--reference {
     cursor: pointer;
   }

components/Sidebar.vue

@@ -4,19 +4,34 @@
       template(v-for='category in categories')
         //- nuxt-link(:to='$i18n.path(category.slug)') {{ category.title }}
         nuxt-link(:to='category.slug') {{ category.title }}
+      div(class="toggleWrapper" @click="toggleCardsShown")
+        div(class="viewToggle" :class="{active: cardsShown}") Cards
+        div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
 
 <script>
+import { mapMutations } from "vuex";
+
 export default {
   data() {
     return {
-      categories: [{ slug: '', title: '' }],
+      categories: [{ slug: "", title: "" }]
+    };
+  },
+  computed: {
+    cardsShown() {
+      return this.$store.getters['Sidebar/isCardsShown']
     }
   },
   created() {
     this.categories = this.$store.getters['data/resources'].map(({ title, slug }) => ({ title, slug }))
+  },
+  methods: {
+    ...mapMutations({
+      toggleCardsShown: "Sidebar/toggleCardsShown"
+    })
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -29,6 +44,27 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
+  div {
+    cursor: pointer;
+  }
+  .toggleWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: min-content;
+    border: 3px;
+    border-color: #08e5ff;
+    border-style: solid;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .viewToggle {
+    padding: 0 0.2rem;
+    color: #008190;
+  }
+  .active {
+    background-color: #08e5ff;
+    color: #232331;
+  }
 }
 
 @media (max-width: 400px) {

components/TableHead.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+  tr.tableHead
+    th.tableHead--title {{title}}
+    th.tableHead--description {{desc}}
+    th.tableHead--links {{url}}
+</template>
+
+<script>
+export default {
+  props: ["title", "desc", "url"],
+};
+</script>
+
+
+<style lang="scss" scoped>
+.tableHead {
+  background: #2d3748;
+  padding: 0.25rem;
+  transition: 0.2s ease-in-out;
+  width: 1fr;
+  display: grid;
+  grid-template-columns: minmax(150px, 2fr) 8fr 125px;
+
+  &--title {
+    color: #008190;
+  }
+
+  &--description {
+    color: #008190;
+    line-height: 1.3;
+  }
+
+  &--links {
+    cursor: pointer;
+    color: #008190;
+  }
+}
+</style>

components/TableRow.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+  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(resource)') Copy
+        td
+          a.tableRow--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
+</template>
+
+<script>
+export default {
+  props: ['resource', 'isActive', 'createCopyUrl'],
+};
+</script>
+
+
+<style lang="scss" scoped>
+.rowActive {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+.tableRow {
+  background: #2d3748;
+  padding: 0.25rem;
+  transition: 0.2s ease-in-out;
+  width: 1fr;
+  display: grid;
+  grid-template-columns: minmax(150px, 2fr) 8fr 125px;
+
+  &--title {
+    color: white;
+  }
+
+  &--description {
+    color: #008190;
+    line-height: 1.3;
+		margin-right: 10px;
+  }
+
+  &--links {
+    cursor: pointer;
+
+    tr {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    img {
+      width: 1rem;
+      margin-left: 0.5rem;
+    }
+
+    &:hover::before {
+      opacity: 0.5;
+    }
+  }
+
+  &--reference {
+    &::before {
+      position: absolute;
+      height: 0.9rem;
+      width: 0.9rem;
+      margin-left: -1.15rem;
+      margin-top: -0.1rem;
+      content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggZD0iTSA0IDIgQyAzLjkwNSAyIDMuODE1NjA5NCAyLjAxNDM0MzggMy43MjQ2MDk0IDIuMDI3MzQzOCBDIDMuNDM0NjA5NCAyLjE0MzM0MzggMy4xMzk3MDMxIDIuMjU3MDkzOCAyLjg0NTcwMzEgMi4zNzEwOTM4IEMgMi4zMzQ3MDMxIDIuNzMzMDkzOCAyIDMuMzI2IDIgNCBMIDIgMTggTCA0IDE4IEwgNCA0IEwgMTggNCBMIDE4IDIgTCA0IDIgeiBNIDggNiBDIDYuODk1IDYgNiA2Ljg5NSA2IDggTCA2IDIwIEMgNiAyMS4xMDUgNi44OTUgMjIgOCAyMiBMIDIwIDIyIEMgMjEuMTA1IDIyIDIyIDIxLjEwNSAyMiAyMCBMIDIyIDggQyAyMiA2Ljg5NSAyMS4xMDUgNiAyMCA2IEwgOCA2IHogTSAxNyA4LjAwMTk1MzEgQyAxNy43NjggOC4wMDE5NTMxIDE4LjUzNjA5NCA4LjI5MzkwNjIgMTkuMTIxMDk0IDguODc4OTA2MiBDIDE5LjY4ODA5NCA5LjQ0NDkwNjMgMjAgMTAuMTk5IDIwIDExIEMgMjAgMTEuODAxIDE5LjY4ODA5NCAxMi41NTQwOTQgMTkuMTIxMDk0IDEzLjEyMTA5NCBMIDE3LjIyNDYwOSAxNS4wMTc1NzggTCAxNS44MTA1NDcgMTMuNjAzNTE2IEwgMTcuNzA3MDMxIDExLjcwNzAzMSBDIDE3Ljg5NjAzMSAxMS41MTgwMzEgMTggMTEuMjY3IDE4IDExIEMgMTggMTAuNzMzIDE3Ljg5NjAzMSAxMC40ODE5NjkgMTcuNzA3MDMxIDEwLjI5Mjk2OSBDIDE3LjMxNjAzMSA5LjkwMTk2ODcgMTYuNjgzOTY5IDkuOTAyOTY4OCAxNi4yOTI5NjkgMTAuMjkyOTY5IEwgMTQuMzkwNjI1IDEyLjE5NTMxMiBMIDE1LjgwNDY4OCAxMy42MDkzNzUgTCAxMy44MDA3ODEgMTUuNjEzMjgxIEwgMTUuMjE0ODQ0IDE3LjAyNzM0NCBMIDEzLjExOTE0MSAxOS4xMjEwOTQgQyAxMi41NTQxNDEgMTkuNjg3MDk0IDExLjgwMSAyMCAxMSAyMCBDIDEwLjE5OSAyMCA5LjQ0NDkwNjMgMTkuNjg4MDk0IDguODc4OTA2MiAxOS4xMjEwOTQgQyA4LjMxMjkwNjMgMTguNTU1MDk0IDggMTcuODAxIDggMTcgQyA4IDE2LjE5OSA4LjMxMjkwNjIgMTUuNDQ1OTA2IDguODc4OTA2MiAxNC44Nzg5MDYgTCAxMC45NzI2NTYgMTIuNzg1MTU2IEwgMTIuMzg2NzE5IDE0LjE5OTIxOSBMIDE0LjM2OTE0MSAxMi4yMTY3OTcgTCAxMi45NTUwNzggMTAuODAyNzM0IEwgMTQuODc4OTA2IDguODc4OTA2MiBDIDE1LjQ2MzkwNiA4LjI5MzkwNjIgMTYuMjMyIDguMDAxOTUzMSAxNyA4LjAwMTk1MzEgeiBNIDEyLjM3MzA0NyAxNC4yMTI4OTEgTCAxMC4yOTI5NjkgMTYuMjkyOTY5IEMgMTAuMTAzOTY5IDE2LjQ4MTk2OSAxMCAxNi43MzMgMTAgMTcgQyAxMCAxNy4yNjcgMTAuMTAzOTY5IDE3LjUxODAzMSAxMC4yOTI5NjkgMTcuNzA3MDMxIEMgMTAuNjcxOTY5IDE4LjA4NjAzMSAxMS4zMjgwMzEgMTguMDg1MDMxIDExLjcwNzAzMSAxNy43MDcwMzEgTCAxMy43ODcxMDkgMTUuNjI2OTUzIEwgMTIuMzczMDQ3IDE0LjIxMjg5MSB6IiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
+    }
+  }
+  &--target {
+    &::before {
+      position: absolute;
+      height: 0.9rem;
+      width: 0.9rem;
+      margin-left: -1.15rem;
+      margin-top: -0.1rem;
+      content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzA4ZTVmZiI+PHBhdGggc3R5bGU9ImxpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb24tc3R5bGU6c29saWQ7dGV4dC1kZWNvcmF0aW9uLWNvbG9yOiMwMDA7dGV4dC10cmFuc2Zvcm06bm9uZTtibG9jay1wcm9ncmVzc2lvbjp0Yjtpc29sYXRpb246YXV0bzttaXgtYmxlbmQtbW9kZTpub3JtYWwiIGQ9Ik0gNSAzIEMgMy45MDY5MzcyIDMgMyAzLjkwNjkzNzIgMyA1IEwgMyAxOSBDIDMgMjAuMDkzMDYzIDMuOTA2OTM3MiAyMSA1IDIxIEwgMTkgMjEgQyAyMC4wOTMwNjMgMjEgMjEgMjAuMDkzMDYzIDIxIDE5IEwgMjEgMTIgTCAxOSAxMiBMIDE5IDE5IEwgNSAxOSBMIDUgNSBMIDEyIDUgTCAxMiAzIEwgNSAzIHogTSAxNCAzIEwgMTQgNSBMIDE3LjU4NTkzOCA1IEwgOC4yOTI5Njg4IDE0LjI5Mjk2OSBMIDkuNzA3MDMxMiAxNS43MDcwMzEgTCAxOSA2LjQxNDA2MjUgTCAxOSAxMCBMIDIxIDEwIEwgMjEgMyBMIDE0IDMgeiIgZm9udC13ZWlnaHQ9IjQwMCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIHdoaXRlLXNwYWNlPSJub3JtYWwiIG92ZXJmbG93PSJ2aXNpYmxlIiBmaWxsPSIjMDhlNWZmIi8+PC9zdmc+Cg==");
+    }
+  }
+}
+</style>