Rename article to category

front/client/App.vue

@@ -3,9 +3,7 @@
     <toolbar></toolbar>
     <v-content>
       <v-container fluid>
-        <keep-alive exclude="article-page">
-          <router-view></router-view>
-        </keep-alive>
+        <router-view></router-view>
       </v-container>
     </v-content>
     <a-footer />

front/client/components/Category.vue

@@ -1,19 +1,19 @@
 <template>
   <v-container>
-    <div class="article-wrapper">
-      <div class="article-top">
+    <div class="category-wrapper">
+      <div class="category-top">
         <i class="fas fa-rss"/>
         <div
           v-if="category"
-          class="article-top-data"
+          class="category-top-data"
         >
           <router-link
-            class="article-top-link"
+            class="category-top-link"
             :to="categoryUrl"
           >
             {{category.title}}
           </router-link>
-          <p class="article-top-group"> {{category.group}} </p>
+          <p class="category-top-group"> {{category.group}} </p>
         </div>
         <v-btn
           class="ml-2 pl-0 add-item-btn"
@@ -27,7 +27,7 @@
       </div>
       <div
         v-if="categoryDescription"
-        class="article-description"
+        class="category-description"
       >
         <div v-html="categoryDescription" />
       </div>
@@ -74,13 +74,13 @@ import AddItemDialog from 'client/components/AddItemDialog.vue'
 import category from 'client/store/modules/category'
 
 @Component({
-  name: 'article-component',
+  name: 'category-component',
   components: {
     CategoryItem,
     AddItemDialog
   }
 })
-export default class ArticleItem extends Vue {
+export default class categoryItem extends Vue {
   @Prop(String) categoryId!: string
 
   isDialogOpen: boolean = false
@@ -111,19 +111,19 @@ export default class ArticleItem extends Vue {
 </script>
 
 <style scoped>
-.article-top {
+.category-top {
   display: flex;
   align-items: center;
   margin: 0 0 45px;
 }
 
-.article-top-data {
+.category-top-data {
   display: flex;
   align-items: center;
   flex: 1;
 }
 
-.article-top >>> i {
+.category-top >>> i {
   margin-right: 15px;
   font-size: 18px;
   color: #979797;
@@ -131,11 +131,11 @@ export default class ArticleItem extends Vue {
   transition: all ease-in-out 0.25s;
 }
 
-.article-top >>> i:hover {
+.category-top >>> i:hover {
   color: #000;
 }
 
-.article-top-link {
+.category-top-link {
   font-size: 24px;
   font-weight: 600;
   text-decoration: none;
@@ -145,34 +145,34 @@ export default class ArticleItem extends Vue {
   margin-right: 30px;
 }
 
-.article-top-group {
+.category-top-group {
   font-size: 24px;
 }
 
-.article-top-link:hover {
+.category-top-link:hover {
   color: #000;
   color: #979797;
 }
 
-.article-wrapper {
+.category-wrapper {
   width: 800px;
   margin: 0 auto;
 }
 
-.article-description {
+.category-description {
   margin: 0 0 60px;
 }
 
-.article-description >>> p {
+.category-description >>> p {
   font-size: 16px;
 }
 
-.article-description >>> h1 {
+.category-description >>> h1 {
   margin: 20px 0 5px;
 }
 
 @media screend and (max-width: 768px) {
-  .article-item {
+  .category-item {
     margin: 0 0 30px;
   }
 }

front/client/components/CategoryItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="article-item">
+  <div class="category-item">
 
     <category-item-toolbar
       :itemUid="itemUid"
@@ -10,14 +10,14 @@
     />
 
     <div class="category-item-body">
-      <p class="article-section-title">Summary</p>
+      <p class="category-item-section-title">Summary</p>
       <div
-        class="article-description"
+        class="category-item-description"
         v-html="itemDescription"
       />
-      <div class="flex-wrapper article-section pros-cons-box">
+      <div class="flex-wrapper category-item-section pros-cons-box">
         <div class="width-50">
-          <p class="article-section-title">Pros</p>
+          <p class="category-item-section-title">Pros</p>
           <ul
             v-if="pros"
             v-for="(value, index) in pros"
@@ -27,18 +27,18 @@
           </ul>
         </div>
         <div class="width-50">
-          <p class="article-section-title">Cons</p>
+          <p class="category-item-section-title">Cons</p>
           <ul v-if="cons" v-for="(value, index) in cons" :key="index">
             <li v-html="value.content.html"></li>
           </ul>
         </div>
       </div>
-      <div class="article-section">
-        <p class="article-section-title">Ecosystem</p>
+      <div class="category-item-section">
+        <p class="category-item-section-title">Ecosystem</p>
         <div v-html="ecosystem"></div>
       </div>
-      <div class="article-section notes-box">
-        <p class="article-section-title">Notes</p>
+      <div class="category-item-section notes-box">
+        <p class="category-item-section-title">Notes</p>
         <div class="notes-settings">
           <!-- TODO change a to vue markup element -->
           <button class="notes-settings-btn" @click="expandNotes">expand notes</button>
@@ -128,24 +128,24 @@ export default class CategoryItem extends Vue {
   font-size: 16px;
 }
 
-.article-description {
+.category-item-description {
   margin: 10px 0 60px;
 }
 
-.article-description >>> p {
+.category-item-description >>> p {
   margin: 0;
 }
 
-.article-description >>> p {
+.category-item-description >>> p {
   margin: 0 0 15px;
   font-size: 16px;
 }
 
-.article-description >>> h1 {
+.category-item-description >>> h1 {
   margin: 25px 0 5px;
 }
 
-.article-section {
+.category-item-section {
   margin: 30px 0;
 }
 
@@ -153,16 +153,16 @@ export default class CategoryItem extends Vue {
   position: relative;
 }
 
-.article-section.pros-cons-box,
-.article-section.notes-box >>> li {
+.category-item-section.pros-cons-box,
+.category-item-section.notes-box >>> li {
   margin: 0 0 5px;
 }
 
-.article-section.notes-box >>> h1 {
+.category-item-section.notes-box >>> h1 {
   margin: 20px 0;
 }
 
-.article-item {
+.category-item {
   background: #e5e5e5;
   margin: 0 0 80px;
 }
@@ -181,7 +181,7 @@ export default class CategoryItem extends Vue {
   padding-left: 20px;
 }
 
-.article-section-title {
+.category-item-section-title {
   display: block;
   margin: 0 0 8px;
   font-size: 22px !important;
@@ -239,7 +239,7 @@ export default class CategoryItem extends Vue {
   .category-item-body {
     width: 100%;
   }
-  .article-item {
+  .category-item {
     margin: 0 0 30px;
   }
 }

front/client/page/CategoryPage.vue

@@ -1,23 +1,22 @@
 <template>
-  <article-item
+  <category
     :categoryId="categoryId"
   />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import ArticleItem from 'client/components/Article.vue'
+import Category from 'client/components/Category.vue'
 import Component from 'vue-class-component'
-import { Prop } from 'vue-property-decorator';
+import { Prop } from 'vue-property-decorator'
 
 @Component({
-  name: 'article-page',
   components: {
-    ArticleItem
+    Category
   }
 })
 
-export default class ArticlePage extends Vue {
+export default class CategoryPage extends Vue {
   @Prop(String) categoryId!: string
 }
 </script>

front/client/router/index.ts

@@ -21,7 +21,7 @@ function createRouter () {
       {
         path: '/haskell/:category',
         name: 'Category',
-        component: () => import('../page/ArticlePage.vue'),
+        component: () => import('../page/CategoryPage.vue'),
         props: (route) => ({ categoryId: route.params.category.split('#').shift().split('-').pop() })
       },
       {