refactor: abstract article preview

package.json

@@ -61,6 +61,7 @@
       "plugin:vue/vue3-recommended"
     ],
     "rules": {
+      "no-undef": "off",
       "comma-dangle": [
         "warn",
         "always-multiline"
@@ -69,7 +70,8 @@
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/ban-ts-comment": "off",
       "vue/require-prop-types": "off",
-      "vue/require-explicit-emits": "off"
+      "vue/require-explicit-emits": "off",
+      "vue/no-dupe-keys": "off"
     }
   },
   "jest": {

src/components/ArticlePreview.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="article-preview">
+    <div class="article-meta">
+      <RouterLink :to="`/@${article.author.username}`">
+        <img :src="article.author.image">
+      </RouterLink>
+      <div class="info">
+        <RouterLink
+          :to="`/@${article.author.username}`"
+          class="author"
+        >
+          {{ article.author.username }}
+        </RouterLink>
+        <span class="date">{{ new Date(article.createdAt).toDateString() }}</span>
+      </div>
+      <button class="btn btn-outline-primary btn-sm pull-xs-right">
+        <i class="ion-heart" /> {{ article.favoritesCount }}
+      </button>
+    </div>
+    <RouterLink
+      :to="`/article/${article.slug}`"
+      class="preview-link"
+    >
+      <h1>{{ article.title }}</h1>
+      <p>{{ article.description }}</p>
+      <span>Read more...</span>
+    </RouterLink>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs } from 'vue'
+
+interface ArticlePreviewProps {
+  article: Article,
+}
+
+export default defineComponent({
+  name: 'ArticlePreview',
+  props: ['article'],
+  setup (props: ArticlePreviewProps) {
+    const { article } = toRefs(props)
+    return {
+      article,
+    }
+  },
+})
+</script>

src/pages/Home.vue

@@ -29,33 +29,11 @@
             </ul>
           </div>
 
-          <div
+          <ArticlePreview
             v-for="article in articles"
             :key="article.slug"
-            class="article-preview"
-          >
-            <div class="article-meta">
-              <a href=""><img :src="article.author.image"></a>
-              <div class="info">
-                <a
-                  href=""
-                  class="author"
-                >{{ article.author.username }}</a>
-                <span class="date">{{ new Date(article.createdAt).toDateString() }}</span>
-              </div>
-              <button class="btn btn-outline-primary btn-sm pull-xs-right">
-                <i class="ion-heart" /> {{ article.favoritesCount }}
-              </button>
-            </div>
-            <a
-              href=""
-              class="preview-link"
-            >
-              <h1>{{ article.title }}</h1>
-              <p>{{ article.description }}</p>
-              <span>Read more...</span>
-            </a>
-          </div>
+            :article="article"
+          />
 
           <Pagination
             :count="articlesCount"
@@ -110,14 +88,16 @@
 </template>
 
 <script lang="ts">
-import { useArticles } from '../services/article/getArticle'
+import ArticlePreview from '../components/ArticlePreview.vue'
 import Pagination from '../components/Pagination.vue'
+import { useArticles } from '../services/article/getArticle'
 
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
+    ArticlePreview,
     Pagination,
   },
   setup () {