Share common component & filter data

components/CategoryPage.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+  div
+    h1 {{ resources.title }}
+    .cards
+      template(v-for='resource in resources.resources')
+        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
+</template>
+
+<script>
+import Card from './Card'
+
+export default {
+  props: ["resources"],
+  components: {
+    Card
+  },
+}
+</script>
+

pages/_category.vue

@@ -1,27 +0,0 @@
-<template lang="pug">
-  div
-    h1 {{ category.title }}
-    .cards
-      template(v-for='resource in category.resources')
-        Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
-</template>
-
-<script>
-import store from '../store.json'
-import Card from '../components/Card'
-
-export default {
-  data () {
-    return {
-      categoryTitle: this.$route.params.category,
-      categories: store,
-    }
-  },
-  computed: {
-    category() {      
-      return this.categories.find(category => category.title.toLowerCase() === this.categoryTitle.toLowerCase())
-    }
-  },
-  components: { Card, },
-}
-</script>

pages/communities/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'communities')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/css/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'css')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/daily/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'daily')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/design/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'design')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/frontend/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'frontend')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/fullstack/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'fullstack')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/general/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'general')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/html/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'html')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/javascript/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'javascript')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/php/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'php')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/server/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'server')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/tools/index.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  CategoryPage(:resources="resources")
+</template>
+
+<script>
+import CategoryPage from '../../components/CategoryPage'
+import store from '../../store.json'
+
+export default {
+  data() {
+    return {
+      resources: store.find(x => x.title.toLowerCase() === 'tools')
+    }
+  },
+  components: {
+    CategoryPage
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>