feat(home): finish home page

Octobug · Nov 14, 2023 · 1f78f24 · 1f78f24
1 parent fafb6ce
commit 1f78f24
Show file tree

Hide file tree

Showing 16 changed files with 285 additions and 258 deletions.
diff --git a/.vitepress/config.theme.ts b/.vitepress/config.theme.ts
@@ -0,0 +1,84 @@
+import type { ThemeConfig } from "./theme/types/theme-config";
+import { tokenize } from "./theme/search";
+import emailSVGString from "./theme/svgs/email";
+
+export default {
+  outline: "deep",
+  docFooter: {
+    prev: "Previous",
+    next: "Next",
+  },
+  editLink: {
+    pattern: "https://github.com/Octobug/blog/edit/main/:path",
+  },
+  footer: {
+    message: 'All published under the <a href="https://github.com/Octobug/blog/blob/main/LICENSE">CC-BY-SA-4.0</a> license.',
+    copyright: `Copyright © 2019-${new Date().getFullYear()} <a href="https://github.com/Octobug">Octobug</a>`,
+  },
+  lastUpdated: {
+    formatOptions: {
+      dateStyle: "medium",
+      timeStyle: "short",
+    },
+  },
+  nav: [
+    {
+      text: "POSTS",
+      link: "/pages/posts",
+    },
+    // {
+    //   text: "VISIONS",
+    //   link: "/pages/visions",
+    // },
+    {
+      text: "TAGS",
+      link: "/pages/tags",
+    },
+    {
+      text: "SORTS",
+      link: "/pages/sorts",
+    },
+    {
+      text: "REPO",
+      link: "https://github.com/Octobug/blog",
+    },
+  ],
+  search: {
+    provider: "local",
+    options: {
+      detailedView: true,
+      miniSearch: {
+        // https://lucaong.github.io/minisearch/modules/MiniSearch.html
+        options: {
+          tokenize
+        },
+        searchOptions: {
+          fuzzy: 0.1,
+          prefix: true,
+          boost: {
+            title: 4,
+            text: 2,
+          },
+          combineWith: "AND"
+        }
+      },
+    },
+  },
+  socialLinks: [
+    { icon: "github", link: "https://github.com/Octobug" },
+    {
+      icon: {
+        svg: emailSVGString,
+      },
+      link: "mailto:[email protected]",
+    },
+  ],
+  // Extended configs
+  avatar: "/avatar.png",
+  nickname: "Octobug",
+  bio: "Thoughts on everything.",
+  location: "Shenzhen, China",
+  timezone: "Asia/Shanghai",
+  pageSize: 13,
+  mdfilePatterns: ["posts/*.md"]
+} satisfies ThemeConfig;
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -1,9 +1,6 @@
 import { defineConfigWithTheme } from "vitepress";
-import { getPostList } from "./theme/loader";
-import { tokenize } from "./theme/search";
-import type { ThemeConfig } from "./theme/theme-config";
-
-const year = new Date().getFullYear();
+import type { ThemeConfig } from "./theme/types/theme-config";
+import themeConfig from "./config.theme";
 
 export default defineConfigWithTheme<ThemeConfig>({
   title: "WhaleVocal",
@@ -31,86 +28,5 @@ export default defineConfigWithTheme<ThemeConfig>({
     "./.github/",
     "./README.md",
   ],
-  themeConfig: {
-    outline: "deep",
-    docFooter: {
-      prev: "Previous",
-      next: "Next",
-    },
-    editLink: {
-      pattern: "https://github.com/Octobug/blog/edit/main/:path",
-    },
-    footer: {
-      message: 'All published under the <a href="https://github.com/Octobug/blog/blob/main/LICENSE">CC-BY-SA-4.0</a> license.',
-      copyright: `Copyright © 2019-${year} <a href="https://github.com/Octobug">Octobug</a>`,
-    },
-    lastUpdated: {
-      formatOptions: {
-        dateStyle: "medium",
-        timeStyle: "short",
-      },
-    },
-    nav: [
-      {
-        text: "POSTS",
-        link: "/pages/posts",
-      },
-      // {
-      //   text: "VISIONS",
-      //   link: "/pages/visions",
-      // },
-      {
-        text: "SORTS",
-        link: "/pages/sorts",
-      },
-      {
-        text: "TAGS",
-        link: "/pages/tags",
-      },
-      {
-        text: "REPO",
-        link: "https://github.com/Octobug/blog",
-      },
-    ],
-    search: {
-      provider: "local",
-      options: {
-        detailedView: true,
-        miniSearch: {
-          // https://lucaong.github.io/minisearch/modules/MiniSearch.html
-          options: {
-            tokenize
-          },
-          searchOptions: {
-            fuzzy: 0.1,
-            prefix: true,
-            boost: {
-              title: 4,
-              text: 2,
-            },
-            combineWith: "AND"
-          }
-        },
-      },
-    },
-    socialLinks: [
-      { icon: "github", link: "https://github.com/Octobug" },
-      {
-        icon: {
-          svg: '<svg t="1698576475852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6940" width="240" height="240"><path d="M768 554.666667a42.666667 42.666667 0 0 1-42.666667-42.666667 213.333333 213.333333 0 1 0-28.586666 106.666667A126.08 126.08 0 0 0 768 640a128 128 0 0 0 128-128 384 384 0 1 0-112.426667 271.573333l-60.586666-60.586666A298.666667 298.666667 0 1 1 810.666667 512a42.666667 42.666667 0 0 1-42.666667 42.666667z m-256 85.333333a128 128 0 1 1 128-128 128 128 0 0 1-128 128z" p-id="6941"></path></svg>',
-        },
-        link: "mailto:[email protected]",
-      },
-    ],
-    // Extended configs
-    avatar: "/avatar.png",
-    nickname: "Octobug",
-    bio: "Thoughts on everything.",
-    location: "Shenzhen, China",
-    timezone: "Asia/Shanghai",
-    pageSize: 10,
-    postList: await getPostList([
-      "./posts",
-    ]),
-  },
+  themeConfig
 });
diff --git a/.vitepress/theme/components/Avatar.vue b/.vitepress/theme/components/Avatar.vue
@@ -22,13 +22,13 @@ const { theme } = useData();
 
 .avatar {
   border-radius: 50%;
-  border: 2px solid var(--vp-avatar-border);
-  height: var(--vp-avatar-medium);
+  border: 2px solid var(--ct-avatar-border);
+  height: var(--ct-avatar-medium);
 }
 
 @media (max-width: 768px) {
   .avatar {
-    height: var(--vp-avatar-small);
+    height: var(--ct-avatar-small);
   }
 }
 </style>
diff --git a/.vitepress/theme/components/HomeFeed.vue b/.vitepress/theme/components/HomeFeed.vue
@@ -0,0 +1,136 @@
+<template>
+  <div :class="$style.postList">
+    <div
+      v-for="post in postList"
+      :key="post.src"
+      :class="$style.postItem"
+    >
+      <a :href="post.url">
+        <span :class="$style.title">{{ post.frontmatter.title }}</span>
+      </a>
+      <span :class="$style.date">
+        {{ moment(post.frontmatter.datetime).format('ll') }}
+      </span>
+    </div>
+  </div>
+
+  <div :class="$style.pagination">
+    <button
+      v-if="page.cursor.value > 1"
+      :class="$style.previous"
+      @click="turnTo(page.cursor.value - 1)"
+    >
+      PREV
+    </button>
+    <div
+      v-if="page.total > 1"
+      :class="$style.pageNumber"
+    >
+      {{ `${page.cursor.value}/${page.total}` }}
+    </div>
+    <button
+      v-if="page.cursor.value < page.total"
+      :class="$style.next"
+      @click="turnTo(page.cursor.value + 1)"
+    >
+      NEXT
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ContentData } from "vitepress";
+import moment from "moment-timezone";
+import { useData } from "vitepress";
+import { ref } from "vue";
+import { data as allPosts } from "../posts.data";
+
+const { theme } = useData();
+const allPostsLength = allPosts.length;
+const page = {
+  size: theme.value.pageSize,
+  total: Math.ceil(allPostsLength / theme.value.pageSize),
+  cursor: ref(1)
+};
+
+const postList = ref<ContentData[]>([]);
+postList.value = allPosts.slice(0, page.size);
+
+function turnTo(n: number) {
+  page.cursor.value = n;
+  const start = (n - 1) * page.size;
+  postList.value = allPosts.slice(start, start + page.size);
+}
+</script>
+
+<style module scope>
+.postList {
+  margin-bottom: 2rem;
+}
+
+.postItem {
+  margin: var(--ct-post-list-gap);
+  padding-bottom: 1px;
+  border-bottom: 1px dashed var(--vp-c-default-3);
+}
+
+.title {
+  display: block;
+  color: var(--vp-c-neutral);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title:hover {
+  font-weight: bold;
+  font-style: italic;
+}
+
+.date {
+  float: right;
+  position: relative;
+  bottom: 1.6em;
+  font-size: 0.8em;
+  color: var(--vp-c-text-3);
+}
+
+.pagination {
+  padding-top: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-style: italic;
+}
+
+.pageNumber {
+  color: var(--vp-c-text-2);
+  font-size: 0.9em;
+}
+
+button {
+  position: relative;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: 500;
+  font-weight: bold;
+  font-style: italic;
+}
+
+button:hover {
+  border-bottom: 3px solid var(--vp-c-text-1);
+}
+
+.previous {
+  position: absolute;
+  left: 0;
+}
+
+.next {
+  position: absolute;
+  right: 0;
+}
+</style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -3,8 +3,8 @@ import Theme from "vitepress/theme";
 import "./style.css";
 // import Archives from "./components/Archives.vue";
 // import Tags from "./components/Tags.vue";
-import Layout from "./Layout.vue";
 import Home from "./pages/Home.vue";
+import Layout from "./pages/Layout.vue";
 
 export default {
   extends: Theme,

diff --git a/.vitepress/theme/loader.ts b/.vitepress/theme/loader.ts