feat: Improve the post list experience

src/.vuepress/components/PostList.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="posts-list">
+        <div class="post" v-for="post in posts" @click="router.push(post.path)">
+
+            <div class="post__excerpt" v-html="post.excerpt"></div>
+
+            <div class="post__metadata">
+            <DateTime class="post__date" :time="post.frontmatter.date" format="YYYY-MM-DD" />
+            <span class="post__tag" v-for="tag in (post.frontmatter?.tags || [])">#{{ tag }}</span>
+            <a class="post__keep-reading" :href="post.path">Keep Reading &rarr;</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {} from 'vue'
+import {useRouter} from 'vue-router'
+
+export default {
+    props: {
+        posts: {
+            type: Array,
+            required: true
+        }
+    },
+    setup(props) {
+        return {
+            posts: props.posts,
+            router: useRouter()
+        }
+    }
+}
+</script>
+
+<style>
+    .posts-list .post {
+        margin-left: 1rem;
+        margin-right: 2rem;
+        margin-bottom: 2rem;
+        padding-left: 1rem;
+        cursor: pointer;
+
+        border-left: 4px solid rgba(180, 180, 180, 0.0);
+        transition: border-color 0.2s ease-in-out;
+    }
+
+    .posts-list .post:hover {
+        border-color: var(--c-brand);
+    }
+
+    .posts-list .post__title {
+        margin-bottom: 0;
+    }
+
+    .posts-list .post__title a {
+        color: var(--c-text);
+    }
+
+    .posts-list .post__metadata {
+
+    }
+
+    .posts-list .post__excerpt .header-anchor {
+        display: none;
+    }
+
+    .posts-list .post__excerpt h1 {
+        font-size: 1.4rem;
+        padding-top: 0;
+        margin-top: 1rem;
+    }
+
+    .posts-list .post__excerpt h1:first-child + p {
+        margin-top: 0;
+    }
+
+    .posts-list .post__keep-reading {
+        margin-left: 0.5rem;
+    }
+
+    .posts-list .post__date {
+        font-size: 0.9rem;
+        opacity: 0.7;
+        margin: 0 0.5rem;
+    }
+
+    .posts-list .post__tag {
+        font-size: 0.9rem;
+        font-weight: bold;
+        margin: 0 5px;
+    }
+</style>

src/.vuepress/styles/index.scss

@@ -4,6 +4,10 @@
  * ref：https://v1.vuepress.vuejs.org/config/#index-styl
  */
 
+:root {
+  scroll-behavior: smooth;
+}
+
 .navbar {
   .site-name {
     font-weight: lighter;
@@ -23,4 +27,51 @@ blockquote {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-style: italic;
   font-size: 1.2rem;
+}
+
+a.action-button {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    animation: button-shine-later 5.7s ease-in-out infinite;
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(120deg, transparent, var(--c-brand-dark), transparent);
+  }
+
+  &.primary {
+    &::before {
+      animation: button-shine 5.7s ease-in-out infinite;
+      background: linear-gradient(120deg, transparent, var(--c-brand-light), transparent);
+    }
+  }
+}
+
+@keyframes button-shine {
+  0% {
+    left: -100%;
+    transition-property: left;
+  }
+  12%,
+  100% {
+    left: 100%;
+    transition-property: left;
+  }
+}
+
+@keyframes button-shine-later {
+  0%,
+  8% {
+    left: -100%;
+    transition-property: left;
+  }
+  20%,
+  100% {
+    left: 100%;
+    transition-property: left;
+  }
 }

src/README.md

@@ -15,24 +15,15 @@ actions:
       link: /archive/
       type: secondary
 
-footer: Copyright © Sierra Softworks 2021
+footer: Copyright © Sierra Softworks 2023
 ---
 
 
 <div v-if="latestPosts">
 
 ## Latest Posts
 
-<div class="latest-post" v-for="post in latestPosts">
-    <div class="latest-post__excerpt" v-html="post.excerpt"></div>
-    <div class="latest-post__metadata">
-        <DateTime class="latest-post__date" :time="post.frontmatter.date" format="YYYY-MM-DD" />
-        <span class="tag" v-for="tag in (post.frontmatter?.tags || [])">#{{ tag }}</span>
-    </div>
-
-
-<a :href="post.path">Keep Reading &rarr;</a>
-</div>
+<PostList :posts="latestPosts" />
 </div>
 
 <script lang="ts">
@@ -51,22 +42,4 @@ export default defineComponent({
 </script>
 
 <style>
-    .latest-post__excerpt h1 {
-        font-size: 1.4rem;
-    }
-
-    .latest-post__metadata {
-
-    }
-
-    .latest-post__date {
-        font-size: 0.9rem;
-        opacity: 0.7;
-    }
-
-    .tag {
-        font-size: 0.9rem;
-        font-weight: bold;
-        margin: 0 5px;
-    }
 </style>

src/archive.md

@@ -11,18 +11,7 @@ editLink: false
 
 <h3 class="year-title">{{ year.year }}</h3>
 
-<div class="archive-post" v-for="post in year.posts">
-
-<h4 class="archive-post__title">
-<a :href="post.path">{{ post.frontmatter.title }}</a>
-</h4>
-
-<div class="archive-post__metadata">
-<DateTime class="archive-post__date" :time="post.frontmatter.date" format="YYYY-MM-DD" />
-<span class="tag" v-for="tag in (post.frontmatter?.tags || [])">#{{ tag }}</span>
-</div>
-
-</div>
+<PostList :posts="year.posts" />
 
 </div>
 
@@ -59,6 +48,8 @@ export default {
             return yearsList
         })
 
+
+
         return {
             search,
             years
@@ -85,7 +76,7 @@ export default {
     }
 
     input.search-box:focus {
-        border-bottom: 2px solid #1FB3FF;
+        border-bottom: 2px solid var(--c-brand);
         outline: none;
     }
 
@@ -94,32 +85,6 @@ export default {
         margin-top: 3rem;
         padding-bottom: 0.5rem;
         border-bottom: 1px solid rgba(180, 180, 180, 0.3);
-    }
-
-    .tag {
-        font-size: 0.9rem;
-        font-weight: bold;
-        margin: 0 5px;
-    }
-
-    .archive-post {
-        margin-left: 4rem;
-    }
-
-    .archive-post__title {
-        margin-bottom: 0;
-    }
-
-    .archive-post__title a {
-        color: var(--c-text);
-    }
-
-    .archive-post__metadata {
-
-    }
-
-    .archive-post__date {
-        font-size: 0.9rem;
-        opacity: 0.7;
+        color: var(--c-brand-light);
     }
 </style>