feat: home page - profile

.eslintrc.json

@@ -13,7 +13,8 @@
     ],
     "parserOptions": {
         "ecmaVersion": "latest",
-        "sourceType": "module"
+        "sourceType": "module",
+        "parser": "@typescript-eslint/parser"
     },
     "plugins": [
         "vue",

.vitepress/config.ts

@@ -1,6 +1,10 @@
-import { defineConfig } from "vitepress";
+import { defineConfigWithTheme } from "vitepress";
+import type { ThemeConfig } from "./theme-config";
+import { getPostList } from "./theme/loader";
 
-export default defineConfig({
+const year = new Date().getFullYear();
+
+export default defineConfigWithTheme<ThemeConfig>({
   title: "WhaleVocal",
   description: "Octobug's blog.",
   cleanUrls: true,
@@ -11,7 +15,7 @@ export default defineConfig({
       {
         rel: "icon",
         type: "image/png",
-        href: "/favicon.png",
+        href: "/avatar.png",
       },
     ],
     [
@@ -27,12 +31,16 @@ export default defineConfig({
   ],
   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: '© 2019-present <a href="https://github.com/Octobug">Octobug</a>',
+      copyright: `Copyright © 2019-${year} <a href="https://github.com/Octobug">Octobug</a>`,
     },
     lastUpdated: {
       formatOptions: {
@@ -45,10 +53,18 @@ export default defineConfig({
         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",
@@ -66,5 +82,15 @@ export default defineConfig({
         link: "mailto:[email protected]",
       },
     ],
+    // Extended configs
+    avatar: "/avatar.png",
+    nickname: "Octobug",
+    bio: "Thoughts on everything.",
+    location: "Shenzhen, China",
+    timezone: "Aisa/Shanghai",
+    pageSize: 10,
+    postList: await getPostList([
+      "./posts",
+    ]),
   },
 });

.vitepress/theme-config.d.ts

@@ -0,0 +1,12 @@
+import { DefaultTheme } from "vitepress";
+import type { Post } from "./theme/post";
+
+export interface ThemeConfig extends DefaultTheme.Config {
+  avatar: string,
+  nickname: string,
+  bio: string,
+  location: string,
+  timezone: string,
+  pageSize: number,
+  postList: Array<Post>,
+}

.vitepress/theme/Layout.vue

@@ -0,0 +1,18 @@
+<template>
+  <Layout>
+    <template #doc-before>
+      <!-- <Category /> -->
+    </template>
+    <template #doc-after>
+      <!-- <Comments /> -->
+    </template>
+  </Layout>
+</template>
+
+<script lang="ts" setup>
+import DefaultTheme from "vitepress/theme";
+const { Layout } = DefaultTheme;
+</script>
+
+<style scoped>
+</style>

.vitepress/theme/components/Avatar.vue

@@ -0,0 +1,28 @@
+<template>
+  <div :class="$style.frame">
+    <img
+      :src="theme.avatar"
+      :class="$style.avatar"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useData } from "vitepress";
+const { theme } = useData();
+</script>
+
+<style module>
+.frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 0;
+}
+
+.avatar {
+  border-radius: 50%;
+  border: 2px solid var(--vp-avatar-border);
+  height: var(--vp-avatar-medium);
+}
+</style>

.vitepress/theme/components/Profile.vue

@@ -0,0 +1,51 @@
+<template>
+  <Avatar />
+  <div :class="$style.profile">
+    <h1 :class="$style.title">
+      <span>{{ nickname }}</span>
+    </h1>
+    <p :class="$style.bio">
+      <span :class="$style.dot">•</span>
+      <span>{{ bio }}</span>
+    </p>
+    <ProfileExtra />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useData } from "vitepress";
+const { theme } = useData();
+const { nickname, bio } = theme.value;
+import Avatar from "./Avatar.vue";
+import ProfileExtra from "./ProfileExtra.vue";
+</script>
+
+<style module>
+.profile {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 0 15px;
+  text-align: center;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 2em;
+    font-weight: 500;
+  }
+
+  .bio {
+    margin: 1em 0;
+    color: var(--vp-c-neutral);
+    white-space: nowrap;
+
+    .dot {
+      color: var(--vp-c-text-3);
+      font-size: x-small;
+      margin: 0 6px;
+      vertical-align: bottom;
+    }
+  }
+}
+</style>

.vitepress/theme/components/ProfileExtra.vue

@@ -0,0 +1,51 @@
+<template>
+  <ul :class="$style.extra">
+    <li :class="$style.item">
+      <svg viewBox="0 0 16 16">
+        <path
+          d="m12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192-9.193 6.5 6.5 0 0 1 0 9.193Zm-1.06-8.132v-.001a5 5 0 1 0-7.072 7.072L8 14.07l3.536-3.534a5 5 0 0 0 0-7.072ZM8 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 9Z"
+          fill="var(--vp-c-text-2)"
+        />
+      </svg>
+      <span>{{ location }}</span>
+    </li>
+    <li :class="$style.item">
+      <svg viewBox="0 0 16 16">
+        <path
+          d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"
+          fill="var(--vp-c-text-2)"
+        />
+      </svg>
+      <span>
+        {{ `${nowWithTZ.format("HH:mm")} (${nowWithTZ.format("Z")})` }}
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment-timezone";
+import { useData } from "vitepress";
+const { theme } = useData();
+const { location, timezone } = theme.value;
+const nowWithTZ = moment().tz(timezone);
+</script>
+
+<style module>
+.extra {
+  padding-left: 20px;
+  text-align: left;
+  color: var(--vp-c-text-2);
+
+  .item {
+    font-size: 13px;
+  }
+
+  .item svg {
+    float: left;
+    width: 12px;
+    margin-top: 5px;
+    margin-left: -20px;
+  }
+}
+</style>

.vitepress/theme/index.ts

@@ -1,17 +1,15 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from "vue";
 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";
 
 export default {
   extends: Theme,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  Layout() {
-    return h(Theme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    });
-  },
-  enhanceApp({ app, router, siteData }) {
-    // ...
+  Layout,
+  enhanceApp({ app }) {
+    app.component("Home", Home);
   },
 };

.vitepress/theme/loader.ts

@@ -0,0 +1,27 @@
+import fs from "fs/promises";
+import globby from "globby";
+import matter from "gray-matter";
+import moment from "moment-timezone";
+import type { Post } from "./post";
+
+export async function getPostList(postDirs: readonly string[]) {
+  const mdList = await globby(postDirs);
+  const postList = await Promise.all(
+    mdList.map(async (item) => {
+      const content = (await fs.readFile(item)).toString();
+      const { data } = matter(content);
+      data.datetime = moment(new Date(data.date));
+      data.date = data.datetime.format("YYYY-MM-DD");
+      return {
+        frontMatter: data,
+        regularPath: `/${item.replace(".md", "")}`,
+      };
+    })
+  );
+  postList.sort(_compareDate);
+  return postList;
+}
+
+function _compareDate(a: Post, b: Post) {
+  return b.frontMatter.datetime - a.frontMatter.datetime;
+}

.vitepress/theme/pages/Home.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="$style.column">
+    <div :class="$style.sidebar">
+      <Profile />
+    </div>
+    <div :class="$style.homefeed">
+      <!-- <HomeFeed /> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Profile from "../components/Profile.vue";
+// import HomeFeed from "../components/HomeFeed.vue";
+</script>
+
+<style module>
+.column {
+  justify-content: center;
+}
+
+.sidebar {
+  padding: 2rem 4rem;
+}
+
+.homefeed {
+  padding: 0 4rem;
+}
+
+@media (min-width: 960px) {
+  .column {
+    padding: 0rem 4rem;
+    display: flex;
+  }
+
+  .sidebar {
+    padding: 3rem 1rem 3rem 3rem;
+  }
+
+  .homefeed {
+    min-width: 40rem;
+    padding: 3rem 3rem 3rem 1rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .column {
+    padding: 0rem 8rem;
+    display: flex;
+  }
+
+  .sidebar {
+    padding: 4rem 2rem 4rem 4rem;
+  }
+
+  .homefeed {
+    min-width: 60rem;
+    padding: 4rem 4rem 4rem 2rem;
+  }
+}
+</style>

.vitepress/theme/post.d.ts

@@ -0,0 +1,4 @@
+export interface Post {
+  regularPath: string;
+  frontMatter: { [key: string]: any };
+}

.vitepress/theme/style.css

@@ -134,10 +134,22 @@
 }
 
 /* 
- * Customization
- */
-.title {
+ * Custom CSS
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-avatar-border: #ffffff;
+  --vp-avatar-large: 10rem;
+  --vp-avatar-medium: 8rem;
+  --vp-avatar-small: 6rem;
+}
+
+header a.title {
   font-family: Georgia, sans-serif;
   font-size: 1.3rem !important;
   font-weight: 100 !important;
 }
+
+footer a {
+  color: var(--vp-c-neutral);
+}